Сайты на заказ > Сайтостроение > Фоновое слайд-шоу в Oxygen Builder с использованием ACF и Backstretch

Фоновое слайд-шоу в Oxygen Builder с использованием ACF и Backstretch

Представленное ниже пособие показывает собой другой способ достижения того же визуального результата, что и предыдущий пост «Фоновое слайд-шоу в Oxygen Builder».

Здесь основное внимание уделяется реализации и части кода, а не столько фактическому конечному результату.

Мы будем

  • добавлять поле Repeater, содержащее подполе изображения, на пользовательской странице настроек администратора с помощью ACF Pro
  • в функции, подключенной к wp_enqueue_scripts внутри функционального плагина, будем загружать Backstretch, перебирать изображения, загруженные на страницу настроек, сохранять URL-адреса изображений в массиве и передавать это в JavaScript в качестве источника для инициализации Backstretch в теге body с помощью wp_localize_script()
  • создавать div в Oxygen и накладывать его по центру вверху страницы.

Фоновое слайд-шоу в Oxygen Builder с использованием ACF и Backstretch

Шаг 1

Установите и активируйте Advanced Custom Fields Pro.

Установите и активируйте плагин Code Snippets, если вы еще этого не сделали.

Добавьте новый фрагмент с именем, скажем, «Страница параметров ACF - ACF Options Page», имеющий:

if ( function_exists( 'acf_add_options_page' ) ) {

    acf_add_options_page();

}

Установите его для запуска только в админке.

Шаг 2

Добавьте новую группу полей с именем, скажем, «Группа фоновых изображений -Background Images Group» с повторителем - Repeater - background_images.

Добавьте поле изображения background_image внутри повторителя - Repeater.

Оставьте возвращаемое значение - Return Value - по умолчанию, Массив изображений - Image Array. Причина, по которой этот параметр не установлен на URL-адрес изображения, связана с риском, связанным с передачей контроля клиентам, которые могут загружать огромные изображения, которые слишком велики (по размеру файла и размерам), т.е. больше чем необходимо. Мы зарегистрируем собственный размер изображения и будем использовать URL-адреса изображений, соответствующих ему.

Вот файл экспорта группы полей.

Шаг 3

Установите и активируйте плагин пользовательских функций.

Шаг 4

Загрузите jquery.backstretch.min.js в wp-content/plugins/my-custom-functionality/assets/js.

Создайте файл с именем, скажем, backstretch-init.js в том же месте, содержащий следующее:

(function ($) {

    $('body').backstretch(BackStretchImg.src, {
        duration: 4000, // amount of time in between slides in milliseconds. Default: 5000
        fade: 750,
    });

})(jQuery);

Шаг 5

Отредактируйте plugin.php плагина.

а) добавьте

 

add_image_size( 'background-image', 1600, 900, true );

Регенерируйте миниатюры (плагином Regenerate thumbnails или аналогичным), если это необходимо.

б) Внутри custom_enqueue_files() добавьте

if ( is_page( 'background-slideshow' ) ) {
    wp_enqueue_script(
        'backstretch',
        plugin_dir_url( __FILE__ ) . 'assets/js/jquery.backstretch.min.js',
        array(),
        '2.1.16',
        true
    );

    wp_enqueue_script(
        'backstretch-init',
        plugin_dir_url( __FILE__ ) . 'assets/js/backstretch-init.js',
        array( 'backstretch' ),
        '1.0.0',
        true
    );

    $image_urls = array();

    if ( have_rows( 'background_images', 'option' ) ) {
        while ( have_rows( 'background_images', 'option' ) ) : the_row();

            $image = get_sub_field( 'background_image' );

            if ( ! empty( $image ) ) {
                $image_urls[] = $image['sizes']['background-image'];
            }

        endwhile;
    }

    wp_localize_script(
        'backstretch-init',
        'BackStretchImg',
        array(
            'src' => $image_urls,
        )
    );
} // End if().

Измените if ( is_page( 'background-slideshow' ) ) в зависимости от того, где вы хотите иметь фоновое слайд-шоу.

Шаг 6

Перейдите в «Параметры» на панели инструментов и добавьте фоновые изображения.

Фоновое слайд-шоу в Oxygen Builder с использованием ACF и Backstretch

Шаг 7

Отредактируйте свою страницу/шаблон с помощью Oxygen Builder. Не наследуйте ни от какого другого шаблона, так как мы хотим начать с абсолютно пустой страницы.

Добавьте раздел - Section.

Установите Горизонтальное выравнивание элемента по центру - Alignment to Center.

Установите высоту на 100vh.

«Дополнительно» > «Макет»: установите «Выровнять содержимое по центру».
Advanced > Layout: Set Justify Content to center.

Добавьте Div внутри раздела. Это наш оверлейный div (overlay div). Добавьте нужные элементы, такие как заголовок, текст и кнопка (Heading, Text, and Button) внутри этого Div.

Для оверлейного div установите Display на flex, Flex Direction на column, Horizontal Item Alignment и Vertical Item Alignment на Center и Middle соответственно.

Установите ширину, скажем, 800 пикселей.

Цвет фона: rgba(255,255,255,0.8)

Отступы: 80 пикселей сверху и снизу, 40 пикселей слева и справа.

Вот и все!

Рекомендации:

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

Ваш адрес email не будет опубликован.

[sc name="yandex"][/sc]
Copyright © 2021, GuruSite24. Копирование материалов сайта запрещено.
menu-circlecross-circle