WordPress按需加载脚本：在特定页面中正确引入JS和jQuery的教程

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

<?php
function my_custom_scripts() {
    // 检查是否为 'faqs' 或 'contact' 页面，或者 WooCommerce 单个产品页面
    if ( is_page( array( 'faqs', 'contact' ) ) || is_singular( 'product' ) ) {
        wp_enqueue_script(
            'toggle-script',                               // 脚本句柄
            get_theme_file_uri( '/assets/js/accordiontoggle.js' ), // 使用 get_theme_file_uri 获取正确路径
            array(),                                       // 依赖数组，稍后会添加 jQuery
            '1.0.0',                                       // 版本号
            true                                           // 在页脚加载
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
?>

<?php
function my_custom_scripts() {
    if ( is_page( array( 'faqs', 'contact' ) ) || is_singular( 'product' ) ) {
        wp_enqueue_script(
            'toggle-script',
            get_theme_file_uri( '/assets/js/accordiontoggle.js' ),
            array( 'jquery' ),                             // 声明依赖 jQuery
            '1.0.0',
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
?>

jQuery(function($) {
    // 等待DOM完全加载后执行代码
    $(document).ready(function() {
        // 您的自定义 jQuery 代码放在这里
        // 例如：处理手风琴的开关逻辑
        $('.accordion-item .accordion-header').on('click', function() {
            $(this).next('.accordion-content').slideToggle();
        });
    });
});

jQuery(function($) {
    // 等待整个页面（包括所有资源）加载后执行代码
    $(window).on('load', function () {
        // 您的自定义 jQuery 代码放在这里
        // 例如：依赖图像尺寸的布局调整
    });
});

<?php
/**
 * 按条件加载自定义脚本
 */
function my_closeaccordionscript() {
    // 检查当前页面是否为 'faqs' 或 'contact'，或者 WooCommerce 单个产品页面
    if ( is_page( array( 'faqs', 'contact' ) ) || is_singular( 'product' ) ) {
        wp_enqueue_script(
            'toggle-script',                                         // 脚本句柄
            get_theme_file_uri( '/assets/js/accordiontoggle.js' ),   // 使用 get_theme_file_uri 获取主题内脚本的正确路径
            array( 'jquery' ),                                       // 声明脚本依赖于 jQuery
            '1.0.0',                                                 // 脚本版本号，用于缓存清除
            true                                                     // 将脚本加载到页脚
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_closeaccordionscript' );
?>

/**
 * 手风琴切换脚本
 * 确保在DOM加载完成后执行
 */
jQuery(function($) {
    $(document).ready(function() {
        // 您的手风琴逻辑代码
        // 假设您的HTML结构是这样的：
        // <div class="accordion-item">
        //     <div class="accordion-header">手风琴标题</div>
        //     <div class="accordion-content">手风琴内容</div>
        // </div>

        $('.accordion-item .accordion-header').on('click', function() {
            // 切换当前手风琴内容的显示/隐藏
            $(this).next('.accordion-content').slideToggle();

            // 如果需要，可以添加类来表示手风琴的打开/关闭状态
            $(this).toggleClass('is-active');
        });

        // 初始加载时，如果需要所有手风琴默认关闭
        $('.accordion-content').hide();
    });
});