给WordPress相关文章显示缩略图

2021-05-22 0 1,573 百度已收录

  为了增添用户体验和阅读深度,许多同伙喜欢为自己的博客添加相关文章功效,有些是纯文字的,而有些则是带缩略图的,今天这里我就简朴说下带缩略图的相关文章的实现方式。
  将以下代码加入single.php文件中想要显示带缩略图的相关文章处:

<div id=”related-posts”>
<div class=”caption”>带缩略图的相关文章:</div>
<div class=”related” class=”clearfix”>
<ul>
<?php
$post_num = 5; // 设定数目.
$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), // 只選 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><a href=”<?php echo the_permalink(); ?>” title=”<?php the_title(); ?>” ><img src=”<?php if ( get_post_meta($post->ID, ‘thumbnail1’, true) ) { echo get_post_meta($post->ID, ‘thumbnail1’, true);}
elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail1’);echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>” alt=”<?php the_title(); ?>” width=”120″ height=”120″ ></a>
<a href=”<?php echo the_permalink(); ?>” ><?php the_title(); ?></a></li>
<?php
$exclude_id .= ‘,’ . $post->ID; $i ++;
} wp_reset_query();
}
if ( $i < $post_num ) { // 若是 tags 文章數量不足, 再取 category 補足.
$cats = ”; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ‘,’;
$args = array(
‘category__in’ => explode(‘,’, $cats), // 只選 category 的文章.
‘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><a href=”<?php echo the_permalink(); ?>” title=”<?php the_title(); ?>” ><img src=”<?php if ( get_post_meta($post->ID, ‘thumbnail1’, true) ) { echo get_post_meta($post->ID, ‘thumbnail1’, true);}
elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail1’);echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>” alt=”<?php the_title(); ?>” width=”120″ height=”120″ ></a>
<a href=”<?php echo the_permalink(); ?>” ><?php the_title(); ?></a></li>
<?php
$i++;
} wp_reset_query();
}
if ( $i == 0 ) echo ‘<li>没有相关文章!</li>’;
?>
</ul>
</div>
</div>
<!– release post end –>

  凭证自己博客样式修改一下CSS代码:

/** related post thumbnail **/
    #related-posts{border-radius:5px;border-top:3px #dfdfdf solid;background:#fff;clear:both;}
    .caption{color:#0C0C0B;font-size: 14px;font-weight:bold;padding-top: 10px;margin-bottom: 10px;margin-left:10px;}
    .related {white-space:normal;margin:0 auto;overflow: hidden;border-left: 1px solid #DFDFDF;margin-left:20px;}
    .related li{float: left;width: 120px;height:180px;list-style:none;border-right:1px solid #dfdfdf;padding:4px;_padding:2px;text-align: left;}
    .related a{float: left;width: 126px;text-overflow: ellipsis;-o-text-overflow: ellipsis;}
    .related a:hover{white-space: normal;}
    .related li:hover{background:#F6F6F6;}
    .related img{height:120px;width:120px;border:0;padding:0;}

  也可以把上面第一步中的php函数代码放在单唯一个文件中,如likeposts.php,然后在想要挪用的页面添加挪用代码:

<?php include(‘includes/likeposts.php’);?>

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 给WordPress相关文章显示缩略图 https://zhutizhen.com/14372.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务