如何在unctions.php中正确添加Java脚本

时间：2014-06-25 作者：user2806026

我想删除一些看起来很难看的箭头，它们是WooCommerce中购物车按钮上的标准箭头。为了实现这一点，我找到了添加以下代码的技巧，当文档加载后，这些代码应该会删除箭头。

我想我会把它放在我的函数中。php？我该怎么做呢？

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

EDIT

可以我尝试过这种方法：

创建了一个名为“removeArrows”的文件。并将其放在我的插件文件夹中。这与原始代码的内容相同，除了jQuery而不是$。然后，我在函数中添加了以下内容。php：

function wpb_adding_scripts() {
      wp_register_script(\'my_amazing_script\', plugins_url(\'removeArrows.js\', FILE), array(\'jquery\'),\'1.1\', true);
     wp_enqueue_script(\'my_amazing_script\');
 } 

add_action( \'wp_enqueue_scripts\', \'wpb_adding_scripts\' );

我不知道如何使代码正确显示。这不起作用。对此有什么建议吗？

jQuery Snippet Source

4 个回复

最合适的回答,由SO网友:Pieter Goosen 整理而成

你的$scr 在您的wp_register_script() 功能错误。考虑到你的功能。php在插件和removeArrows中。js位于插件的根目录中$scr 应该是这样的

plugins_url( \'/removeArrows.js\' , __FILE__ )

另一点需要注意的是，最好最后加载脚本和样式。这将确保它不会被其他脚本和样式覆盖。为此，只需在priority参数中添加一个非常低的优先级（非常高的数字）($priority) 属于add_action.

 add_action( \'wp_enqueue_scripts\', \'wpb_adding_scripts\', 999 );

以及always 通过加载/排队脚本和样式wp_enqueue_scripts 动作挂钩，因为这是正确使用的挂钩。Do not 将脚本和样式直接加载到wp_head 或wp_footer

EDIT

对于主题，正如您所指出的，您现在已将所有内容移动到您的主题$scr 将更改为此

 get_template_directory_uri() . \'/removeArrows.js\'

对于父主题和此

get_stylesheet_directory_uri() . \'/removeArrows.js\'

用于子主题。您的完整代码应该如下所示

function wpb_adding_scripts() {
    wp_register_script(\'my_amazing_script\', get_template_directory_uri() . \'/removeArrows.js\', array(\'jquery\'),\'1.1\', true);
    wp_enqueue_script(\'my_amazing_script\');
} 

add_action( \'wp_enqueue_scripts\', \'wpb_adding_scripts\', 999 );

SO网友:Matt Royal

我不会再添加另一个外部js文件，它只是一个额外的、不必要的资源，我们希望减少页面加载时间。

我会使用wp_head 钩您可以将以下内容粘贴到主题或插件函数文件中。我还确保jQuery处于无冲突模式，如下所示。

add_action(\'wp_head\',\'woocommerce_js\');

    function woocommerce_js()
    { // break out of php ?>

  <script>

    jQuery(document).ready(function($) {
        $(".woocommerce-cart").html(function(i, val) {
        return val.replace(" →", "");
        });
        $(".woocommerce-cart").html(function(i, val) {
        return val.replace("← ", "");
        });
    });

    </script>

    <?php } // break back into php

完成此操作并刷新页面后，请检查页面源代码，以确保此jQuery片段实际上已加载到页面中。如果是，那么它应该可以工作，除非它们在您使用的实际jQuery代码段中出现了问题。

SO网友:maverick

由于答案已经被接受，我只想说还有另一种方法可以将javascript代码排在页脚中，我已经做了很多次了。

在函数中。php文件：

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( \'wp_footer\', \'load_script_to_remove_arrow\' );

只能使用条件将此脚本加载到特定页面模板

if( is_page_template( \'page-template.php\' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

如果是页面模板。php位于目录中（例如主题根目录中的templates目录），您可以这样编写：

is_page_template( \'templates/page-template.php\' );

SO网友:fred heuvel

要回答这个问题，我们必须首先区分javascript和JQuery。

以简单的方式陈述：

Javascript基于ECMAScript，JQuery是一个Javascript库，所以实际上您会问两个不同的问题：

您的标题谈到了实现javascript的解决方案您的问题谈到了实现JQuery的解决方案，因为Google结果显示了您的标题，页面的所有内容都谈到了JQuery，这可能会让搜索javascript解决方案的人感到非常沮丧。

现在来看JQuery解决方案：

wp_enqueue_script( \'script-id\', get_template_directory_uri() . \'/js/script.js\', array ( \'jquery\' ), 1.1, true);

以及javascript解决方案：

wp_enqueue_script( \'script-id\', get_template_directory_uri() . \'/js/script.js\', array(), \'1.0.0\', true );

可以将此代码添加到函数中。php两种情况下脚本的位置都是wp-content/themes/theme-name/js/script.js

快乐的编码！

结束

小码农CODE

如何在unctions.php中正确添加Java脚本

相关推荐

如何在WordPress的post-new.php中添加自定义命令