Отображение значений

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

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

Плагин Advanced Custom Fields (ACF) довольно простой, но очень функциональный. Алгоритм действия с этим плагином почти такой же как и без него:

1. Добавляем плагин ACF через админку
2. Активируем плагин
3. Добавляем "Группу полей" в настройках ACF
4. Добавляем произвольное поле с названием и содержимом в "Группе полей"
5. Добавляем функционал вывода произвольного поля в теме WordPress
6. Публикуем статью
7. Проверяем запись и вывод поля во фронтенде

Здесь я не буду объяснять как устанавливать и активировать плагин, этого мы коснемся еще. После того как с плагином всё хорошо - создаем "Группу полей" и добавляем "Произвольное поле".

На скриншоте выше видно, что мы создали группу полей "Поля для статей" и в этой группе мы добавили поле "Ссылка на оригинал" со слагом original_link и с условием:

Тип записи -> Равно -> Запись

Теперь при добавлении статьи мы увидим блок:

Добавляем значение в нужное поле и обновляем запись. Теперь остается только вывести значение данного поля на фронтенд через добавление кода в файл single.php темы WordPress.

После того как вы создали группу полей и ввели некоторые данные, вы можете загрузить и отобразить эти данные в вашей теме.

Все значения сохраняются как собственные post_meta (при сохранении в записи), и хотя вы можете использовать встроенную функцию WP get_post_meta(), лучше использовать соответствующую функцию ACF, такую как get_field(). Почему? Потому что ACF отформатирует значение в зависимости от типа поля и сделает разработку быстрее и проще!

В ACF есть две основных функции для вывода значений полей - the_field() и get_field().

Чтобы получить значение поля как переменную, используйте функцию get_field(). Это наиболее универсальная функция, которая всегда будет возвращать значение для любого типа поля. Получение поля как переменной:

<?php

$variable = get_field('field_name');

// что-то дальше делаем

?>

Чтобы отобразить поле, используйте the_field() аналогичным образом, например:

<p><?php the_field('field_name'); ?></p>

Мы в цикле сначала проверим наличие нужного нам поля, а затем в случае его наличия выведем значение во фронтенд.

<?php while ( have_posts() ) : the post(); ?> // Начало Цикла

<?php 
    $originalLink = get_field('original_link');
    if ($originalLink) {
        echo '<br><small><a href="' . $originalLink . '" rel="noopener nofollow" target="_blank">Ссылка на оригинал</a></small>';
    }

<?php endwhile; ?> // Конец цикла

Все значения сохраняются как "родное" для WordPress post_meta (при сохранении записи), и хотя вы можете использовать "родную" функцию WP get_post_meta(), лучше использовать соответствующую функцию ACF, например get_field(). Потому что ACF отформатирует значение в зависимости от типа поля и сделает разработку быстрее и проще!

Всё. Мы выполнили поставленную мини-задачу - создали "Произвольное поле" и вывели его на сайте для показа пользователям.

Базовый пример № 1

Не забудьте просмотреть примеры кода ниже, а вот базовый пример использования:

<?php

/**
 * Template Name: Home Page
 */

get_header(); 

?>

<div id="primary">
	<div id="content" role="main">

		<?php while ( have_posts() ) : the_post(); ?>

			<h1><?php the_field('custom_title'); ?></h1>

			<img src="<?php the_field('hero_image'); ?>" />

			<p><?php the_content(); ?></p>

		<?php endwhile; // end of the loop. ?>

	</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Базовый пример № 2

В примере ниже показано, как изменить шаблон 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().

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

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

В целом, процесс довольно простой, нам достаточно создать дополнительное поле для тегов, по такому же принципу как я описал для категорий выше. И после этого вы добавляем в файл 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.