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

Опубликовано: 2023-02-17

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

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

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

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

1. Перейдите на экран редактора сообщений и установите флажок «Пользовательские поля».

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

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

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

4. Добавьте значение. Давайте пойдем с Zumba для этого. Имейте в виду, что это будет отображаться только в этом конкретном посте. В другом посте вы можете ввести другое значение, например, «Эллиптический» или другой тип упражнений.

5. Сохраните пост.

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

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

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

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

Примечание. Разумеется, эти настройки следует выполнять в дочерней теме, и мы будем использовать файл single.php . Как всегда, подобные настройки лучше всего тестировать в среде разработки.

1. Откройте файл single.php и добавьте этот код вне цикла WordPress:

 &lt;?php the_meta(); ?&gt;

Он будет отображать что-то вроде этого:

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

 &lt;div class="content-area"&gt; &lt;main class="site-main" role="main"&gt;

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

Об этом примере следует упомянуть одну вещь: дочерняя тема была создана на основе родительской темы WordPress Twenty Fifteen, которая очень популярна. Если вы экспериментируете с тем, где отображать настраиваемые поля, в вашей дочерней теме могут быть другие шаблоны, помимо файла single.php . Для отображения информации в посте в дочернюю тему был добавлен файл content.php . Фрагмент выше был помещен в содержимое страницы, поэтому он появился как часть публикации.

2. Стиль полей. Если вы перейдете к инспектору, вы увидите несколько новых классов, добавленных на страницу.

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

Тип упражнения: Зумба
Время суток: утро

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

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

Дополнительные настройки пользовательских полей

Стиль в предыдущем примере будет работать отлично, но мы делаем еще кое-что. В следующих примерах показано, как можно настроить настраиваемые поля с дополнительными параметрами отображения для конкретных случаев использования. Создание настраиваемого поля, читаемого как часть сообщения, и установка контекста с полезным заголовком будет отличным дополнением к сообщению. Если вы следуете шаг за шагом, обязательно закомментируйте <?php the_meta(); ?> <?php the_meta(); ?> , который вы добавили в предыдущем примере.

Для этого примера все было немного изменено. Ключ был упрощен до «упражнений», чтобы его было проще добавить в шаблон, а фрагмент кода был добавлен в файл content.php дочерней темы, чтобы он отображался в содержимом поста, а не до или после него. .

 &lt;?php $exercises = get_post_meta($post-&gt;ID, 'exercises', false); ?&gt; &lt;h3&gt;Today's exercise:&lt;/h3&gt; &lt;ul&gt; &lt;?php foreach($exercises as $exercise) { echo '&lt;li&gt;'.$exercise.'&lt;/li&gt;'; } ?&gt; &lt;/ul&gt;

Настраиваемое поле теперь отображается под заголовком «Сегодняшнее упражнение:» в формате списка. Он был установлен как <h3> , но его можно легко настроить на другой стиль заголовка или абзаца. Если вы не хотите, чтобы это было в формате списка, его также можно структурировать по своему усмотрению.

Условный пользовательский

Поля

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

 &lt;?php $exercises = get_post_meta($post-&gt;ID, 'exercises', true); ?&gt; &lt;h3&gt;Today's exercise:&lt;/h3&gt; &lt;ul&gt; &lt;?php if ($exercises) { ?&gt; &lt;?php echo '&lt;li&gt;' .$exercises. '&lt;/li&gt;'; ?&gt; &lt;?php } //if there is nothing for exercises then display else { ?&gt; &lt;li&gt;Today was a rest day.&lt;/li&gt;

Расширенный плагин настраиваемых полей

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

Группы полей

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

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

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