为博客添加同分类随机文章

2023年9 月5日 / 网站源码 / 4条 / 9,792次

继续折腾博客，想在文章后面加个带图片的同分类随机文章。百度了下，方法如下：

一、复制下面代码粘贴到主题functions.php中。

  1. //支持外链缩略图
  2. if ( function_exists('add_theme_support') )
  3.  add_theme_support('post-thumbnails');
  4. function catch_first_image()
  5. {
  6.     global $post, $posts;$first_img = '';
  7.     ob_start();
  8.     ob_end_clean();
  9.     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  10.     $first_img = $matches [1] [0];
  11.     //如果第一张图不存在，则返回随机图片
  12.     if(emptyempty($first_img)){
  13.         $first_img = '';
  14.         //从2张图中随机选择，可根据自己的图片数量设置
  15.         $random = mt_rand(1, 85);
  16.         echo get_bloginfo ( 'stylesheet_directory' );
  17.         echo '/images/random/'.$random.'.jpg';
  18.         }
  19.   return $first_img;
  20. }

二、加入代码，可以调用到文章页面，也可以直接加入single.php里。

  1. <?php
  2. if ( is_single() ) :
  3. global $post;
  4. $categories = get_the_category();
  5. foreach ($categories as $category) :
  6. ?>
  7. <div class="related">
  8. <div class="titlecat"><i class="zm zm-fenlei" style="margin-right: 1px;font-size: 1rem!important;"></i><span class="re-title">同类文章</span>
  9. </div>
  10. <div id="related-img">
  11. <?php
  12. $posts = get_posts('numberposts=4&orderby=rand&category='. $category->term_id);
  13. foreach($posts as $post) :
  14. ?>
  15. <div class="r4">
  16. <div class="related-site">
  17. <figure class="related-site-img">
  18. <span class="">
  19. <a class="sc" href="<?php the_permalink() ?>" target="_blank" rel="nofollow" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>"><img class="post-img" width="280" height="210" src="<?php echo catch_first_image(); ?>" alt="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>" title="<?php printf(__('%s', 'kubrick'), the_title_attribute('echo=0')); ?>" itemprop="image" loading="lazy">
  20. </a>
  21. </span>
  22. </figure>
  23. <div class="related-title">
  24. <div class="retitle">
  25. <span class="zm zm-lanmulvshisuibi" style="color: #333;"></span><a class="arelated" target="_blank" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <?php endforeach; ?>
  31. </div>
  32. </div>
  33. <?php
  34. endforeach; endif ; ?>
  35. <?php
  36. ?>

以上是源代码。

加入到文章里面即可，但是发现添加以上代码后，文章的评论会显示的是随机最后一篇文章的评论，这就头疼了，对于菜鸟级别的我就懵逼了。但是又发现其实评论是显示评论上面文章id的评论，那么我把同类文章的代码加在了评论后，这样就顺利显示了文章的评论了。

三、把评论和同类文章框在一个层里，这样可以通过display的column-reverse来控制显示顺序，反顺序显示就相当于同类文章在前，评论在后了。

  1. <div class="com-re" style="display: flex;flex-direction: column-reverse;">
  2. <div class="com-t"><?php comments_template(); ?></div>
  3. <div>
  4. <?php include('related-posts.php');?>
  5. <hr class="hr-twill-colorful" data-content="◆" style="width: 99%;display: block!important;">
  6. </div>
  7. </div>

四、再加入以下css美化

  1. .related {
  2.     margin-top: 20px;
  3. }
  4. .titlecat {
  5.     margin-bottom: 5px;
  6.     color: #333;
  7.     font-size: 1rem;
  8.     margin-left: 10px;
  9. }
  10. #related-img {
  11.     display: flex;
  12.     background: #fff;
  13.     margin-bottom: 0px;
  14.     padding: 0px 5px;
  15.     border: 0px solid #e7e7e7;
  16.     flex-wrap: wrap;
  17.     justify-content: space-between;
  18. }
  19. .related-site {
  20.     max-width: 100%;
  21.     width: 100%;
  22.     height: auto;
  23.     padding: 5px;
  24. }
  25. .related-site-img {
  26.     position: relative;
  27.     max-width: 100%;
  28.     width: 100%;
  29.     height: auto;
  30.     overflow: hidden;
  31. }
  33. .related-site-img a img {
  34.     float: left;
  35.     max-width: 100%;
  36.     width: 100%;
  37.     height: 126px;
  38.     margin: 0;
  39.     border-radius: 3px 3px 0 0;
  40.     padding: 0;
  41. }
  42. .related-site-img a img:hover {
  43.     float: left;
  44.     max-width: 100%;
  45.     width: 100%;
  46.     border-radius: 3px 3px 0 0;
  47.     height: 126px;
  48.     margin: 0;
  49.     padding: 0;
  50. }
  51. .related-title {
  52.     padding: 5px;
  53.     background: #dee3ea;
  54.     height: 48px;
  55.     border-radius: 0 0 3px 3px;
  56.     overflow: hidden;
  57.     margin: 0;
  58.     -webkit-transition: all .4s ease-in-out;
  59.     -moz-transition: all .4s ease-in-out;
  60.     -ms-transition: all .4s ease-in-out;
  61.     -o-transition: all .4s ease-in-out;
  62.     display: flex;
  63.     align-items: center;
  64. }
  65. .related-title:hover {
  66.     padding: 5px;
  67.     background: #e8eef6;
  68.     height: 48px;
  69.     border-radius: 0 0 3px 3px;
  70.     overflow: hidden;
  71.     margin: 0;
  72.     -webkit-transition: all .4s ease-in-out;
  73.     -moz-transition: all .4s ease-in-out;
  74.     -ms-transition: all .4s ease-in-out;
  75.     -o-transition: all .4s ease-in-out;
  76.     display: flex;
  77.     align-items: center;
  78. }
  79. .arelated {
  80.     color: #333;
  81. }
  82. .arelated:hover {
  83.     color: #333;
  84. }

完工，但是由于是通过 get_the_category()来获取的，如果文章存在属于多个分类的话，会出现多个同分类，所以建议出现此情况的文章删除多个分类即可。目前还没有找到评论问题的最佳解决办法，如果哪位大佬看到，希望指点下龙哥，谢谢！

真开心，有大佬留言帮解决了，非常感谢！办法如下：

把foreach($posts as $post) 改成 foreach($posts as $post_tmp)，当然修改后得把评论和同分类的源码替换下，然后删除

  1.  style="display: flex;flex-direction: column-reverse;"

但是问题又出现了，虽然解决了前面问题，但是会出现新的问题就是：如果当前文章有图片的话，那么同分类随即文章图片以及文章信息都会直接显示当前的文章的缩影图以及文章链接。

关键词:

时间：2023年9 月5日，星期二，下午12:15。
通过 RSS 2.0 订阅源关注。

«
»

《为博客添加同分类随机文章》有4 条评论

  1. 格子老师说道：
    2023年11月7日 下午2:12

    弄这么复杂干啥？就直接在文章模板页面直接写查询数据的代码，应该就好了。我的站点多数功能都是我直接查询数据库增加的功能。

    回复
  2. 木頭人说道：
    2023年9月6日 下午5:28

    foreach($posts as $post) 改成 foreach($posts as $post_tmp) 试试。

    回复

提交评论

同类文章