Tạo bài viết liên quan trên theme Flatsome

1. Chèn code sau vào file functions.php của Child Theme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//Bài viết liên quan
function hl_add_post_content($content) {
  if (is_single()) {
    $content .= "<div class='clearfix'></div>";
    global $post;
    $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_filter ('the_content', 'hl_add_post_content', 0);

2. Chèn đoạn mã css sau vào file style.css của Child Theme hoặc Flatsome Advanced Options -> Custom CSS

#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;
}
#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;
}

Note: Đối với các bạn xài kèm AMP thì sửa code như sau:

Thay đoạn

add_filter ('the_content', 'mh_add_post_content', 0);

Bằng đoạn

if (!wp_is_mobile()) {
  add_filter ('the_content', 'mh_add_post_content', 0);
}

Nguồn: minhhien.edu.vn

Leave a Reply

avatar
  Subscribe  
Notify of