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

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

^

Что такое пользовательский мета-бокс в WordPress?

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

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

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

^

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

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

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

^

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

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

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

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

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

^

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

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

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

^

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

^

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

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

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

^

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

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

^

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

^

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

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

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

^

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

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

Если вы не уверены, выберите опцию Standard (WP Meta box).

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

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

^

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

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

^

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

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

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

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

^

Вам понадобятся имена этих полей для отображения их на вашем сайте.

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

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

[acf field = “article_byline”]

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

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

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

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

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

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

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

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

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

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

^

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

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