WordPress JavaScript代码添加

好的，请看：

1. 嗯，你搞WordPress对吧，想往里面加点自己的JavaScript，让按钮能放烟花或者让猫在屏幕上跑之类的。行，但别直接去改主题的header.php或者footer.php，那太野了，下次主题更新你写的代码就全被覆盖了，哭都来不及。你得学会用正确的方式和WordPress“说话”。

2. 首先，WordPress有个东西叫functions.php，在你当前用的主题文件夹里。这地儿就是个万能插排，你啥都能往里插。但核心思想是：告诉WordPress，“嘿，我有个脚本，你帮我用正确的方式加载它。” 这叫“登记”和“排队”脚本，行话叫wp_register_script和wp_enqueue_script。为啥要排队？因为文明，大家都得排队，不然浏览器加载东西就乱套了。

3. 代码大概长这样，你把它扔functions.php里就行：

function my_awesome_custom_scripts() {
    // 先登记一下我的脚本，叫它 'my-script'
    wp_register_script(
        'my-script', // 给脚本起的名字，唯一
        get_template_directory_uri() . '/js/my-script.js', // 脚本文件在哪儿
        array('jquery'), // 它依赖谁？比如这里说需要jQuery才能跑
        '1.0.0', // 版本号，随便写，改了能让浏览器刷新缓存
        true // 放 footer 里？true 就是 yes
    );

    // 登记了不算完，还得告诉WordPress“就现在，用这个！”
    wp_enqueue_script('my-script');
}
add_action('wp_enqueue_scripts', 'my_awesome_custom_scripts');

看，array('jquery') 就是说我这个脚本需要jQuery，WordPress就会好心地先加载jQuery再加载我的。这就像你说“我要吃薯条”，但得先有土豆对吧。

4. 然后你在主题的/js/文件夹里创建那个my-script.js文件，就可以在里面写你的魔法了。比如：

(function($) {
    // 用 $ 符号安全点，免得和其他代码打架
    $(document).ready(function() {
        // 等文档准备好了
        console.log("嘿！我从队列里来了！");

        // 比如让所有文章标题变粉红色
        $('.entry-title').css('color', 'pink');

        // 或者点一下按钮就弹窗
        $('#my-button').on('click', function() {
            alert('你点了我！这很合理！');
        });
    });
})(jQuery); // 把jQuery传进来用

那个(function($) { ... })(jQuery);是一种保护机制，确保$就是jQuery，别的地方可能有个家伙也叫$，就打架了。

5. 有时候你想直接把一些PHP变量丢给JavaScript用，比如站点地址或者当前用户ID。你不能在.js文件里写PHP，那咋办？WordPress说你可以“本地化”脚本。听着很高端，其实就是把数据“注射”进去。

在wp_enqueue_script之后，你可以来一下这个：

// 接在 wp_enqueue_script('my-script'); 后面
wp_localize_script(
    'my-script', // 要注射给哪个脚本？就是刚才那个
    'myScriptData', // 在JS里用什么对象名来装这些数据
    array( 
        'siteUrl' => home_url(), // 数据1：站点网址
        'userId' => get_current_user_id(), // 数据2：用户ID
        'nonce' => wp_create_nonce('my_ajax_action') // 安全校验码，搞AJAX常用
    )
);

这样，在你的my-script.js里，你就可以直接：

console.log("站点地址是: " + myScriptData.siteUrl);
if (myScriptData.userId > 0) {
    console.log("你好啊，用户 " + myScriptData.userId);
} else {
    console.log("你还没登录呢！");
}

myScriptData这个对象就凭空出现了，装着从PHP来的数据。

6. 最后，思维跳跃一下。代码不是石头，它是水流。你把它加进WordPress的方式，决定了它是滋润植物还是冲垮房子。用wp_enqueue_scripts这个钩子，就像是给水流修了条渠道，安全，可控。而直接硬改主题文件，相当于在暴雨天挖开一条沟，也许这次没事，但下次暴雨（主题更新）来临，一切都会被冲走，只剩下泥巴和你迷茫的脸。

所以，记住：登记，排队，必要时本地化。让你的JavaScript代码文明地、有秩序地进入WordPress的世界。这样，你的猫在屏幕上跑的时候，才不会因为代码冲突而摔跤。

Tags：

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