Wordpress

Hiển thị bài viết cùng chuyên mục [Genesis wordpress]

Đối với website wordpress sử dụng Genesis Framework, hiển thị bài viết cùng chuyên mục không quá khó khăn. Một website wordpress, tất nhiên những chuyên mục (Category) bạn tạo ra phải có ít nhất nhiều một. Vậy làm thế nào để thêm và hiển thị những nội dung liên quan trong cùng chuyên mục trên mỗi bài viết? Hãy xem cách hướng dẫn sau của blog để tham khảo qua nhé!

Hiển thị bài viết cùng chuyên mục

Việc hiển thị bài viết liên quan tạo nên tính chuyên nghiệp, đa dạng hơn cho website của bạn, giúp tăng lượt xem và giảm tỷ lệ thoát cho website. Đặc biệt nếu sử dụng hợp lý sẽ rất có lợi cho SEO. Mình đã có đề cập đến tác dụng của nó trong bài viết trước nên sẽ không nhắc lại.

Bài viết cùng cùng chuyên mục là 1 ví dụ của bài viết liên quan, thông thường khi nói đến bài viết liên quan thì sẽ hiểu rằng: đó là những bài viết thuộc cùng chuyên mục và thẻ tags. Nhưng đối với bài này mình chỉ cho chúng hiển thị những nội dung cùng chuyên mục trên bài viết, và loại bỏ những nội dung liên quan đối với thẻ tags.

Đối với Genesis Framework nói riêng và wordpress nói chung, có rất nhiều plugin cho phép chúng ta làm điều này, tuy nhiên việc sử dụng plugin nhiều sẽ ảnh hưởng đến tốc độ của website, đó là điều tối kị, do đó nếu hạn chế được bao nhiêu plugin thì hãy tận dụng. Mình sẽ hướng dẫn các bạn thêm bài viết cùng chuyên mục kèm hình ảnh thu nhỏ (thumbnail) mà không cần sử dụng đến Plugin đối với website Genesis Framework.

Hiển thị bài viết cùng chuyên mục

Trình tự tiến hành như sau:

1. Khai báo kích thước hình ảnh thumbnail cho file Functions.php.
2. Thêm code PHP vào file Functions.php của child theme.
3. Thêm hình code css tạo dáng cho bài viết cùng chuyên mục.

Bây giờ chúng ta bắt đầu thực hiện:

Bước 1: Khai báo kích thước hình ảnh thumbnail cho file Functions.php.

Đối với Genesis, kích thước đề nghị được đưa ra là 100×100, tuy nhiên tùy theo mỗi child theme, bạn có thể thay đổi kích thước hình ảnh cho phù hợp, tìm đến tệp tin Functions.php của child theme: Giao diện -> Sửa -> Functions.php, add đoạn code sau vào cuối file Functions.php:

 

Nếu thấy hình ảnh chưa phù hợp với bố cục, child theme, bạn thay đổi kích thước hình ảnh khai bao bên trên để thumbnail được hiển thị đẹp hơn. Cần thiết nữa thì lấy 1 hình ảnh với kích thước như khai báo, chẳng hạn 100×100, đặt tên related.png và upload lên thư mục Image của Child theme để mặc định cho những bài viết không có hình ảnh thu nhỏ.

Bước 2: Thêm code PHP vào file Functions.php của child theme.

Sau khi add hình ảnh thu nhỏ xong, cũng tại file Function.php, bạn tiến hành add đoạn code sau vào cuối tập tin  Function.php:

Nên xem: Làm việc với Menu trong WordPress

Mặc định code trên số bài viết hiển thị là 4, bạn có thể thay đổi tại mục: showposts.

Bước 3: Thêm hình code css tạo dáng cho bài viết cùng chuyên mục.

Cuối cùng, chúng ta tiến hành thêm code css vào Child theme để trình bày phong cách hiển thị. Tìm đến: Giao diện -> Sửa -> Style.css hoặc thêm vào tùy chọn bổ sung CSS tại Giao diện -> Tùy biến -> CSS bổ sung, dán code sau vào cuối:

Thay đổi kích thước max-width: 175px để phù hợp hơn, ngoài ra bạn có thể tùy biến, thay đổi CSS theo phong cách của bạn.

Bây giờ hãy Save tất cả và vào 1 bài viết bất kỳ xem thế nào, đây là kết quả:

Hiển thị bài viết cùng chuyên mục

Kết luận: Chỉ vài thao tác bạn có thể hiển thị bài viết cùng chuyên mục mà không cần đến Plugin, hi vọng bài viết sẽ cần thiết cho những bạn đang tìm kiếm hướng giải quyết cho website của mình. Nếu bạn muốn sử dụng plugin tạo các bài viết liên quan để đơn giản hóa hơn thao tác, có thể tham khảo thêm các bài viết về plugin bài viết liên quan cho wordpress nhé. Chúc bạn thành công!

Nếu bạn thấy bài viết hữu ích, hãy ghé thăm thường xuyên và subscribe Alo Tôi để cập nhật những bài viết hay nhất, mới nhất. Cảm ơn bạn rất nhiều

Đăng từ 5 năm trước

Hiếu Lê

Mình là Hiếu Lê. Alo Tôi là blog cá nhân, nơi chia sẻ những thủ thuật, kiến thức mà mình hiểu và tìm hiểu. Hy vọng, nó sẽ giúp ích được bạn


Tìm thêm thông tin về tôi:

2
BÌNH LUẬN

avatar
1000
Xem bình luận: Mới nhất Cũ nhất
Duy Tâm

Mình chẳng thấy code đâu cả

Tùng
Guest

may quá, đang cần nó. mà sao cái form này nó không lưu info của mình nhỉ, cứ mỗi lần comment phải nhập tên với mail