web-dev-qa-db-ja.com

Twitterのブートストラップナビゲーションに重なるWordPress管理バー

Twitterのブートストラップ（2.3.0）ナビゲーションバーと重なるWordPress管理バーに問題があります。私はこの修正を試みました：

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

しかし残念ながらそれはまだ問題を提起しています。どのような修正プログラムが利用可能ですか。

csshtmlnavigationtwitter-bootstrapadmin-bar
9
TheWebs

WordPress管理バーがTwitter Bootstrapナビゲーションバーと重ならないようにする方法。

に応答して： WordPress管理バーがTwitterブートストラップナビゲーションに重なっている

質問者： @TheWebs

Twitter Bootstrap と WordPress を使用していて、WordPress管理バーとナビゲーションバーが重なっているという問題がある場合は、おそらくこれらの答えのいくつかには不満があります。私はどこかで解決策を探し、最終的にはより低いギアにシフトダウンして、必要なことを正確に実行する解決策を見つけることにしました。

だからここにWordPressの管理バーを非表示にしない、またはあなたのページの一番下にWordPressの管理バーを移動しない答えです。この答えはWordPress管理バーをそれが属する場所に正しく保つでしょう...あなたのページの一番上に。

これを完了するためにいくつかの短い手順が必要になりますが、それだけの価値があります。それは本当に複雑で時間のかかるプロセスではありません。その方法についての説明が明確で理解しやすいものになるようにしたかったのです。

ステップ1

テーマはbodyタグのためのテンプレートタグを持ちます。これはテーマ作者がCSSでより効果的にスタイルを整えるのを助けます。テンプレートタグは body_class と呼ばれます。この関数はbody要素にさまざまなクラスを与え、通常はheader.phpのHTML bodyタグに追加できます。

  1. Open Twitter Bootstrapディレクトリを使用して現在アクティブなWordPressテーマ。 header.phpを見つけて開きます。
  2. 検索 <body>。
  3. <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>に置き換えます

上記の3つのステップを完了した後、これでWordPressテーマをWordPressボディクラスで有効にできました。

ステップ2（オプション）

  • カスタムの条件付きCSSクラスを<body>タグに追加します。

body_class()またはget_body_class()関数を使用している場合、デフォルトでは、WordPressはHTMLタグにデフォルトクラスのリストをすでに提供しています。

WordPress Webサイトでレンダリングされたフロントエンドページのソースコードを見ると、HTMLの<body>タグに自動的に追加される2つのCSSクラスが「ログイン」と「admin-bar」です。

また、ユーザーがログインしている場合はこれらのCSSクラス名がHTMLの<body>タグにのみ追加され、それ以外の場合はHTMLの<body>タグには追加されません。

あなたがデフォルトのWordPress CSSクラス名を使いたくないのであれば、あなたは非常に簡単にあなた自身を追加することができます。

  1. Open Twitter Bootstrapディレクトリを使用して現在アクティブなWordPressテーマ。 functions.phpを見つけて開きます。
  2. ファイルの先頭に add_filter('body_class', 'mbe_body_class');を追加します。
  3. ファイルの末尾に 次のコードを追加します。

コード： 

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

さて、あなたがあなたのWordPressウェブサイト上でレンダリングされたフロントエンドページのソースコードを見れば、ユーザーがログインしていれば、 "body-log-in"がHTMLの<body>タグに追加されているのを見るでしょう。がログアウトされると、HTMLの<body>タグに "body-logs-out"が追加されたことがわかります。

ステップ3

  • テーマにCSSコードを追加してください。

これは、ユーザーがWebサイトにログインしているかログアウトしているかに関係なく、WordPress管理バーとTwitter Bootstrapナビゲーションの両方を正しく表示するようにテーマを修正するコードのセクションです。

  1. Open Twitter Bootstrapディレクトリを使用して現在アクティブなWordPressテーマ。 functions.phpを見つけて開きます。
  2. ファイルの先頭に add_action('wp_head', 'mbe_wp_head');を追加します。
  3. ファイルの末尾に 次のコードを追加します。

コード： 

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

コードを編集 

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

このバージョンのmbe_wp_head関数には、ヘッダーが適切な長さまで押し下げられるように、モバイル優先のメディアクエリが含まれています。モバイルの場合、WP管理バーの高さは48ピクセルです。管理バーの長さはわずか28ピクセルに短縮されます。

そこにあります。ユーザーがログインしている場合は、ページの一番上にWordPress管理バーが表示され、すぐにTwitterブートストラップナビゲーションが表示されます。ユーザーがWordPress Webサイトからログアウトした場合でも、Twitter BootstrapナビゲーションはWebサイトの上部に表示されるはずです。

16
Michael Ecklund

私にはうまくいきませんでしたが、私はいい修正を見つけました。 header.phpの中でwordpress関数を使ってツールバーが表示されているかどうかを調べ、ナビゲーションバーのdivの下に空のdivを作成します。

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">
23
Filtah

あなたはこれを試すことができます：

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

それがあなたのために働くなら（それはそうするべきです！）、そしてあなたは下のコードをpluginsフォルダーかあなたのfunctions.phpファイルに貼り付けることによって一番下にwp adminバーを動かさなければならないでしょう：

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

代わりに このプラグインを使えます

ほとんどのテーマは私が必要としない偽のコードで私のスクリプトをロードするのでプラグインを使うのは好きではありません...上記の解決策1と2はうまくいきますが、うまくいかない場合は以下の解決策3を試すことができます。

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

それは28pxの問題なしで私のためにうまく働くようでした..

3
Tamara

これをbodyタグに追加するまではうまくいきませんでした。

<body <?php body_class(); ?>>

それからそれはうまくいきました！

1
timhc22

サイトメニューとWordPress管理者メニューが重ならないようにするためのブートストラップ 'navbar-fixed-top'を修正しました。

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }
0
user49936

パーフェクト！私が探していたものだけ、しかし、私はステップ3で少し違ったことをしました。

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

あなたは別の場所で追加することを述べました、しかし私はいつもこれのようにそれをしました、そして、それはちょうどうまくいくようです。修正をありがとう！

0
user51355