在 Wordpress 中排队 jQuery

Posted 2023-05-09

【中文标题】在 Wordpress 中排队 jQuery

【英文标题】：Enqueueing jQuery in Wordpress

【发布时间】：2019-05-28 06:22:47

【问题描述】：

我正在尝试通过 functions.php 将我的 jQuery 文件排入队列，但它似乎不起作用。

我知道脚本可以工作，因为如果我把它放在 <script>...</script> 中包含的 .php 文件的底部，它就可以正常工作

该文件已被称为 jargon.js

我在functions.php中调用了这个文件：

add_action('wp_enqueue_scripts','asap_scripts');
// Register your assets during `wp_enqueue_scripts` hook inside 
`functions.php`.
function asap_scripts() 
   // Give the path of the script
    wp_register_script('js-jargon', get_stylesheet_directory_uri() . 
'/js/jargon.js',array('jquery')); 

我正在使用 jQuery，我的 JS 代码如下：

function toggleAnswer()  
jQuery(this).next('.jargon-desc').slideToggle();
  

 jQuery('.jargon-desc').hide();

 jQuery('.jargon-header').click(toggleAnswer);

任何帮助都会很棒。 我使用相同的方法调用了其他脚本并且效果很好。但我似乎对这个有问题..？

【问题讨论】：

给一个人一条鱼，他们吃一天，教一个人钓鱼，他们吃一辈子：运行代码时“注册”的路径是什么？当您在浏览器中“查看源代码”时，完整路径是什么？如果单击完整路径，会加载什么？你有信心你的行动会成功吗？你做了什么来测试/确保它正在触发？例如，如果将var_dump(get_stylesheet_directory_uri() 放在asap_scripts 函数中，它会输出什么？

@cale_b - wp_register_script() 是一个内置的 wp 函数，用于基于一些钩子在页眉或页脚中包含样式/脚本。它是基于输入参数的 html <script> 标签上非常标准的输出。 wordpress 中非常标准的程序。

@ObmerkKronen - 确实如此。不知道我说了什么给你的印象是我认为这是问题的一部分。我认为问题与OP的脚本文件所在的路径有关....

@cale_b - 对不起，我的错。我刚刚看到var_dump() 并假设您将register_script() 视为OP 编写的normal 函数或类似的东西。对不起。应该通读参数。 :-) 无论如何，问题似乎是 OP 甚至没有排队。

【参考方案1】：

首先 - 请在问题中包含 JS，以及您从控制台或 php、日志等收到的错误（not working 不是描述..）

无论如何——

您似乎在注册脚本句柄，但并没有真正enqeuing它..

     <?php
    function asap_scripts() 

    wp_register_script('my_amazing_script_handle',  get_stylesheet_directory_uri() . 
'/js/jargon.js', __FILE__), array('jquery'),'1.1', true);

    wp_enqueue_script('my_amazing_script_handle');
    

    add_action( 'wp_enqueue_scripts', 'asap_scripts' );  
    ?>

如您所见，wp_register_script() 仅注册您的句柄，然后 wp_enqueue_script() 是根据注册的句柄实际触发包含的人..

至于其他可能的罪魁祸首以及调试的经验法则（因为 OP 中缺乏信息）：

尝试以下三点结合调试：

指定 jQuery 而不是 $。 （wp 中的已知问题）

如果您使用 jQuery - 则指定 jQuery('el') 而不是 $('el')

将脚本排入页脚（挂钩 wp_footer() 操作）

像这样：

 wp_enqueue_script( 'my-script-handler-js', 
                    plugins_url( '/src/my-script.js', dirname( __FILE__ ) ), 
                    array( 'jquery' ), 
                    filemtime( plugin_dir_path( __FILE__ ) . '/src/my-script.js' ), 
    ,'ver', TRUE );

用jQuery(document).ready(function ($) ... );开火

【讨论】：

JS - function toggleAnswer() jQuery(this).next('.jargon-desc').slideToggle(); jQuery('.jargon-desc').hide(); jQuery('.jargon-header').click(toggleAnswer);

@SupGen - 请将它与一些调试信息（控制台错误？）一起添加到您的问题（编辑）中 - 另请参阅我关于 wp_enqueue_script VS wp_register_script 的回答

【参考方案2】：

@ObmerkKronen 感谢您的帮助。

我做了一个简单的改变：

`function ASAP_scripts() wp_register_script('js-jargon', get_stylesheet_directory_uri() . '/js/jargon.js', array('jquery'),'1.1', true); wp_enqueue_script('js 行话');

add_action( 'wp_enqueue_scripts', 'ASAP_scripts' );  `

工作完美。再次感谢

【讨论】：

好。现在关于这个答案 - 首先你可以评论我的答案而不是添加另一个答案:-)。其次，如果我的回答解决了您的问题，请尝试to accept it（点击分数附近的绿色小图标）以将其标记为已解决..