Bài viết này nằm trong Series Thiết kế Standout Blog 100 điểm tốc độ, bạn xem lại phần trước ở đây:
Cài web mẫu & Demo cho Standout Blog
Trước khi thực hành thiết kế Blog Layout cho Standout Blog, ta tìm hiểu cách thiết kế của GeneratePress trước.
Có 2 cách để thiết kế layout của một trang web trên GeneratePress:
- Dùng thiết kế có sẵn trên template mặc định của GeneratePress, với các tùy chọn có sẵn trên Customize.
- Dùng GP Elements để tạo thiết kế riêng và ghi đè template mặc định của GeneratePress.
Mỗi cái có ưu nhược điểm riêng:
- Template mặc định: dễ dùng, không cần phải thiết kế mới các thành phần trên trang web, nhẹ vì thiết kế có sẵn trên template.
- Với GP Elements: khó, cần phải thiết kế lại từng phần của trang web, nhưng có thể thiết kế các trang có layout phức tạp hơn & đẹp hơn so với template mặc định.
Ở bài này, WPVUI sẽ hướng dẫn bạn thực hành cách 1 – Thiết kế Blog Layout GeneratePress với Template mặc định.
Bài tiếp theo ta mới làm quen và thực hành với GP Elements.
Xóa các Elements trên Web mẫu GeneratePress
Từ năm 2022, mọi Site Templates của GeneratePress sử dụng GP Elements ở các mức độ khác nhau, các phần dùng GP Elements sẽ thiết kế bằng Gutenberg – Block Editor với sự hỗ trợ của GenerateBlocks.
Ở web mẫu chúng ta vừa cài xong ở bài trước, có 3 Elements:
- Đầu tiên là Blog/ Archive Loop Template, Elements này giúp thiết kế lại các trang hiển thị danh sách bài viết, áp dụng cho mọi archive pages như trang Blog, Trang Category, Tag, Author.
- Cái thứ 2 là Sidebar, giúp thiết kế lại phần Right Sidebar.
- Cái thứ 3 là Site Footer, thiết kế phần Footer trên web mẫu
Như hình:
Ngoài 3 cái trên, thì các phần còn lại đều sử dụng template mặc định của GeneratePress.
Để hiển Blog Layout như template mặc định, ta chỉ cần xóa Blog/archive loop template đi (bạn có thể restore rồi publish lại bất kỳ lúc nào):
Thiết kế Blog Layout với Template mặc định của GeneratePress
Sau khi xóa Blog/archive loop template thì trang danh sách bài viết sẽ hiển thị hầu như không khác biệt, chỉ có thêm Pagination ở cuối trang thôi, vì trên Blog/archive loop template ở web mẫu Marketer chưa có pagination:
Khi không dùng Elements thì việc tùy chỉnh thiết kế Blog/Archive Pages sẽ được thực hiện trên Customize, bạn hãy mở Customize, vào mục Layout -> Blog và xem chúng ta có thể tùy chỉnh được gì với Archives template mặc định của GeneratePress:
Như trên hình, ta có thể:
- Chọn hiển thị expert hay toàn bộ nội dung bài viết, thông thường danh sách bài viết ta chỉ hiển thị tiêu đề kèm nội dung rút gọn (excerpt). Bạn cũng có thể giới hạn số từ sẽ hiển thị, mặc định của GeneratePress là 20 từ.
- Chỉnh lại chữ Readmore, ngay phía dưới là tùy chọn hiển thị Readmore là nút (button) hay chỉ là link thông thường, ta chọn button cho đẹp.
- Hiển thị thêm các thông tin khác (meta tag) như ngày tháng đăng bài, tác giả, danh mục và tag, số comment.
Ở đây chúng ta cần để ý vị trí hiển thị của các meta tag và nút Readmore không thể thay đổi trên Customize – chính xác hơn là mặc định GeneratePress không cung cấp tùy chọn để thay đổi vị trí các nội dung này.
Nên, nếu muốn tùy chỉnh cách hiển thị của chúng, bắt buộc chúng ta phải dùng GP Elements để ghi đè archive page template mặc định, đó là sự khác biệt giữa việc dùng GP Elements so với dùng template mặc định của GeneratePress.
Thực ra, cách hiển thị mặc định của GP không tệ, lại dễ dùng hơn so với khi sử dụng GP Elements, nên nếu thích bạn có thể để nguyên như vậy.
Ngoài 3 phần tùy chọn ở trên, phía dưới còn có một số mục thú vị nữa:
Như bạn thấy, chúng ta có Use ifinite scroll – tùy chọn load trang không giới hạn thay vì dùng pagination, còn tiếp theo là tùy chọn Featured Image: vị trí hiển thị và size của ảnh featured cho mỗi bài viết.
Những cái này bạn có thể thử lựa chọn sao cho đúng ý mình, nhưng nói chung để mặc định là lựa chọn phù hợp.
Cuối cùng trong phần Layout -> Blog là tùy chọn hiển thị danh sách dạng nhiều cột, nếu bật lên thì chúng ta có thể chọn số cột hiển thị, kèm tùy chọn bài viết đầu tiên hiển thị nổi bật (Featured Post):
Nếu bật tùy chọn Display posts in columns kể trên, thì nếu bạn chọn Make first post featured để bài viết đầu tiên hiển thị trên độ rộng gấp đôi, thì cần lựa chọn Columns là 2, nếu chọn 3, 4, 5 thì sẽ có hiện tượng các bài viết bên dưới tràn lên trên, không còn đẹp nữa:
Nhưng, tùy chọn Display posts in columns một khi đã bật lên thì nó áp dụng không chỉ trên blog/archive pages mà mọi nơi khác có dùng Query Loop để hiển thị danh sách bài viết.
Query Loop là tính năng được GenerateBlocks hỗ trợ để hiển thị danh sách bài viết trên Gutenberg, mặc định trên web mẫu Marketer, phần Sidebar cũng có danh sách bài viết (Latest Posts), và nó dùng Query Loop block để hiển thị.
Vậy nên, khi ta chọn bài viết ở blog/archive pages hiển thị dạng 2 cột thì query loop để hiển thị latest posts ở Sidebar cũng hiển thị thành 2 cột và tạo ra thiết kế không như mong muốn:
Ta có thể khắc phục vấn đề này bằng cách tránh dùng Query Loop block để hiển thị bài viết ở Sidebar, thay vào đó dùng Latest Posts Block – mặc định của Gutenberg Editor, nhưng việc hiển thị và tùy chỉnh nội dung sẽ không tốt bằng Query Loop block mà GenerateBlocks hỗ trợ.
Nếu dùng Latest Posts block thay cho Query Loop block, ta cần mở Widgets lên, xóa Query Loop block và thêm vào Latest Posts, như hình dưới:
Nếu bạn chọn chỉ hiển thị tiêu đề thôi thì khá ok, nhưng nếu muốn hiển thị cả ảnh thumbnail như ở trên Query Loop block thì bạn cần chỉnh lại kích thước ảnh thích hợp, như hình này:
Kết quả nhìn khá giống khi dùng Query Loop block, nhưng khác biệt là hiển thị ở giao diện tablet không tốt bằng, chưa kể Latest posts block không cho phép bạn lọc riêng các bài viết theo category hay tag hoặc thêm các điều kiện nâng cao khác:
Như vậy, với cách sử dụng template thiết kế mặc định của GeneratePress theme, tùy chỉnh trên Customize mà không dùng GP Elements thì ta có thể tạo ra 2 kiểu Layout khá tốt cho trang Blog và Archive Pages.
Thứ nhất là kiểu Blog List thông thường:
Và kiểu 2 cột với bài viết đầu tiên đánh dấu là Featured với độ rộng gấp đôi:
Nếu bạn thấy ok với 2 kiểu này, không cần thay đổi vị trí các thành phần thì có thể dùng luôn, không cần đụng gì tới GP Elements.
Nhưng, như đã nói, với thiết kế mặc định của GeneratePress cho Blog Layout thì không có tùy chọn để thay đổi vị trí các thành phần nội dung, ví dụ nếu bạn muốn hiển thị Category, Tag, Số Comments ngay ở bên dưới tiêu đề bài viết, bên cạnh Ngày tháng và Tác giả, thì trên Customize không hỗ trợ gì được.
Vì vậy mà GP Elements là thứ chúng ta cần khi muốn tạo thiết kế layout theo ý mình.
Ở phần tiếp theo, ta sẽ thực hành:
Sử dụng GP Elements để thiết kế Blog Layout GeneratePress
Hẹn gặp lại bạn vài ngày nữa nhé!
