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