Миниатюры для элементов таксономии (WP_TERM_IMAGE)
В этой статье я поделюсь кодом, который добавляет возможность устанавливать миниатюры для элементов таксономии, как встроенных (метки, категории), так и пользовательских. Код протестирован и улучшен, чтобы вам было проще работать с ним.
Как добавить или изменить изображение элемента таксономии
Чтобы добавить, загрузить и изменить изображение элемента таксономии, достаточно нажать на само изображение — это кнопка. После этого откроется стандартное окно медиафайлов WordPress, и картинка будет загружена в библиотеку медиа. Однако в отличие от изображений записей, она не будет прикреплена к термину — это минус, но пока так.
По умолчанию код работает для всех общедоступных таксономий (категории, метки и любые ��уществующие произвольные таксономии). Вы можете указать конкретные таксономии в коде, для которых он должен работать.
Вот как это будет выглядеть:
Существует множество устаревших и некачественных руководств по этой теме. В некоторых из них данные сохраняются в таблице опций, а не в метаданных. Напомню, что метаданные для элементов таксономии появились с версии WP 4.4, и все данные термина следует сохранять там, так как это правильно и удобно.
Код
В следующем коде реализована основная логика для работы с изображениями элементов таксономии.
<?php
namespace Kama;
use WP_Term;
/**
- Возможность загружать изображения для терминов (элементы таксономий: категории, метки).
- Примеры использования: https://github.com/doiftrue/Term_Meta_Image
- @author Kama (wp-kama.com)
- @version 3.5.2
*/
interface WP_Term_Image_Interface {
public static function init( $args = [] );
public static function get_image_id( $term );
}
class WP_Term_Image implements WP_Term_Image_Interface {
private $args;
private static $default_args = [
'taxonomies' => [],
'noimage_src' => "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 1000 1000'%3E%3Cpath fill='%23bbb' d='M430 660 l0 -90 -90 0 -90 0 0 -70 0 -70 90 0 90 0 0 -85 0 -85 70 0 70 0 0 85 0 85 90 0 90 0 0 70 0 70 -90 0 -90 0 0 90 0 90 -70 0 -70 0 0 -90z'%3E%3C/path%3E%3C/svg%3E",
];
private static $meta_key = '_thumbnail_id';
private static $attach_meta_key = 'image_of_term';
private function __construct(){}
public static function init( $args = [] ){
static $inst;
$args = array_filter( (array) $args );
$args = array_intersect_key( $args, self::$default_args );
$inst_key = md5( serialize( $args ) );
if( empty( $inst[ $inst_key ] ) ){
$inst[ $inst_key ] = new self();
$inst[ $inst_key ]->set_args( $args );
$inst[ $inst_key ]->register_hooks();
}
return $inst[ $inst_key ];
}
private function set_args( array $args = [] ){
$this->args = $args + self::$default_args;
if( ! $this->args['taxonomies'] ){
$this->args['taxonomies'] = get_taxonomies( [ 'public' => true ], 'names' );
}
}
private function register_hooks(){
foreach( $this->args['taxonomies'] as $taxname ){
add_action( "{$taxname}_add_form_fields", [ $this, '_add_term__image_fields' ], 10 );
add_action( "{$taxname}_edit_form_fields", [ $this, '_update_term__image_fields' ], 10, 2 );
add_action( "created_{$taxname}", [ $this, '_create_term__handler' ], 10, 2 );
add_action( "edited_{$taxname}", [ $this, '_updated_term__handler' ], 10 );
add_filter( "manage_edit-{$taxname}_columns", [ WP_Term_Image_Table_Columns::class, '_add_image_column' ] );
add_filter( "manage_{$taxname}_custom_column", [ WP_Term_Image_Table_Columns::class, '_fill_image_column' ], 10, 3 );
}
}
public static function get_image_id( $term ){
return (int) get_term_meta( is_object( $term ) ? $term->term_id : $term, self::$meta_key, true );
}
public function _add_term__image_fields( $taxonomy ){
wp_enqueue_media();
add_action( 'admin_print_footer_scripts', [ $this, '_add_script' ], 99 );
$this->_css();
?>
args['noimage_src'];
$this->_css();
?>
post_parent ){
wp_delete_attachment( $old_attach_id );
}
}
}
private static function up_attach_term_id( $attach_id, $action, $term_id ){
$term_ids = wp_parse_list( get_post_meta( $attach_id, self::$attach_meta_key, true ) );
if( 'add' === $action ){
$term_ids[] = $term_id;
} else {
$term_ids = array_diff( $term_ids, [ $term_id ] );
}
$term_ids = array_unique( (array) $term_ids );
$term_ids = array_map( 'sanitize_text_field', $term_ids );
$joined_term_ids = $term_ids ? ','. implode( ',', $term_ids ) .',' : '';
update_post_meta( $attach_id, self::$attach_meta_key, $joined_term_ids );
return $term_ids;
}}
class WP_Term_Image_Table_Columns {
public static function _add_image_column( $columns ){
add_action( 'admin_notices', function(){
echo '
';
} );
return array_slice( $columns, 0, 1 ) + [ 'image' => '' ] + $columns;
}
public static function _fill_image_column( $string, $column_name, $term_id ){
if( 'image' === $column_name ){
$image_id = WP_Term_Image::get_image_id( $term_id );
$string = $image_id
? sprintf( '
',
wp_get_attachment_image_url( $image_id, 'thumbnail' ) )
: '';
}
return $string;
}}
Использование
Установка
Создайте файл WP_Term_Image.php с кодом выше в корневой папке темы и подключите его в файл functions.php вашей темы:
require_once DIR . '/WP_Term_Image.php';
Или используйте Composer:
composer require doiftrue/wp_term_image
Инициализация
Для базовой инициализации без передачи параметров:
add_action( 'admin_init', [ KamaWP_Term_Image::class, 'init' ] );
С передачей параметров:
add_action( 'admin_init', 'kama_wp_term_image' );
function kama_wp_term_image(){
KamaWP_Term_Image::init( [
'taxonomies' => [ 'post_tag' ],
] );
}
Отображение изображения элемента таксономии на сайте
Теперь, когда мы добавили возможность добавления изображения, нужно разобраться, как получить такие изображения термина на сайте.
Это делается с помощью встроенной функции WordPress get_term_meta(), которая появилась с версии 4.4.
ID изображений (вложений) хранится в метаполе термина _thumbnail_id. Вот как можно это сделать:
// Получить ID термина на странице термина
$term_id = get_queried_object_id();
// Получить ID изображения из метаполя термина
$image_id = get_term_meta( $term_id, '_thumbnail_id', 1 );
// Ссылка на изображение полного размера по ID вложения
$image_url = wp_get_attachment_image_url( $image_id, 'full' );
// Отображение изображения на экране
echo '';
Если вам не нужно изображение полного размера, замените full на нужный вам размер в функции wp_get_attachment_image_url().
Плагины для вставки миниатюр таксономии
Существуют и другие плагины на эту тему:
- Taxonomy Thumbnail — все хорошо с кодом, но его много. Поддерживает версии WP до 4.4 (когда была добавлена таблица метаданных таксономии).
- WP Multiple Taxonomy Images — код плагина очень похож на код в этой статье. Он позволяет установить несколько миниатюр для термина.
- Taxonomy Images — этот плагин имеет наивысшие оценки по данному вопросу, но кода в нем много, «ненужного» кода. Если вам не нужны лишние функции, лучше используйте предыдущие плагины или код из этой статьи.
Теперь вы знаете, как добавить и использовать миниатюры для элементов таксономии в WordPress!