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

Опубликовано: 2017-12-13

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

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

Позвольте нам рассказать вам больше о настраиваемых полях и о том, как их использовать на вашем сайте.

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

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

Настраиваемые поля

Может, на примере все станет понятнее.

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

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

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

Следуя примеру игрового веб-сайта, у вас будет несколько настраиваемых полей, которые могут вводить ваши авторы и которые вы показываете своим читателям:

Информация о Call of Duty

Это информация, которую ваши авторы будут вводить в настраиваемые поля, и вы можете отобразить ее в сообщении. Но как?

Показать все настраиваемые поля:

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

  1. Откройте single.php
  2. Найдите функцию the_content () и вставьте этот код до или после нее (в зависимости от того, где вы хотите отображать настраиваемые поля):
 <? php the_meta (); ?>
  1. Сохранить изменения

Отображение определенного настраиваемого поля:

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

  1. Откройте файл single.php
  2. Найдите содержимое и проверьте следующее:
 <? php echo get_post_meta ($ post-> ID, 'ключ', true); ?>
  1. Замените «ключ» фактическим настраиваемым полем, которое вы используете в сообщении. Например: "Издатель".
  2. Сохранить изменения

Эта функция будет проверять каждую публикацию в цикле и искать настраиваемое поле с именем «Издатель». Если ключ был найден, отобразится его значение . Вы можете дополнительно настроить способ отображения настраиваемого поля, добавив к нему класс и стилизовав класс с помощью CSS, или вы можете напрямую ввести HTML в значение поля.

Условные настраиваемые поля:

При желании вы можете использовать настраиваемые поля как условные. Давайте остановимся на примере, и допустим, бывают случаи, когда вы не можете узнать дату выпуска игры, о которой пишете. Вместо того, чтобы вводить настраиваемое поле, вы можете автоматизировать процесс и сказать WordPress, чтобы он написал «TBA» (будет объявлено) в поле Release Date, если пользователь не добавил никаких данных:

 <? php $ release_date = get_post_meta ($ post-> ID, 
'Дата выпуска', правда);
if ($ release_date) {
?>
<? php echo $ release_date; ?>
<? php} else {?>
<p> Будет объявлено позже. </p>
<? php}?>

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

Как вывести список сообщений с определенным настраиваемым полем

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

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

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

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

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

1. Создайте собственный шаблон:

Остановимся на примере обзора игры, где мы хотим отобразить все игры от Bethesda Softworks (кто-нибудь сказал Fallout?). Для начала вам нужно будет создать и подготовить собственный шаблон:

  1. Создайте собственный шаблон страницы и назовите его bethesda-games.php
  2. Скопируйте и вставьте в файл следующий код:
 <? php
/ *
Название шаблона: Bethesda games
* /
?>
<? php get_header (); ?>
<? div class = "container">
<? div class = "indent">
<? php
query_posts (массив (
'meta_key' => 'издатель',
'meta_value' => 'Bethesda'
));

если (have_posts ()) while (have_posts ()): the_post ();
echo '<? li>';
the_title ();
эхо '<? / li>';
конец пока;

wp_reset_query (); ?>
<? / div>
<? / div>
<? php get_footer (); ?>
  1. Сохранить изменения

Код готов пройти через все настраиваемые поля и найти только ключи «Издатель» со значением «Bethesda». Вы можете изменить ключ и значение на все, что захотите. Если вы хотите отображать все сообщения с настраиваемым полем «Издатель», содержащим любое значение, просто полностью удалите строку «meta_value».

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

2. Добавьте страницу:

Теперь ваш шаблон готов, и вы можете продолжить создание списка:

  1. Перейдите в Pages-> Add New
  2. Добавить заголовок
  3. Справа найдите «Атрибуты страницы».
  4. Выберите свой шаблон из раскрывающегося списка «Шаблон».
  5. Опубликуйте страницу

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

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

Показать боковую панель с помощью настраиваемых полей

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

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

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

1. Подготовьте шаблон:

  1. Откройте файл page.php или single.php
  2. Найдите следующий код: <? Php get_sidebar (); ?>
  3. Замените код на этот:
 <? php $ sidebar = get_post_meta ($ post-> ID, 
"сайдбар", правда);
get_sidebar ($ sidebar);
?>
  1. Сохранить изменения
  2. Создайте собственный шаблон, в котором будет находиться ваша боковая панель.
  3. Откройте файл sidebar.php
  4. Скопируйте все из sidebar.php и вставьте в свой собственный файл шаблона.
  5. Сохранить изменения.

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

2. Используя боковую панель в настраиваемых полях:

  • Введите «боковая панель» под названием настраиваемого поля.
  • Введите имя вашего настраиваемого шаблона в качестве значения поля

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

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

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

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

Еще раз, настраиваемые поля вам помогут.

1. Подготовьте файл:

Прежде чем мы будем использовать настраиваемое поле для изменения верхних, нижних колонтитулов или боковых панелей, вы должны подготовить файл. Допустим, вы хотите изменить заголовок для одного или двух сообщений и создали новый файл с именем header-header2.php, в котором вы изменили дизайн или вставили в сообщение конкретную рекламу. Прежде чем вы сможете продолжить создание настраиваемого поля, убедитесь, что файл правильно закодирован и работает на вашем сайте. Как только файл будет готов, вы можете продолжить.

Будьте осторожны при именовании файла - если вы пытаетесь изменить заголовок, ваш новый файл заголовка должен выглядеть так: header-newname.php

2. Заменить код:

  1. Откройте файл single.php
  2. Найдите get_header (); часть кода, которая обычно находится в самом верху страницы single.php
  3. Замените функцию следующей:
 глобальный $ wp_query;
$ postid = $ wp_query-> post-> ID;
$ header = get_post_meta ($ postid, "заголовок", истина);
if (! empty ($ header)) {
get_header ($ заголовок);
} еще {
get_header ();
}
wp_reset_query ();
  1. Сохранить изменения

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

3. Измените заголовок через настраиваемое поле:

Если у вас есть header-header2.php, загруженный в вашу тему, теперь вы можете вызвать его в настраиваемом поле:

  1. Откройте сообщение, для которого вы хотите изменить заголовок
  2. Прокрутите вниз и перейдите к настраиваемым полям
  3. Введите новое поле и назовите его «заголовок».
  4. Введите «header2.php» в значение поля.
  5. Обновите или опубликуйте пост

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

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

То же самое касается файла боковой панели или нижнего колонтитула, конечно, путем изменения частей кода get_sidebar () и get_footer () .

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

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

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

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

Код темы ACF

ЦЕНА: Бесплатно

Код темы ACF для WordPress

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

Аарон Ратли, один из создателей, объяснил в своем блоге:

«При реализации поля в теме WordPress, скорее всего, я забуду имя поля, было ли это« profile_image »или« profile_photo »? Я также, вероятно, забуду, как я установил, что это поле должно возвращаться, было ли это ID, URL или массив? Я обнаружил, что постоянно редактирую полевую группу, чтобы выяснить это ».

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

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

Хотя плагин уже необходим любому разработчику, Аарон говорит, что они уже планируют расширить код темы ACF:

«Мы планируем добавить поддержку более популярных сторонних полей в будущем. Мы также планируем предоставить разработчикам больший контроль над создаваемым кодом ».

Хотя плагин является бесплатным в сочетании с бесплатной версией ACF, вам понадобится версия PRO, если вы используете расширенную версию Advanced Custom Fields. ACF Theme Code Pro генерирует код для всех других типов полей ACF Pro, таких как поля «Клонирование», «Галерея», «Повторитель» и «Гибкое содержимое».

Отображение вашего настроения или песни с настраиваемыми полями

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

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

1. Давайте добавим «особенность настроения»:

  1. Откройте файл single.php
  2. Скопируйте и вставьте следующий код в то место, где вы хотите отображать свое настроение:
 $ customField = get_post_custom_values ​​(«настроение»);
if (isset ($ customField [0])) {
echo "<span class = 'my_mood'>". "Настроение: " 
. $ customField [0]. "</span>";
}
  1. Сохранить изменения
Настроение настраиваемых полей

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

2. Добавьте свое настроение / песню в сообщение:

Чтобы ввести настроение или песню, вам нужно будет написать ее в настраиваемом поле:

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

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

  1. Напишите «настроение» в поле имени или «песня», если вы решили пойти с этим.
  2. Напишите все, что хотите, в поле «Значение» - это будет настроение / песня, отображаемая в вашем сообщении.
  3. Нажмите кнопку «Добавить настраиваемое поле».
  4. Опубликуйте свой пост

3. Стиль:

Как вы уже можете видеть всего из трех строк кода, это простейшая форма добавления нового настраиваемого поля. Если вы хотите стилизовать свое настроение с помощью некоторого CSS, вы можете увидеть, что код уже добавил к вашему тексту класс «my_mood». Чтобы изменить стиль, сделайте следующее:

  1. Откройте файл style.css
  2. Скопируйте и вставьте код:
 .мое настроение {
цвет синий;
}
  1. Добавьте любой стиль CSS, который вам нравится
  2. Сохранить изменения.

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

Подводя итоги

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

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