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

Вы хотите создать пользовательские мета-поля для ваших постов, страниц и пользовательских типов постов WordPress?? Пользовательские мета-боксы обычно...

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

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

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

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

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

Пользовательские поля

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

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

Например, поле SEO title и meta description в плагине All in One SEO является пользовательским мета-полем:

Мета-бокс AIOSEO

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройки поля

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

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

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

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

Правила расположения

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

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

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

Параметры мета-поля

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

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

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

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

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

Опубликуйте вашу группу полей

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

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

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

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

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

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

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

Названия полей

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

Advanced Custom Fields позволяет вам сделать это двумя различными способами.

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

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

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

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

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

Код вашего пользовательского поля будет выглядеть следующим образом:

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

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

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

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

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

Отображение пользовательских полей на сайте

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

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий