#tuts: Hướng dẫn làm thẻ tag có hình ảnh giống tinhte.vn trên wordpress

This entry is part 8 of 8 in the series Wordpress for Beginner

Thẻ tag có hình ảnh

Sau khi tinhte.vn cập nhật phiên bản 6.0 kèm theo nhiều sự thay đổi lớn về giao diện và khả năng tương tác. Tớ thấy có hai tính năng khá thú vị và muốn áp dụng cho blog của mình.
Do đó, ngày 06/03/2019 tớ đã quyết định cập nhật cho sharecodeweb.net thêm hai tính năng mới cho blog:

  1. Hiển thị bài viết theo dạng ngày này năm xưa
  2. Hiển thị các thẻ tag phổ biến có hình ảnh

Với tính năng hiển thị bài viết theo dạng ngày này năm xưa – các bài viết cũ theo ngày sẽ hiển thị để các anh em tiện theo dõi hơn. Phần trình bày cách hiển thị mình chưa css nhiều nên trông nó chưa được đẹp lắm. Sau này có thời gian mình sẽ trau chuốt hơn.

Tính năng thứ hai, hiển thị tag phổ biến có hình ảnh kèm theo để minh họa. Nhằm làm tăng độ tương tác với các bài viết khác trên blog, đồng thời giúp anh em đọc tiện theo dõi các bài viết hơn. Demo hai tính năng này các anh em có thể xem ngay bên phần sidebar bên phải của blog để trải nghiệm nhé.

Ngày hôm nay tớ chia sẻ cho anh em cách làm thẻ tags có hình ảnh trên wordpress giống sharecodeweb.net.

Về cơ bản, wordpress chưa cho phép anh em thêm ảnh cho các category, term, hay thẻ tags. Do đó, để đáp ứng được yêu cầu của bài này, chúng ta có hai cách cơ bản để thực hiện:

  1. Làm thẻ tag có hình ảnh theo cách thủ công bằng tay
  2. Sử dụng plugin để gán ảnh cho thẻ tag

Làm thẻ tag có hình ảnh theo cách thủ công

Thủ công thì mình phải đi “code” từ đầu rồi. Tuy nhiên việc “code” ở đây nói cho oai thôi chứ chỉ dừng lại ở HTML và CSS :))
OK! Cấu trúc HTML của chúng ta sẽ gồm có các thẻ như thế này:

Mỗi một tag chúng ta sẽ sử dụng một thẻ divclass="item" làm thẻ chính. Bên trong chúng ta sử dụng thẻ liên kết để khi người dùng kích chuột vào ảnh hay vào tags đều có thể dẫn link được.

Tiếp theo, chúng ta sử dụng hai thẻ div: một dành cho hiển thị ảnh, một dành cho hiển thị thông tin về tags.

Và thử CSS một chút cho phù hợp với website của anh em:

Cuối cùng, phương pháp thủ công nghĩa là anh em sử dụng ngay tính năng tạo Widget trong phần quản lý giao diện của WordPress. Cụ thể ở đây anh em tạo mới một widget dạng HTML tùy chỉnh. Sau đó dán đoạn mã trên vào và chạy thôi. =))

Ưu điểm

  • Thao tác nhanh, dễ dàng cho các anh em chỉ quen làm với HTML và CSS mà không quen với lập trình wordpress.
  • Linh hoạt trong việc mở rộng thêm các kiểu khác ngoài thẻ tags.

Hạn chế:

  • Nếu anh em muốn hiển thị nhiều tags thì cách này đúng là nông dân =))
  • Không thể thiết lập tự động hiển thị các loại tags vì được fix cứng trong HTML. Muốn sửa phải vào HTML sửa. (đó cũng là ưu điểm chứ nhỉ)

Code đầy đủ như sharecodeweb.net ở dưới đây:

Sử dụng plugin để gán ảnh cho thẻ tag

Phần tiếp theo sẽ dành cho anh em nào thấy việc thủ công trên kia là nhàm chán. Anh em có thể cài thêm plugin để hỗ trợ việc này.

Trước tiên anh em cần cài đặt và kích hoạt plugin Category and Taxonomy Image. Plugin này cho phép tùy biến các category, tags để anh em có thể chèn thêm ảnh minh họa.
Sau khi cài đặt, anh em vào phần quản lý danh mục, tags để tiến hành thêm ảnh cho từng loại nhé.

category images

Để hiển thị trên website, anh em vào WP-admin -> Settings menu tạo thêm một menu dạng trang “Taxonomy Image”.

Tiếp tục vào WP-admin -> Settings -> Taxonomy Image lựa chọn những taxonomy mà anh em muốn hiển thị ra ngoài.

Anh em có thể sử dụng hàm sau cho templates của mình để lấy ra ảnh của category/term/tags:

ở đây $term_id là category/tags id…

Một plugin thứ hai anh em có thể sử dụng được là Taxonomy Images. Tuy nhiên plugin này hiện tại đã được phát triển cách đây khá lâu nhưng đã được public dạng nguồn mở trên Github. ANh em có thể download về và tùy biến cho phù hợp với site của mình. Vì mình đánh giá bộ plugin này cho phép anh em tùy biến khá cao.

Kết luận

Như vậy là anh em có thể có hai cách để hiển thị ảnh cho các danh mục, thẻ tag trên site wordpress của mình. Mỗi cách sẽ có ưu và nhược điểm riêng, tùy thuộc vào trang website và mục đích của anh em.

Chúc anh em có thêm website ngày càng hoàn thiện!

Series Navigation<< Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com