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

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

Подпишитесь на наш канал Youtube

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

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

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

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

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

Добавление настраиваемых полей в сообщение WordPress

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

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

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

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

Использование плагина Advanced Custom Fields

Как и в большинстве случаев в WordPress, у вас есть два варианта реализации. Вы можете вручную отредактировать файлы PHP, чтобы добавить функциональность настраиваемого поля, или вы можете использовать плагин. В этом случае мы настоятельно рекомендуем использовать плагин. Однако, если вы чувствуете необходимость отредактировать PHP и войти в код, вы можете сделать это в разделе Внешний вид - Редактор темы . Вот страница WP Codex с настраиваемыми полями, чтобы вы начали. Он ссылается на различные теги шаблона и хуки, которые вам понадобятся для его работы.

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

После того, как ACF будет установлен и активирован, вы увидите запись Custom Fields на левой боковой панели административной панели WordPress. Он поставляется с тремя вариантами: Группы полей , Добавить новое и Инструменты .

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

Основы ACF

Сами поля создать довольно просто. Перейдите в окно « Добавить новое» .

Несмотря ни на что, настраиваемые поля ACF будут включены в группу полей . Это просто означает определенные поля, содержащиеся в одном поле. Таким образом, вы можете назвать его как хотите, как в редакторе сообщений. Каждый раз, когда вы хотите добавить отдельную запись в группу, вы нажимаете кнопку « Добавить поле» . Делайте это каждый раз, когда вам нужно другое поле в одном и том же мета-поле. Правила Места определить , где и когда появится окно. В этом примере, поскольку тип сообщения равен сообщению , это означает, что он будет отображаться только в сообщениях. Не страницы или другие пользовательские типы сообщений.

Затем вы фактически выбираете настройки для самого поля. Что он собирается делать и какую функцию будет выполнять на сайте.

Вы в основном выбираете место размещения (под содержимым публикации в редакторе, на боковой панели, над содержимым и т. Д.), А также размещение для текста и самих полей. Область Hide on Screen - самая интересная. В зависимости от того, как вам нужно использовать настраиваемые поля, вы можете исключить любые или все другие мета-блоки из своих черновиков. Выберите условия для внешнего вида этого настраиваемого поля, а затем определите, какие другие поля будут отображаться вместе с ним, если таковые имеются. Часто вы даже не будете беспокоиться об этом.

Создание настраиваемых полей с помощью ACF

После того, как вы назвали свою группу полей, вы можете нажать кнопку « Добавить поле» . Вы можете иметь любое количество полей в одной группе, но убедитесь, что все они связаны друг с другом. С помощью ACF вы можете создать практически любое поле ввода, какое только можете себе представить.

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

Все они будут находиться в одной группе полей, но в разных полях. Как вы можете видеть выше, Is It Streaming? поле настроено как переключатель с переключателем да / нет, который требуется перед публикацией. Кроме того, мы хотим, чтобы условное поле отображалось, если поле помечено как Да. Это делается простым нажатием кнопки « Добавить поле» еще раз.

При включенном переключателе условной логики вам просто нужно выбрать, какое поле оно подлежит и какое значение должно быть. В этом случае Is It Streaming? должно быть равно Да.

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

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

Как отображать настраиваемые поля во внешнем интерфейсе WordPress

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

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

Но поскольку он ограничен текстовыми полями, он может иметь ограниченное использование для многих людей. Вы также можете войти в PHP и использовать код ACF, как в примерах их документации. Вы также можете перейти на ACF Pro и получить доступ к встроенному блоку Gutenberg, который отображает настраиваемое поле точно так, как вы его стилизуете в конструкторе.

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

Как отображать настраиваемые поля во внешнем интерфейсе с помощью Divi

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

В нашем примере выше, который использует условную логику и переключатели, мы будем использовать функцию динамического содержимого Divi. К тому же им очень легко пользоваться. Мы покажем вам это через конструктор тем Divi, но вы можете использовать его буквально в любом модуле, который поддерживает его в обычном конструкторе Divi. Щелкните Black + и выберите нужный модуль. Для этого нужен текстовый модуль .

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

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

Divi дает вам возможность в основном добавлять метки до / после к содержимому вашего поля. Мы хотим, чтобы наш фильм читался естественно как часть сообщения, поэтому доступен ли этот фильм для потоковой передачи в Интернете? будет помещен перед значением при визуализации поля. Кроме того, мы добавили конечный пробел в конце, чтобы отделить нашу метку от значения ACF.

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

Кроме того, опция Enable Raw HTML позволит отображать любой код, который вы вводите в поле ACF, например ссылки на различные платформы и т. Д.

Заключение

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

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

Изображение от SurfsUp / shutterstock.com