阿里云服务器

wordpress网站中实现文章页翻页效果的实现方法。

wordpress默认都是上下篇文章显示在文章的地方,如果不喜欢这种翻页效果可以使用 wordpress图书式翻页效果,在文章内容页增加左右翻页的按钮。

wordpress翻页

第一步修改主题文件中single.php

在页面中加入下面代码,然后通过css显示在内容页的两侧实现翻页功能。

<nav class="nav-single-c">
    <nav class="navigation post-navigation" role="navigation">
        <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 fa-3x" title="上一篇文章"></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 fa-3x" title="下一篇文章"></i></span> ',true,'') ?>
            </div>
        </div>
    </nav>
</nav>

第二步添加css样式

可以直接在style.css里面添加代码,或者新增一个css样式引用过来

/** 文章页左右翻页按钮 **/
 .nav-single-c a {
 font-size: 66px;
 color: #b6b6b6;
 text-align: center
 }
 .nav-single-c a:hover {
 color: #555
 }
 .meta-nav-l {
 position: fixed;
 right: 2.5%;
 top: 40%;
 width: 36px
 }
 .meta-nav-r {
 position: fixed;
 left: 0%;
 top: 40%;
 width: 36px;
 }
 @media screen and (max-width:1200px) {
 .nav-single-c a {
 display: none
 }
 }
 .fa-angle-right{ color: rgba(200, 200, 200, 0.8); }
 .fa-angle-left{ color: rgba(200, 200, 200, 0.8); }

具体样式可以根据自己主题的情况进行微调,

另外这里左右的方向图标我使用的是 Font Awesome 图标字体,如果不支持的话,可以直接修改,使用图片替换。


相关阅读:
  • 去除wordpress自动缩略图裁剪功能的方法
  • wordpress搬家出现 is_dir(): open_basedir restriction in effect. 错误的解决方法
  • wordpress不同用户级别登入跳转不同页面的设置方法
  • wordpress网站调用置顶文章的方法
  • wordpress设置隐藏内容指定用户级别可见
  • wordpress文章按浏览量排序的方法
  • 让wordpress页面具备标签和分类功能的方法
  • wordpress注册填写页面功能添加插件ludou-custom-register
  • wordpress网站通过页面ID获取标题和链接的方法
  • wordpress别名自动转换成英文和拼音功能