Tìm theo từ khóa

3 bước để tùy biến trang post archive của theme Flatsome



Hôm nay rãnh mày mò trên Facebook có bạn hỏi cách tùy chỉnh archive list của flatsome, nội dung là code lại trang archive list rất chuối của Flatsome thành dạng như bên dưới mà không mất cái pagination (đánh dấu trang 1 2 3 bên dưới). Mình chia sẽ cách mình làm như sau nhé:

Tùy chỉnh archive list theme flatsome
Tùy chỉnh archive list theme flatsome

Tùy chỉnh lại trang Archive list post trong Flatsome ta làm các bước sau

B1: Copy và tạo 1 file giao diện archive-list.php trong theme con theo cấu trúc của theme flatsome

Hình bên dưới là vị trí file archive-list.php trong theme cha

Cấu trúc file archive list trong theme Flatsome
Cấu trúc file archive list trong theme Flatsome

Tạo thư mục  template-parts/posts/ trong theme con và copy file archive-list.php vào nhé

B2: vào UX Blocks tạo 1 (hoặc nhiều tùy yêu cầu) block giao diện như ý muốn

Trong hình sau mình tạo 2 block các post trình bày như sau

Shortcode tương ứng cho 2 block trên như sau, các bạn chú ý đặt tên cho class của block để dễ css sau nhé

B3: Thêm code sau để tách 2 bài viết đầu tiên và 4 bài viết tiếp theo cho vào 2 block  đã tạo trên bằng cách thay thế code sau trong file archive-list.php của theme con

Thay thế đoạn này trong file gốc

Thành đoạn bên dưới

Kết quả là ta đã làm được giao diện như yêu cầu, tuy hơi xấu, các bác chịu khó css mông má lại nhé

Tùy chỉnh giao diện trang archive flatsome
Tùy chỉnh giao diện trang archive flatsome

Chúc các bạn thành công và code vui vẽ trong mùa covid ;))

3 2 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Trần Ngọc Quang
Trần Ngọc Quang
2 months ago

Sau thi tạo blocks thì bỏ vào chỗ nào của file archive-list.php vậy ad?

0
Would love your thoughts, please comment.x
()
x