Представленное ниже пособие показывает собой другой способ достижения того же визуального результата, что и предыдущий пост «Фоновое слайд-шоу в Oxygen Builder».
Здесь основное внимание уделяется реализации и части кода, а не столько фактическому конечному результату.
Мы будем
Шаг 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
Перейдите в «Параметры» на панели инструментов и добавьте фоновые изображения.
Шаг 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 пикселей слева и справа.
Вот и все!
Рекомендации: