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

Để hiển thị danh sách bài viết theo dạng List 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-12 small-12 postlist">
                    <div class="col-inner box-shadow-1 box-shadow-2-hover itempost">
                        <div class="row row-collapse align-middle">
                            <div class="col large-3 medium-4 small-12">
                                <div class="box has-hover box-default">
                                    <div class="box-image">
                                        <div class="image-grayscale image-cover" style="padding-top:75%;">
                                            <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>
                            </div>
                            <div class="col large-9 medium-8 small-12">
                                <div class="col-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>
                                    <?php the_excerpt(); ?>
                                </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();
    <div class="custompostlist">
        <div class="row row-small">	
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
                    <div class="col large-12 small-12 postlist">
                        <div class="col-inner box-shadow-1 box-shadow-2-hover itempost">
                            <div class="row row-collapse align-middle">
                                <div class="col large-3 medium-4 small-12">
                                    <div class="box has-hover box-default">
                                        <div class="box-image">
                                            <div class="image-grayscale image-cover" style="padding-top:75%;">
                                                <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>
                                </div>
                                <div class="col large-9 medium-8 small-12">
                                    <div class="col-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>
                                        <?php the_excerpt(); ?>
                                    </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>

     

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.
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận

Danh mục bài viết

Khám phá những nội dung mới nhất

0
Rất thích suy nghĩ của bạn, hãy bình luận.x