Php 在wordpress中实现搜索框的JQuery

我正试图在wordpress中实现一个扩展的搜索框。我已经在我的search-form.php中应用了HTML，在我的style.CSS中应用了CSS。但是，我不确定如何应用Jquery部分。详情如下：-

add_action ('wp_footer','vr_search_head',1);
function vr_search_head() {
?>

<script>
  $(document).ready(function(){
        var submitIcon = $('.searchbox-icon');
        var inputBox = $('.searchbox-input');
        var searchBox = $('.searchbox');
        var isOpen = false;
        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('searchbox-open');
                inputBox.focus();
                isOpen = true;
            } else {
                searchBox.removeClass('searchbox-open');
                inputBox.focusout();
                isOpen = false;
            }
        });  
         submitIcon.mouseup(function(){
                return false;
            });
        searchBox.mouseup(function(){
                return false;
            });
        $(document).mouseup(function(){
                if(isOpen == true){
                    $('.searchbox-icon').css('display','block');
                    submitIcon.click();
                }
            });
    });
        function buttonUp(){
            var inputVal = $('.searchbox-input').val();
            inputVal = $.trim(inputVal).length;
            if( inputVal !== 0){
                $('.searchbox-icon').css('display','none');
            } else {
                $('.searchbox-input').val('');
                $('.searchbox-icon').css('display','block');
            }
        }
</script>

<?php 
}

add_action（'wp_footer'，'vr_search_head'，1）；
功能vr_搜索_头（）{
?>
$（文档）.ready（函数（）{
var submitIcon=$（'.searchbox图标'）；
var inputBox=$（'.searchbox input'）；
var searchBox=$（'.searchBox'）；
var-isOpen=false；
提交。单击（函数（）{
如果（等参==假）{
searchBox.addClass（'searchBox-open'）；
focus（）；
isOpen=真；
}否则{
removeClass（'searchBox-open'）；
focusout（）；
isOpen=假；
}
});  
submitIcon.mouseup（函数（）{
返回false；
});
searchBox.mouseup（函数（）{
返回false；
});
$（文档）.mouseup（函数（）{
如果（等参==真）{
$（'.searchbox icon'）.css（'display'，'block'）；
submitIcon.click（）；
}
});
});
函数buttonUp（）{
var inputVal=$（'.searchbox input'）.val（）；
inputVal=$.trim（inputVal）.length；
如果（输入值！==0）{
$（'.searchbox icon'）.css（'display'，'none'）；
}否则{
$（'.searchbox input'）.val（''）；
$（'.searchbox icon'）.css（'display'，'block'）；
}
}
是否包含/加载jQuery？语法正确吗？Offtopic：您应该将jQuery包含在一个单独的.js文件中。是的，我想是这样，因为我以相同的方式实现了一个jQuery滚动，它工作得很好。您的意思是将jQuery包含在一个单独的js文件中，并使用wp-enqueue脚本加载？不幸的是，通过wp-enqueue加载不起作用。我添加了接着是functions.php，我的wordpress网站停止了工作：（.So不得不删除它。function wptuts_scripts_load_cdn（）{wp_register_script（'custom script'，get_template_directory_uri（）。/js/custom script.js'，array（'jquery'）；wp_enqueue_script（'custom script'）；}add action（'wp_enqueue_scripts'、'wptuts_scripts_load_cdn'）；