Полное руководство по настраиваемым полям WordPress

Опубликовано: 2020-07-07

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

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

С Elementor Pro вы даже можете брать информацию из своих настраиваемых полей и динамически включать ее в свои проекты Elementor и шаблоны Theme Builder (что означает, что вы можете использовать настраиваемые поля для редактирования тем WordPress и дочерних тем).

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

Вот что мы рассмотрим:

  • Подробнее о том, что такое настраиваемые поля и как они вам помогают
  • Как добавить настраиваемые поля в WordPress
  • Как отображать данные из настраиваемых полей в интерфейсе вашего сайта
  • Разница между настраиваемыми полями и типами / таксономиями записей (и когда их использовать)
  • Лучшие плагины настраиваемых полей для WordPress

Давайте копаться.

Что такое настраиваемые поля WordPress?

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

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

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

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

Вы можете добавить новое настраиваемое поле «Рейтинг» в свои сообщения в блоге, где вы вводите номер вместе с другой полезной информацией. Эти поля получат свое собственное отдельное поле и будут отдельно храниться в базе данных WordPress (в postmeta). Фактически, это в основном то, что делают большинство плагинов обзора.

Ваш следующий вопрос может быть таким: «Почему вы не можете просто добавить рейтинг в редакторе WordPress вместе с текстом обзора».

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

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

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

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

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

Примеры того, как настраиваемые поля могут вам помочь

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

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

Продукты электронной коммерции

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

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

  • Цены
  • Состояние на складе
  • Атрибуты
  • И т.п.

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

Сайт Недвижимости

Вернемся к этому примеру с недвижимостью сверху.

Если вы хотите использовать WordPress для создания сайта со списком недвижимости, вам нужно сначала создать собственный тип записи «Дом». Мы рассмотрим настраиваемые типы сообщений позже, но настраиваемый тип сообщений - это просто еще один «тип» контента, такой как стандартные WordPress «Сообщения» и «Страницы».

Когда вы добавляете новый дом, вам нужна возможность легко собирать такую ​​информацию, как:

  • Спальни
  • Ванные комнаты
  • Квадратные метры
  • Цена
  • И т.п.

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

Сайт ресторана

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

Вы можете создать новый пользовательский тип сообщения для «Пункта меню». Затем вы можете добавить настраиваемые поля для сбора такой информации, как:

  • Цена блюда
  • Любые соответствующие диетические проблемы (например, вы можете добавить флажки, чтобы указать, является ли блюдо безглютеновым, вегетарианским и т. Д.)
  • Калорий
  • И т.п.

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

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

Узнайте, как создать сайт ресторана на WordPress

Для чего можно использовать настраиваемые поля?

Надеюсь, эти примеры заставили ваши творческие соки течь.

Самый важный вопрос - как настраиваемые поля могут помочь улучшить ваш следующий веб-сайт на WordPress?

Существуют ли какие-либо повторяющиеся задачи форматирования контента, которые вы выполняете в настоящее время, которые можно автоматизировать с помощью настраиваемых полей?

Помогло бы вашим пользователям добавление дополнительной информации на ваш сайт?

Вы когда-нибудь мечтали о создании более сложных сайтов на WordPress? Как доска объявлений о вакансиях? Или бизнес-справочник? Что-нибудь, что выходит за рамки «Сообщений» и «Страниц»?

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

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

Как добавить настраиваемые поля в WordPress

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

Как это часто бывает с WordPress, есть два пути, по которым вы можете добавить настраиваемые поля:

  1. Используйте ручной метод
  2. Используйте плагин

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

Как использовать встроенную функцию настраиваемых полей WordPress (ручной метод)

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

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

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

Затем вам будет предложено перезагрузить страницу, чтобы увидеть настраиваемые поля:

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

После перезагрузки страницы вы увидите новое поле « Настраиваемые поля» где-то под редактором.

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

Затем вы можете использовать поле Value, чтобы ввести информацию, которую вы хотите включить в настраиваемое поле:

Затем вы можете отобразить эту информацию на своем сайте с помощью PHP.

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

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

Как добавить настраиваемые поля в WordPress с помощью плагина

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

  • Текст
  • Числа
  • URL
  • Загрузка изображений / файлов
  • Места на Google Картах
  • И т.п.

В этом руководстве мы будем использовать бесплатный плагин Advanced Custom Fields (ACF), который является одним из самых популярных вариантов. Однако есть еще несколько отличных плагинов для настраиваемых полей, которыми мы поделимся позже. Независимо от того, какой плагин вы выберете, основной процесс будет одинаковым.

Для начала установите и активируйте бесплатный плагин Advanced Custom Fields с WordPress.org.

Затем перейдите в Настраиваемые поля Добавить новое .

ACF использует то, что он называет «группами полей». Группа полей - это просто набор из одного или нескольких настраиваемых полей, которые отображаются вместе в редакторе.

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

Тип сообщения… совпадает с… Публикация

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

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

Вот два наиболее важных варианта:

  • Метка поля - это название поля. Это также автоматически заполнит поле «Имя поля», с помощью которого вы будете программно ссылаться на это поле (при необходимости).
  • Тип поля - это тип информации, которую вы хотите собирать. Вы можете выбрать один из различных вариантов, таких как текст, номер, адрес электронной почты, URL-адрес, изображение, выбор даты и т. Д.

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

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

  • Рейтинг обзора - числовое поле, в котором собрана оценка обзора от 1 до 5 с шагом 0,5.
  • Название продукта - короткое текстовое поле, в котором собрано название продукта.
  • Обзор обзора - более крупное текстовое поле, содержащее краткое изложение обзора.

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

После того, как вы опубликуете свою группу полей, вы увидите эти поля, когда добавите новый фрагмент контента: