Để 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>