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