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

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 27/1/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    778
    Đã được thích:
    67
    Điểm thành tích:
    28
    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:

    bai-viet-lien-quan.jpg
    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
        
    }
     
        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:
    tao-bai-viet-lien-quan-wordpress.jpg
    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">
                                  <h3>
                                      <a href="'
    get_the_permalink().'">'get_the_title().'</a>
                                  </h3>
                                </div>
                          </li>'
    ;
            } 
    //End while
            
    $content .= "</ul></div>
            <div class='clearfix'></div>"
    ;
          } 
    //End if
        
    //End if
      
    }
      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 h3 {
        background-color: #dc291e;
        color: #fff;
        padding: 2px 2px 2px 10px;
        margin-bottom: 20px;
        border-radius: 3px;
    }
    
    #related_posts .col {
        float: left;
        margin-left: 0;
        list-style: none
    }
    
    .relatedcontent h3 {
        font-size: 16px;
        margin-top: 7px
    }
    
    .relatedthumb img {
        height: 100%;
        max-height: 165px
    }
    
    #related_posts {
        border-top: 4px double #e8e8e8;
        padding-top: 10px;
        margin-top: 30px;
        margin-bottom: -25px;
        float: left;
        width: 100%
    }
    
    #related_posts li:nth-child(1) {
        padding-left: 0 !important
    }
    
    #related_posts li:nth-child(2) {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
    
    #related_posts li:nth-child(3) {
        padding-right: 0 !important
    }
    
    .relatedthumb img {
        min-height: 125px
    }
     
    Cảm ơn đã xem bài:

    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

    Last edited by a moderator: 1/4/21


Like và Share ủng hộ ITSEOVN