Menu
Представленное ниже пособие показывает собой другой способ достижения того же визуального результата, что и предыдущий пост «Фоновое слайд-шоу в Oxygen Builder».
Здесь основное внимание уделяется реализации и части кода, а не столько фактическому конечному результату.
Мы будем
Шаг 1
Установите и активируйте Advanced Custom Fields Pro.
Установите и активируйте плагин Code Snippets, если вы еще этого не сделали.
Добавьте новый фрагмент с именем, скажем, «Страница параметров ACF - ACF Options Page», имеющий:
|
1 2 3 4 5 |
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 в том же месте, содержащий следующее:
|
1 2 3 4 5 6 7 8 |
(function ($) { $('body').backstretch(BackStretchImg.src, { duration: 4000, // amount of time in between slides in milliseconds. Default: 5000 fade: 750, }); })(jQuery); |
Шаг 5
Отредактируйте plugin.php плагина.
а) добавьте
|
1 |
add_image_size( 'background-image', 1600, 900, true ); |
Регенерируйте миниатюры (плагином Regenerate thumbnails или аналогичным), если это необходимо.
б) Внутри custom_enqueue_files() добавьте
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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 пикселей слева и справа.
Вот и все!
Рекомендации:
Cloudflare окончательно заблокирован в РФ ещё летом 2025 года.
Функцию фильтрации ботов Cloudflare взял на себя российский антибот Killbot.
Принцип работы отличается от привычного, отслеживаются не знакомые всем при настройке других антибот решений параметры (входящие IP адреса, AS подсети ботов, User Agent и прочее, всё это легко подделывается), а уникальные для каждого набора браузеров слепки.
По отличию оригинального браузера от модифицированного, тот или иной заход определяется либо как заход реального посетителя, либо как заход бота.
Чтобы не повторяться - расписывал более подробно в статьях:
Попробовать бесплатно. При регистрации в Killbot введите промокод
promo13
и получите месяц тестирования платного тарифа Killbot (фильтрация трафика, 1000 руб) и Ads (отключение показа рекламы поведенческим ботам, 1000 руб) в качестве бонуса. Этого вам хватит на то, чтобы понять, подходит вам данное решение, или нет. На данный момент - в Рунете нет более достойной альтернативы, по соотношению цена-качество. Срок действия промокода ограничен по времени, куда-то записывать его нет смысла. В следующий раз промокод уже будет другой, поэтому использовать его нужно сейчас, когда вы читаете этот текст. Промокод действует только в форме регистрации. Если аккаунт уже создан - создайте новый, на другой почте, и при регистрации в последнем поле введите промокод.
Подпишитесь на Telegram канал / MAX для того, чтобы всегда быть в курсе последних новостей и обновленных настроек для защиты от ботов, а также оперативно получать новые материалы, выходящие на antibot24.ru
Автор статей: Сергей (AntiBot24). Эксперт в области фильтрации поведенческого трафика, настройки антибот систем. Высший рейтинг на Kwork, более 680 отзывов, 100% заказов успешно сдано, 56% повторных заказов. Пишу подробные статьи, инструкции по фильтрации ботов в своем блоге antibot24.ru
Всегда нужно иметь в виду, что те советы, которые вы прочли в статьях - это лишь часть настроек, которые я делаю при профессиональной экспертной настройке фильтрации поведенческих ботов. Все остальное - это непубличные профессиональные секреты. Любая информация, становящаяся общедоступной - достаточно быстро устаревает и перестает быть эффективной.
Если вы столкнулись с повышенной роботностью в Яндекс метрике, увеличением числа прямых заходов, увеличением количества отказов - вы всегда можете заказать у меня настройку Killbot.