ACF: добавление картинки к тегу Wordpress и отображение на сайте

Статьи 22.06.2022 (обновлено)

В этом материале расскажу как добавить картинку к тегу WordPress с помощью ACF и отобразить её на сайте.

Задача довольно тривиальная. т.е. простая, но пришлось помучиться немного, чтобы получить результат, который меня устроит без лишних циклов PHP и т.п. Ниже поведаю, как добавить пользовательские поля в таксономии, а затем изменить шаблона для термина таксономии под наши нужды.

Термины могут быть такими элементами, как категории WordPress, теги или другие пользовательские таксономии, которые были добавлены на ваш сайт. Например, популярные плагины, такие как WooCommerce, добавляют пользовательские таксономии при активации.

Дополнительную информацию о таксономиях можно найти в WordPress Codex.

Добавление полей

Плагин Advanced Custom Fields позволяет очень просто добавлять пользовательские поля в термины таксономии. С этого и начнем. Пожалуйста, выполните следующие действия.

  1. На экране администратора Custom Fields нажмите кнопку Add New, чтобы создать новую группу полей.
  2. Добавьте поля, которые вы хотите видеть при редактировании термина таксономии.
  3. В разделе Locations выберите правило Taxonomy Term и выберите соответствующее значение для отображения этой группы полей
ACF: добавление картинки к тегу Wordpress и отображение на сайте

Скриншот выше демонстрирует добавление полей Цвета и Изображения для Категорий Вордпресса.

Редактирование полей

После того как вы создали группу полей и назначили ее для отображения на экране редактирования термина таксономии, редактирование значений полей осуществляется путем перехода к соответствующей таксономии.

Например, если вы назначили группу полей для категорий постов, перейдите в Posts -> Categories.

ACF: добавление картинки к тегу Wordpress и отображение на сайте

Скриншот выше показывает добавление изображение к Категории «Hiking Trails».

Отображение полей

Теперь переходим к самому главному — отображению данных полей на фронтенде вашего сайта.

Настройка шаблона для термина таксономии WordPress может быть легко выполнена путем редактирования файлов category.php, tag.php или taxonomy.php в вашей теме. В зависимости от вашей темы, вы также можете использовать части шаблона или фильтры для настроек.

В примере ниже показано, как изменить шаблон category.php из темы twentyseventeen Вордпресса и вывести изображение и цвет категории в тег style.

<?php
get_header(); 


// get the current taxonomy term
$term = get_queried_object();


// vars
$image = get_field('image', $term);
$color = get_field('color', $term);

?>
<style type="text/css">
	
	.entry-title a {
		color: <?php echo $color; ?>;
	}
	
	<?php if( $image ): ?>
	.site-header {
		background-image: url(<?php echo $image['url']; ?>);
	}
	<?php endif; ?>
	
</style>
<div class="wrap">
	
<?php // Remaining template removed from example ?>

Мы используем для вывода функцию ACF get_field().

Ниже показано, как приведенный выше код заставляет выглядеть сайт в браузере. Обратите внимание, что изображение заголовка сайта теперь отражает изображение категории, а заголовки всех записей окрашены в зеленый цвет.

ACF: добавление картинки к тегу Wordpress и отображение на сайте

Кроме того, хотел показать как я использую данную возможность, чтобы отобразить иконки тегов на страницах архивов тегов.

В целом, процесс довольно простой, нам достаточно создать дополнительное поле для тегов, по такому же принципу как я описал для категорий выше. И после этого вы добавляем в файл archive.php темы WordPress следующие строчки кода.

<?php 
	$term = get_queried_object();
	$image = get_field('tag_image', $term);
	$archive_title = get_the_archive_title();
	$archive_title = preg_replace('~^[^:]+: ~', '', $archive_title);
?>

<img src="<?php echo $image; ?>" alt="<?php echo $archive_title; ?>" class="tag-image-archive">

Давайте немного разберемся почему мы используем все эти функции.

Функция get_queried_object() устанавливает и получает текущий объект запроса (полная информация о посте, метках (тегах), рубриках и т.д.).

Функция get_field() — стандартная функция ACF для получения данных дополнительного поля.

Функия get_the_archive_title() нам нужна, чтобы для изображения заполнить поля alt и title.

А функция preg_replace() — выполняет поиск и замену по регулярному выражению, нужна для того, чтобы убрать название таксономии из строки. Решение подсмотрено на сайте wp-kama.ru.

Отображение для определенного термина

Все функции шаблона могут быть использованы для загрузки значений из термина таксономии, однако для определения цели термина требуется второй параметр. Это аналогично передаче параметра $post_id для нацеливания на конкретный объект поста.

Существует 3 различных стиля $post_id, которые перечислены ниже.

ПримерФорматОписание
'category_123'$taxonomy . '_' . $term_idСтрока, содержащая имя таксономии и идентификатор термина
'term_123''term_' . $term_idСтрока, содержащая слово ‘term’ и ID термина. Добавлено в версии 5.5.0
WP_TermОбъект термина. Вы можете получить объект термина с помощью многих функций WP, таких как get_term()

auto-embed

При редактировании WYSIWYG-поля в термине таксономии функция автовыборки (автовставки) может не работать. Это связано с кодом в ядре WordPress, который ограничивает функциональность автосохранения только записями.

Эта проблема переносится на фронт-энд и не позволяет конвертировать URL-адреса встраивания (youtube, vimeo и т.д.) в воспроизводимые объекты встраивания.

В качестве текущего обходного пути для фронт-энда, используйте этот код в верхней части вашего шаблона (скорее всего, category.php или аналогичный).

Файл category.php:

<?php 

// vars
$queried_object = get_queried_object(); 
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;  

$GLOBALS['wp_embed']->post_ID = $taxonomy . '_' . $term_id;

Этот код установит пользовательский post_ID и позволит WP загрузить встраиваемый объект.

Сергей Ермилов
Опубликовано 28.01.2022
Категория: Статьи
Теги: ,

Добавить комментарий

Ваш адрес email не будет опубликован.