В данной статье вы узнаете как запрашивать и отображать посты, как отображать ACF поля (узнаете новый способ), также ближе познакомитесь с устройством мета полей и разберетесь с пользовательскими типами постов (Custom Post Types) в WordPress, эти знания помогут понять структуру WordPress изнутри.
Содержание
Про мета поля и пользовательские типы постов (CPT)
Как отображать ACF поля (2 способа)
Как запрашивать и отображать посты (2 способа)
Введение
(Здесь и далее в скобах примечания переводчика. Данная статья является переводом статьи с tutsplus.com, для тех кто предпочитает наглядность и знает английский есть видео.
Всем настоятельно рекомендую не пропускать первую часть, про мета поля и пользовательские типы постов (CPT), в данных вопросах есть путаница у очень многих разработчиков, не только начинающих)
Всем привет! Меня зовут Ади Пурдила и в этой статье я покажу вам два способа отображение постов и ACF полей в WordPress.
Для тех кто не знаком: ACF это WordPress плагин которые позволяет добавлять мета поля (meta fields or custom fields), и причина, по которой нам необходим подобный плагин простая: несмотря на то, что WordPress поддерживает мета поля по умолчанию, они крайне ограничены, так что данный плагин выводит их на совершенно новый уровень, предоставляя высокую степень персонализации.
Еще один момент: если вы не гуру кодинга и хотите отобразить ACF поля на фронтенде, на вашем актуальном сайте, вы можете найти это немного затруднительным, т.к. вам придется писать код чтобы получить эти поля из базы данных.
<?php
// it's a simple example for a text field, fields have different types (select, image, gallery…),
// and displaying depends on a type
echo get_field('page-subtitle');
?>По этой причине в данной статье я покажу вам 2 способа сделать это. Первый с помощью кода, и второй с помощью замечательного плагина который называется ACF Views. Который кстати является спонсором текущей статьи. ACF Views это WordPress плагин который является дополнением к Advanced Custom Fields плагину. Он позволяет отображать посты и ACF поля где угодно на вашем веб сайте используя шорткоды. Это значит что вам больше не нужно писать какой-либо PHP код чтобы запросить посты или получить значения мета полей и отобразить их.
ACF Views бесплатный для скачивания и использования плагин, или стоит 25$ в год для Pro версии, если вы хотите разблокировать дополнительные фичи, как расширенная фильтрация, Ajax пагинация, пользовательские Gutenberg блоки и другое. Используя промокод envato на странице оплаты, вы получаете 20% скидку для Pro версии.
Про мета поля и пользовательские типы постов (CPT)
Прежде чем мы начнем работу с ACF полями. Есть 2 базовые вещи которые вы должны понять: мета поля (meta fields or custom fields) и пользовательские типы постов (Custom Post Types). Так что давайте разберемся что это, и какую роль они играют.
Если вы сталкивались с WordPress прежде, тогда вы знаете что есть определенные типы данных, которые вы можете ввести или создать самостоятельно, как Посты, Изображения или любые другие Медиа файлы, Страницы и так далее. Теперь важный момент: на самом деле WordPress размещает всю эту информацию в одной таблице, и эта таблица называется WP Posts.
Так что даже если информация, которую мы вводим это Пост или Страница, или Вложение, или даже WooCommerce Продукт, все будет размещено внутри этой WP Posts таблицы в базе данных. Давайте я сейчас покажу вам эту таблицу. Я использую локальную установку WordPress, но таблица та же самая. Итак, если я открываю WP Posts и мы отобразим данные из нее, то вы увидите весь контент который я ввел на моем локальном веб-сайте.
Итак, у меня есть пост, которые называется “Hello World”, и мы действительно можем найти его прямо здесь, он первый. Вы можете видеть, у нас есть его название и он имеет ID равное 1, но также у меня есть пару страниц, хотя на самом деле одна, которая называется “Sample Page”. И мы также можем увидеть ее прямо здесь, она имеет ID равное 2.
Итак, первое это Пост, второе это Страница, но они оба сохранены внутри этой WP Posts таблицы в базе данных. И вы увидите, что если мы прокручиваем страницу в самый низ, то каждая строка в данной таблице имеет свое значение в колонке Тип поста (Post Type).
Мой изначальный пост имеет значение "Пост" (Post). Моя страница имеет значение "Страница" (Page). И вы также можете найти другие типы здесь. Каждая строка в данной таблице имеет одну и ту же структуру, имеет ID, Post Author, Date, Content, Title, Excerpt, Post Type и это очевидно.
Так что каждая строка в данной таблице имеет одну и ту же структуру которая определяется самой таблицей. Так что мы не можем добавить дополнительные характеристики к постам, верно, я не могу добавить еще один столбец тут и назвать его как-нибудь. Это просто невозможно, и вот где на помощь приходят мета поля, они сохраняются в отдельной таблице которая называется WP PostMeta, и если мы посмотрим на нее, вы увидите, что структура этой таблицы очень проста.
У нас есть Meta ID, Post ID, Meta Key (мета ключ) и Meta Value (мета значение), и то как это работает элементарно: каждая строка в данной таблице имеет пару ключ-значение, и я могу связать эту пару с любым постом (по Post ID). К примеру мой “Hello World” пост с ID равным 1 имеет здесь связанные с ним строки, и также моя “Sample Page” страница с ID равным 2 также имеет связанные с ней строки.
И не стоит задумываться что значат названия этих строк, это просто уникальные характеристики поста, страницы, или какого-угодно объекта.
Так что каждый раз, когда мне нужно добавить уникальную характеристику для Поста, или Страницы,или Вложения, или любого другого объекта, я не делаю это в таблице WP Posts, я делаю это в таблице WP PostMeta. Мне просто нужно указать тут целевой Post ID. Так что если я хочу например добавить Мета ключ (Meta Key) и Мета значение (Meta Value) для моего “Hello World” поста, который имеет ID равное 1, я просто добавляю новую строку, устанавливаю “1” для Post ID поля и ввожу свою информацию, конечно очевидно что вы не будете делать это вручную в базе данных, вы будете делать это в WordPress бекенде. Я просто показываю вам эти таблицы в базе данных чтобы вы могли понять что происходит за кулисами.
Итак, мы разобрались с мета полями. Также я упомянул про Пользовательские типы постов (Custom Post Types). Что же это такое? Если мы вернемся к WP Posts таблице, мы увидим что каждая строка имеет поле Тип (Post Type).
У нас могут быть Страницы, Посты, ACF поля, Ревизии, Смартфоны, Вложения (сюда принадлежат например ваши изображения что вы загрузили в вашу установку WordPress) это все типы постов, но один из них, Смартфоны, на самом деле тип который был создан лично мной, и если мы откроем тему, я использую Astra для данного примера, и откроем functions.php то вы увидите что я регистрирую пользовательский тип здесь, который называется смартфоны.
<?php
function add_cpt()
{
$args = array(
'labels' => array(
'name' => 'Smartphones',
'singular_name' => 'Smartphone',
),
'hierarchical' => true,
'public' => true,
'has_archive' => true,
'menu-icon' => 'dashicons-smartphone',
'show_in_rest' => true,
'supports' => array('title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments',),
'taxonomies' => array('category',),
);
register_post_type('smartphones', $args);
}
add_action('init','add_cpt');Пользовательский тип поста (CPT), если зарегистрирован верно, отображает свои посты отдельно в бекенде вашего WordPress. Итак, у меня есть отдельный пункт здесь, в меню WordPress, который называется Смартфоны, и у меня есть список постов, которые используют этот пользовательский тип, также у меня есть категории для них: Бюджетные, Средние, Флагманы, и я могу добавлять, удалять и редактировать их как угодно, точно также как и любые другие посты в WordPress.
Это очень полезно, например вы разрабатываете веб сайт для кого-то, кто хочет продавать смартфоны, или они хотят иметь каталог смартфонов, и иметь свою категорию для смартфонов гораздо проще для них. Но также это очень хорошо совмещается с ACF, Advanced Custom Fields, это замечательный плагин. Итак, если мы откроем Пользовательские Поля (Custom Fields), у меня тут есть Группа (Group), которая называется “Опции Смартфона” (Smartphone options), вы можете увидеть что эта Группа отображается только если Тип поста равен Смартфону.
Итак, если я открою один из моих смартфонов вы увидите Пользовательские поля здесь, внизу, “Производитель” и “Стоимость”, которые я могу редактировать и использовать конечно, чтобы отобразить пользовательскую информацию, как “Бренд” и “Стоимость” телефона, и конечно эти поля имеют свои значения для каждого смартфона, и если я открою стандартный пост, например “Hello World”, вы увидите, что данные поля там отсутствуют, я не могу установить их, так как данный объект обычный пост, а не Смартфон.
Теперь говоря о Смартфонах. Давайте я покажу как мета поля связывают все это. Если мы откроем смартфон, например “Huawei Nova” с ID равным 40, и откроем WP PostMeta таблицу, отсортируем по Post ID, вы увидите строки где Post ID равен 40, у нас есть Пользовательские поля, верно, у нас есть “Производитель” ("Manufacturer"), как Ключ и “Huawei” как Значение, и то же самое для “Цены”.
Итак, в данном объекте PostMeta таблица используется для хранения мета полей для этих постов. Это был краткий обзор на то, как WordPress хранит информацию, про мета поля, также мы увидели как создавать Пользовательские типы постов (Custom Post Types) и как использовать их в связке в Advanced Custom Fields в WordPress.
Как отображать ACF поля (2 способа)
Я надеюсь теперь вы поняли, как устроены мета поля и Пользовательские типы постов. Теперь давайте разберемся как мы можем отобразить ACF поля на фронтенде, как я сказал, я покажу два способа сделать это, первый с помощью кода, и второй с помощью плагина.
Давайте начнем с кода. (Больше примеров вы можете найти например тут, в официальных примерах от ACF)
Итак, если мы посмотрим на Пользовательские поля (Custom Fields от ACF), у меня тут есть Группа, которая называется “Дополнения страницы”, и в настройках отображения установлено, что она отображается, только если Тип поста равен Странице. Если я открою сейчас мою “Sample Page” страницу вы увидите эту Группу пользовательских полей (Page extras) здесь, и само поле, “Подзаголовок страницы” (Page subtitle).
Давайте установим значение, пусть это будет “this is a demo subtitle” (это демо подзаголовок). Итак, это значения поля и я нажимаю кнопку Обновить страницу. Теперь я открываю эту страницу, и вижу, что данное поле нигде не отображается, каким же образом я могу отобразить значение мета поля на текущем веб сайте?
Используя код, я должен сделать так: открыть файл page.php в теме, этот шаблон WordPress использует чтобы отобразить текущую страницу, и прямо в нем мне надо добавить следующую строчку кода:
<?php the_field('page_subtitle'); ?>Я сохраняю это, обновляю страницу и теперь я могу увидеть мой "Подзаголовок" на странице, конечно очевидно, что если я обновлю это поле то оно также измениться на фронтенде. Это самый простой пример, а что если мы применим его к нашим смартфонам, если я открою их список, и открою один из них, например “Huawei Nova”, тут вы можете увидеть два мета поля: “Производитель” и “Стоимость”. Если я введу данные и нажму кнопку Обновить, открою эту страницу то увижу только заголовок и описание, что включены в отображение по умолчанию. Как мы можем отобразить эти мета поля? Для изменения текущего вывода нам надо будет изменить PHP шаблон для Смартфонов (CPT).
Я открою файл single-smartphone.php в моей теме и прямо перед циклом вставлю следующий код, который выведет мои мета поля:
<h3>Characteristics</h3>
<ul>
<li>Brand: <?php
the_field('manufacturer'); ?></li>
<li>Brand: $<?php
the_field('price'); ?></li>
</ul>Затем сохраню этот шаблон и обновлю страницу.
Вы можете увидеть что эти характеристики теперь отображаются тут, и я могу открыть любой пост типа Смартфон и эти мета поля будут отображаться для каждого, в том месте, где я установил их в шаблоне. (Каждый Смартфон имеет конечно свои значения в этих полях). Вы увидели отображение мета полей с помощью кода, это один из возможных способов, данный способ требует знания PHP кода (имен, типов мета полей, создания разметки для них) и WordPress шаблонов, чтобы знать места, где устанавливать код. Если у вас нет подобного опыта, то это может быть для вас немного затруднительно.
Вместо этого, вы можете установить плагин, который предоставит вам доступ к вашим мета полям и позволит отобразить их где угодно, это плагин называется ACF Views, перед его использованием убедитесь что на вашем веб сайте уже установлен ACF плагин (Advanced Custom Fields).
Когда оба этих плагина установлены и активированы, мы можем открыть ACF Views страницу, и тут вы видите что я создал две Views (View переводится как вид, отображение), и первая из них называется “Дополнения страницы” (Page extras), и она работает следующим образом (кстати вы можете называть их как угодно): вы выбираете из списка целевую Пользовательскую группу полей (ACF Group), в моем случае это “Дополнения страницы” (Page extras) и далее во втором списке вы выбираете мета поле этой группы, которые вы хотите отобразить, в моем случае это “Подзаголовок страницы”, это текстовое поле. Далее опционально вы можете указать Подпись (Label) и нажать Обновить или Опубликовать. И это работает с помощью шорткодов, вы копируете этот шорткод (указан для каждой View) и устанавливаете его на любой странице, давайте откроем нашу “Sample page” и установим этот шорткод используя Gutenberg блок “Шорткод” и нажмем кнопку обновить.
Теперь если мы откроем эту страницу, то увидим вывод этого мета поля. Мы использовали Gutenberg блок (шорткод), а это значит вы можете перемещать его как вам угодно на этой странице. Если у вас есть шаблон, тут вы можете выбирать где отображать поле. Например, я хочу отобразить в самом верху страницы, я просто перемещаю этот блок (используя стрелочки) и нажимаю кнопку обновить, теперь это мета поле будет отображаться в самом верху. И мы сделали все это, не написав ни единой строчки кода.
Итак, это View использует свою разметку (сгенерированную автоматически), создает div и использует пару переменных чтобы отобразить значение того мета поля, вы также можете использовать свою разметку, я покажу это чуть ниже. Это был простой пример для группы “Дополнения страницы”.
Давайте посмотрим на следующее View, для мета полей Смартфонов. Как вы помните, я создал ACF группу “Опции смартфона” с мета полями “Производитель” и “Стоимость”, так что в этой View я выбирал мою группу и ее мета поля из списка, также указал Подпись (Label) и еще добавил в вывод Название поста, это очень просто в ACF Views, надо лишь выбрать группу "$POST$" и в списке встроенных полей поста, я выбрал Название (Title). И далее все также как и первом случае, копирую шорткод, который был сгенерирован для меня автоматически, и открываю мои Смартфоны.
Давайте откроем любой из них, пусть это будет “Nova”, установим шорткод, обновим страницу и открыв ее, мы видим отображение этих мета полей, мы можем переместить шорткод и отобразить эти поля где угодно, мы это сделали не написав ни единой строчки кода.
Теперь, если вам необходимо изменить вывод, мы можем использовать свою разметку. Я вернусь к этому View и вы увидите, что ниже поля с разметкой (которая была сгенерирована автоматически) есть другое поле, Пользовательская разметка (Custom Markup). Я укажу здесь свою разметку и нажму кнопку обновить.
Вместо стандартной разметки по умолчанию, div-ов, я использовал ol элемент (список), вы можете указать любую разметку, главное когда изменяете разметку по умолчанию то сохраните переменные (которые выглядят как HTML комментарий), иначе мета поля не будут вставлены в разметку. Открыв страницу, мы можем убедиться что разметка действительно изменилась, и теперь это выглядит как список (ol).
Особенно нравятся мне в ACF Views плагине его дополнительные опции. Он поддерживает Gutenberg блоки и вы можете превратить вашу View в полноценный Gutenberg блок (самостоятельный, не шорткод), просто активировав соответствующую галочку в настройках View. Теперь мы можем открыть любую страницу, нажать добавить новый блок (+) и ввести имя нашей View, далее выбрать этот блок. Теперь у нас есть свой Gutenberg блок на странице, я заполняю его мета поля, так как он имеет свои собственные поля, не те, которые относятся ко всей странице, и это замечательно, так как я смогу переиспользовать блок, могу использовать его несколько раз на одной странице (с разными значениями), в отличии от общих полей. Теперь нажму кнопку Сохранить и открою эту страницу.
Вы можете увидеть что эти блоки используют ту же, мою собственную разметку, но имеют свои значения, и это замечательно. Я могу клонировать это блок, переместить клон куда угодно, в общем переиспользовать его на странице.
Поддержка Gutenberg блоков - одна из ACF Views Pro фич, вы можете получить Pro версию на официальном веб сайте кликнув “Get PRO” в шапке их сайта, кстати на этом веб сайте вы можете найти ссылки на их документацию и YouTube канал, также не забывайте про наш промокод, envato, который даст вам 20% скидку. Итак, это был способ отобразить ACF поля без написания кода и изменения шаблонов.
Как запрашивать и отображать посты (2 способа)
Теперь давайте рассмотрим вопрос отображения постов, или пользовательских типов (CPT), мы уже рассмотрели отображение ACF полей используя код и ACF Views плагин, данный плагин также может быть использован для запроса и отображения постов по разным критериям, как мета фильтры и таксономии, так что давайте я покажу вам несколько примеров.
Для начала, давайте начнем с кода. У меня есть страница архива для Смартфонов, и в этом архиве я использую WP_Query (класс для запросов постов, узнать про аргументы можно в документации) чтобы получить ряд постов из базы используя специальные аргументы, в том числе по мета полю, я получаю посты, значение в поле “Стоимость” которых менее “1700”. Полученные посты я отображаю, используя Заголовок, Описание, и мета поля “Производитель” и “Стоимость”.
<?php
$queryArgs = [
// your post type here
'post_type' => 'smartphones',
// target post status
'post_status' => 'publish',
// maximum amount of posts, use -1 to set unlimited
'posts_per_page' => 10,
// type of order
'order' => 'DESC',
// order field
'orderby' => 'date',
'meta_query' => array(
array(
'key' => 'price',
'value' => 1700,
'compare' => '<',
'type' => 'numeric',
),
),
];
// SQL query will be executed during this line
$query = new WP_Query($queryArgs);
// WP_Posts array
$posts = $query->get_posts();
echo "<div class='smartphones'>";
foreach ($posts as $post) {
$postId = $post->ID;
$title = get_the_title($postId);
$description = get_the_excerpt($postId);
$price = get_field('price', $postId);
$manufacturer = get_field('manufacturer', $postId);
?>
<h3><?php
echo $title ?></h3>
<h3><?php
echo $description ?></h3>
<ul>
<li>Manufacturer: <?php
echo $manufacturer ?></li>
<li>Price: $<?php
echo $price ?></li>
</ul>
<?php
}
echo "</div>";
?>Теперь если я открою эту страницу архива, вы можете увидеть все Смартфоны, стоимость которых ниже “1700”. Я могу изменить запрос, изменив значение на “700”, и я получу список Смартфонов, стоимость которых ниже 700. Это был базовый пример, который мы создали вручную, и если вы WordPress разработчик с большим опытом, то конечно это не составит для вас труда, если же вы не имеете большого опыта с WP_Query то это вероятно будет для вас проблематично.
Теперь я покажу вам как решить эту же задачу с помощью плагина, и есть пару способов как мы можем это сделать. Если мы посмотрим на мои Смартфоны, то кроме мета поля “Стоимость”, они также имеют категорию, одну из трех, “Бюджетные”, “Средние”, “Флагманы”, и используя плагин я могу отобразить например “Средние”, следующим образом:
Я открою ACF Cards и создам Card (карточка), назову ее “средние диапазон” (Mid range), выберу мою ACF View (Поля смартфона, которую я создал ранее), установлю фильтр по Типу поста, т.е. укажу тип Смартфон (чтобы выборка была только среди постов этого типа). Далее в фильтре по таксономиям я выберу мою категорию “Средние”, сохраню Card и скопирую шорткод. Далее я создам страницу, назову ее например “Смартфоны в среднем диапазоне”, установлю шорткод в нее, и если мы откроем ее, то увидим все смартфоны в данной категории.
Плагин использует эту категорию чтобы получить целевые Смартфоны и отображает их, в любой момент я могу изменить Card, например чтобы отображать “Бюджетные”, нажму кнопку Обновить и на странице будут отображаться уже “Бюджетные” Смартфоны.
А что если я хочу отобразить телефоны по цене, или лучше по производителю?
К примеру, давайте отобразим телефоны от компании “Apple”. Я создаю страницу, которую называю “Смартфоны от Apple”, мы вернемся к этой странице чуть позже, а сейчас я открываю ACF Cards и создаю новую Card, выбираю в списке мою ACF View и устанавливаю фильтр по Типу (Смартфоны), и теперь во вкладке Мета фильтры я устанавливаю правило, что “Производитель” должен быть равен “Apple”. Теперь я копирую шорткод этой Card и устанавливаю на страницу, что я создал до этого, “Смартфоны от Apple”. Открою эту страницу, и вы можете убедиться что теперь на этой странице отображаются все Смартфоны от компании “Apple”. Таким образом вы можете фильтровать ваши посты по мета полям.
Также есть еще одна опция, пагинация (load more, загрузить еще). Если вы будете реализовывать эту функцию вручную, это потребует много работы (и JS код и PHP код необходимы здесь), но используя данный плагин вы можете решить эту задачу переключением одной галочки. Я покажу на примере моей Card для “Среднего” ценового диапазона. Я активирую галочку во вкладке “Pagination”, указываю количество постов (Смартфонов) что отображаются на одной странице (или загружаются за одно нажатие “Загрузить еще”) и сохраняю Card. Теперь если я открою страницу с шорткодом от этой Card, вы можете увидеть что отображается только часть Смартфонов, и появилась кнопка “Загрузить еще”, которая загружает другие Смартфоны при клике (количество в одной “партии” я настроил выше в Card).
