In response to: WordPress admin bar overlapping twitter bootstrap navigationAsked by: @TheWebs
如果您正在使用Twitter Bootstrap 具有WordPress 如果WordPress管理栏与导航栏重叠，您可能会对其中一些答案感到非常沮丧。我到处寻找解决方案，最终决定降档到较低的档位，并找到一个完全符合我需要的解决方案。
因此，这里的答案不会隐藏WordPress管理栏，也不会将WordPress管理栏移到页面底部。这个答案将使WordPress管理栏保持在它所属的位置。。。在页面顶部。
请注意，这将需要几个简短的步骤来完成，但这是值得的。这并不是一个复杂或耗时的过程。我只是想确保关于如何做到这一点的解释清楚易懂。
步骤1添加get_body_class(); 到您的主题<body> 标记主题的正文标签有一个模板标签，这将帮助主题作者更有效地使用CSS进行样式设计。模板标记被调用body_class. 此函数为body元素提供了不同的类，通常可以在header.php\'s HTML正文标记。
- Open 您当前使用Twitter Bootstrapdirectory激活的WordPress主题。发现
header.php 打开它 - Find
<body>. - Replace with
<?php echo \'<body class="\'.join(\' \', get_body_class()).\'">\'.PHP_EOL; ?>
完成上述三个步骤后，您现在已经成功地使用WordPress主体类启用了WordPress主题。
步骤2（可选！）<body> 标记默认情况下，如果您使用body_class() 或get_body_class() 功能。
如果您查看WordPress网站上任何呈现的前端页面的源代码，您将注意到自动添加到HTML中的两个CSS类<body> 标签为“登录”和“管理栏”。
您还将注意到，这些CSS类名只添加到HTML中<body> 标记用户是否已登录，否则不会将其添加到HTML中<body> 标签
因此，如果您不想使用默认的WordPress CSS类名，您可以很容易地添加自己的类名。
- Open 您当前使用Twitter引导目录的活动WordPress主题。发现
functions.php 打开它 - Add
add_filter(\'body_class\', \'mbe_body_class\'); 到文件的顶部 - Add 下面的代码，位于文件的底部
The code:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = \'body-logged-in\';
} else{
$classes[] = \'body-logged-out\';
}
return $classes;
}
现在，如果您查看WordPress网站上任何呈现的前端页面的源代码，如果用户已登录，您将看到“body logged in”已添加到HTML中
<body> 标记，如果用户已注销，您将看到HTML中添加了“body logged out”
<body> 标签
第3步将CSS代码添加到主题中这是代码的一部分，它将更正主题以正确显示WordPress管理栏和Twitter引导导航，无论用户是登录还是注销您的网站。
- Open 您当前使用Twitter引导目录的活动WordPress主题。发现
functions.php 打开它 - Add
add_action(\'wp_head\', \'mbe_wp_head\'); 到文件的顶部 - Add 下面的代码，位于文件的底部
The code:
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;
}
EDIT TO CODE
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\\u wp\\u head功能包括一个mobile first media查询，以确保您的头被向下推到适当的距离。对于移动设备，WP管理栏的高度为48px。在783px断点之后，管理栏缩短到只有28px高
给你。如果用户已登录，您现在应该将WordPress管理栏放在页面的最上方，然后立即启动推特导航。如果用户已从WordPress网站注销，您的Twitter引导导航仍应适当显示在网站顶部。
