如何在wordpress文章页面添加上一页/下一页功能

如何在wordpress文章页面添加上一页/下一页功能

今天这篇文章是教大家如何在wordpress文章页面添加上一页/下一页功能,此篇适合对 WordPress 有一定基础的朋友阅读。

无论你是做一个 blog 还是 enterprise websites,无论你是发布 post 还是 product portfolio,都绕不开使用缩略图。而 WordPress 有自带的调用文章缩略图的函数 ( get_post_thumbnail ),因此使用起来也没什么难度。但对于习惯自己写主题的人来说,由于设计的需要,用法难免五花八门。直接输出缩略图很简单,稍微复杂点的莫过于获取缩略图的图片地址。

比如前段时间对料网主题进行了一些修改,文章底部以前简单的文字导航(上一篇:XXX  下一篇:XXX)改成了文字+缩略图,感觉这样的确更直观一些。效果如下:

 

 

对于没有任何 WordPress 及 php 基础的用户来说,显然要对主题功能进行改造不是一件容易的事情。

首先你要知道,这些部分在你的主题文件中的什么位置(single.php / portfolio.php / … )。
其次,需要构造一个 DIV,嵌套两个等宽 50% 的子层。设置好各个层的 CSS 样式。
具体调用图片的地方一定需要使用函数。

废话不多说,说说怎么实现。一般来说,任何前端功能性的改造都离不开三个部分:
结构(HTML,PHP)、样式(CSS)、功能(JS,PHP)。

HTML+PHP 部分(结构)

<div class="sx-box next-prev-posts clearfix">
 <div class="prev-post">
 <?php
 $prev_post = get_previous_post();
 if (!empty( $prev_post )): ?>
 <a alt="<?php echo $prev_post->post_title; ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="prev" class="prev has-background" style="background-image: url(<?php echo liao_the_prev_thumbnail_url(); ?>);"><span>上一篇</span><h4><?php echo $prev_post->post_title; ?></h4></a>
 <?php endif; ?>
 </div>
 <div class="next-post">
 <?php
 $next_post = get_next_post();
 if (!empty( $next_post )): ?>
 <a alt="<?php echo $next_post->post_title; ?>" href="<?php echo get_permalink( $next_post->ID ); ?>" rel="next" class="next has-background" style="background-image: url(<?php echo liao_the_next_thumbnail_url(); ?>);"><span>下一篇</span><h4><?php echo $next_post->post_title; ?></h4></a>
 <?php endif; ?>
 </div>
 </div>

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

如需转载,请注明文章出处和来源网址:https://www.54u.net/1238.html