如何实现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 图标字体,如果不支持的话,可以直接修改,使用图片替换。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END