Tạo layout tùy chỉnh cho trang Blog Archive trong theme Flatsome cực dễ

7884 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, mình đang làm một dự án web trong đó có phần tin tức khách yêu cầu clone lại layout blog archive của một trang khác với 3 khối post khác nhau hiển thị lần lượt các bài viết trong danh mục. Hôm nay mình chia sẻ lại cho các bạn, chắc chắn sẽ nhiều bạn cần dùng layout blog archive kiểu này.

Đây là kiểu layout trang danh mục tin tức mà khách muốn:

Giuseart.com---Tùy-chỉnh-layout-trang-blog-archive-theme-flatsome
Giuseart.com – Tùy chỉnh layout trang blog archive theme Flatsome theo mẫu

Link demo: //thietbicongnghiep3.ninhbinhweb.top/tin-tuc-dien-dan/

Chúng ta sẽ cùng nhau thực hiện nhé, bài viết hướng dẫn trên theme Flatsome nên các bạn sử dụng theme Flatsome mới làm theo được nha.

Vì mình hướng dẫn chủ yếu cho các bạn biết một chút ít về code hoặc không biết code vẫn có thể làm được, do đó, các bạn chỉ cần copy paste thôi, mình cũng không ghi chú giải thích gì nhé, cũng không cần tìm hiểu sâu, miễn sao copy xong mà nó hoạt động đúng là được!

Bước 1: Chỉnh layout hiển thị bài viết trang archive thành dạng list

Các bạn vào Giao diện – Tùy biến – Blog – Blog layout và chỉnh các option theo hình dưới đây:

Giuseart.com---Chỉnh-layout-hiển-thị-post-trong-trang-archive
Giuseart.com – Chỉnh Layout Right Sidebar, sau đó chỉnh post layout về dạng List – chọn kiểu căn trái cho tiêu đề post

Sau đó, các bạn quay trở lại một bước, vào mục Blog Archive, chỉnh Post Layout theo như hình:

Giuseart.com---Chỉnh-Post-layout-trang-archive
Giuseart.com – Chỉnh Post Layout cho trang archive theme Flatsome

Bước 2: Sửa code thay đổi layout dạng List của trang Archive

Các bạn vào Giao diện – Theme File Editor (sửa theme), chọn theme flatsome/template-parts/posts/archive-list.php

Các bạn copy toàn bộ code dưới dây thay về vào file archive-list.php hiện tại, nhớ xóa trắng hết và paste vào nhé!

Bước 3: Trang trí đẹp với CSS

Copy toàn bộ CSS dưới đây và paste vào Giao diện – Tùy biến – Style –  Custon CSS nhé!

Bước 4: Lưu lại và xem thành quả

Giuseart.com---Tùy-chỉnh-blog-layout-trang-archive-theme-flatsome
Giuseart.com – Thành quả cuối cùng sau khi hoàn thiện

Các bạn lưu lại và xem thành quả được chưa nha, vì code CSS mình set cho trang đang làm nên có thể đưa sang trang của bạn nó không được đẹp đúng ý, phần CSS các bạn có thể tùy ý trang trí lại cho đẹp hơn nhé.

Có vấn đề hay thắc mắc gì vui lòng liên hệ mình nhé!

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

5/5 - (5 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *