Как изменить Woocommerce с помощью дочерей темы. Часть 5,2 – Использование ACF для динамического контента

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

Вот как должен выглядеть результат

Как добавить контент на главную страницу Woocommerce с помощью ACF

После того, как вы установите плагин Advanced Custom Fields в админпанели wordpress, вы увидите новую вкладку «Группы полей». Создадим новую группу под названием «Для главной».

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

Возвращаемый формат поля изображение выберем «ссылка на изображение».

Перейдем в страницы>>Главная

Внизу должны появиться новые поля

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

Осталось вывести их на странице.

В предыдущих статьях я рассказала, о том, как вносить изменения на страницы с помощью плагина Simply Show Hooks. Мы знаем, что за вывод основного контента отвечает action: homepage.

Добавим новый хук в самый конец, то есть приоритет у него должен быть более 70 (Priority: 70

storefront_best_selling_products).

В functions.php прописываем следующий код

/* баннер с сообщением */

function carolinaspa_banner(){ ?>

<div class="banner-spoij">

<div class="banner-text">

<h3><?php the_field("text_banner"); ?></h3> // выводим текстовое поле

</div>

<div class="banner-image">

<img src="<?php the_field("image_banner");  ?>" alt="banner"> // выводим ссылку на изображение

</div>

</div>




<?php

}

add_action('homepage', 'carolinaspa_banner', 80);

«text_banner», «image_banner» — смотрим имя текстового поля в группе полей, созданных ранее

Смотрим на результат

Осталось внести изменения в файл style.css.

Добавим иконки Font Awesome с описанием

Теперь добавим еще 1 элемент на страницу. Выглядеть он будет так

Если вы еще не установили плагин Advanced Custom Fields: Font Awesome, пора это сделать.

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

В ней создадим 3 текстовых поля и 3 поля для вывода иконок.

Для группы полей выберем тип поля font Awesome icon. Возвращать будем Icon Element

Переходим на Страницы>>Главная и видим новую вкладку с нашими полями

Заполняем поля.

В functions.php пишем следующий код

/* добавить иконки и текст */

function carolinaspa_icons(){ ?>

    <div class="banner-icons">   

    <div class="icons-show">

    <?php the_field("banner_icon"); ?>

    <p><?php the_field("banner_icon_text"); ?></p>

    </div>   

    <div class="icons-show">

    <?php the_field("banner_icon_2"); ?>

    <p><?php the_field("banner_icon_text_2"); ?></p>

    </div>

    <div class="icons-show">

    <?php the_field("banner_icon_3"); ?>

    <p><?php the_field("banner_icon_text_3"); ?></p>

    </div>

    </div>    

    <?php

    }

    add_action('homepage', 'carolinaspa_icons', 15);

Мы добавили новый action с приоритетом 15, то есть он должен появиться после первого баннера.