Advanced custom fields pro инструкция

Интернет-магазин «acfwp.ru», расположенный на доменном имени  acfwp.ru, именуемое в дальнейшем «Продавец», публикует Публичную оферту о продаже Товара дистанционным способом.

  1. ОПРЕДЕЛЕНИЕ ТЕРМИНОВ

1.1.    Публичная оферта (далее – «Оферта») — публичное предложение Продавца, адресованное неопределенному кругу лиц, заключить с Продавцом договор купли-продажи товара дистанционным способом (далее — «Договор») на условиях, содержащихся в настоящей Оферте, включая все Приложения.

1.2.    Заказ Товара на сайте Интернет-магазина – позиции, указанные Покупателем из ассортимента Товара, предложенного к продаже, при оформлении заявки на приобретение Товара на сайте Интернет-магазина или через Оператора.

  1. ОБЩИЕ ПОЛОЖЕНИЯ

2.1. Заказ Покупателем Товара, размещенного на сайте Интернет-магазина означает, что Покупатель согласен со всеми условиями настоящей Оферты.

2.2. Администрация сайта Интернет-магазина имеет право вносить изменения в Оферту без уведомления Покупателя.

2.3. Срок действия Оферты не ограничен, если иное не указано на сайте Интернет-магазина.

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

  1. ЦЕНА ТОВАРА

3.1. Цена на каждую позицию Товара указана на сайте Интернет-магазина.

3.2. Продавец имеет право в одностороннем порядке изменить цену на любую позицию Товара.

3.3. В случае изменения цены на заказанный Товар Продавец обязуется в течение 10 дней проинформировать Покупателя об изменении цены Товара.

3.4. Покупатель вправе подтвердить либо аннулировать Заказ на приобретение Товара, если цена изменена Продавцом после оформления Заказа.

3.5. Изменение Продавцом цены на оплаченный Покупателем Товар не допускается.

3.6. Продавец указывает стоимость доставки Товара на сайте Интернет-магазина либо сообщает Покупателю при оформлении заказа Оператором.

3.7. Обязательства Покупателя по оплате Товара считаются исполненными с момента поступления Продавцом денежных средств.

3.8. Расчеты между Продавцом и Покупателем за Товар производятся способами, указанными на сайте Интернет-магазина в разделе  Контакты

  1. ОФОРМЛЕНИЕ ЗАКАЗА

4.1. Заказ Товара осуществляется Покупателем сервис сайта Интернет-магазина acf.acfwp.ru.

4.2. При регистрации на сайте Интернет-магазина Покупатель обязуется предоставить следующую регистрационную информацию:

4.2.1. фамилия, имя, отчество Покупателя или указанного им лица (получателя);

4.2.2.  адрес, по которому следует доставить Товар (если доставка до адреса Покупателя);

4.2.3. адрес электронной почты;

4.2.4. контактный телефон.

4.3. Наименование, количество, ассортимент, артикул, цена выбранного Покупателем Товара указываются в корзине Покупателя на сайте Интернет-магазина.

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

4.6. Принятие Покупателем условий настоящей Оферты осуществляется посредством внесения Покупателем соответствующих данных в регистрационную форму на сайте Интернет-магазина или при оформлении Заказа через Оператора. После оформления Заказа через Оператора данные о Покупателе регистрируются в базе данных Продавца. Утвердив Заказ выбранного Товара, Покупатель предоставляет Оператору необходимую информацию в соответствии с порядком, указанном в п. 4.2. настоящей Оферты.

4.7. Продавец не несет ответственности за содержание и достоверность информации, предоставленной Покупателем при оформлении Заказа.

4.8. Покупатель несет ответственность за достоверность предоставленной информации при оформлении Заказа.

4.9. Договор купли-продажи дистанционным способом между Продавцом и Покупателем считается заключенным с момента получения Продавцом сообщения о намерении Покупателя приобрести Товар.

  1. ДОСТАВКА И ПЕРЕДАЧА ТОВАРА ПОКУПАТЕЛЮ

5.1. Продавец оказывает Покупателю услуги по доставке Товара одним из способов указанных на сайте Интернет-магазина.

5.2. Если Договор купли-продажи товара дистанционным способом (далее – Договор) заключен с условием о доставке Товара Покупателю, Продавец обязан в установленный Договором срок доставить Товар в место, указанное Покупателем, а если место доставки Товара Покупателем не указано, то по месту его жительства или регистрации.

5.3. Место доставки Товара Покупатель указывает при оформлении Заказа на приобретение Товара.

5.4. Срок доставки Товара Покупателю состоит из срока обработки заказа и срока доставки.

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

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

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

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

Согласен с договором

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

  • Что такое произвольные поля в WordPress?
    • Когда использовать произвольные поля?
    • WordPress предоставляет встроенный функционал произвольных полей
  • Advanced Custom Fields упрощает дело
    • Бесплатная или платная версия плагина Advanced Custom Fields?
  • Как добавлять произвольные поля с помощью Advanced Custom Fields
    • Создание новой группы произвольных полей
    • Добавьте произвольные поля
    • Настройте параметры и опубликуйте
    • Добавьте дополнительную информацию в редакторе WordPress
    • Обзор условной логики
  • Как отображать условные поля на сайте
    • Как добавить произвольные поля в файлы шаблона темы оформления
    • Как отображать данные произвольных полей с помощью шорткода
    • Как отображать произвольные поля с помощью Elementor Pro
  • Резюме

Произвольные поля WordPress позволяют добавлять и отображать дополнительную информацию. Например, хранить метаданные.

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

  • Цена.
  • Вес.
  • Цвет.

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

  • Место проведения.
  • Время начала и окончания.
  • Стоимость билета.

Произвольные поля обладают несколькими важными преимуществами:

  • Более простой ввод — продуманная группа произвольных полей значительно облегчит ввод данных. Например, можно выбрать необходимую дату в календаре.
  • Согласованность — информация, которую вы вводите в произвольные поля, всегда будет отображаться в заданном формате.
  • Простое обновление – благодаря произвольным полям можно внести изменения в одном месте, а не редактировать каждый пост по отдельности.

В классическом редакторе постов и страниц произвольные поля можно включить в «Настройках экрана». В новом блочном редакторе их можно активировать в разделе параметров:

WordPress предоставляет встроенный функционал произвольных полей

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

Затем можно ввести значение и идентификатор произвольного поля.

WordPress предоставляет встроенный функционал произвольных полей - 2

Встроенная функциональность произвольных полей в WordPress

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

Плагин Advanced Custom Fields упрощает интерфейс добавления и управления произвольными полями в административной панели и процесс их отображения на страницах сайта.

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

Advanced Custom Fields упрощает дело

Advanced Custom Fields в блочном редакторе.

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

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

  • Repeater fields— позволяют повторять определенные поля и группы полей в различных постах. Например, если вы добавляете информацию об участниках конференции, данный тип произвольного поля позволяет быстро добавить данные о каждом спикере.
  • Блоки ACF — отображают произвольные поля как блоки редактора Gutenberg, а не как мета-блоки. Это позволяет реализовать более простой способ ввода и визуализации данных.
  • Flexible content field– позволяет создавать макеты из других полей. Фактически это конструктор страниц, основанный на данных из произвольных полей.
  • Gallery field – позволяет загружать нескольких изображений в одно поле.

Более подробно возможности Advanced Custom Fields PRO описаны здесь.

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

  • Цель – он практикует два разных типа бега: скоростной и тренировочный.
  • Расстояние – сколько пробежал.
  • Время начала — когда начал бег.
  • Время окончания — когда закончил бег.
  • Место — где проходила тренировка.

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

  1. Как добавлять произвольные поля и управлять ими.
  2. Как отобразить информацию из произвольных полей на страницах сайта.

После установки и активации бесплатной версии плагина Advanced Custom Fields в левой боковой панели перейдите в раздел Произвольные поля > Добавить.

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

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

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

Создание новой группы произвольных полей

Создание новой группы полей ACF

Нажмите кнопку «+Добавить поле», чтобы создать первое произвольное поле.

Добавьте произвольные поля

Добавление нового произвольного поля

Это действие откроет перечень свойств. Два наиболее важных из них:

  • Ярлык поля – это то, что отобразится в редакторе. Ярлык также будет использоваться для генерации имени поля, которое будет отображаться в коде.
  • Тип поля – формат информации, которую будет содержать поле. Например, поле Число собирает числовую информацию, а поле Email– адреса электронной почты.

Для первого поля установим тип переключатель (Radio).

Добавьте произвольные поля - 2

Настройка произвольного поля

Далее введите варианты состояния переключателя

Ввод вариантов состояния переключателя

Рассмотрим другой пример: произвольное поле для отображения расстояния пробега. На этот раз используем тип данных «Число»:

Создание числового поля

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

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

Повторите этот процесс для всех других полей, которые вы хотите создать.

5 различных полей ACF

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

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

Настройте параметры и опубликуйте

Настройка параметров группы полей ACF

После этого опубликуйте  свою группу произвольных полей, чтобы она отобразилась на сайте.

После публикации группа произвольных полей появится при создании нового поста.

Добавьте дополнительную информацию в редакторе WordPress

Advanced Custom Fields в редакторе WordPress.

Информация, вводимая в них, будет храниться в базе данных WordPress.

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

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

Обзор условной логики

Пример условной логики

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

Обзор условной логики - 2

Остальные произвольные поля отображаются при установке флажка

Чтобы настроить условную логику, необходимо отредактировать ранее созданную группу полей и добавить новое поле «Да/Нет» для условия «Этот пост о беге?»:

Добавление поля «Да/Нет»

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

Добавление уловной логики к другим полям

Созданные произвольные поля пока не появляется на сайте.

Как отображать условные поля на сайте

Произвольные поля не отображаются на сайте

Давайте исправим это. Существует несколько способов произвольных полей на страницах сайта:

  1. Файлы шаблонов используемой темы оформления – это решение требует технических знаний.
  2. С помощью шорткодов – это простой вариант, если нужно вставить данные из поля на отдельных страницах сайта. Но вам придется добавлять шорткоды в каждый пост.
  3. С помощью Elementor Pro – это самый простой способ, потому что он полностью избавляет от необходимости работать с PHP. Но это платный инструмент.

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

Первоначально нужно отредактировать шаблон выбранного типа записи. Шаблон обычного поста располагается в файле single.php. Некоторые темы оформления разбивают этот шаблон на части. Например, в теме TwentyNineteen нужно будет отредактировать часть шаблона в файле content-single.php.

После этого нужно использовать функцию Advanced Custom Fields the_field() для отображения информации из произвольного поля. Например:

<?php the_field('FIELD_NAME'); ?>

Больше информации об этой функции доступно здесь.

Например, чтобы отобразить произвольное поле «Цель», используйте приведенный ниже код:

<?php the_field('purpose'); ?>

Имя произвольного поля указано в разделе редактирования группы полей:

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

Где найти имя поля ACF.

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

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Чтобы разместить поле над содержимым поста, добавьте этот код в файл шаблона темы оформления над the_content().

Как добавить произвольные поля в файлы шаблона темы оформления - 2

Куда добавить код в файле шаблона.

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

Теперь вы можете видеть произвольные поля на страницах сайта

Чтобы узнать больше, посмотрите полную документацию по Advanced Custom Fields.

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

Пример шорткода:

Как отображать данные произвольных полей с помощью шорткода

Использование шорткодов для отображения данных ACF

После этого вы получите результат, аналогичный предыдущему.

Как отображать данные произвольных полей с помощью шорткода - 2

Результат использования шорткодов.

Elementor является одним из самых популярных конструкторов страниц WordPress. Он позволяет создавать страницы путем перетаскивания элементов.

Платный вариант плагина Elementor Pro позволяет создавать файлы шаблонов темы оформления и вставлять динамические данные из произвольных полей.

Для этого перейдите в раздел Templates > Theme Builder новый шаблон Elementor для поста.

Как отображать произвольные поля с помощью Elementor Pro

Создание нового шаблона Elementor Single.

Вы можете добавить стандартные виджеты Elementor для заголовка и содержимого поста. Затем для отображения данных из произвольного поля добавьте виджеты текстового редактора и выберите опцию Dynamic.

Как отображать произвольные поля с помощью Elementor Pro - 2

Опция “Dynamic” в Elementor Pro

После этого в выпадающем списке выберите значение ACF Field.

Выбор “ACF Field”

После чего задайте произвольное поле, которое вы добавили с помощью Advanced Custom Fields.

Выбор произвольного поля, которое нужно отобразить

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

Добавление информации

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

Overview

Welcome

Advanced Custom Fields is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as Custom Fields and can allow you to build websites faster and educate your clients quicker. In this guide, you’ll learn how to:

  • Install the ACF plugin
  • Create new fields
  • Create field content
  • Display fields in your theme
  • Register custom post types and taxonomies

The Basics

Custom fields are a native part of WordPress and appear on pages, posts and custom post types, however, the native custom field interface is not very user friendly. With ACF installed, you can tailor what fields to show and what they look like. For instance, you may require a ‘Hero Image’ to be selected for your home page. You can use ACF to easily create this Image field and show it when editing the home page! Here is the difference between native custom fields and Advanced Custom Fields.

Native Custom Fields

Advanced Custom Fields

Installation

The Advanced Custom Fields plugin does not come pre-installed with WordPress so you will need to install our plugin before using its awesome features! Luckily for you, WordPress makes this a very easy process! If you are familiar with WordPress, simply login to your site and search/install the Advanced Custom Fields plugin from the plugins page. For detailed instructions, please read our step by step instruction guide.

Creating Fields

Creating new custom fields is a very easy process and can be done with just a few clicks of our user friendly field builder! You can create as many fields as you like, each with their own name, type and settings. Each field is added to a group which allows you to both organize your fields and specify the edit screens where they appear.

Field groups are used to organize fields and attach them to edit screens. Each field group contains a title, fields, location rules and visual settings. To get started with your first field group, please read our Creating a Field Group guide.

Field group list

Field group settings

Field group location rules

Field group location rules

Each field contains settings to customize how the field looks (its type), where its value is saved (its name) and how it functions (its settings). These field settings can be customized when editing a field group. To learn more about field settings, please read our Field Settings guide.

Creating Content

With your fields created, it’s time to start editing your content! All our fields are very intuitive to use and display seamlessly with the WordPress admin style. You don’t need to trigger any event to show or edit custom fields, they will appear and function just like the WP post_title and post_content fields! Simply enter your content and update the post!

Fields are not just available for posts! You may also display fields your custom fields on the page, custom post type, user, taxonomy term, comment, media and custom options pages!

To get an idea of the different content you can edit in ACF, please look over the available field types.

Displaying Fields

Displaying field values is ACF’s party piece! Any field value can be returned as a PHP variable or output as HTML via the magical functions get_field() and the_field(). These functions (alongside many others) provide a developer friendly way to customize your WordPress theme without spending hours reading our docs! Here is some example code to see how our intuitive API works!

<h1><?php the_title(); ?></h1>

<?php if( get_field('sub_heading') ): ?>
    <h2><?php the_field('sub_heading'); ?></h2>
<?php endif; ?>

<div class="hero">
    <?php $image = get_field('hero_image'); ?>
    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>

<?php if( have_rows('event') ): ?>
    <ul>
    <?php while( have_rows('event') ): the_row(); ?>
        <li>
            <a href="<?php the_sub_field('url'); ?>"><?php the_sub_field('title'); ?></a>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

To learn more about our API, please see our Functions and check out our Code Examples guide.

Custom Post Types and Taxonomies

Custom post types and taxonomies turn WordPress into a full content management system. Post types give you much greater control over how your content is created, customized, displayed, and managed. Taxonomies give you the same power over how your data and content is organized and categorized.

ACF allows you to register your custom post types and taxonomies directly in the plugin. This greatly simplifies workflows by avoiding the need to register them manually with code or use another plugin. Just create a post type in the UI, then follow it up by adding an existing field group, creating a new field group and defining fields, or by creating a taxonomy.

Register a new custom post type with ACF.

Please see Post Types and Taxonomies for our in-depth guide.

Education and Support

Good work! This guide covered all the basics for getting started creating with the Advanced Custom Fields plugin, but we’ve only scratched the surface of our available resources. As you work more about ACF, you’ll discover new features, functions, and even a powerful suite of PRO features that can help you take your WordPress website to the next level. If you have any questions that weren’t addressed in this guide, visit our Resource Center for more information or contact our support team directly.

Обзор Advanced Custom FieldsAdvanced Custom Fields переводится как Продвинутые Кастомные (Произвольные) Поля.

То есть, кроме стандартных полей Заголовок, Редактор, Миниатюра и так далее, в редакторе Постов, Страниц и других типов записей, вы можете добавить свои собственные кастомные поля.

В этой статье вы узнаете, как настроить и как пользоваться плагином ACF.

Содержание:

Стандартные поля редактора WordPress
Что такое кастомные поля. Что с их помощью можно делать.
Когда использовать Кастомные Поля
Встроенные в Вордпресс Произвольные Поля
Плагин Advanced Custom Fields

  • Настройка плагина
  • Добавьте Группу полей
  • Добавьте Кастомные поля
  • Настройки Группы полей
  • Дублирование Группы полей
  • Отображение полей в бэк-энде
  • Условная логика

Как выводить поля Advanced Custom Fields

  • Как добавить Кастомные поля в файлы темы
  • Как вывести Кастомные поля с помощью шорткода
  • Как вывести Кастомные поля с помощью Elementor Pro

Сообщество Advanced Custom Fields
ACF Free vs. Pro
Альтернативы Advanced Custom Fields

Заключение

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

Стандартные поля редактора WordPress

Стандартные поля редактора WordPress

Стандартные поля редактора WordPress

Что такое кастомные поля. Что с их помощью можно делать.

Кастомные (Произвольные) поля позволяют добавлять, хранить и выводить дополнительную информацию о вашем контенте.

Например, WooCommerce использует свои собственные кастомные поля для хранения дополнительной информации о Товарах:

  • Цена
  • Вес
  • Цвет
  • Размер

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

  • Место события
  • Дата / Время начала
  • Цена

Для сайта с недвижимостью вы можете выводить поля с типом недвижимости, арендой или продажей, количеством комнат, метражом, и так далее.

Для сайта о фильмах вы можете выводить информацию о режиссёре, студии, продолжительности, жанре фильма, и так далее.

Сайт аренды автомобилей выводит данные о типе кузова, объеме двигателя, типе трансмиссии и так далее.

Еще одна область применения плагина Advanced Custom Fields — на сайтах клиентов.

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

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

Пример банера на Главной странице

Пример Банера / Слайдера на Главной

Добавьте кастомные поля в админке той страницы, на которой находится слайдер, а вывод полей — на слайдере.

Тогда клиент может изменить текст на слайдере в бэк-энде сайта без использования пейдж-билдера. И нажать на кнопку Обновить.

Или, например, изменить цвет шрифта или фон секции.

Еще более продвинутая идея — вынести всю кастомную информацию на отдельную страницу в админке, например, текст в слайдере, вопросы и ответ FAQ / ЧаВо, контактную информацию, и так далее.

В бесплатной версии ACF вы можете использовать такие типы кастомных полей:

Основное

  • Текст
  • Область текста
  • Число
  • Диапазон
  • E-mail
  • Ссылка
  • Пароль

Содержание

  • Изображение
  • Файл
  • Редактор WordPress
  • Медиа

Выбор

  • Выбор (select)
  • Флажок (checkbox)
  • Переключатель (radio)
  • Группа кнопок
  • Да / Нет

Отношение

  • Ссылка
  • Объект записи
  • Ссылка на страницу
  • Записи
  • Таксономия
  • Пользователь

jQuery

  • Расположение на карте
  • Дата
  • Дата и время
  • Время
  • Цвет

Блок

  • Сообщение
  • Аккордеон
  • Вкладка
  • Группа

Когда использовать Кастомные Поля

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

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

Использовать кастомные поля лучше по нескольким причинам:

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

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

Сайт недвижимости - Кастомные поля

Сайт недвижимости — Кастомные поля

Количество ванных комнат, спален и гаражей — кастомные поля. Расположение — кастомное поле.

Встроенные Произвольные Поля

В Вордпрессе есть встроенный функционал произвольных полей:

Инструменты - Настройки - Произвольные поля

Инструменты — Настройки — Произвольные поля

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

Встроенные кастомные поля Вордпресс

Встроенные кастомные поля Вордпресс

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

Обычно этим функционалом пользуются плагины, например SEO плагины.

С плагином Advanced Custom Fields работать с полями гораздо проще. У плагина более понятный интерфейс с бóльшим числом функций и гораздо более простым выводом полей.

Плагин ACF установлен на более чем 1 млн. сайтов и имеет рейтинг 98% на основе 1.100+ отзывов.

После установки плагин добавляет раздел меню Группы полей (Custom Fields) в админке Вордпресс.

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

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

Advanced Custom Fields — Настройка плагина

Подробная инструкция по настройке плагина Advanced Custom Fields.

Пример: Предположим, у вас он-лайн школа, и время от времени вы проводите курсы / вебинары на 3 определенные темы.

Вы хотите выводить на Главной странице информацию об этих вебинарах. В этом примере вы добавите кастомные поля для вывода такой информации:

  • Название вебинара
  • Картинка вебинара
  • Описание вебинара
  • Дата начала вебинара
  • Кнопка со ссылкой на страницу вебинара

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

ACF — Добавьте Группу полей

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

Группа полей — это одно или несколько полей, которые относятся к одной по смыслу информации.

Например: Я хочу добавить Группы полей для 3 вебинаров. Для каждого вебинара нужно создать свою группу полей, которая будет состоять из 5 полей: Название, Изображение, Описание, Дата начала и Кнопка со ссылкой.

В этом примере нужно создать 3 Группы полей, по 5 полей каждая. Для удобства Группу полей можно создать один раз и несколько раз продублировать.

Условия отображения Группы полей

Дайте название Группе полей, и настройте отображение

В эту группу полей будут входить 5 полей. Группа будет отображаться на Странице Advanced Custom Fields.

ACF — Добавьте Кастомные поля

Чтобы добавить первое поле — в этом примере Название вебинара или курса, — нажмите на кнопку Добавить поле:

ACF - Добавьте кастомное поле

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

Заполните поля:

ACF - Настройте кастомное поле

Настройте кастомное поле

Все настройки понятны из описания, кроме Атрибуты, — это ширина поля в бэк-энде.

Если вы хотите поместить несколько полей в один ряд — используйте эту настройку. В этом примере я задал ширину первого поля 65%.

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

Атрибуты ширины этим четырем полям я дам 50%. Подробнее далее.

В итоге должно получиться так:

ACF - Группа полей

Группа полей ACF

ACF — Настройки Группы полей

Группа полей создана, сделайте настройки отображения полей на выбранных страницах, в этом примере — на странице Advanced Custom Fields:

ACF - Настройки Группы полей

Настройки Группы полей

У всех настроек понятные описания, если не уверены — оставьте настройки по умолчанию.

Нажмите Опубликовать.

ACF — Дублирование Группы полей

В нашем примеры нужны 3 одинаковые группы, которые отличаются только индексом имен полей, то есть:

  • Группы полей называются Курс 1, Курс 2, Курс 3
  • Имена полей Название Курса называются course-title-1, course-title-2, course-title-3
  • Имена полей Картинка Курса называются course-image-1, course-image-2, course-image-3
  • И так далее…

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

Перейдите в Группы полейГруппы полей и продублируйте готовую группу:

ACF - Продублируйте группу полей

Продублируйте группу

Переименуйте группу в Курс 2 и замените «1» в именах полей на «2», чтобы получилось так:

ACF - Создайте вторую Группу полей

Создайте вторую Группу полей

Таким же образом создайте третью Группу полей. Не забудьте добавить «3» к каждому имени поля. В итоге должно получиться так:

ACF - Готовые группы полей

Готовые группы полей

Перейдите на страницу Advanced Custom Fields, посмотрите что получилось:

ACF - Кастомные поля в бэк-энде

Кастомные поля в бэк-энде страницы

ACF — Отображение полей в бэк-энде

В этом примере я дал полям Картинка Курса, Краткое описание Курса, Дата начала и Кнопка 50% ширины в Атрибутах поля.

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

Например, вы можете настроить отображение всех трех полей Название Курса в одной строке, если в Группе полей вы расположите все 3 поля Название Курса друг за другом и дадите каждому полю 33% ширины.

Картинки Курса будут во второй строке, каждое поле займет 33% ширины, и так далее.

ACF - Расположение полей в ряд с помощью настройки Атрибуты

Расположение полей в ряд с помощью настройки Атрибуты

Расположите в Группе полей каждое поле всех трёх Курсов друг за другом и дайте каждому полю 33% ширины.

В НастройкахРасположение меток выберите Вверху:

ACF - Расположение меток

Настройки — Расположение меток — Вверху

Так у вас получится 1 аккордеон со всеми тремя Курсами вместо трёх аккордеонов с 1 Курсом в каждом.

Еще один вариант расположения — с помощью Типов полей — Вкладка и Группа:

ACF - Типы полей Вкладка и Группа

Типы полей Вкладка и Группа

Чтобы сгруппировать Курсы по вкладкам, создайте Группу полей с типом Вкладка.

После этого добавьте поле с типом Группа. Внутри настроек поля Группа в разделе Вложенные поля добавьте нужные поля, в этом примере:

  • Название Курса
  • Картинка Курса
  • Краткое описание Курса
  • Дата начала
  • Кнопка

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

ACF — Условная логика

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

Например, вы можете отключить показ полей, если решите не проводить Курс и снимите галочку:

ACF - Управление условной логикой

Галочка отключает показ всех полей

Добавьте поле Будет Курс? с Типом поля Да / Нет. Включите условную логику на всех полях каждого Курса. Настройте логику Показывать поле, если поставлена галочка в поле Будет Курс?

ACF - Условная логика

Условная логика

Как вывести поля Advanced Custom Fields

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

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

Существует 3 способа вывести поля в ACF:

  1. Добавить код в файлы темы. Этот способ требует технических знаний, но считается лучшим.
  2. С помощью шорткодов. Очень простой способ и используется, когда вы хотите поместить кастомные поля только в нескольких местах.
  3. С помощью Elementor Pro. Аналог первого способа, но без необходимости работать с PHP.

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

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

Первый способ выводить поля ACF — добавить PHP функции Advanced Custom Fields в файлы шаблонов дочерней темы.

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

Например, если вы хотите добавить вывод полей ACF на всех страницах блога, вам нужно редактировать файл single.php.

В вашей теме это может быть другой файл, например, в теме TwentyNineteen этот файл называется content-single.php.

После того, как вы нашли файл шаблона страницы, добавьте в нужное место файла функцию ACF the_field() для вывода нужного поля. Подробнее о функции the_field().

В общем виде функция выглядит так:

Имена полей можно посмотреть здесь:

Имена полей ACF

Имена полей ACF

Документация по функциям Advanced Custom Fields.

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

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

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

Шорткод для вывода полей ACF:

[acf field="имя_поля"]

Например, такой шорткод выводит поле Название Курса:

[acf field="course-title-1"]

Если вы используете Родительские и Дочерние поля, вам нужно указать оба шорткода:

[acf field="родительский-шорткод_дочерний-шорткод"]

То есть, если вы использовали поле Вкладка, а в нем дочернее поле Название Курса, то шорткод должен быть такой:

[acf field="course-1_course-title-1"]

Как выводить Кастомные поля с помощью Elementor Pro

Elementor — один из самых популярных конструкторов страниц. Он позволяет создавать страницы просто перетаскивая виджеты.

С помощью Elementor Pro вы можете создавать шаблоны страниц, включая добавление в них кастомных полей Advanced Custom Fields.

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

В этом примере вы добавляете поля на странице Advanced Custom Fields. Откройте страницу в Элементоре и добавьте виджеты для вывода кастомных полей.

Чтобы выводить Изображение, сделайте так:

Вывод полей ACF в Elementor Pro

Вывод изображения ACF в Elementor Pro

Остальные поля выводятся аналогично.

Если вы хотите выводить поля, например, на всех страницах Блога, вам нужно редактировать шаблон страницы.

Elementor - Конструктор темы - Одиночная

Elementor — Конструктор темы — Одиночная

Создайте или загрузите нужный шаблон страницы и добавьте в него вывод ACF полей в нужном месте.

У ACF есть большое сообщество, которое занимается разработкой дополнений для плагина:

  • AwesomeACF.com
  • Advanced Custom Fields for WooCommerce

ACF Free vs. Pro

У плагина ACF есть версия Pro, в которой есть:

  • Повторяющиеся поля — Вы можете повторять нужные поля на нужных страницах. Например, вы пишите о каком-то мероприятии, на котором будет несколько выступающих. В этом случае вам не нужно подбирать количество полей для каждого мероприятия вручную. Вы можете нажать +Добавить поле в админке каждой страницы, чтобы добавить столько полей, сколько нужно.
  • Блоки ACF — Вы можете создавать свои собственные блоки для редактора Гутенберг.
  • Гибкие поля — Еще больше возможностей для организации полей в группы.
  • Страницы с настройками — Создавайте страницы в админке WP с кастомными полями.
  • Галерея — Поле с несколькими картинками.
  • Клонирование полей — Позволяет использовать существующие поля или группы полей по запросу.

Альтернативы Advanced Custom Fields

  • Custom Field Suite — бесплатный, простой и легкий плагин, в котором «нечему ломаться». Поля выводятся с помощью PHP.
  • CMB2 — бесплатный плагин. Метабоксы, кастомные поля и формы.
  • Meta Box — бесплатный плагин, аналог ACF с 40 типами кастомных полей. Для работы требуется генерировать код в он-лайн генераторе. Инструкция.
  • PODS — бесплатный плагин, который кроме кастомных полей создает кастомные типы страниц и таксономии. Создает страницы в админке WP для вывода настроек. Лучший бесплатный плагин для кастомных полей, страниц, таксономий и остального.
  • Toolset — Платный и дорогой плагин. Кастомные поля, страницы и таксономии. Шаблоны, архивы, листинги, контроль доступа / мембершип, формы и карты.
  • JetEngine — платный, но недорогой плагин. По функционалу превосходит предыдущий плагин. JetEngine cоздает Кастомные поля, Кастомные типы страниц, Кастомные таксономии, Страницы опций, Формы, Листинги, Админку пользователей и многое другое. Один из флагманов CrocoBlock, постоянно развивается. Определенно стоит своих денег.

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

Я рекомендую плагин JetEngine и вообще софт Crocoblock. У них есть готовые динамические шаблоны и другой готовый софт для реализации ваших идей.

Заключение

Как видите, даже бесплатная версия ACF предлагает большой функционал.

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

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

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

Надеюсь, статья была полезна. Оставляйте комментарии.

Время на прочтение
4 мин

Количество просмотров 12K

Часть 1. Немного лирики

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

Advanced Custom Fields (ACF) – один из популярных плагинов WordPress. Основная задача — создание блоков дополнительной информации к Постам, Страницам и Товарам. Плагин настолько популярен, что вопросы по нему входят в список MustKnow на различных собеседованиях.

Ничего не имею против самого плагина — это очень удобный инструмент, с широкими возможностями. Имеет встроенную возможность выводить редактирование статей во фронтенд. Позволяет создавать поля по условию и связывает поля с нужными постами. Например, для новостного сайта вы решили в блоке спортивных новостей создать дополнительный тег с указанием вида спорта, чтобы не забывать это делать, вы создаете поле типа select, которое будет появляться при выборе категории «Спорт» и требуете его обязательного заполнения.

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

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

Часть 2. Получаем ACF поля

Итак, от прелюдии к делу. Постановка задачи — выводим редактирование товаров во фронтенд, при этом редактирование должно включать в себя возможность редактирования ACF полей связанных с товаром по условию категории. То есть, менеджер добавляя товар должен иметь возможность (или обязанность) заполнить сопутствующую категории товара информацию. Например, в категории «Фрукты» появляется поле «Сорт», а категории «Телефоны» — поле «Бренд» и так далее. Если вы работаете через административную панель, то задача тривиальная. Но у вашего менеджера есть ограничения — пускать его в административную панель никто не собирался. Поэтому функционал административной панели для вас отрезан.

Стандартный функционал ACF не предлагает возможности запроса по условиям. Вывод полей происходит в связке с ID поста. Это связано с особенностями сохранения в базе данных. Условие «Категория товара» не привязывается к сохраняемой информации. Поэтому начинаем искать поля и условия.

Самая востребованная таблица базы данных posts, что связано с широким набором инструментов разработанных для данной таблицы. Именно в ней и хранятся наши поля. Для полей ACF зарезервированы два типа записей — в колонке ’post_type’ мы находим поля типов ’acf-field-group’ и ’acf-field’. Первый тип записей, как следует из его названия, отвечает за группу полей, второй тип записей отвечает непосредственно за поле. Связка между ними происходит по полю ’post_parent’.

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

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

a:12:{s:8:"location";a:1:
{i:0;a:1:
{i:0;a:3
{s:5:"param";s:13:"post_taxonomy";s:8:"operator";s:2:"==";s:5:"value";s:27:"product_cat:fruit";}
}
}
s:8:"position";s:6:"normal";s:5:"style";s:7:"default";s:15:"label_placement";s:4:"left";s:21:"instruction_placement";s:5:"label";s:14:"hide_on_screen";s:0:"";s:11:"description";s:0:"";s:18:"acfe_display_title";s:0:"";s:13:"acfe_autosync";s:0:"";s:9:"acfe_form";i:0;s:9:"acfe_meta";s:0:"";s:9:"acfe_note";s:0:"";
}

Вы будете проверять по своим условиям, для понимания всей этой белиберды выделю пункты, которые важны по данному полю:

s:5:"param";s:13:"post_taxonomy";s:8:"operator";s:2:"==";s:5:"value";s:27:"product_cat:fruit";

Здесь содержится вся нужная нам информация:

  • параметр условия «post_taxonomy»;

  • значение по условию должно быть «==»;

  • ну и само значение «product_cat:fruit»;

Теперь мы знаем какую группу полей нам необходимо использовать, можно переходить к самим полям. Выборку полей производим по колонке ’post_parent’. У нас есть названия и ID полей, но пока мы не знаем типы полей и связанные с ними условия. Вновь переходим к данным поля ’post_content’, теперь наши данные выглядят немного иначе:

a:10:
{s:4:"type";s:4:"text";s:12:"instructions";s:0:"";s:8:"required";i:1;s:17:"conditional_logic";i:0;s:7:"wrapper";a:3:
{s:5:"width";s:0:"";s:5:"class";s:0:"";s:2:"id";s:0:"";}
s:13:"default_value";s:0:"";s:11:"placeholder";s:0:"";s:7:"prepend";s:0:"";s:6:"append";s:0:"";s:9:"maxlength";s:0:"";}

Здесь для нас упакованы сведения связанные с выводимым полем:

  • тип поля — «text»;

  • обязательное для заполнения — «required»;

  • класс, длина, значение по-умолчанию, плейсхолдер и т. д.

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

Часть 3. Сохраняем информацию

Но остался ещё один вопрос — что делать с полученной информацией? Поэтому нам необходимо разобраться как сохраняется информация ACF.

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

Обычная запись в таблице postmeta состоит из 4 полей — уникальный ключ в БД (порядковый номер записи), ID поста с которым связано поле, идентификатор (по которому разработчик получает поле функцией get_post_meta () ) и значение.

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

при сохранении данных ACF вносятся запись с именем поля и со значением.

ключ _sort содержит ссылку на post_name поля ACF из таблицы posts, а запись с ключом sort (без подчеркивания) сохраняется значение поля.


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

Понравилась статья? Поделить с друзьями:
  • Adseal в стоматологии инструкция по применению
  • Adper single bond 2 инструкция
  • Adol extra инструкция по применению
  • Adol caplets инструкция на русском языке
  • Adobe premiere pro инструкция на русском pdf скачать