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

Автор: | 29.04.2020

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

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

– Использование Advanced Custom Fields для динамического контента

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

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

добавить поля ACF

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

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

поле ACF

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

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

произвольные поля на главной

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

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

вывод на экран произвольных полей ACF

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

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»   — смотрим имя текстового поля в группе полей, созданных ранее

Имя поля acf

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

новый контент на главной магазина

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

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

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

баннер с иконками font awesome

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

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

новая вкладка в группе полей acf

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

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

fant awesome icon

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

новые поля с иконками acf

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

В 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, то есть он должен появиться после первого баннера.

новый баннер на главной

Осталось добавить немного стилей в style.css.

В следующей статье рассмотрим как вывести последние посты блога на главной странице.

Похожие записи
Как изменить Woocommerce с помощью дочерей темы. Часть 12 — настройка страницы входа в систему

Стандартная страница входа на сайт wordPress выглядит не очень привлекательно. Read more

Добавить комментарий

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

один + 13 =