Wordpress站点jQuery报$ is not a function错误的解决方法

实现点击button元素为ID为content的元素切换类名、触发模糊效果的代码，在JSFiddle和Chrome扩展中运行正常，原始代码如下：

var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});

按照通用优化方案将代码包裹在$(document).ready(function(){})中，调整后代码如下：

$(document).ready(function(){
var dimthis = $("#content")
var button = $("button")

button.on("click", () => {
dimthis.toggleClass("alt")
});
});

调整后运行抛出 $ is not a function 错误。

原因说明 #

报错站点基于WordPress搭建，WordPress默认启用了jQuery.noConflict();，$ 作为jQuery的别名默认未定义，因此直接使用$调用jQuery方法会报错。

代码调整 #

不能直接使用

$(document).ready(function(){

的写法，需要替换为：

jQuery(document).ready(function($) {

最终实现方案 #

将如下代码添加到子主题的function.php文件中：

function load_dimmer_script(){
    ?>
    <script>
jQuery(document).ready(function($) {
    var dimthis = $("#content")
    var button = $("button")
 
    button.on("click", () => {
    dimthis.toggleClass("alt")
    });
    });
    </script>
    <?php
    }
    add_action( 'wp_footer', 'load_dimmer_script' );

该代码实现效果为：若菜单切换按钮定义为button元素，点击菜单时页面内容（#content）会显示模糊效果，再次点击菜单切换按钮则取消模糊。

配套CSS代码 #

#content.alt {
    filter: blur(4px) !important;
}

内容的提问来源于stack exchange，提问作者ACKmiecik