Để 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>
Theo dõi
Đăng nhập
0 Góp ý
Cũ nhất
