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

Question

我正在根据开发人员的建议更改插件（ 请参阅最新文章 ），该建议建议在Wordpress的functions.php中编写一些Javascript。

现在，当我这样做时，我的整个wordpress变成了空白。 好了，经过一番思考。“您不能在PHP内编写纯Javascript”。

因此，我将它们写在<script>标记内，并将其写在echo " ， "; 标签。 现在..我不确定该功能是否正常工作（尚未进行测试），但Wordpress再次显示，但是..

注意：未定义的变量：第8行/home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php中的组
注意：未定义的变量：/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行

这是代码文件

所以我的问题是：
有什么问题，如何使这些消息消失？

正确答案

尽管我接受@Burak的答案，但这只是正确答案的一半。 另请参阅@RahilWazir的部分，他/她的答案的一半属于解决方案。 由于Burak带有正确的脚本，因此RahilWazir提出了将其放在footer.php而不是functions.php 。 然后把它放在那里，就成功了。 在functions.php中，没有让我达到我想要的目标。 因此，谢谢你们！

Answer 1

在WordPress中有更好的标准方法

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

Answer 2

当您使用双引号时，PHP会将带有$符号的变量视为php变量。 您需要将其更改为单引号并重新排列代码，或者需要查看适用于此类情况的Heredoc 。

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

您需要等待DOM完全初始化。 因此，将您的jQuery代码片段包装在ready处理程序中。 甚至更好的方法是，在关闭</body>标记之前，将此片段放置在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 4

当使用双引号""定义JS字符串时，PHP将$group解释为变量。 为了解决这个问题，您需要使用单引号'' 。