wordpress添加文章页底部文章推荐


文章页底部太单调添加过后说可增加用户滞留性XXX的。反正加就对了

参考了2个人

1、在主题函数文件functions.php里面添加下面的内容

  1. /**
  2.  * Related posts
  3.  *
  4.  * @global object $post
  5.  * @param array $args
  6.  * @return
  7.  */
  8. function wcr_related_posts($args = array()) {
  9. global $post;
  10.  
  11. // default args
  12. $args = wp_parse_args($args, array(
  13. 'post_id' => !empty($post) ? $post->ID : '',
  14. 'taxonomy' => 'category',
  15. 'limit' => 10,
  16. 'post_type' => !empty($post) ? $post->post_type : 'post',
  17. 'orderby' => 'date',
  18. 'order' => 'DESC'
  19. ));
  20.  
  21. // check taxonomy
  22. if (!taxonomy_exists($args['taxonomy'])) {
  23. return;
  24. }
  25.  
  26. // post taxonomies
  27. $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));
  28.  
  29. if (empty($taxonomies)) {
  30. return;
  31. }
  32.  
  33. // query
  34. $related_posts = get_posts(array(
  35. 'post__not_in' => (array) $args['post_id'],
  36. 'post_type' => $args['post_type'],
  37. 'tax_query' => array(
  38. 'taxonomy' => $args['taxonomy'],
  39. 'field' => 'term_id',
  40. 'terms' => $taxonomies
  41. ),
  42. ),
  43. 'posts_per_page' => $args['limit'],
  44. 'orderby' => $args['orderby'],
  45. 'order' => $args['order']
  46. ));
  47.  
  48. include( locate_template('related-posts-template.php', false, false) );
  49.  
  50. wp_reset_postdata();
  51. }

2、新建一个related-posts-template.php文件,添加以下内容:

  1. <?php if (!empty($related_posts)) { ?>
  2. <div class="related-posts">
  3. <h3 class="widget-title"><?php _e('相关文章', ''); ?></h3>
  4.  
  5. <ul class="tab-bd">
  6. <?php
  7. foreach ($related_posts as $post) {
  8. setup_postdata($post);
  9. ?>
  10. <li><span class="post_spliter">•</span>
  11. <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
  12. <?php if (has_post_thumbnail()) { ?>
  13. <div class="thumb">
  14. <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
  15. </div>
  16. <?php } ?>
  17. <?php the_title(); ?>
  18. </a>
  19. </li>
  20. <?php } ?>
  21. </ul>
  22. <div class="clearfix"></div>
  23. </div>
  24. <?php
  25. }

如果要调用相关文章代码,只需要在你主题合适的位置,通常是添加到single.php文件里面。

1、显示3个相关文章内容代码

  1. <div class="kratos-hentry2">
  2. <div class="kratos-post-content">
  3. <?php wcr_related_posts(); ?>
  4. </div>
  5. </div>

接着参考另一人的CSS,不然这样很难看

  1. /*********相关文章***********/
  2. .related-posts{
  3. padding: 10px 0px 8px 0px;
  4. }
  5. .kratos-hentry2 {
  6. background-color: #fff;
  7. box-shadow: 0 2px 4px rgba(0,0,0,.1);
  8. border-radius: 0;
  9. -webkit-transition: all .6s ease;
  10. transition: all .6s ease
  11. }
  12. .post_spliter{float:left;
  13. margin-right:10px;
  14. margin-left:0px;
  15. color:#999}
  16. .tab-bd{padding:10px 20px;margin-top:-1px}
  17. .tab-bd li{float:left;
  18. text-align: left;
  19. width:50%;
  20. line-height:150%;
  21. white-space:nowrap;
  22. word-wrap:normal;
  23. text-overflow:ellipsis;
  24. overflow:hidden;
  25. padding:0 15px 5px 0px}
  26. .tab-bd li a{color:#555;font-size:15px;}
  27. .tab-bd li a:hover{color:#333;

大功告成,完美!

代码来自:https://blog.naibabiji.com/skill/wordpress-xiang-guan-wen-zhang.html

CSS扒自:https://guihet.com/page-and-page-wp.html

发表评论

邮箱地址不会被公开。 必填项已用*标注