Как добавить пользовательские мета-поля в сообщения и типы сообщений WordPress

/

Вы хотите создать настраиваемые мета-блоки для своих сообщений, страниц и типов сообщений WordPress? Пользовательские мета-поля обычно используются для улучшения пользовательского интерфейса для добавления настраиваемых полей (метаданных) в ваш контент. В этой статье мы объясним, что такое настраиваемое мета-поле и как вы можете легко добавить настраиваемые мета-поля в сообщения и типы сообщений WordPress.

Как добавить пользовательские мета-блоки в сообщения WordPress

Что такое Custom Meta Box в WordPress?

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

WordPress поставляется с простым в использовании интерфейсом, который помогает вам создавать контент, такой как сообщения и страницы, или настраиваемые типы сообщений.

Обычно каждый тип контента состоит из фактического контента и его метаданных. Метаданные - это информация, связанная с этим контентом, такая как дата и время, имя автора, заголовок и т. Д. Вы также можете добавить свои собственные метаданные, используя настраиваемые поля.

Настраиваемые поля

Однако добавление метаданных с использованием поля настраиваемых полей по умолчанию не очень интуитивно понятно. Здесь на помощь приходят настраиваемые мета-боксы.

WordPress позволяет разработчикам создавать и добавлять свои собственные мета-блоки на экранах редактирования сообщений. Вот как самые популярные плагины добавляют различные параметры на экраны редактирования ваших публикаций.

Например, поле заголовка и метаописания SEO внутри плагина Yoast SEO представляет собой настраиваемое мета-поле:

Категория SEO-заголовок и мета-описание в Yoast SEO

Сказав это, давайте посмотрим, как можно легко добавить настраиваемые мета-блоки в сообщения и типы сообщений WordPress.

Создание пользовательских мета-боксов в WordPress

Во-первых, вам нужно установить и активировать плагин Advanced Custom Fields. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После активации плагин добавляет новый пункт меню с надписью «Custom Fields» на панель администратора WordPress. Нажав на нее, вы попадете на страницу настраиваемых полей.

Эта страница будет пустой, поскольку вы еще не создали никаких настраиваемых полей. Идите вперед и нажмите кнопку «Добавить», чтобы продолжить.

Добавить новую группу настраиваемых полей

Вы попадете на страницу «Добавить новую группу полей».

Здесь вам нужно указать заголовок для вашей группы полей. Этот заголовок будет использоваться как заголовок вашего мета-окна.

После этого вы можете начать добавлять свои поля. Просто нажмите кнопку «+ Добавить поле», чтобы добавить первое поле.

Добавьте свое первое поле

Откроется форма настроек поля. Сначала вам нужно снабдить свое поле меткой. Эта метка будет отображаться в вашем мета-поле перед полем.

Создание нового поля для вашего настраиваемого метабокса

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

Далее вам необходимо предоставить инструкции для полей. Эти инструкции сообщают пользователям, что добавить в поле.

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

Полевые настройки

Затем нажмите кнопку закрытия поля, чтобы свернуть поле.

Если вам нужно добавить дополнительные поля в ваш метабокс, нажмите кнопку «+ Добавить поле», чтобы добавить еще одно поле.

Закройте поле и добавьте другое

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

Правила размещения

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

Далее идут настройки параметров мета-окна.

Для начала нужно выбрать номер заказа. Если у вас есть несколько групп полей, определенных для одного места, вы можете выбрать порядковый номер, по которому они будут отображаться. Если вы не уверены, оставьте значение 0.

Параметры мета-бокса

Далее вам нужно выбрать положение метабокса на странице. Вы можете выбрать отображение после содержимого, перед содержимым или в правом столбце.

Ниже вам нужно будет выбрать стиль для вашего метабокса. Вы можете выбрать, чтобы он был похож на все другие мета-блоки WordPress, или вы можете выбрать, чтобы он был бесшовным (без какого-либо метабокса).

Если вы не уверены, выберите вариант «Стандартный» (поле WP Meta).

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

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

Опубликуйте свою группу полей

Поздравляем, вы успешно создали собственное мета-поле для вашего сообщения или типа сообщения WordPress.

В зависимости от ваших настроек теперь вы можете перейти к своему посту или типу поста, чтобы увидеть свое настраиваемое мета-поле в действии.

Пользовательский предварительный просмотр метабокса

Вы можете использовать это настраиваемое мета-поле для добавления метаданных в свои сообщения или типы сообщений. Эти данные будут храниться в вашей базе данных WordPress, когда вы сохраните или опубликуете сообщение.

Отображение ваших пользовательских данных Meta Box в теме WordPress

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

Во-первых, вам нужно отредактировать группу настраиваемых полей, которую вы создали ранее. На странице «Изменить группу полей» вы увидите свои настраиваемые поля и их названия.

Имена полей

Имена этих полей понадобятся вам, чтобы отображать их на вашем сайте.

Расширенные настраиваемые поля позволяют делать это двумя разными способами.

Во-первых, вы можете использовать шорткод для отображения настраиваемого поля в своем сообщении.

[acf field = "article_byline"]

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

Вам нужно будет отредактировать файл темы, в котором вы хотите отображать данные из этих полей. Например, single.php, content.php, page.php и так далее.

Вам нужно будет убедиться, что вы добавили код в цикл WordPress. Самый простой способ убедиться, что вы вводите код внутри цикла, - это поискать в коде строку, которая выглядит так:

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

Вы можете вставить свой код после этой строки и перед строкой, завершающей цикл:

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

Ваш код настраиваемого поля будет выглядеть примерно так:

<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Этот код будет отображать данные, введенные в поле с именем статьи нашего настраиваемого мета-поля.

Обратите внимание, как мы заключили код в заголовок h2 с классом CSS. Это поможет нам отформатировать и стилизовать настраиваемое поле позже, добавив настраиваемый CSS в нашу тему.

Вот еще один пример:

<blockquote class="article-pullquote"><?php the_field('article_pullquote'); ?></blockquote>

Не забудьте заменить имена полей своими именами.

Теперь вы можете посетить публикацию, в которой вы уже ввели данные в свои настраиваемые поля. Вы сможете увидеть свои собственные метаданные.

Пользовательские поля, отображаемые на веб-сайте

Advanced Custom Fields - очень мощный плагин с множеством опций. Этот урок лишь поверхностный. Если вам нужна дополнительная помощь, не забудьте проверить документацию плагина о том, как его расширить.

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как установить WordPress на веб-сервисы Amazon

Недавно один из наших читателей попросил нас рассказать, как установить WordPress на Amazon Web Services (AWS). Amazon Web Services, часто зарезервированная для более крупных

Как добавить SVG в WordPress (с 2 простыми решениями)

Вы хотите добавить файлы SVG на свой сайт WordPress? По умолчанию WordPress позволяет загружать все популярные форматы изображений, аудио и видео файлов,

Как легко добавить JavaScript на страницы или сообщения WordPress (3 метода)

Вы хотите добавить JavaScript на свои страницы или сообщения WordPress? Иногда вам может потребоваться добавить код JavaScript на весь веб-сайт или на определенные

Как правильно перенести свой блог с Tumblr на WordPress

Вы хотите перенести свой блог Tumblr на WordPress? WordPress - самый мощный в мире конструктор сайтов и платформа для ведения блогов. Я даю вам полную свободу