ที่ใช้ได้ คือ https://wordpress.org/plugins/sf-taxonomy-thumbnail/
https://www.hongkiat.com/blog/add-thumbnails-wordpress-categories-tags/
ลงปลั๊กอินเสร็จก็เข้าไปใส่รูปประจำหมวดหมู่
แล้วใส่ code แสดงผลในไฟล์
How To Display Thumbnails
Get Terms list
First we use the get_terms()
function to get lists of terms of the specified Taxonomy – in this case we will get the terms from the post category.
1 | <?php $taxonomy = 'category' ; $args = array ( 'orderby' => 'name' , 'order' => 'ASC' , 'hide_empty' => true, 'exclude' => array (), 'exclude_tree' => array (), 'include' => array (), 'number' => '' , 'fields' => 'all' , 'slug' => '' , 'parent' => '' , 'hierarchical' => true, 'child_of' => 0, 'childless' => false, 'get' => '' , 'name__like' => '' , 'description__like' => '' , 'pad_counts' => false, 'offset' => '' , 'search' => '' , 'cache_domain' => 'core' , ); $terms = get_terms( $taxonomy , $args ); ?> |
The output is an Array containing information of each term including the term_id
, name
, slug
, term_group
, term_taxonomy_id
, description
, etc. Now, we need to display the term’s name
within the lists using the foreach
loop, as follows.
2 | <?php if (! empty ( $terms ) && !is_wp_error( $terms ) ){ echo '<p>' . $taxonomy . ':</p>' ; echo '<ul>' ; foreach ( $terms as $term ) { echo $term ->name; } echo '</ul>' ; } ?> |
The result looks something like this:
Here we have CSS, HTML, JavaScript, jQuery and PHP. We have attached the respective image (logo or icon) for each of these terms. Now, we need to know how to display them.
Display the Thumbnails
To show the image thumbnail, we will extend the foreach
loop, like from our previous code.
We add the template tag, get_term_thumbnail()
, to get the thumbnail and we also add a link to the term’s archive page.
3 | if ( ! empty ( $terms ) && ! is_wp_error( $terms ) ){ echo '<ul>' ; foreach ( $terms as $term ) { echo '<li><a href="/index.php/' . $taxonomy . '/' . $term ->slug . '">' . $term ->name . get_term_thumbnail( $term ->term_taxonomy_id, $size = 'category-thumb' , $attr = '' ) . '</a></li>' ; } echo '</ul>' ; } |
And the result (after the added CSS) is as shown below:
The plugin has options to choose to retrieve all terms or just terms with thumbnails. To do this, use the parameter below on the get_terms()
function:
4 | $taxonomy = 'category' ; $args = array ( 'with_thumbnail' => true, // true = retrieve terms that has thumbnail, false = retrieve all terms ); $terms = get_terms( $taxonomy , $args ); |
Apply to other taxonomy
As mentioned, you can apply this plugin to not only categories but also other Taxonomy such as the Tags, Link Category, and Custom Taxonomy. This plugin is useful to enable Image Thumbnail on any Taxonomy just like in Post and Page.