如何在Wordpress的functions.php中编写Javascript函数？

Question

我正在修改一个关于开发者推荐的插件（见最新帖子），该插件建议在Wordpress的functions.php中编写一些Javascript。

现在，当我这样做的时候，我的整个WordPress变成了空白。嗯，经过一点思考..."你不能在PHP中写纯Javascript"...

所以我把它们写在一个

注意：未定义变量：第8行/home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php中的组注意：未定义变量：第9行/home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php中的选项/第25行的home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php

所以我的问题是：
问题是什么？我如何让这些信息消失？

虽然我接受了@Burak的答案，但这只是正确答案的一半。另请参见@RahilWazir的部分，他/她回答的一半属于解决方案。由于Burak提供了正确的脚本，RahilWazir建议将其放在footer.php中，而不是functions.php。把它放在那里，就成功了。在functions.php中，没有让我实现我所追求的目标。为此，谢谢你们！




Answer 1

您需要等待DOM完全初始化。因此，将jQuery代码片段包装在ready处理程序中。或者更好的方法是在关闭footer.php之前将此代码段放入footer.php文件中

jQuery(document).ready(function($) { // <-- wrap it
    var categories = {};
    var $group = jQuery();
    jQuery('select.app_select_services option').remove().each(function() {
        var $option = jQuery(this),
            contents = $option.text().split(' - '),
            group = jQuery.trim(contents[1]);

        if (!categories.hasOwnProperty(group)) {
            var optGroup = jQuery('<optgroup />', { label: group });
            optGroup.appendTo('select.app_select_services');
            categories[group] = optGroup;
        }

        categories[group].append(jQuery('<option />', {
            text: jQuery.trim(contents[0]),
            value: jQuery(this).val()
        }));
    });
});

Answer 2

当您使用双引号时，PHP会认为带有$的变量作为PHP变量签名。您需要将它们更改为单引号并重新排列代码，或者您需要查看适用于这种情况的herdoc。

echo <<<'EOT'
<script>
( function() {
    var categories = {};
    var $group = jQuery();
    jQuery('select.app_select_services option').remove().each(function() {
        var $option = jQuery(this),
            contents = $option.text().split(' - '),
            group = jQuery.trim(contents[1]);

        if (!categories.hasOwnProperty(group)) {
            var optGroup = jQuery('<optgroup />', { label: group });
            optGroup.appendTo('select.app_select_services');
            categories[group] = optGroup;
        }

        categories[group].append(jQuery('<option />', {
            text: jQuery.trim(contents[0]),
            value: jQuery(this).val()
        }));
    });
} )();
</script>
EOT;

Answer 3

wordpress中有一种更好、更标准的方法

<?php
function add_js_functions(){
?>
<script>
// your js functions here 
</script>
<?php
}
add_action('wp_head','add_js_functions');