Hiển thị danh sách bài viết dạng Grid trong Flatsome bằng Code PHP tùy chỉnh

Để hiển thị danh sách bài viết theo dạng Grid trong danh mục bài viết hay thẻ tag trong Flatsome, hãy làm theo hướng dẫn sau:

Bước 1: Vào Theme Options > Blog > Blog Layout

Chuyển đến phần Posts Layout, cho 1 loại hiển thị bất kỳ, ví dụ List

Bước 2: Copy file PHP tương ứng với cái Posts Layout này từ Theme cha vào Theme con theo cấp thư mục tương ứng

Như ví dụ trên, cần Copy file archive-list.php từ thư mục Flatsome/template-parts/posts sang thư mục Child-theme/template-parts/posts (Nếu chưa có thì tạo thư mục theo cấp như này)

Xóa hết code ở đây và paste đoạn code dưới đây vào

<div class="custompostlist">
    <div class="row row-small">	
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
                <div class="col large-4 small-12 postlist">
                    <div class="col-inner">
                        <div class="box has-hover   has-hover box-default box-text-bottom">
                            <div class="box-image">
                                <div class="image-grayscale image-cover" style="padding-top:56.25%;">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgba(0, 0, 0, 0)"></div>
                                </div>
                            </div>
                            <div class="box-text text-left" style="background-color:rgba(255, 255, 255, 0);">
                                <div class="box-text-inner">				
                                    <h2 style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="relatedtitlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                                    <p class="postdate"><?php echo get_the_date() ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>			
        <?php endwhile; ?>
    </div>
    <div class="navigation">
        <?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>
    </div>
    <?php else : ?>
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <h1>Not Found</h1>
    </div>
    <?php endif; ?>
</div>

Đoạn code này

<?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>

Là để phân trang, cần bổ sung thêm đoạn code sau vào file functions.php trong Child-theme

function wiki_wp_corenavi($custom_query = null, $paged = null) {
    global $wp_query;
    if($custom_query) $main_query = $custom_query;
    else $main_query = $wp_query;
    $paged = ($paged) ? $paged : get_query_var('paged');
    $big = 999999999;
    $total = isset($main_query->max_num_pages)?$main_query->max_num_pages:'';
    if($total > 1) echo '<div class="pagenavi">';
    echo paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, $paged ),
        'total' => $total,
        'mid_size' => '10', // Số trang hiển thị khi có nhiều trang trước khi hiển thị ...
        'prev_text'    => __('<i class="icon-angle-left"></i>','wiki'),
        'next_text'    => __('<i class="icon-angle-right"></i>','wiki'),
    ) );
    if($total > 1) echo '</div>';
}

Và đây là kết quả

Lưu ý

Các trường thông tin có thể cho hiển thị ra danh sách này khá nhiều, Ví dụ:

Tiêu đề: the_title();
Ảnh Thumbnail: the_post_thumbnail();
Nội dung ngắn: the_excerpt();
Link chi tiết: the_permalink();
Ngày đăng: get_the_date();
Tác giả: get_the_author();

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.