Code tạo bài viết liên quan dưới chân bài viết post Wordpress không sử dụng Plugin

Hôm nay mình sẽ chia sẻ Code tạo bài viết liên quan dưới chân bài viết post Wordpress không sử dụng Plugin cho các bạn nào cần trên themes Flatsome hoặc ở bất kỳ themes nào cũng cũng được, vì mặc định có nhiều themes không có bài viết liên quan ở post tin tức làm rất khó chịu.

Để tạo bài viết liên quan, bạn truy cập vào themes của web mở tập tin function.php của themes lên và chèn 1 trong 2 code sau vào:

Code 1: Không hình ảnh trước tiêu đề (chọn 1 trong 2)

Demo:

PHP:

//Bài viết liên quan
function itseovn_add_post_content() {
    $content = '';
    if (is_single()) {
      $content .= "<div class='clearfix'></div>";
      $post_id = get_the_ID();
      $categories = get_the_category($post_id);
      if ($categories) {
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
          'category__in' => $category_ids,
          'post__not_in' => array($post_id),
          'posts_per_page'=> 6, // Number of related posts that will be shown.
          'caller_get_posts'=>1
        );
 
        $my_query = new wp_query( $args );
        if( $my_query->have_posts() ) {   
          $content .= '<div id="related_posts"><h3>Bài viết liên quan</h3><ul style="margin-left:35px;margin-bottom:10px;">';
          while( $my_query->have_posts() ) {
                      $my_query->the_post();
            $content .= '
              <li>
               <a href="'. get_the_permalink().'">'. get_the_title().'</a>
               </li>';
          } //End while
          $content .= "</ul></div>
          <div class='clearfix'></div>";
        } //End if
      } //End if
    }
    wp_reset_postdata(); //Restore original Post Data
    return $content;
  }
//add_shortcode('itseovn_add_post_content', 'itseovn_add_post_content');
add_shortcode('itseovn_add_post_content', 'itseovn_add_post_content');

CSS:

HTML:

#related_posts{float:left;width:100%}
#related_posts h3{color:#00af91;font-weight:bold;width:100%;margin-left:5px;margin-bottom:8px}
#related_posts a,#related_posts a:hover{color:#0271a1}

Code 2: Có hình ảnh trước tiêu đề (chọn 1 trong 2)

DEMO:

PHP:

//Bài viết liên quan
function itseovn_add_post_content() {
  $content = '';
  if (is_single()) {
    $content .= "<div class='clearfix'></div>";
    $post_id = get_the_ID();
    $categories = get_the_category($post_id);
    if ($categories) {
      $category_ids = array();
      foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
      $args=array(
        'category__in' => $category_ids,
        'post__not_in' => array($post_id),
        'posts_per_page'=> 3, // Number of related posts that will be shown.
        'caller_get_posts'=>1
      );

      $my_query = new wp_query( $args );
      if( $my_query->have_posts() ) {
        $content .= '<div id="related_posts"><h3>Bài viết liên quan</h3><ul>';
        while( $my_query->have_posts() ) {
                    $my_query->the_post();
          $content .= '
            <li class="col large-4">
              <div class="relatedthumb">
                <a href="' . get_the_permalink() .'">'. get_the_post_thumbnail().'</a>
              </div>
                          <div class="relatedcontent">
                                  <a href="'. get_the_permalink().'">'. get_the_title().'</a>
                            </div>
                      </li>';
        } //End while
        $content .= "</ul></div>
        <div class='clearfix'></div>";
      } //End if
    } //End if
  }
  wp_reset_postdata(); //Restore original Post Data
  return $content;
}
//add_shortcode('itseovn_add_post_content', 'itseovn_add_post_content');
add_filter('the_content', 'itseovn_add_post_content', 0);


Nếu muốn add tay vào

Nếu mở rem chức nặng Add_shortcode bạn có thể tự tay add vào các vị trí cần.

Add vào HTML: Chỉ cần add add_shortcode như: [itseovn_add_post_content] vào vị trí cần thêm trên HTML.

Add vào code PHP:

PHP:

<?php echo do_shortcode('[itseovn_add_post_content]') ?>

Còn không giữ nguyên code trên chức năng add_filter('the_content', 'itseovn_add_post_content', 0); là nó tự add vào rồi.

Thêm code CSS vào để cho đẹp

HTML:

#related_posts ul
{
margin-left: 0px !important;
list-style: none;
}
.relatedthumb img
{
min-height: 125px;
width: auto;
}
#related_posts li
{
width: 25%;
padding-left: 10px;
float:left;
}
#related_posts li:nth-child(1){padding-left:0!important}
#related_posts >h3
{
background-color: #14b04d;
color: #fff;
padding: 2px 2px 2px 10px;
margin-bottom: 20px;
border-radius: 3px;
}
#related_posts .relatedcontent
{
font-size: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
padding: 5px 5px 0px 5px;
}