Việc thêm hình ảnh phân loại hoặc icon category vào trang WordPress có thể giúp các category của bạn nổi bật hơn.
Tuy nhiên, WordPress không cung cấp option upload những hình ảnh này theo mặc định. Nó chỉ hiển thị tên category hoặc tên phân loại trên các trang lưu trữ. Điều này có thể trông đơn điệu và nhàm chán.
Trong hướng dẫn của WPBeginner Việt Nam, WPBeginner Việt Nam sẽ chỉ cho bạn cách thêm hình ảnh phân loại hoặc icon category vào WordPress. Bạn cũng sẽ học cách hiển thị chúng trên các trang lưu trữ của mình, giúp website của bạn hấp dẫn và tối ưu với người dùng hơn.
Tại sao nên thêm hình ảnh phân loại vào WordPress?
Theo mặc định, website WordPress của bạn không có option thêm hình ảnh cho phân loại, chẳng hạn như category và tag (hoặc bất kỳ phân loại custom nào khác).
Nó sử dụng tên phân loại ở mọi nơi, bao gồm cả kho lưu trữ category hoặc các trang lưu trữ phân loại.
Trông chán quá.
Nếu các trang phân loại của bạn nhận được nhiều lưu lượng tìm kiếm, bạn có thể muốn làm cho chúng trông hấp dẫn hơn.
Chúng tôi đã thấy những trang nhàm chán với nhiều văn bản chuyển thành những trang hấp dẫn chỉ bằng cách thêm hình ảnh có liên quan. Không phải vì hình ảnh đặc biệt mà vì con người thích tín hiệu trực quan hơn văn bản.
Bạn có thể thêm hình ảnh phân loại hoặc icon category để làm cho các trang này tối ưu và hấp dẫn hơn với người dùng.
Một ví dụ điển hình là website như NerdWallet sử dụng icon category ở tiêu đề:
Bạn cũng có thể sử dụng nó để tạo các phần điều hướng đẹp mắt trên trang chủ của mình.
Sau đây là một ví dụ từ website của Bankrate:
Sau đây, chúng ta hãy cùng xem cách thêm hình ảnh phân loại vào WordPress một cách dễ dàng.
Dễ dàng thêm hình ảnh phân loại trong WordPress
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt Thể loại Hình ảnh plugin. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của WPBeginner Việt Nam về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn chỉ cần đi đến Bài viết » Thể loại trang. Bạn sẽ thấy plugin sẽ hiển thị hình ảnh giữ chỗ cho các category hiện có của bạn.
Để chọn icon category của riêng bạn, bạn cần nhấp vào link Chỉnh sửa bên dưới category.
Trên trang Chỉnh sửa category, hãy cuộn xuống cuối trang và bạn sẽ tìm thấy form để upload hình ảnh phân loại của riêng bạn.
Chỉ cần nhấp vào nút ‘Tải lên/Thêm hình ảnh mới’ để upload hình ảnh bạn muốn sử dụng cho category cụ thể đó.
Đừng quên nhấp vào nút ‘Thêm category’ hoặc ‘Cập nhật’ để Save Changes.
Tiếp theo, bạn có thể lặp lại quy trình để tải hình ảnh lên cho các category khác. Bạn cũng có thể tải hình ảnh lên cho tag của mình và bất kỳ phân loại nào khác.
Vấn đề là sau khi thêm hình ảnh, nếu bạn truy cập vào trang category, bạn sẽ không thấy hình ảnh category của mình ở đó.
Để hiển thị nó, bạn sẽ cần phải chỉnh sửa theme WordPress hoặc theme con hoặc thêm code bằng plugin WPCode.
Chúng tôi sẽ chỉ cho bạn cả hai phương pháp và bạn có thể chọn phương pháp nào bạn thấy dễ hơn.
Tùy chọn 1. Hiển thị icon hình ảnh category bằng WPCode (Khuyến nghị)
Phương pháp này dễ hơn vì bạn không phải tìm ra file theme nào cần sửa đổi và bạn có thể thêm code một cách an toàn mà không làm hỏng website của mình.
Nó cũng được khuyến khích cho những người dùng đang sử dụng theme block có hỗ trợ trình chỉnh sửa website.
Đầu tiên, bạn cần cài đặt và kích hoạt Mã WP plugin. Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách cài đặt plugin WordPress.
Sau khi kích hoạt, hãy vào trang WPCode » + Thêm đoạn code và nhấp vào nút Sử dụng đoạn code bên dưới hộp ‘Thêm code custom của bạn (Đoạn code mới)’.
Trên màn hình tiếp theo, hãy đặt tiêu đề cho đoạn trích để giúp bạn nhận dạng nó.
Sau đó, chọn đoạn code PHP làm loại code của bạn.
Trong hộp Xem trước code, hãy sao chép và dán đoạn code sau:
if( is_category() ) { ?>
![]("<?php)
" alt="" / >
Tiếp theo, cuộn xuống phần Chèn và chọn Mã ngắn làm phương pháp Chèn.
Bạn sẽ thấy WPCode tự động hiển thị một shortcode. Tuy nhiên, bạn cũng có thể tạo một shortcode custom để dễ nhớ.
Tiếp theo, nhấp vào nút ‘Sao chép’ để có shortcode custom.
Bây giờ bạn có thể sử dụng shortcode này để hiển thị hình ảnh category trên các trang lưu trữ của mình.
Thêm Shortcode vào Site Editor
Nếu bạn đang sử dụng theme block có hỗ trợ trình chỉnh sửa website, hãy chuyển đến Xuất hiện » Biên tập viên trang để khởi chạy Trình chỉnh sửa website.
Tại đây, bạn có thể thêm block shortcode ngay trước block Tiêu đề lưu trữ.
Bây giờ hãy dán shortcode mà bạn đã sao chép trước đó vào block shortcode.
Đừng quên lưu các thay đổi để áp dụng chúng. Bây giờ bạn có thể truy cập trang lưu trữ category của mình để xem shortcode đang hoạt động.
Đừng lo lắng nếu hình ảnh trông không đúng. Chúng tôi sẽ chỉ cho bạn cách sửa lỗi sau bằng cách sử dụng CSS custom.
Tùy chọn 2. Hiển thị icon hình ảnh category theo cách thủ công
Đối với phương pháp này, bạn sẽ cần thêm code custom vào file theme WordPress của mình.
Nếu đây là lần đầu tiên bạn chỉnh sửa file WordPress, thì bạn có thể muốn xem hướng dẫn của WPBeginner Việt Nam về cách sao chép và dán code vào WordPress.
Đầu tiên, bạn cần kết nối với trang WordPress của mình bằng trình quản lý file hosting WordPress hoặc FTP.
Sau khi kết nối, bạn sẽ cần tìm mẫu chịu trách nhiệm hiển thị kho lưu trữ phân loại của mình. Đây có thể là các file archives.php, category.php, tag.php hoặc taxonomy.php.
Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách tìm file cần chỉnh sửa trong theme WordPress.
Sau khi tìm thấy file, bạn sẽ cần tải file đó xuống máy tính và mở trong trình soạn thảo văn bản như Notepad hoặc TextEdit.
Bây giờ hãy dán đoạn code sau vào nơi bạn muốn hiển thị hình ảnh phân loại của mình. Thông thường, bạn sẽ muốn thêm nó trước tiêu đề phân loại hoặc the_archive_title() nhãn.
" alt="" / >
Sau khi thêm code, bạn cần lưu file này và tải lại lên website của mình bằng FTP.
Bây giờ bạn có thể truy cập trang lưu trữ phân loại để xem cách nó hiển thị hình ảnh phân loại của bạn. Đây là cách nó trông như thế nào trên trang lưu trữ demo của WPBeginner Việt Nam.
Bây giờ, nó vẫn có thể trông kỳ cục, nhưng đừng lo lắng. Bạn có thể định dạng nó bằng một số CSS custom.
Tạo kiểu icon category bằng CSS custom
Sau khi bạn đã thêm Biểu tượng category hoặc hình ảnh Phân loại vào theme WordPress, hình ảnh của bạn có thể trông không đẹp mắt.
Để khắc phục điều đó, bạn sẽ cần thêm code CSS để căn chỉnh cho đúng.
Nếu đây là lần đầu tiên bạn thêm code CSS vào WordPress, hãy xem hướng dẫn dành cho người mới bắt đầu về cách thêm CSS custom vào WordPress.
Đây là code CSS custom mà WPBeginner Việt Nam sử dụng cho hình ảnh phân loại.
img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}
Tùy thuộc vào theme của bạn, bạn cũng có thể cần định dạng các thành phần xung quanh như tiêu đề lưu trữ, tiêu đề phân loại và mô tả.
Chúng tôi chỉ đơn giản gói tiêu đề và mô tả lưu trữ phân loại của mình trong một
.taxonomy-title-description {
display: inline-block;
padding: 18px;
}
Here is how it looked afterward on our test website.
Loại trừ Phân loại khỏi Hiển thị Hình ảnh Phân loại
Hiện nay, một số người dùng có thể chỉ muốn sử dụng hình ảnh phân loại cho các phân loại cụ thể.
Ví dụ, nếu bạn điều hành một cửa hàng trực tuyến sử dụng WooCommerce, thì bạn có thể muốn loại trừ category sản phẩm.
Chỉ cần quay lại trang Danh mục Hình ảnh trong khu vực quản trị WordPress và kiểm tra các phân loại bạn muốn loại trừ.
Đừng quên nhấp vào nút 'Lưu thay đổi' để lưu cài đặt của bạn.
Chúng tôi hy vọng bài viết này giúp bạn biết cách dễ dàng thêm hình ảnh phân loại vào WordPress. Bạn cũng có thể muốn xem các mẹo và plugin hữu ích cho category WordPress hoặc bài viết của WPBeginner Việt Nam về cách thay đổi thứ tự category trong WordPress.
Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên Twitter Và Facebook.
Tiết lộ: Nội dung của WPBeginner Việt Nam được người đọc hỗ trợ. Điều này có nghĩa là nếu bạn nhấp vào một số link của WPBeginner Việt Nam, thì WPBeginner Việt Nam có thể kiếm được hoa hồng. Xem cách WPBeginner được tài trợ, lý do tại sao nó quan trọng và cách bạn có thể hỗ trợ WPBeginner Việt Nam. Đây là quy trình biên tập của WPBeginner Việt Nam.
