让loper主题菜单导航栏固定在顶部

让loper主题菜单导航栏固定在顶部，如果文章字数，评论多，页面就会很长，分页的话浏览体验又不太好，不如一口气阅读到底爽快。为了读者浏览方便，把页面菜单导航栏固定在顶部起来是个不错的选择。

虽然固定导航栏可以用JS脚本代码，不过会加重网页负担，而且麻烦。

实际上固定菜单导航栏可以通过CSS中position:fixed属性实现。position:fixed是相对浏览器窗口定位元素，这样我们就可以让wordpress的菜单导航栏固定在浏览器窗口顶部的位置。

首先给整个顶部导航栏定义一个div,如<div id="topbox">。然后在CSS里添加以下代码：

#topbox {
height: 36px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1111;
background-color: #4175af;
opacity: .95;
}

说明:
1.#topbox对应的是id，如果定义的是class就是.topbox。
2.width:100%是自适应宽度，根据需要可以自己改为px。
3.top、left是相对于浏览器窗口的位置，固定在顶部这里top就是0，也可以自己根据需要修改。
4.z-index是堆叠顺序，跟photoshop中的图层差不多的概念，如果发现固定的导航栏被遮挡，就把数值设大点。

以上是从网上收集的资料，王桂明根据loper主题菜单导航栏的特点，特修改了CSS如下：

注：本次修改得到了拽立网博主的支持，并帮助完善和优化代码，在这里表示感谢。

第一步：打开头部header.php,增加3个id,为了方便我直接替换代码：

1、替换管理员登录后台后的代码，前台控制面板的代码固定到顶部，如图：

让loper主题菜单导航栏固定在顶部

把如下代码:

<div class="container">
<p class="left">
<a href="<?php bloginfo('url'); ?>/wp-admin/">控制面板</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/edit.php">文章</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/edit.php?post_type=page">页面</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/edit-comments.php">评论</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/upload.php">媒体库</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=setting.php">主题设置</a>
</p>
<p class="right"><?php wp_loginout() ?></p>
</div

替换为：

<div id="top2">
<div class="container">
<p class="left">
<a href="<?php bloginfo('url'); ?>/wp-admin/">控制面板</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/edit.php">文章</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/edit.php?post_type=page">页面</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/edit-comments.php">评论</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/upload.php">媒体库</a>
<a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=setting.php">主题设置</a>
</p>
<p class="right"><?php wp_loginout() ?></p>
</div></div>

2、固定未登录状态下，前台顶端的欢迎语及微博链接固定到顶端，如图：

让loper主题菜单导航栏固定在顶部

把如下代码:

<div class="container">
<p class="noticebar">
 
<?php echo($options['notice_content']); ?>
</p>
<p class="snsright">
 
<?php if($options['feedsnscheck']) : ?>
<?php if($options['feedrss'] && $options['feedrss_content']) : ?>
<a href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a>
<?php else : ?>
<a href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a>
<?php endif; ?>
<?php else : ?>
<?php endif; ?>
 
<?php if($options['qqcheck'] && $options['qq_sns']) : ?>
<a href="<?php echo($options['qq_sns']); ?>" title="腾讯微博" class="qqsns" rel="nofollow">腾讯微博</a>
<?php else : ?>
<?php endif; ?>
 
<?php if($options['sinacheck'] && $options['sina_sns']) : ?>
<a href="<?php echo($options['sina_sns']); ?>" title="新浪微博" class="sinasns" rel="nofollow">新浪微博</a>
<?php else : ?>
<?php endif; ?>
 
<?php if($options['twittercheck'] && $options['twitter_sns']) : ?>
<a href="<?php echo($options['twitter_sns']); ?>" title="twitter" class="twittersns" rel="nofollow">twitter</a>
<?php else : ?>
<?php endif; ?>
 
<span class="right">
<?php
if (!$user_ID) {
if($_COOKIE["comment_author_" . COOKIEHASH]!=""){
echo "呦！ ".$_COOKIE["comment_author_" . COOKIEHASH].", 又来啦，随便看看吧。　";
} else {
echo "你好，欢迎光临！　"; }
} else {
echo ""; } ?>
</span>
 
</p>
</div>

替换为：

<div id="top">
<div class="container">
<p class="noticebar">
 
<?php echo($options['notice_content']); ?>
</p>
<p class="snsright">
 
<?php if($options['feedsnscheck']) : ?>
<?php if($options['feedrss'] && $options['feedrss_content']) : ?>
<a href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a>
<?php else : ?>
<a href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a>
<?php endif; ?>
<?php else : ?>
<?php endif; ?>
 
<?php if($options['qqcheck'] && $options['qq_sns']) : ?>
<a href="<?php echo($options['qq_sns']); ?>" title="腾讯微博" class="qqsns" rel="nofollow">腾讯微博</a>
<?php else : ?>
<?php endif; ?>
 
<?php if($options['sinacheck'] && $options['sina_sns']) : ?>
<a href="<?php echo($options['sina_sns']); ?>" title="新浪微博" class="sinasns" rel="nofollow">新浪微博</a>
<?php else : ?>
<?php endif; ?>
 
<?php if($options['twittercheck'] && $options['twitter_sns']) : ?>
<a href="<?php echo($options['twitter_sns']); ?>" title="twitter" class="twittersns" rel="nofollow">twitter</a>
<?php else : ?>
<?php endif; ?>
 
<span class="right">
<?php
if (!$user_ID) {
if($_COOKIE["comment_author_" . COOKIEHASH]!=""){
echo "呦！ ".$_COOKIE["comment_author_" . COOKIEHASH].", 又来啦，随便看看吧。　";
} else {
echo "你好，欢迎光临！　"; }
} else {
echo ""; } ?>
</span>
 
</p>
</div></div>

3、最后是把菜单导航栏固定在顶部，如图所示：

让loper主题菜单导航栏固定在顶部

把下面代码;

<div class="container">
<div class="hgroup">
<?php if($options['imageLogo']) : ?>
 
<?php if( is_front_page() || is_home() ) { ?>
<h1 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1>
<a class="logo" href="<?php bloginfo('url'); ?>/"></a>
<?php } else { ?>
<h2 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2>
<a class="logo" href="<?php bloginfo('url'); ?>/"></a>
<?php } ?>
 
<?php else : ?>
<?php if( is_front_page() || is_home() ) { ?>
<h1><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h2><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2>
<?php } ?>
<?php endif; ?>
</div>
<div class="searchbarswitch"></div>
<div class="searchbar"><div class="searchfade"><?php get_search_form(); ?></div></div>
 
<div class="clear"></div>
<nav class="primary">
<?php if($options['feedrss'] && $options['feedrss_content']) : ?>
<a class="feedrss" href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a>
<?php else : ?>
<a class="feedrss" href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a>
<?php endif; ?>
<?php wp_nav_menu( array('menu' => 'Header Menu','container'=>'')); ?>
</nav><!--soeprimary-->
 
<div class="clear"></div>
 
<div class="feedtips"></div>
</div>

替换为：

<div id="topbox">
<div class="container">
<div class="hgroup">
<?php if($options['imageLogo']) : ?>
 
<?php if( is_front_page() || is_home() ) { ?>
<h1 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1>
<a class="logo" href="<?php bloginfo('url'); ?>/"></a>
<?php } else { ?>
<h2 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2>
<a class="logo" href="<?php bloginfo('url'); ?>/"></a>
<?php } ?>
 
<?php else : ?>
<?php if( is_front_page() || is_home() ) { ?>
<h1><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h2><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2>
<?php } ?>
<?php endif; ?>
</div>
<div class="searchbarswitch"></div>
<div class="searchbar"><div class="searchfade"><?php get_search_form(); ?></div></div>
 
<div class="clear"></div>
<nav class="primary">
<?php if($options['feedrss'] && $options['feedrss_content']) : ?>
<a class="feedrss" href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a>
<?php else : ?>
<a class="feedrss" href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a>
<?php endif; ?>
<?php wp_nav_menu( array('menu' => 'Header Menu','container'=>'')); ?>
</nav><!--soeprimary-->
 
<div class="clear"></div>
 
<div class="feedtips"></div>
</div><!-- contasoeiner-->
</div>

第二步：打开样式表style.css，增加CSS样式：

/*loper主题菜单导航栏固定在顶部*/
#top {
position: fixed;
width: 100%;
z-index: 11111;
background-color: #ECECEC;
border-bottom:dashed 1px #DBDBDB;
}
 
#top2 {
position: fixed;
width: 100%;
z-index: 11111;
background-color: #ECECEC;
border-bottom:dashed 1px #DBDBDB;
}
 
#topbox {
position: fixed;
z-index: 1111;
background-image:url(images/headerbg.jpg);
}

第三步，完善代码

全部替换好后发现背景色有点差异，为了更完美，我们把样式表style.css的代码：

#main { background-image:url(images/bg.jpg) ;background-color:#F0F0F0; background-repeat:repeat-x;-webkit-text-size-adjust:none;width: 100%;}

替换为：

#main { background-color:#ECECEC; background-repeat:repeat-x;-webkit-text-size-adjust:none;width: 100%;}

为此全部修改完成，看看本博的效果吧！

» 本文链接： http://www.0523jz.com/1168.html

» 订阅本站： http://www.0523jz.com/feed

» 转载请注明来源：王桂明's Blog » 《让loper主题菜单导航栏固定在顶部》

Tags: Loper主题, loper主题菜单导航栏相关文章分享

现在只有1个回复

Comment (1)

Trackbacks (0)

拽立网　( 2015.09.13 21:58 ) : #-5

学习了！原来这样呀
Reply

还没有Trackbacks

王桂明’s Blog | 杰创官方博客

ID : 王桂明’s Blog

杰创官方微信公众号：jcbxg88

分类目录 · Categories

最新文章 · Recent Posts

随机文章 · Random Posts

最新评论 · Recent Comments

友情链接 · Links