资源福利站
专业精品资源网

wordpress 仿卢松松博客全屏翻页 章页两侧添加分页导航箭头

wordpress 仿卢松松博客全屏翻页 文章页两侧添加分页导航箭头

分页导航 如果添加在文章页的两侧,很方便读者翻阅,小编发现好多站长的博客都添加了这一功能,百度了一下,以WordPress dux主题为例,经过测试成功,分享一下流程。

演示地址:点我查看

wordpress 仿卢松松博客全屏翻页

1、添加Js

在headr.php或者footer.php添加以下js,建议添加在footer.php模板的底部。

 <?php if ( is_single() ) { ?>   
	<script type="text/javascript" charset="utf-8">   
           $(function(){   
           $("#btn_page_prev,#btn_page_next").hover(function(){$(this).find("span").show();});   
          });   
        </script>   
<?php } ?>

2、在文章页single.php添加html
在文章页面底部合适的板块添加以下代码

 <span id="btn_page_prev"><?php previous_post_link( '%link', '<span id="fanye"> < </span>' ); ?></span>   
 <span id="btn_page_next"><?php next_post_link( '%link', '<span id="fanye"> > </span>' ); ?></span>

3、在style.css添加css代码

/*文章侧边翻页*/  
#fanye {font-size:30px;color:#ccc;line-height:24px;width:24px;}   
#btn_page_next{
		cursor:pointer;
		display:inline-block;
		min-height:24px;
		width:3%;
		position:fixed;
		_position:absolute;top:360px;
		_top:expression(eval(document.documentElement.scrollTop));
		right:0;		
		z-index:3;
		text-align:center;
}   
#fanye:hover{color:#666;}
#btn_page_next a:hover{text-decoration:none;display:inline-block;}   
#btn_page_prev{cursor:pointer;
		display:inline-block;
		min-height:24px;
		width:3%;
		position:fixed;
		_position:absolute;
		top:360px;
		_top:expression(eval(document.documentElement.scrollTop));
		left:0;	
		z-index:3;
		text-align:center;
}   
#btn_page_prev a:hover{text-decoration:none;display:inline-block;}

修改以上代码,需要有一定的html基础,不懂html审改,注意备份!至于字体的大小,颜色,距离顶部的位置,自己修改css就可以了。

箭头宽度修改#btn_page_next 和#btn_page_prev中的 width:3% 即可,根据自己的网页修改!


以上箭头效果用css实现,发现标识并不明显,小编现在提供第二种方法,利用font awesome 4 menus 实现箭头标志更炫酷,明显

修改第二步代码'<span id="fanye"> < </span>'  为 <i class="fa fa-angle-left"></i>  

 <span id="btn_page_prev"><?php previous_post_link( '%link', '<span id="fanye"><i class="fa fa-angle-left"></i> </span>' ); ?></span>
  <span id="btn_page_next"><?php next_post_link( '%link', '<span id="fanye"><i class="fa fa-angle-right"></i> </span>' ); ?></span>

具体修改方法详见:

 

赞(0)
未经允许不得转载:木木资源博 » wordpress 仿卢松松博客全屏翻页
分享到: 更多 (0)
##分享一个宝妈兼职项目,坚持半年,你也可以每月躺赚10000+##

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

木木资源博客 更快捷 更方便

discuz 模板下载ico图标制作