wp_enqueue_script jQuery最佳实践

时间:2018-09-15 10:28:07

标签: javascript jquery css wordpress

尝试设置我的第一个 Wordpress 主题。
我有一个脚本来计算内容部分的margin-top。 当我将代码直接放在<head>下方时,效果很好

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(window).load(function() {
        var height = $('#main-header').height();
        $('#main-content').css({
            'margin-top': height
        });
    }).trigger('load');
</script>

现在,在学习过程中,我想学习做正确的事情。所以.... 在我的functions.php中添加了

function my_custom_scripts() {
    wp_enqueue_style( 'parent-style', get_stylesheet_uri() );
    wp_enqueue_style('google-fonts-style', 'https://fonts.googleapis.com/css?family=Lato:300');
    wp_enqueue_script('fixed-header', get_template_directory_uri() . '/js/fixedheader.js');
    wp_enqueue_script('height-script', get_template_directory_uri() .'/js/content_height.js', array('jquery'), null, true);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

在我的js文件夹中,我添加了文件content_height.js

文件content_height.js如下。...

$(window).load(function() {
   var height = $('#main-header').height();
   $('#main-content').css({
      'margin-top': height
   });
}).trigger('load');

但是现在我的脚本不起作用了。 我在做什么错或错过了什么。

请问我在学习时,请解释一下你的答案。谢谢。

0 个答案:

没有答案