WordPress文章页增加相关阅读的方法含标题/缩略图_生活百科

含标题/缩略图(WordPress文章页增加相关阅读的方法)一般而言，网页增加相关阅读可以提升用户体验，而且在某种程度上减少用户流失。因为本站的文章页是单栏样式，没有相关文章阅读的展示，感觉体验并不好，橘子君思前想后，决定对文章页模板进行整改，并初步达到满意效果，感兴趣或者有能力的朋友还可以进行再改造，效果如下图所示。

文章插图

文章插图
步骤一、进入WordPress后台，在外观编辑 functions.php 的最后一个 ?> 前添加下面的代码：
//添加特色缩略图支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址function post_thumbnail_src(){global $post; if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址$values = get_post_custom_values("thumb");$post_thumbnail_src = https://www.yf-zs.com/shuma/$values [0]; } elseif( has_post_thumbnail() ){//如果有特色缩略图，则输出缩略图地址$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');$post_thumbnail_src = https://www.yf-zs.com/shuma/$thumbnail_src [0];} else {$post_thumbnail_src ='';ob_start();ob_end_clean();$output = preg_match_all('/<img.+src=https://www.yf-zs.com/shuma/[/'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);$post_thumbnail_src = https://www.yf-zs.com/shuma/$matches [1] [0];//获取该图片 srcif(empty($post_thumbnail_src)){ //如果日志中没有图片，则显示随机图片$random = mt_rand(1, 10);echo get_bloginfo('template_url');echo '/images/pic/'.$random.'.jpg';//如果日志中没有图片，则显示默认图片//echo '/images/default_thumb.jpg';} }; echo $post_thumbnail_src;}PS：上面的代码主要是获取图片链接，获取的顺序是：
自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片;
随机图片：请制作10张图片，放在现用主题文件夹下的 images/pic/ 目录，图片为jpg格式，并且使用数字 1-10命名，比如 1.jpg;如果你不想用随机图片，请将倒数第5行前面的“//”去掉，然后给倒数第7、9行前面添加“//”注销，并且在现用主题的 /images/ 目录下添加一张名字为 default_thumb.jpg 的默认图片，这样，就会显示默认图片。
步骤二、将以下代码加入到文章页 single.php 模板要展示相关阅读的位置：
<h3><i class="fa fa-twitter" aria-hidden="true"></i> 相关文章阅读：</h3><ul class="related_img"><?php$post_num = 4;$exclude_id = $post->ID;$posttags = get_the_tags(); $i = 0;if ( $posttags ) { $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ','; $args = array('post_status' => 'publish','tag__in' => explode(',', $tags),'post__not_in' => explode(',', $exclude_id),'caller_get_posts' => 1,'orderby' => 'comment_date','posts_per_page' => $post_num ); query_posts($args); while( have_posts() ) { the_post(); ?><li class="related_box"><div class="r_pic"><a href="/uploads/allimg/220901/1243522P5-2.jpg the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><img src="http://img.caodingbaike.com/220901/1243522P5-2.jpg echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" /></a></div><div class="r_title"><a href="/uploads/allimg/220901/1243522P5-2.jpg the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div></li> <?php$exclude_id .= ',' . $post->ID; $i ++; } wp_reset_query();}if ( $i < $post_num ) { $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ','; $args = array('category__in' => explode(',', $cats),'post__not_in' => explode(',', $exclude_id),'caller_get_posts' => 1,'orderby' => 'comment_date','posts_per_page' => $post_num - $i ); query_posts($args); while( have_posts() ) { the_post(); ?> <li class="related_box"><div class="r_pic"><a href="/uploads/allimg/220901/1243522P5-2.jpg the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><img src="http://img.caodingbaike.com/220901/1243522P5-2.jpg echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" /></a></div><div class="r_title"><a href="/uploads/allimg/220901/1243522P5-2.jpg the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div> </li> <?php $i++; } wp_reset_query();}if ( $i== 0 )echo '<div class="r_title">没有相关文章!</div>';?></ul>【WordPress文章页增加相关阅读的方法含标题/缩略图】PS：博主选择的是展示4篇文章，第四行$post_num = 4可根据自己实际情况调整。

WordPress文章页增加相关阅读的方法 含标题/缩略图

WordPress文章页增加相关阅读的方法含标题/缩略图