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

Minh Anh — Thu, 06 Jul 2023 23:16:03 +0000

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


    	
        	
                
                    
                        
                            
                                
                                    
                                        
                                    
                                    
                                
                            
                            
                                				
                                    
                                    
                                
                            
                        
                    
                			
        
    
    
        
    
    
     id="post-">
        Not Found

Đoạn code này

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 '';
    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'    => __('','wiki'),
        'next_text'    => __('','wiki'),
    ) );
    if($total > 1) echo '';
}

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();

Bài viết Hiển thị danh sách bài viết dạng Grid trong Flatsome bằng Code PHP tùy chỉnh đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

Hiển thị danh sách bài viết được chọn bằng ACF Pro

Minh Anh — Tue, 24 Aug 2021 02:50:48 +0000

Đôi khi, chúng ta muốn chọn thủ công một số bài viết để hiển thị ra ngoài Trang chủ, Sidebar hay ở mỗi bài viết để điều hướng người đọc lựa chọn xem những bài viết này. Có nhiều cách để thực hiện việc này, như dùng plugin chuyên dụng, dùng widget hay sử dụng element nào đó của Themes (Theme Flatsome có UX Blog). Trong khuôn khổ bài viết này, mình sẽ chia sẻ với các bạn các để hiển thị danh sách bài viết được chọn bằng cách sử dụng ACF Pro (chọn bài viết) và PHP/HTML/CSS (để hiển thị).

Chọn danh sách bài viết bằng ACF Pro (Advanced Custom Fields Pro)

Để thực hiện được việc này, tất nhiên là website của bạn phải được cài ACF Pro và đã có bài viết được đăng với đầy đủ thông tin: Tiêu đề, Ngày đăng, Ảnh Thumbnail, Nội dung chi tiết, . . .

Bước 1: Tạo Field Group

Tạo một Filed Group với tên bất kỳ (Ví dụ: Chọn bài viết)
Rules: Vị trí hiển thị danh sách, có thể là Trang, Chi tiết bài viết, Danh mục bài viết, . . .

Thêm một trường mới

Field Label: Nhãn của trường (Ví dụ: Bài viết xem nhiều)
Field Name: Tên của trường (Ví dụ: baiviet_xemnhieu) – Sử dụng khi code PHP
Field Type: Repeater – Lặp lại, để có thể chọn nhiều bài

Thêm trường con (Sub Field)

Field Label: Nhãn của trường con (Ví dụ: Chọn bài viết)
Field Name: Tên của trường con (Ví dụ: chon_baiviet) – Sử dụng khi code PHP
Field Type: Post Object
Filter by Post Type: Bài viết (Posts)
Return Format: Post ID

Sau khi thực hiện xong thì bấm Đăng (Hoặc Public, Update – Cập nhật)

Bước 2: Chọn danh sách bài viết cần hiển thị

Tùy cấu hình Field Group lúc đầu bạn muốn hiển thị danh sách này ở đâu thì bạn sẽ vào đó để Chọn danh sách bài viết (Bài viết, Trang, Danh mục bài viết, . . .)

Code để hiển thị danh sách bài viết được chọn

Một số Element của bài viết cần hiển thị

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();

Code để hiển thị

Đặt đoạn code này vào vị trí cần hiển thị bài viết và sửa bố cục cho phù hợp

Một số mẫu hiển thị khi sử dụng Theme Flatsome

Hiển thị dạng danh sách

Đây là kiểu hiển thị truyền thống với Hình ảnh bên trái; nội dung bao gồm Tiêu đề, Nội dung ngắn, Ngày đăng, Xem thêm nằm bên phải

Hiển thị dạng ô Grid

Để hiển thị kiểu này, bạn sử dụng đoạn code dưới đây:

Hiển thị dạng Slider

Sử dụng đoạn code dưới đây để hiển thị list bài ra như trên:

Để có được bố cục đẹp mắt thì tất nhiên bạn cần phải sử dụng thêm CSS để trang trí cho danh sách hiển thị này. Tùy vào thẩm mỹ của mỗi người sẽ có được giao diện với màu sắc, bố cục khác nhau.

Gạch thẻ ốp tường https://gachtham.net/gach-the-op-tuong/

Gạch ốp chân tường https://thudoceramic.com/gach-the-chan-tuong/

Lời kết:

Trên đây là những chia sẻ từ kinh nghiệm cá nhân của mình đã áp dụng cho những dự án mà mình đã triển khai. Đây có thể chưa phải là phương án tối ưu nhất và có nhiều cách khác nhau để thực hiện được yêu cầu tương tự. Hi vọng bài viết này sẽ giúp ích được cho bạn, rút ngắn phần nào thời gian trong quá trình triển khai dự án.

Chúc bạn thành công!

Bài viết Hiển thị danh sách bài viết được chọn bằng ACF Pro đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

danh sách bài viết – Flatsome Tips For You