Hello,每天都是新的开始,开开心心才是最重要的!

wordpress仿卢松松博客全屏翻页的效果完整代码

wordpress 仿卢松松博客全屏翻页 文章页两侧添加分页导航箭头,我个人表示不太喜欢这种方式,翻页的按钮太大了,换做一个正常的用户也不会一直无聊到翻你网站的上下篇文章的。

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

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) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《wordpress仿卢松松博客全屏翻页的效果完整代码》
文章链接:https://www.qqooo.cn/1357.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
本站资源均来源于网络,若侵犯您的权益,请来信 feelym@88.com 删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏