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

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

Здесь нужно упомянуть, что существуют плагины для вп, которые создают WYSIWYG-редактор, причем и на бэкенде (в админе то есть) и на фронтенде. Таким, например, является Visual Composer. Но все же призываю вас пользоваться тем, что я сейчас предложу, так как эти плагины страшно глючат! К тому же, как правило, платные, или входят в состав платных тем.

Итак, самый лучший профессиональный, многофункциональный и надежный плагин — это Advanced Custom Fields, сокращенно ACF.

Скачать можно здесь, полная документация здесь: advancedcustomfields.com.

Учим от простого к сложному.

Устанавливаем плагин: идем в админ вп > Плагины > Добавить новый > в поисковой строке пишем Advanced Custom Fields > он появится в первом кубике слева (зеленый с белыми буквами ACF) > Утановить > Активировать.

Для примера рассмотрим одностраничник Velocee. Абсолютно все на этом one-pager выведено с помощью ACF.

Теперь нужно разобраться, как выводить на главной не список блоговых записей (как по умолчанию), а СТРАНИЦУ.

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

К счастью, в Вордпрессе есть опция — выводить посты или выводить статичную страницу в качестве главной. Для этого мы идем в админке вп в пункт Settings (настройки) > Reading (Чтение). И отмечаем галочкой пункт Static Page, а в выпадающем селекте выбираем страницу, которую будем выводить в качестве главной страницы сайта.

Если вы только установили вп, у вас будет доступна только одна страница — Sample Page. Хорошо бы нам создать свою страницу, например назовем ее Home Page. Для этого пройдите в админке в пункт меню Pages (Страницы) > Add New (Добавить новую). Ставим заголовок Home Page и публикуем. Теперь из Настроек > Чтение эта страница станет доступна из селекта. Выберем ее, обновим настройки.

По умолчанию страницы вордпресса выводятся шаблоном page.php, в нашей базовой теме (twentyfourteen) этот файл лежит в корне темы, там же где индекс и все остальные. В более сложных темах шаблоны могут храниться в других папках. Как правило, ищите что-то типа page-templates, templates или template-parts — в любом случае, папка должна носить какое-то осмысленное название (template — это шаблон). Вы также можете проследить пути через другие файлы (когда вместо кода страницы вы видите включение областей), или просто зацепиться за какой-нибудь класс на фронте и найти через Total Commander нужный файл (подробнее об этом здесь).

Открываем наш page.php в редакторе html. Возвращаемся в админку вп.

После установки плагина ACF в админе вп появится пункт меню Custom Fields (Произвольные поля):

У меня уже создан один набор полей Home Page, у вас будет в этом месте пусто, поэтому жмите на кнопку Add New:

Назвите как-то понятно свой новый набор полей. Можно называть по именам страниц, для которых вы делаете эти наборы. Теперь — внимание. Для начала сразу определите, для каких страниц (постов, категорий, шаблонов или кастомных постов) будут активны ваши произвольные поля:

Вариантов привязки — множество, это очень удобно. Постепенно разберетесь со всеми доступными опциями, пока что выберем Page is equal to Home Page (Страница равна Home Page).

Публикуем.

Теперь пора создать наше первое произвольное поле. На Velocee первый текст после шапки выводится полем main_text. То есть жмем +Add Filed, вводим название поля (как оно будет выводится в админке страницы, что-то понятное. Если сайт русскоязычный — на русском), автоматом появится под ним Field Name, оно должно быть обязательно на английском! Без пробелов (ставьте нижнее подчеркивание). Если сайт русскоязычный, то стираем это поле и набираем по-английски.

Выбираем тип поля, в нашем случае Text Area. Для вывода текста можно также выбрать опцию WYSYWIG Editor, тогда в админе страницы это поле будет иметь те же возможности для редактирования, как и текстовое поле по умолчанию (форматирование текста, вставка медиа, линков и т.п.)

Я выбираю Text Area, так как никакого особенного форматирования, согласно дизайну, не предусматривается. В поле ниже, где мы видим Convert HTML into tags (разрешить использование HTML) можно выбрать Convert new lines into <br> tags — это значит — конвертировать сброс на следующую строку в <br>, то есть при даче абзаца в этом поле в админе страницы текст будет сбрасываться на новую строку и на фронт-енде.

Выбрали все нужно и жмем справа наверху Update.

В соседнем окне (чтобы не прыгать туда-сюда) откроем наши Страницы > Home Page. Ура, поле появилось!

У меня в настройках стоит — «Разрешить использование HTML», так что вы видите хтмл-разметку внутри поля.

Но на странице с фронта ничего не изменилось — текст не вывелся. Итак, как нам вывести ACF в шаблоне страницы?

Переходим в наш текстовый редактор в открытый page.php.

Предполагаю, слайдер и меню у нас уже заверстаны в header.php. Так что в page.php самой верхней строкой после get_header(); ?> вставляем наше Произвольное поле. Оно у меня уже завернуто в див:

<div class="container">
    <?php echo get_field('main_text') ; ?>
</div>

Все! Вот так просто. Заливаем на сервер и обновляем страницу с фронта — текст появился.

Следующий урок с усложненным использованием ACF — Bootstrap-карусель через кастомные поля ACF в Вордпрессе.