への対応： WordPressアドミンバーのTwitterブートストラップナビゲーションの重複
質問者： @TheWebs
WordPressでTwitter Bootstrapを使用していて、WordPressの管理バーがナビゲーションバーと重なっている問題がある場合、おそらくこれらの回答のいくつかにかなり不満を感じています。私はどこにでも解決策を探しましたが、最終的にはより低いギアにシフトダウンして、自分が必要とすることを正確に実行する解決策を見つけることにしました。
したがって、WordPressの管理バーを非表示にしない、またはWordPressの管理バーをページの下部に移動しないという答えがあります。この回答は、WordPress管理バーを適切な場所に維持します...ページの上部。
これを完了するにはいくつかの短い手順が必要ですが、それだけの価値があることに注意してください。それは本当に複雑で時間のかかるプロセスではありません。その方法の説明が明確でわかりやすく、わかりやすいようにしたかっただけです。
ステップ1
テーマにはbodyタグのテンプレートタグがあり、テーマの作成者がCSSでより効果的にスタイルを設定するのに役立ちます。テンプレートタグはと呼ばれ
body_classます。この関数はbody要素に異なるクラスを提供し、通常、header.phpHTMLのbodyタグに追加できます。
- Twitter Bootstrapディレクトリを使用して、現在アクティブなWordPressテーマを開きます。それを見つけ
header.phpて開きます。
- 検索します
<body>。
- と置換する
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
上記の3つの手順を完了すると、WordPressのボディクラスでWordPressテーマを有効にすることができました。
ステップ2（オプション！）
<body>タグにカスタム条件付きCSSクラスを追加します。
body_class()またはget_body_class()関数を使用している場合、WordPressはデフォルトでHTMLタグにデフォルトクラスのリストを既に提供しています。
WordPress Webサイトでレンダリングされたフロントエンドページのソースコードを表示すると、HTML <body>タグに自動的に追加された2つのCSSクラスが「logged-in」と「admin-bar」であることがわかります。
また、これらのCSSクラス名は<body>、ユーザーがログインしている場合にのみHTML タグに追加され、そうでない場合はHTML <body>タグに追加されません。
したがって、デフォルトのWordPress CSSクラス名を使用したくない場合は、独自のクラス名を簡単に追加できます。
- Twitter Bootstrapディレクトリを使用して、現在アクティブなWordPressテーマを開きます。それを見つけ
functions.phpて開きます。
-
add_filter('body_class', 'mbe_body_class');ファイルの先頭に追加します。
- 次のコードをファイルの下部に追加します。
コード：
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
ここで、WordPress Webサイトでレンダリングされたフロントエンドページのソースコードを表示すると、ユーザーがログインしている場合、「body-logged-in」がHTML <body>タグに追加されていることがわかります。ログアウトすると、「body-logged-out」がHTML <body>タグに追加されていることがわかります。
ステップ3
これは、ユーザーがWebサイトにログインしているかログアウトしているかに関係なく、WordPress管理バーとTwitter Bootstrapナビゲーションの両方を正しく表示するようにテーマを修正するコードのセクションです。
- Twitter Bootstrapディレクトリを使用して、現在アクティブなWordPressテーマを開きます。それを見つけ
functions.phpて開きます。
-
add_action('wp_head', 'mbe_wp_head');ファイルの先頭に追加します。
- 次のコードをファイルの下部に追加します。
コード：
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ピクセルです。783pxのブレークポイントの後、管理バーは高さが28pxに短くなります。
そこにあります。ユーザーがログインしている場合は、ページの最上部にWordPress管理バーが表示され、すぐにTwitterブートストラップナビゲーションが表示されます。ユーザーがWordPress Webサイトからログアウトした場合でも、Twitter BootstrapナビゲーションはWebサイトの上部に適切に表示されます。