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 引導導航