Thêm ảnh danh mục WordPress

Thêm Ảnh Danh Mục WordPress: Hướng Dẫn Chi Tiết

Khi xây dựng một trang web WordPress, việc tổ chức nội dung một cách khoa học và dễ tìm kiếm là vô cùng quan trọng. Danh mục (categories) đóng vai trò quan trọng trong việc này, giúp bạn phân loại các bài viết theo chủ đề và giúp người dùng dễ dàng điều hướng. Tuy nhiên, một danh mục chỉ có tên và mô tả đôi khi chưa đủ trực quan và hấp dẫn. Thêm ảnh đại diện cho danh mục (category image) là một giải pháp tuyệt vời để làm cho website của bạn trở nên sinh động hơn, cải thiện trải nghiệm người dùng và thu hút sự chú ý.

Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm ảnh danh mục trong WordPress, từ các phương pháp thủ công cho đến sử dụng plugin, cùng với những lưu ý quan trọng để đảm bảo hình ảnh hiển thị tốt và không ảnh hưởng đến hiệu suất website.

Tại Sao Nên Thêm Ảnh Đại Diện Cho Danh Mục?

Trước khi đi vào chi tiết kỹ thuật, hãy cùng tìm hiểu những lợi ích mà ảnh đại diện danh mục mang lại:

Cải thiện trải nghiệm người dùng: Hình ảnh giúp người dùng dễ dàng nhận diện và phân biệt các danh mục, đặc biệt là trên các trang chủ, trang danh mục (category archive) hoặc trong các menu điều hướng.
Tăng tính trực quan và hấp dẫn: Một hình ảnh đẹp và phù hợp sẽ làm cho trang web của bạn trở nên sinh động và chuyên nghiệp hơn, thu hút sự chú ý của khách truy cập.
Hỗ trợ SEO: Mặc dù ảnh danh mục không ảnh hưởng trực tiếp đến thứ hạng tìm kiếm, nhưng nó giúp tăng thời gian ở lại trang web (dwell time) và giảm tỷ lệ thoát trang (bounce rate), những yếu tố gián tiếp có lợi cho SEO.

Các Phương Pháp Thêm Ảnh Danh Mục Trong WordPress

Có nhiều cách để thêm ảnh đại diện cho danh mục trong WordPress. Chúng ta sẽ xem xét ba phương pháp chính:

Sử dụng plugin chuyên dụng.
Sử dụng plugin quản lý trường tùy biến (Custom Fields).
Thêm code vào file functions.php của theme.

Sử Dụng Plugin Chuyên Dụng

Đây là phương pháp đơn giản và được khuyến khích cho người mới bắt đầu. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org, cho phép bạn dễ dàng thêm ảnh đại diện cho danh mục mà không cần phải viết code.

Một số plugin phổ biến:

Category Images: Đây là một plugin đơn giản và dễ sử dụng, cho phép bạn thêm ảnh đại diện cho danh mục một cách nhanh chóng.
Taxonomy Images: Plugin này hỗ trợ thêm ảnh đại diện cho nhiều loại taxonomy khác nhau, bao gồm cả danh mục và thẻ (tags).
WooCommerce Category Images: Nếu bạn sử dụng WooCommerce, plugin này cho phép bạn thêm ảnh đại diện cho danh mục sản phẩm.

Hướng dẫn sử dụng Category Images (ví dụ):

Cài đặt và kích hoạt plugin “Category Images”.
Truy cập vào “Bài viết” > “Các chuyên mục” (Posts > Categories).
Bạn sẽ thấy một trường “Image” (hoặc tên tương tự) trong trang chỉnh sửa danh mục.
Nhấn vào nút “Upload/Add Image” để tải lên hoặc chọn ảnh từ thư viện media.
Cập nhật danh mục.

Sau khi cài đặt và kích hoạt plugin, bạn có thể cần chỉnh sửa template của theme để hiển thị ảnh đại diện danh mục ở vị trí mong muốn. Thường thì plugin sẽ cung cấp các hàm hoặc shortcode để bạn sử dụng trong template.

Sử Dụng Plugin Quản Lý Trường Tùy Biến (Custom Fields)

Các plugin quản lý trường tùy biến, như Advanced Custom Fields (ACF) hoặc Meta Box, cho phép bạn tạo thêm các trường dữ liệu tùy chỉnh cho nhiều loại nội dung khác nhau, bao gồm cả danh mục. Điều này cho phép bạn lưu trữ URL của ảnh đại diện cho mỗi danh mục.

Ưu điểm: Phương pháp này linh hoạt hơn so với plugin chuyên dụng, cho phép bạn tùy biến nhiều hơn về cách hiển thị và sử dụng ảnh danh mục.

Hướng dẫn sử dụng Advanced Custom Fields (ACF):

Cài đặt và kích hoạt plugin Advanced Custom Fields (ACF).
Truy cập vào “Custom Fields” > “Add New”.
Đặt tên cho field group (ví dụ: “Category Images”).
Thêm một trường mới với loại “Image”. Đặt tên trường (ví dụ: “category_image”).
Trong phần “Location”, chọn “Taxonomy Term” is equal to “Category”.
Lưu field group.

Sau khi tạo field group, bạn có thể truy cập vào “Bài viết” > “Các chuyên mục” và bạn sẽ thấy trường “category_image” trong trang chỉnh sửa danh mục. Bạn có thể tải lên hoặc chọn ảnh từ thư viện media.

Để hiển thị ảnh đại diện danh mục trong template, bạn cần sử dụng hàm get_field() của ACF:


  <?php
  $term_id = get_queried_object_id();
  $image = get_field('category_image', 'category_' . $term_id);

  if( !empty($image) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
  <?php endif; ?>

Đoạn code này sẽ lấy ID của danh mục hiện tại, lấy URL của ảnh đại diện từ trường “category_image” và hiển thị ảnh nếu nó tồn tại.

Thêm Code Vào File `functions.php` Của Theme

Đây là phương pháp phức tạp nhất, đòi hỏi bạn phải có kiến thức về PHP và WordPress theme development. Tuy nhiên, nó cho phép bạn kiểm soát hoàn toàn cách thêm và hiển thị ảnh đại diện danh mục.

Lưu ý quan trọng: Trước khi chỉnh sửa file functions.php, hãy sao lưu file này hoặc sử dụng child theme để tránh mất dữ liệu hoặc làm hỏng website.

Các bước thực hiện:

Thêm một trường tùy biến vào trang chỉnh sửa danh mục bằng action hook category_add_form_fields và category_edit_form_fields.
Lưu giá trị của trường tùy biến bằng action hook edited_category và create_category.
Tạo một hàm để lấy URL của ảnh đại diện danh mục.
Chỉnh sửa template của theme để hiển thị ảnh đại diện danh mục.

Ví dụ code (chỉ mang tính chất tham khảo):


  <?php
  // Thêm trường upload ảnh vào form thêm danh mục
  function add_category_image_field( $taxonomy ) {
    ?>
    <div class="form-field term-group">
      <label for="category-image-id"><?php _e('Hình ảnh danh mục', 'your-text-domain'); ?></label>
      <input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
      <div id="category-image-wrapper"></div>
      <p>
        <input type="button" class="button button-secondary category-image-upload" value="<?php _e( 'Chọn/Tải lên ảnh', 'your-text-domain' ); ?>" />
        <input type="button" class="button button-secondary category-image-remove" value="<?php _e( 'Xóa ảnh', 'your-text-domain' ); ?>" />
      </p>
    </div>
    <?php
  }
  add_action( 'category_add_form_fields', 'add_category_image_field', 10, 2 );

  // Thêm trường upload ảnh vào form chỉnh sửa danh mục
  function edit_category_image_field( $term, $taxonomy ) {

    $image_id = get_term_meta ( $term->term_id, 'category_image_id', true );
    $image_url = wp_get_attachment_image_src( $image_id, 'thumbnail' );
    $image_url = $image_url ? $image_url[0] : '';

    ?>
    <tr class="form-field term-group-wrap">
      <th scope="row" valign="top"><label for="category-image-id"><?php _e('Hình ảnh danh mục', 'your-text-domain'); ?></label></th>
      <td>
        <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo esc_attr( $image_id ); ?>">
        <div id="category-image-wrapper">
          <?php if ( $image_url ): ?><img src="<?php echo esc_url( $image_url ); ?>" width="100" height="100"><?php endif; ?>
        </div>
        <p>
          <input type="button" class="button button-secondary category-image-upload" value="<?php _e( 'Chọn/Tải lên ảnh', 'your-text-domain' ); ?>" />
          <input type="button" class="button button-secondary category-image-remove" value="<?php _e( 'Xóa ảnh', 'your-text-domain' ); ?>" />
        </p>
      </td>
    </tr>
    <?php
  }
  add_action( 'category_edit_form_fields', 'edit_category_image_field', 10, 2 );

  // Lưu giá trị của trường upload ảnh
  function save_category_image( $term_id ) {
    if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
      $image = sanitize_text_field( $_POST['category-image-id'] );
      update_term_meta ( $term_id, 'category_image_id', $image );
    } else {
      delete_term_meta ( $term_id, 'category_image_id' );
    }
  }
  add_action( 'edited_category', 'save_category_image', 10, 1 );
  add_action( 'create_category', 'save_category_image', 10, 1 );

  // Hàm lấy URL của ảnh danh mục
  function get_category_image_url( $term_id = null ) {
    if ( !$term_id ) {
      $term_id = get_queried_object_id();
    }

    $image_id = get_term_meta ( $term_id, 'category_image_id', true );
    $image_url = wp_get_attachment_image_src( $image_id, 'thumbnail' );

    return $image_url ? $image_url[0] : '';
  }

  // Thêm Javascript để xử lý upload ảnh
  function load_media_files() {
    wp_enqueue_media();
    wp_enqueue_script('category-image', get_stylesheet_directory_uri() . '/js/category-image.js', array('jquery'), null, false);
  }
  add_action( 'admin_enqueue_scripts', 'load_media_files' );
  ?>

Bạn cần tạo file category-image.js trong thư mục /js/ của theme để xử lý việc tải lên ảnh:


  jQuery(document).ready(function($){
    $('.category-image-upload').click(function(e) {
      e.preventDefault();
      var image = wp.media({
        title: 'Upload Image',
        multiple: false
      }).open()
      .on('select', function(e){
        var uploaded_image = image.state().get('selection').first();
        var image_url = uploaded_image.toJSON().url;
        var image_id = uploaded_image.toJSON().id;

        $('#category-image-id').val(image_id);
        $('#category-image-wrapper').html('<img src="'+image_url+'" width="100" height="100">');
      });
    });

    $('.category-image-remove').click(function(e) {
      e.preventDefault();
      $('#category-image-id').val('');
      $('#category-image-wrapper').html('');
    });
  });

Sau khi thêm code vào functions.php và tạo file category-image.js, bạn có thể chỉnh sửa template của theme để hiển thị ảnh đại diện danh mục bằng hàm get_category_image_url():


  <?php
  $term_id = get_queried_object_id();
  $image_url = get_category_image_url( $term_id );

  if( $image_url ): ?>
    <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php single_cat_title(); ?>" />
  <?php endif; ?>

Lưu ý: Đây chỉ là một ví dụ cơ bản. Bạn có thể cần điều chỉnh code để phù hợp với theme của mình.

Lưu Ý Khi Sử Dụng Ảnh Danh Mục

Để đảm bảo ảnh đại diện danh mục hiển thị tốt và không ảnh hưởng đến hiệu suất website, hãy lưu ý những điều sau:

Chọn kích thước ảnh phù hợp: Không nên sử dụng ảnh quá lớn, vì nó sẽ làm chậm tốc độ tải trang. Kích thước ảnh nên phù hợp với vị trí hiển thị.
Tối ưu hóa ảnh: Sử dụng các công cụ nén ảnh để giảm dung lượng ảnh mà không làm giảm chất lượng quá nhiều.
Sử dụng định dạng ảnh phù hợp: Nên sử dụng định dạng JPEG cho ảnh có nhiều màu sắc và định dạng PNG cho ảnh có ít màu sắc hoặc cần độ trong suốt.
Thêm thuộc tính alt cho ảnh: Thuộc tính alt giúp mô tả nội dung của ảnh cho các trình tìm kiếm và người dùng sử dụng trình đọc màn hình.

Kết Luận

Thêm ảnh đại diện cho danh mục là một cách tuyệt vời để cải thiện trải nghiệm người dùng, tăng tính trực quan và hấp dẫn cho website WordPress của bạn. Bạn có thể sử dụng plugin chuyên dụng, plugin quản lý trường tùy biến hoặc thêm code vào file functions.php để thực hiện việc này. Hãy chọn phương pháp phù hợp với kỹ năng và nhu cầu của bạn, và đừng quên tối ưu hóa ảnh để đảm bảo hiệu suất website tốt nhất.

Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để thêm ảnh danh mục trong WordPress một cách thành công. Chúc bạn thành công!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Thêm ảnh danh mục WordPress