WordPress文章页优质翻页样式-左右两侧上下篇翻页箭头按钮

2016-01-23    分类:WordPress   1人评论 3,692人浏览

我不记得WordPress文章页左右两侧的上下文翻页箭头是从什么时候开始流行,不过我是从卢松松博客那里看到这个功能,原先我也一直都懒得折腾,直到无意中看到知更鸟博客的文章页也添加了这个上下文翻页功能,所以今天也顺便折腾一下,还是挺简单的。

我不记得WordPress文章页左右两侧的上下文翻页箭头是从什么时候开始流行,不过我是从卢松松博客那里看到这个功能,原先我也一直都懒得折腾,直到无意中看到知更鸟博客的文章页也添加了这个上下文翻页功能,所以今天也顺便折腾一下,还是挺简单的。

百度过相关内容,但是原先很多博客分享的技术都涉及到JS技术,今天研究了一番,其实实现这个WordPress文章页左右两侧的上下文翻页功能,根本就不需要用到JS技术,只需要用到几行代码和相应的CSS样式即可。

具体实现步骤如下(以Unite主题为例说明):

1、打开Unite主题文件夹的single.php文件,找到以下代码(也可能是类似的自带翻页代码):

<nav class=”nav-single”>
<?php previous_post_link(‘<strong>上一篇:</strong> %link’,’%title’,true,”) ?>
<?php next_post_link(‘<br/><strong>下一篇:</strong> %link’,’%title’,true,”) ?>
<div class=”clear”></div>
</nav>

在上述代码下方添加以下代码:

<nav class=”nav-single-c”>
<nav class=”navigation post-navigation” role=”navigation”>
<h2 class=”screen-reader-text”>文章导航</h2>
<div class=”nav-links”>
<div class=”nav-previous”>
<?php previous_post_link(‘%link’,’<span class=”meta-nav-r” aria-hidden=”true”><</span>’,true,”) ?>
</div>
<div class=”nav-next”>
<?php next_post_link(‘%link’,’<span class=”meta-nav-l” aria-hidden=”true”>></span> ‘,true,”) ?>
</div>
</div>
</nav>
</nav>

 

2、在Unite主题文件夹的style.css文件后面添加以下代码:

/** 文章页左右翻页按钮 **/
.nav-single-c a {
font-size: 50px;
color: #b6b6b6;
text-align: center
}
.nav-single-c a:hover {
color: #555
}
.meta-nav-l {
position: fixed;
right: 0;
top: 45%;
width: 50px
}
.meta-nav-r {
position: fixed;
left: 0;
top: 45%;
width: 50px
}
@media screen and (max-width:1300px) {
.nav-single-c a {
display: none
}
}

至此,已经成功实现WordPress文章页左右两侧添加上下文翻页的功能。这个是比较简陋的,因为那个左右箭头是用英文状态的小于和大于号来代替的。如果我们使用了Font Awesome 4 Menus插件为导航菜单添加过个性化图标,那么我们就可以用个性化图标来代替那个小于号和大于号。只需要把第一步的代码改为以下代码即可:

<nav class=”nav-single-c”>
<nav class=”navigation post-navigation” role=”navigation”>
<h2 class=”screen-reader-text”>文章导航</h2>
<div class=”nav-links”>
<div class=”nav-previous”>
<?php previous_post_link(‘%link’,’<span class=”meta-nav-r” aria-hidden=”true”><i class=”fa fa-angle-left”></i></span>’,true,”) ?>
</div>
<div class=”nav-next”>
<?php next_post_link(‘%link’,’<span class=”meta-nav-l” aria-hidden=”true”><i class=”fa fa-angle-right”></i></span> ‘,true,”) ?>
</div>
</div>
</nav>
</nav>

转载请注明:悦目网 - 新媒体营销交流互动平台 » WordPress文章页优质翻页样式-左右两侧上下篇翻页箭头按钮

本文作者:

1访客评论

  1. 过来瞅瞅!

    林风华02-22 09:17 回复

我来说说»

*

*

取消