将 JS 和 jQuery 排入特定 wordpress 页面的头部答案

【问题标题】：Enqueue JS and jQuery to head of specific wordpress pages将 JS 和 jQuery 排入特定 wordpress 页面的头部
【发布时间】：2022-01-08 23:45:15
【问题描述】：

我希望将 jQuery 函数添加到 WordPress 特定页面的头部。就是让手风琴打开后可以关闭。

我只需要在 -> WooCommerce 单一产品页面、常见问题解答页面和联系我们页面上使用它。

Page Slugs = ('faqs','contact')
is_singular('product') 用于单个产品页面

添加到functions.php 的操作 - 保存成功但不起作用。不知道我做错了什么。

function my_closeaccordionscript() {
    if( is_page( array( 'faqs','contact') ) ){
        wp_enqueue_script( 'toggle-script', '/assets/js/accordiontoggle.js', array(), '1.0.0', true );
    }
    if(is_singular('product')){
        wp_enqueue_script( 'toggle-script', '/assets/js/accordiontoggle.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_closeaccordionscript' );

这是保存在子主题目录中的'accordiontoggle.js'的文件内容...wp-content/themes/child-theme/assets/js/accordiontoggle.js

编辑：

答案是使用get_theme_file_uri()

{wp_enqueue_script( 'script-name', get_theme_file_uri('/assets/js/accordiontoggle.js'), array(jquery), '1.0.0', true );}

【问题讨论】：

标签： php jquery wordpress woocommerce woocommerce-theming

【解决方案1】：

您的 PHP 代码对于选择性加载脚本是正确的，并且使用两个 IF 语句是正确的控制流。

使用 wp_enqueue_script 将 jQuery 脚本加入队列时，您需要添加 jQuery 作为依赖项：

wp_enqueue_script( 'toggle-script', '/assets/js/accordiontoggle.js', array('jquery'), '1.0.0', true );

典型的 jQuery 脚本必须用：

jQuery(function($) {
    $(document).ready(function() {
    // Your code goes here
    });
 });

或者（使用它是因为您正在处理图像）：

jQuery(function($) {
    $(window).on('load', function () {
    // Your code goes here
    });
});

这很重要，因为wp_enqueue_scripts 将脚本插入到首先加载的文档<head> 中。无需等待 document ready 或 window load 事件，您正在使用 jQuery 选择尚不存在的元素。

来自jQuery docs：

'在文档“准备好”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。 $( document ).ready() 中包含的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。 $( window ).on( "load", function() { ... }) 中包含的代码将在整个页面（图像或 iframe）（而不仅仅是 DOM）准备好后运行。'

【讨论】：

【解决方案2】：

堆栈成员Ruvee 为这个问题提供了很大的帮助，但他的答案/cmets 似乎消失了。

我们尝试了各种方法，但我终于通过将get_theme_file_uri()添加到文件源来让它工作。

{wp_enqueue_script( 'script-name', get_theme_file_uri('/assets/js/accordiontoggle.js'), array(jquery), '1.0.0', true );}

【讨论】：

【解决方案3】：

它可能位于子主题中。为了在位于子主题文件夹中的前端加载脚本，您可以使用get_stylesheet_directory_uri(). 如果脚本不在文件的标题中，您可以使用。 add_action('wp_head','my_closeaccordionscript');

function my_closeaccordionscript() { if( is_page( array( 'faqs','contact') ) ){ wp_enqueue_script( 'toggle-script', get_stylesheet_directory_uri() . '/assets/js/accordiontoggle.js', array(), '1.0.0', true ); } if(is_singular('product')){ wp_enqueue_script( 'toggle-script', get_stylesheet_directory_uri() . /assets/js/accordiontoggle.js', array(), '1.0.0', true ); }} add_action( 'wp_enqueue_scripts', 'my_closeaccordionscript' );

【讨论】：