WordPress 管理欄重疊 twitter 引導導航

問題描述

我有一個問題與 WordPress 管理員重疊的 twitter 引導 (2.3.0) 導航欄。我試過這個修復：

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;
}

但是，這仍然是一個問題。我想知道有什麼修復可用？

最佳解決方案

How to prevent the WordPress admin bar from overlapping with your Twitter Bootstrap navigation bar.

響應：WordPress admin bar overlapping twitter bootstrap navigation

提問人：@TheWebs

如果您使用 Twitter Bootstrap 與 WordPress，並且與您的導航欄重疊的 WordPress 管理員的問題，您可能對這些答案很沮喪。我在尋找各地的解決方案，最終決定將 down-shift 降到更低的位置，並找出一個完全符合我需要做的解決方案。

所以這裏是一個不會隱藏 WordPress 管理欄的答案，或者將 WordPress 管理欄移到頁面的底部。這個答案將 WordPress 管理員欄保留在它所屬的位置… 在您的頁面頂部。

請注意，這將需要幾個簡單的步驟來完成，但它是值得的。這不是一個複雜或耗時的過程。我只是想確保如何做到這一點的解釋是清楚和容易遵循/理解。

步驟 1

將 get_body_class(); 添加到主題的<body> 標籤中。

Themes have a template tag for the body tag which will help theme authors to style more effectively with CSS. The Template Tag is called body_class. This function gives the body element different classes and can be added, typically, in the header.php‘s HTML body tag.

使用 Twitter Bootstrap 目錄打開您當前活躍的 WordPress 主題。找到 header.php 並打開它。
查找<body> 。
替換為<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

完成上述三個步驟後，您已經使用 WordPress 身體類成功啓用了 WordPress 主題。

步驟 2(可選！)

將自定義條件 CSS 類添加到<body> 標記。

默認情況下，如果您使用 body_class()或 get_body_class()功能，WordPress 已經提供了 HTML 標記的默認類列表。

如果您在 WordPress 網站上查看任何渲染的 front-end 頁面的源代碼，您將注意到自動添加到 HTML <body> 標籤的兩個 CSS 類別是”logged-in” 和”admin-bar” 。

您還將注意到，如果用户登錄，那麼這些 CSS 類名稱將僅添加到 HTML <body> 標籤中，否則不會添加到 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 網站上查看任何渲染的 front-end 頁面的源代碼，如果用户登錄，您將看到”body-logged-in” 已添加到 HTML <body> 標籤，如果用户註銷，您將看到”body-logged-out” 已添加到 HTML <body> 標記。

步驟 3

將 CSS 代碼添加到您的主題。

這是一段代碼，它將糾正您的主題，無論用户是登錄還是退出您的網站，都能正確顯示 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 功能包括 mobile-first 媒體查詢，以確保您的標題被按下適當的距離。對於手機，WP 管理員的高 48 像素。在 783px 斷點之後，管理員欄縮短到只有 28px 高。

你有它如果用户登錄，您現在應該將 WordPress 管理員欄放在頁面頂部，緊接着是您的 Twitter Bootstrapped 導航。如果用户從您的 WordPress 網站註銷，您的 Twitter Bootstrap 導航應該仍然在您的網站頂部正確顯示。

次佳解決方案

沒有為我工作，但我發現一個很好的修復。在 header.php 中，使用 wordpress 函數查詢工具欄是否顯示，然後在 navbar 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">

第三種解決方案

你可以試試這個：

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

如果這適用於你 (它應該！)，那麼你必須通過將下面的代碼粘貼到 plugins 文件夾或你的 functions.php 文件中來移動 wp 管理欄到底部：

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' );

作為替代，您可以使用 this plugin

我不喜歡使用插件，因為大多數主題加載我的腳本與偽造代碼我不需要… 解決方案 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 的問題，這似乎對我來説很好

參考文獻

WordPress admin bar overlapping twitter bootstrap navigation [closed]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 管理欄重疊 twitter 引導導航