WordPress如何添加JavaScript代码

1. 在WordPress里加JavaScript代码这事儿吧，就像给汉堡加酱料——方法不止一种，但加错了地方会搞得一团糟。最常见的是用wp_enqueue_script函数，这是官方推荐的标准姿势。比方说你想在主题里塞个自定义动画效果，可以在functions.php里这样搞：

function my_cool_scripts() {
    wp_enqueue_script(
        'my-awesome-js', 
        get_template_directory_uri() . '/js/custom.js', 
        array('jquery'), 
        '1.0', 
        true
    );
}
add_action('wp_enqueue_scripts', 'my_cool_scripts');

2. 有时候你会遇到需要直接插入代码片段的情况，比如放个谷歌统计代码。这时候用wp_head钩子可能更直接，虽然看起来有点糙但有效：

add_action('wp_head', function(){ ?>
    <script>
        console.log('像这样直接把代码喷在页面头部');
    </script>
<?php });

3. 插件用户可能会用插入页眉页脚这类工具，毕竟不是谁都敢碰代码。但你要知道这些插件本质上还是在调用wp_head和wp_footer钩子，就像给WordPress穿了个马甲。

4. 突然想到个骚操作——用WordPress自带的脚本本地化功能给JS传递PHP变量。比如把ajax_url这样的参数甩给前端脚本：

wp_localize_script('my-awesome-js', 'php_vars', array(
    'ajax_url' => admin_url('admin-ajax.php')
));

5. 最后提醒下，别把JS随便扔在文章编辑器里，那样容易引发脚本冲突或者被过滤掉。就像不应该把冰淇淋放在微波炉里加热——虽然能融化，但结果会很糟糕。

记住啊，不管用哪种方法，都要考虑脚本加载位置（头部还是底部）和依赖关系。WordPress的脚本队列系统其实是个精巧的交通指挥员，它能避免多个插件和主题的脚本撞车。要是直接硬塞script标签，相当于给这个指挥员蒙上了眼罩。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。