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

Question

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

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

页面弹头 = ('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 );}

Answer 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 文档：

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

Answer 2

堆栈成员 Ruvee 对这个问题提供了很大的帮助，但是他的回答/评论似乎已经消失了。

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

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

Answer 3

它可能位于 child 主题中。为了在位于 child 主题文件夹中的前端加载脚本，您可以使用 get_stylesheet_directory_uri(). 如果脚本不在您可以使用的文件的 header 中。 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' );

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

Enqueue JS and jQuery to head of specific wordpress pages

php

wordpress

jquery

woocommerce

woocommerce-theming