Как задействовать скрипт и стиль только на одной странице?

Question

Имею сайт вордпресс. Есть плагин, который работает только на одной странице.

Это конкретная страница, со своим урлом.

Я подкорректировал js+css.

Ну и вопрос как js+css подключить так, чтобы стили и скрипты не читались на тех страницах, где они не нужны, а только на той странице, где работает плагин, для которого предназначены скрипты и стили?

Answer 1

Вам нужно деактивировать стили-скрипты в хуке wp_enqueue_scripts если условия не выполняются - wp_dequeue_style, wp_dequeue_script

Добавить данную функцию в functions.php активной темы

Пример отключения стилей-скриптов для страниц, где не используется плагин woocommerce

add_action(
            'wp_enqueue_scripts',
             function() {

                // Если это НЕ страницы магазина.
                if ( is_plugin_active("woocommerce/woocommerce.php") && ! is_cart() && ! is_checkout() && !is_account_page()) {
                    // Отключаем стили магазина.
                    wp_dequeue_style( 'woocommerce_frontend_styles' );
                    wp_dequeue_style( 'woocommerce-general');
                    wp_dequeue_style( 'woocommerce-layout' );
                    wp_dequeue_style( 'woocommerce-smallscreen' );
                    wp_dequeue_style( 'woocommerce_fancybox_styles' );
                    wp_dequeue_style( 'woocommerce_chosen_styles' );
                    wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
                    wp_dequeue_style( 'select2' );
             
                    // Отключаем скрипты магазина.
                    wp_dequeue_script( 'wc-add-payment-method' );
                    wp_dequeue_script( 'wc-lost-password' );
                    wp_dequeue_script( 'wc_price_slider' );
                    wp_dequeue_script( 'wc-single-product' );
                    wp_dequeue_script( 'wc-add-to-cart' );
                    wp_dequeue_script( 'wc-cart-fragments' );
                    wp_dequeue_script( 'wc-credit-card-form' );
                    wp_dequeue_script( 'wc-checkout' );
                    wp_dequeue_script( 'wc-add-to-cart-variation' );
                    wp_dequeue_script( 'wc-single-product' );
                    wp_dequeue_script( 'wc-cart' ); 
                    wp_dequeue_script( 'wc-chosen' );
                    wp_dequeue_script( 'woocommerce' );
                    wp_dequeue_script( 'prettyPhoto' );
                    wp_dequeue_script( 'prettyPhoto-init' );
                    wp_dequeue_script( 'jquery-blockui' );
                    wp_dequeue_script( 'jquery-placeholder' );
                    wp_dequeue_script( 'jquery-payment' );
                    wp_dequeue_script( 'jqueryui' );
                    wp_dequeue_script( 'fancybox' );
                    wp_dequeue_script( 'wcqi-js' );
                }
            },
             99
);

Answer 2

Если ты имеешь ввиду фразой не читались, чтобы файл скрипта и файл стилей не скачивался, в шаблоне этой страницы в html вставь ссылку на подключаемый скрипт:

<script src="URL на файл скрипта"></script>

Чтобы файлы стилей подгрузились только при открытии этой страницы, то требуется в шаблоне сформировать блок head и в нем через link подключить файл стилей:

<head>
   ...тут контент блока head
   <link rel="stylesheet" href="URL на файл стилей">
</head>

Если же нет необходимости подкачивать файлы стилей и скриптов конкретно на этой странице, т.е. могут быть скачаны в любой момент, то и подключайте их в любой момент. Но, тогда стили должны содержать некий родительский класс, на основании которого они будут применяться к элементам, ну а этот некий родительский класс должен быть повешан на контейнер этой страницы, например на body:

css:
.special-page .title {
  ...стили для title специальной страницы
}

.special-page p {
  ...стили для всех paragraph специальной страницы
}
...и так далее
html:
<body class="special-page">
  ...контент блока body
</body>

Так стили применятся только к контенту на этой странице, на остальных страницах применения не будет.

Со скриптом все гораздо проще, надо просто в файле скрипта прописать проверку, например на URL страницы, или, если будет отличительный класс на странице, то попробовать найти элемент по классу:

script начало файла, или главной исполняемой функции:
const isspecialPage = Boolean(document.querySelector('.special-page'))
if (!isspecialPage) {
  return
}

В таком случае скрипт должен вызываться на каждой странице, но только один раз, эту логику думаю самостоятельно сможете написать. Если страница не та, скрипт прекратит свое выполнение.

БЛОГ НА HUSL

Как задействовать скрипт и стиль только на одной странице?

Ответы (2 шт):