主页 / 问题 / 1251306
Accepted
Oiki
Asked:2022-03-04 03:33:52 +0000 UTC2022-03-04 03:33:52 +0000 UTC

如何仅在一页上使用脚本和样式？

  • 772

我有一个wordpress网站。有一个插件只能在一页上运行。

这是一个特定的页面，有自己的 url。

我更正了 js+css。

好吧，问题是如何连接js + css，以便在不需要它们的页面上不读取样式和脚本，而只在插件工作的页面上读取脚本和样式？

wordpress

2 个回答

  1. Best Answer

    如果不满足条件，您需要在 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
);
    • 2

  2. 如果你的意思是这个短语没有被读取，所以脚本文件和样式文件没有被下载，在这个页面的html模板中，插入一个指向包含脚本的链接：

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

    为了让样式文件只在打开该页面时加载，需要在模板中形成一个头块，并通过链接连接其中的样式文件：

    <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>

    这样，样式将仅应用于此页面上的内容，而不会应用于其余页面。

    有了脚本，一切就简单多了，你只需要在脚本文件中注册一个check，例如在页面URL上，或者，如果页面上有一个与众不同的类，那么尝试按类查找元素：

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

    在这种情况下，应该在每个页面上调用脚本，但只能调用一次，我认为您可以自己编写此逻辑。如果页面错误，脚本将停止执行。

    • -2

相关问题