Задача. На WordPress-сайте есть скрипты, в которых нет необходимости при каком-то разрешении экрана. Например, используется библиотека Masonry для вывода постов, но на мобильных, до 575px в ней нет необходимости.
Решение. Чтобы загружать js-файл только на экранах с необходимой шириной, можно создать отдельный файл с javascript-кодом, который будет определять размер экрана, а потом подгружать скрипт. Используем Код №1 и Код №2 на примере подгрузки библиотеки js/masonry.pkgd.min.js:
- Создаем js-файл с Кодом №1, который будет определять размер экрана и управлять загрузкой библиотеки —
js/screen-check.js. - В
functions.phpподключаемscreen-check.jsи задаем данные пути библиотеки ('masonryUrl') Код №2.
|
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 40 41 42 43 44 45 46 47 |
(function($) { // Глобальная переменная для отслеживания загрузки скрипта window.masonryLoaded = false; function loadMasonryIfNeeded() { if (window.innerWidth > 575) { // Динамическая загрузка скрипта только если он еще не загружен if (!window.masonryLoaded) { var script = document.createElement('script'); script.src = screenCheckData.masonryUrl; script.onload = function() { // Инициализация masonry после загрузки initMasonry(); window.masonryLoaded = true; }; document.body.appendChild(script); } else { // Если скрипт уже загружен, просто инициализируем masonry initMasonry(); } } else { // На маленьких экранах отключаем masonry, если он был инициализирован destroyMasonry(); } } function initMasonry() { // Инициализация masonry $(".grid").masonry({ itemSelector: ".grid-item" }); } function destroyMasonry() { // Проверка, существует ли masonry и инициализирован ли он if (window.masonryLoaded && $(".grid").data('masonry')) { $(".grid").masonry('destroy'); } } // Проверка при загрузке $(document).ready(loadMasonryIfNeeded); // Проверка при изменении размера окна $(window).resize(loadMasonryIfNeeded); })(jQuery); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** Enqueue scripts and styles **/ function qfurs_scripts() { # Мансонри с проверкой для моб. и только для определенных стр. if( is_archive() || is_home() ){ // Сначала загружаем небольшой скрипт для проверки разрешения wp_enqueue_script( 'screen-check', get_template_directory_uri() . '/js/screen-check.js', array('jquery'), null, true ); // Затем регистрируем masonry wp_register_script( 'masonry-pkgd', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array('jquery'), null, true ); // Добавляем localize данные для пути к скрипту wp_localize_script( 'screen-check', 'screenCheckData', array( 'masonryUrl' => get_template_directory_uri() . '/js/masonry.pkgd.min.js' )); } } add_action( 'wp_enqueue_scripts', 'qfurs_scripts' ); |
Код из screen-check.js можно было бы вынести в какой-то общий файл со скриптами, но в случае из примеры мы подключаем библиотеку не на всех страницах, а только в архивных страницах и на главной.