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:
    854
    Đã được thích:
    72
    Đ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
        
    }
        
    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:
    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">
                                      <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;
    }
    
     
    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: 12/6/21


Like và Share ủng hộ ITSEOVN