回应： WordPress管理栏重叠Twitter引导导航
询问： @TheWebs
如果您将Twitter Bootstrap与WordPress一起使用，并且WordPress管理栏与导航栏重叠存在问题，那么您可能会对其中的某些答案感到沮丧。在最终决定将档位调低至最低档并找出完全可以满足我需要的解决方案之前，我一直在寻找解决方案。
因此，这里提供的答案不会隐藏WordPress管理栏，也不会将WordPress管理栏移动到页面底部。此答案将使WordPress管理栏保持在其所属位置...在页面顶部。
请注意，这将需要一些短的步骤来完成，但这是值得的。这实际上不是一个复杂或耗时的过程。我只是想确保有关此操作的说明是清晰且易于理解/理解的。
第1步
主题具有用于body标记的模板标记，这将帮助主题作者更有效地使用CSS进行样式设置。模板标签称为
body_class。此函数为body元素提供了不同的类，通常可以在header.php的HTML body标签中添加它。
- 使用Twitter Bootstrap目录打开当前活动的WordPress主题。查找
header.php并打开它。
- 查找
<body>。
- 用。。。来代替
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
完成上述三个步骤后，您现在已成功使用WordPress主体类启用了WordPress主题。
第2步（可选！）
默认情况下，如果您使用body_class()或get_body_class()函数，则WordPress已经提供了HTML标记的默认类列表。
如果您在WordPress网站上查看任何呈现的前端页面的源代码，您会注意到自动添加到HTML <body>标记中的两个CSS类是“已登录”和“管理栏”。
您还将注意到，只有<body>在用户登录后，这些CSS类名称才会添加到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网站上查看任何呈现的前端页面的源代码，则如果用户已登录，则将看到“ body-logged-in”已添加到HTML <body>标记中，并且如果用户是注销后，您将看到“ body-logged-out”已添加到HTML <body>标记中。
第三步
这是代码部分，它将纠正您的主题以正确显示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管理栏高度为48px。在783px断点之后，管理栏会缩短到仅28px高。
你有它。如果用户已登录，那么您现在应该在页面的顶部具有WordPress管理栏，然后是Twitter Bootstrapped导航。如果用户从WordPress网站注销，则Twitter Bootstrap导航仍应适当显示在网站顶部。