Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

Hướng dẫn tùy biến Template Blog Archive Theme Flatsome

Với khả năng tùy biến cực cao và dễ dàng, nên số lượng người dùng theme Flatsome cực kỳ nhiều. Với mong muốn tùy biến giao diện Blog trở nên độc đáo và đẹp mắt hơn thì ngoài việc sử dụng một Plugin trả phí, thì chúng ta còn một lựa chọn nữa là tùy biến nó bằng code. Trong bài viết này chúng ta cùng tìm hiểu cách làm nhé.

Custom tùy biến Template Blog Archive Theme Flatsome này mình dựa trên tùy biến của hướng dẫn trên giuseart.com, mình có thêm một số cái như excerpt để cho phù hợp với nhu cầu của mình hơn.

Hướng dẫn tùy biến Template Blog Archive Theme Flatsome

Tùy biến Template Blog Archive Theme Flatsome

Vì hướng dẫn tùy biến Template Blog Archive Theme Flatsome này chỉ sử dụng code, nên các bạn nhớ backup lại website của bạn xong rồi hãy bắt đầu thử nhé, không là hỏng website lại mất công làm lại.

Có thể bạn quan tâm: tạo Meta Seo không dùng plugin cho WordPress

1] Chỉnh layout hiển thị bài viết trang archive thành list

  • Vào Giao diện – Tùy biến – Blog – Blog layout và chọn thành dạng List.
  • Vào mục Blog Archive, chỉnh Post Layout và chọn thành dạng List.
blog archive list

2] Thêm code thay đổi layout dạng List của trang Archive

Các bạn vào Giao diện – Theme File Editor (sửa theme), chọn theme flatsome/template-parts/posts/archive-list.php. Các bạn nên tạo một file với đường dẫn và tên như trên vào theme child để khi update thì nó sẽ không bị mất.

<?php
  function custom_modify_query($query) {
    if (!is_admin() && $query->is_main_query()) {
      if (is_category()) {
        $current_category_id = get_query_var('cat'); // Lấy ID của danh mục hiện tại
        
        $query->set('posts_per_page', -1); // Số lượng bài viết cần lấy, -1 để lấy tất cả
        $query->set('cat', $current_category_id); // Chỉ lấy bài viết từ danh mục hiện tại
      }
    }
  }
  
  add_action('pre_get_posts', 'custom_modify_query');
?>

<?php if (have_posts()) : ?>

<div class="block-post1 row row-small">
  <div class="col large-6">
    <div class="col-inner">
      <div class="row large-columns-1 list-post1">
        <?php
          // Hiển thị bài viết đầu tiên ở cột trái
          the_post();
          echo '<div class="col post-item">';
            echo flatsome_apply_shortcode('blog_posts', array(
            'type' => 'row',
			'image_width' => '100',
            'depth' => get_theme_mod('blog_posts_depth', 0),
            'depth_hover' => get_theme_mod('blog_posts_depth_hover', 0),
            'text_align' => get_theme_mod('blog_posts_title_align', 'center'),
            'style' => 'normal',
            'columns' => '1',
            'show_date' => get_theme_mod('blog_badge', 1) ? 'true' : 'false',
            'ids' => get_the_ID(),
			'excerpt' => 'true',
			'excerpt_length'=> '55',
			'force_image_size' => 'large',
            ));
          echo '</div>';
        ?>
      </div>
    </div>
  </div>
  
  <div class="col large-6">
    <div class="col-inner">
      <div class="row large-columns-1 list-post2">
        <?php
          // Hiển thị 4 bài viết tiếp theo ở cột phải
          $count = 0;
          while (have_posts() && $count < 4) : the_post();
          if ($count >= 0 && $count <= 4) { // Điều kiện để hiển thị chính xác 4 bài viết
          echo '<div class="col post-item">';
            echo flatsome_apply_shortcode('blog_posts', array(
            'type' => 'row',
            'image_width' => '32',
            'depth' => get_theme_mod('blog_posts_depth', 0),
            'depth_hover' => get_theme_mod('blog_posts_depth_hover', 0),
            'text_align' => get_theme_mod('blog_posts_title_align', 'center'),
            'style' => 'vertical',
            'columns' => '1',
            'show_date' => get_theme_mod('blog_badge', 1) ? 'true' : 'false',
            'ids' => get_the_ID(),
            ));
          echo '</div>';
        }
        $count++;
        endwhile;
      ?>
    </div>
  </div>
</div>
</div>
<?php
  $count = 0;
  // Kiểm tra xem còn bài viết nào không
  if (have_posts()) {
    // Lấy số lượng bài viết của danh mục hiện tại
    $current_category_posts_count = $wp_query->found_posts;
    
    if ($current_category_posts_count > 5) {
    ?>
    <div class="block-post2 row row-small">
      <?php
        while (have_posts()) : the_post();
        if ($count >= 0) { 
          echo '<div class="col post-item">';
            echo flatsome_apply_shortcode('blog_posts', array(
            'type' => 'row',
            'image_width' => '32',
            'depth' => get_theme_mod('blog_posts_depth', 0),
            'depth_hover' => get_theme_mod('blog_posts_depth_hover', 0),
            'text_align' => get_theme_mod('blog_posts_title_align', 'center'),
            'style' => 'vertical',
            'columns' => '1',
            'show_date' => get_theme_mod('blog_badge', 1) ? 'true' : 'false',
            'ids' => get_the_ID(),
			'excerpt' => 'true',
			'excerpt_length'=> '55',
            ));
          echo '</div>';
        }
        $count++;
        endwhile;
      ?>
    </div>
    <?php
    }
  }
?>


<?php flatsome_posts_pagination(); ?>

<?php else : ?>

<?php get_template_part('template-parts/posts/content', 'none'); ?>

<?php endif;
  remove_action('pre_get_posts', 'custom_modify_query'); // Remove hook after use
?>

3] Thêm CSS

Copy toàn bộ CSS dưới đây và paste vào Giao diện – Tùy biến – Style –  Custon CSS nhé!

.blog-archive .post-item {
    padding-bottom: 0;
}
.list-post1 .post-item .col-inner, .list-post2 .post-item .col-inner {
    padding: 0;
    border: none;
}
.list-post1 .post-item .box {
    border-radius: 8px;
    background: #fff;
}
.list-post1 .post-item .box-text {
    padding: 10px 11px 15px 15px !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.list-post1 .post-item .post-title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.blog-archive .post-item .from_the_blog_excerpt {
    color: #848484;
    font-size: 14px;
    line-height: 20px;
}
.list-post2 .post-item {
    padding-bottom: 10px !important;
}
.list-post2 .post-item .box-image .image-cover {
    padding-top: 70% !important;
}
.list-post2 .post-item .from_the_blog_excerpt {
    display: none;
}
.row-box-shadow-1 .col-inner{
box-shadow: none;
}
.list-post2 h5 a {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
p.from_the_blog_excerpt.show-on-hover.hover-true {
    opacity: 1;
    line-height: 1.8rem;
    color: #000;
}
.row.large-columns-1.list-post1 {
    margin-bottom: -30px;
}
header.archive-page-header img {
    margin-top: -30px;
    padding-bottom: 30px;
}
.list-post2 .post-item .post-title a{
line-height: 1.6rem;
}
.box-text{
padding-top: 0 !important;
}
@media (max-width: 549px) {
.list-post2 .post-item .post-title,.box-blog-post h5 {
    padding-top: 20px;
}
}
.list-post1 a img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

3] Xoá chữ Lưu trữ danh mục trong file theme

Vào cài đặt thêm tìm đến template-parts\posts\partials\archive-title.php tìm và xóa Category Archives:

xoa chu Category Archives theme flatsome

Lưu lại và xem kết quả, vì CSS mình làm cho trang đang làm nên có thể khi chuyển sang Web của bạn nó không được đẹp đúng ý, phần CSS các bạn có thể tùy ý trang trí lại cho đẹp hơn nhé.

Theo dõi trên

Logo Google new
5/5 - (1 bình chọn)