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主题菜单导航栏固定在顶部

让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主题菜单导航栏固定在顶部

让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主题菜单导航栏固定在顶部

让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/feed
现在只有1个回复
Comment (1)
Trackbacks (0)
  1. 拽立网  ( 2015.09.13 21:58 ) : #-5

    :roll: :roll: 学习了!原来这样呀 :roll:

    Reply
  1. 还没有Trackbacks