Thêm ảnh cho danh mục WordPress với Plugin và không cần Plugin

Bạn có muốn thêm hình ảnh phân loại trong WordPress không? Sau đó, bạn đang ở đúng nơi. Sau đây, tôi sẽ chỉ cho bạn cách thêm hình ảnh vào các thuật ngữ trong mỗi phân loại , ngay cả khi đó là phân loại mặc định hoặc phân loại tùy chỉnh .

Phân loại WordPress là một cách nhóm các bài đăng với số lượng lớn. Nó nhóm các bài đăng dựa trên mối quan hệ. Bạn có thể tạo nhiều đơn vị phân loại như bạn muốn và thêm nhiều thuật ngữ và tạo mối quan hệ.

Theo mặc định, WordPress đi kèm với hai danh mục và thẻ phân loại chính . Bạn cũng có thể thêm hình ảnh vào các đơn vị phân loại mặc định này.

Vì vậy, trong hướng dẫn này, bạn sẽ học cách thêm hình ảnh phân loại trong WordPress hoặc bạn có thể thêm hình ảnh nổi bật vào phân loại.

Chúng ta sẽ tìm hiểu hai phương pháp để thêm hình ảnh phân loại. Phương pháp đầu tiên là sử dụng plugin và phương pháp thứ hai là lập trình mà không sử dụng plugin .

Tại sao bạn nên thêm hình ảnh phân loại WordPress?

Sử dụng hình ảnh phân loại, bạn có thể thêm hình ảnh hoặc hình thu nhỏ nổi bật vào các thuật ngữ trong mỗi phân loại. Và bạn có thể hiển thị chúng ở giao diện người dùng với tên danh mục và có hình thu nhỏ của riêng chúng.

Như tôi đã nói ở trên, WordPress chỉ cho phép hai phân loại chính là Danh mục và Thẻ nhưng hai thứ này không có tùy chọn để thêm hình ảnh nổi bật. Nhưng bạn cũng có thể thêm các hình ảnh nổi bật vào các đơn vị phân loại này.

Bạn cũng có thể tạo loại bài đăng tùy chỉnh và các đơn vị phân loại tùy chỉnh , sau đó nâng cao tính năng cho các đơn vị phân loại tùy chỉnh và cung cấp tùy chọn để thêm các hình ảnh nổi bật cho chúng.

Ví dụ: bạn có loại bài đăng tùy chỉnh Phim và các phân loại của nó là Thể loại, Chất lượng, v.v. Vì vậy, trong phân loại Thể loại, bạn có các loại thuật ngữ khác nhau (như một danh mục) như hư cấu, phi hư cấu, hành động, hài, v.v.

Vì vậy, khi bạn nâng cao chức năng thêm hình ảnh phân loại thì bạn có thể hiển thị chúng ở giao diện người dùng cũng như với tên của chúng. Bạn có thể thiết kế chúng theo yêu cầu của mình bằng cách sử dụng CSS.

Hãy cùng xem cách thêm hình ảnh phân loại trong WordPress bằng hai phương pháp. Đầu tiên, bạn sẽ thấy việc sử dụng các plugin.

Add Taxonomy Images in WordPress – with plugins

In this method, you will learn to add taxonomy images with the help of WordPress plugins.

There are many plugins that you can use to add taxonomy images in WordPress and show at the front end each term has its own images.

So these are plugins list for adding taxonomy images in WordPress, you can use any of them.

In the Advanced Custom Fields (ACF) plugin, you cannot add directly images to taxonomy. You have to make a group of the custom fields and assign that custom field to taxonomy then you can use it.

Here, I’ll use two plugins with step-by-step guide to show you that how to add taxonomy images in WordPress.

First, I will use Advanced Category and Custom Taxonomy Image plugin to show you how to add taxonomy images or thumbnails or icons or featured images whatever you can call.

Using the ‘Advanced Category and Custom Taxonomy Image’ Plugin

• Install the Plugin: you need to install and activate Advanced Category and Custom Taxonomy Image plugin. You can see guide on how to install plugin in wordpress?
• Plugin Setting Page: After activate, you need to navigate Settings > Advanced Category & Custom Taxonomy Image. You will see the list of categories and taxonomies. See the below image.
• Select Taxonomies: So based on the last tutorial on how to create custom taxonomies in wordpress?, we have created the custom taxonomy ‘course_types‘ taxonomy.So I’m going to select that taxonomy to enable the taxonomy images features to that taxonomy. You can select multiple taxonomies for which you want to enable the taxonomy images features.
• Save Settings: After select the taxonomies, save the settings by clicking on the Save Changes button.
• Headover to Taxonomy: Navigate to that taxonomy which you had enabled the taxonomy images featured. In our case My Courses > Course Types and you will see the image upload field option.
• Ready to Add Taxonomy Image: It is ready now to add a taxonomy image. You can add the featured images to all your terms. Use JPEG or PNG optimized images for better website speed performance.It will also give you a php code to print on the front end. See the below image and column for showing the php code to print the image.
• That’s it!!! You can add or edit the taxonomy image and show them on frontend using this
  <?php echo get_taxonomy_image($term_id); ?> code.

Now, we will see how to use Advanced Custom Field (ACF) plugin to add taxonomy images in WordPress.

Using the ‘Advanced Custom Fields’ Plugin

• Install the Plugin: install and activate the Advanced Custom Fields plugin. Check step-by-step guide on how to install wordpress plugin?.
• Navigate to Field Group: Now navigate to Custom Fields > Field Groups
• Create Field Group: click on the Add New button and it will show you new page so click on the Add Field button to create the field and fill the required fields and assign that group to your taxonomy. Let’s see with an image.Fill those fields that are highlighted in above images and then click on the Publish button.
• Field on Taxonomy Page: After publishing the custom field group, you can see the new field appear in your taxonomy page. See the image below.Now you can add and edit taxonomy image and show them on frontend page.
• Display on Frontend: you can show the taxonomy images at frontend using the
  <?php echo get_field('image', $term_id); ?>.

So, we see that, how we can add taxonomy images in wordpress using the plugins. Let’s now look the programmatically view to do same thing.

Add Taxonomy Images in WordPress – without plugins

In this method, you will learn how to add taxonomy images in WordPress without using any plugins. We will do it programmatically using the theme’s functions.php file.

I would recommend using a child theme for any customization or enhancing the functionality. If you don’t have a child theme then you should create it now using this tutorial on how to create a child theme in WordPress?.

Adding taxonomy images programmatically in WordPress, you need to keep in mind some points about action/hook. Because when you hit the hook, it should be referred to as taxonomy slug. The action suffix or prefix must refer to the taxonomy slug. We will see this in the following example.

So, the following action/hook we will use with taxonomy slug.
1. {$taxonomy_slug}_add_form_fields
2. created_{$taxonomy_slug}
3. {$taxonomy_slug}_edit_form_fields
4. edited_{$taxonomy_slug}
5. manage_edit-{$taxonomy_slug}_columns
6. manage_{$taxonomy_slug}_custom_column

So let’s get started.

First, we will add taxonomy images to the default Category taxonomy and we will use ‘category’ as a taxonomy slug.

Add Taxonomy Images to Default Taxonomy (Category)

So, here I’ll show you how to add taxonomy images to default category taxonomy in WordPress. So, I’ll use above those hooks with referring category taxonomy slug.

Step 1: Add Image Field

First thing, we will add a taxonomy custom image field (add/remove) at the end of other fields and will use {$taxonomy_slug}_add_form_fields action hook. So add the following code in the theme’s functions.php file.

Step 2: Save Image Field

In the second step, we will save that custom field for the taxonomy image and will use created_{$taxonomy_slug} hook. In this action hook, we will add a category taxonomy slug as a suffix. So add the following code in the functions.php file.

First, it will check the image_id is set or not, if the image_id is set then it will save the image for your terms.

Step 3: Add Image Field in Edit Form

Now we will add an image field for the edit form. The first step only works for add form. So we also need to add an image field in the edit form.

Edit form structure built-in table form, so we will add <tr> <td> as a part of table structure. Use the {$taxonomy_slug}_edit_form_fields hook with a prefix of taxonomy slug.

Step 4: Update Image Field

We have added the image field to the edit page but it still does not update your taxonomy image. To update the taxonomy image, you have to make another action hook to check whether the image is updated or not.

But wait, do you know the above all code still does not work. When you click on the Add Image button then you will see noting is happening because we don’t have enqueued the media library. So, let’s enqueue the media library with the wp_enqueue_media() function to make it work.

Step 5: Enqueue Media Library

We will add the media library with the wp_enqueue_media() function at only the admin side and then use the wp.media.editor.send.attachment event in our custom jquery code.

The wp.media.editor.send.attachment event will call the default media attachment popup to select the image for taxonomy.

So add the following two functions in your functions.php file. The first function will enqueue the media library and the second function is about to call the wp.media.editor.send.attachment event to open the media library by clicking on the Add Image button.

It will enqueue the media library for the ‘category’ taxonomy. You can make conditions to check for custom taxonomy

So, now when you click on the Add Image button it will open the media library in the popup and you can select the image for your taxonomy.

Step 6: Display Image in Column

All the above code is working fine. Now if you want to display a taxonomy image in the column then you need to make the following action hook. It will display your image in the column with other fields.

Let’s display the value for this column against each term id.

Step 7: Display Image on Frontend

You can show the taxonomy image on the frontend using the get_term_meta() function. It will give you terms image_id then you can use that image_id with wp_get_attachment_image() function to get the terms image. See the below code.

That’s it for default category taxonomy.

Add Taxonomy Images to Custom Taxonomy

To add images to a custom taxonomy, you have to give attention to the action hooks. Because all the above code will be the same but just we have to change the suffix or prefix of the action hook as I listed above.

As in the last article, we have created the custom taxonomy ‘course_type’ for the custom post type. So I will add images to that taxonomy to show you.

So, the following all code together for the custom taxonomy ‘course_types’ as in the tutorial case. You can do for your custom taxonomy by changing the taxonomy slug.

Hope you understand tutorial and learned how you can add taxonomy images with plugin and without plugins in wordpress.

Nguồn: https://yourblogcoach.com/how-to-add-taxonomy-images-in-wordpress/