无法将自定义 JS 包含到 Wordpress

Question

我的 Wordpress 页面加载（使用 jQuery 的 load()）另一个页面，我希望主页已经包含所有需要的 .js 文件，其中一些是手工制作的。

当我尝试正常添加它们时：

<script src="http://10.0.0.158:8082/js/myScript.js"></script>

有时它有效，有时无效。 70% 次都行不通，我只需要几个 F5 就可以暂时让它工作。

我的页面在其中加载了很多其他页面（总是使用 jQuery 的 load() ），但如果导入到普通的 php 页面中，它可以正常工作。

Wordpress 搞砸了。

所以我google了很多，似乎我不能只通过html标签导入脚本，我需要使用wordpress的php函数wp_enqueue_script，文档在这里：http://codex.wordpress.org/Function_Reference/wp_enqueue_script

使用该文档和本指南中的信息： http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

我做了这个功能：

<?php
        function customScriptInit() {
    if (!is_admin()) {
        echo"look! i'm working!";

        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://10.0.0.158:8082/js/JQuery.min.js', false, '1.8.3', true);
        wp_enqueue_script('jquery');

        wp_enqueue_script('jqueryUi', 'http://10.0.0.158:8082/js/jquery-ui-1.9.2.min.js', array('jquery'), '1.0', true);
        wp_enqueue_script('cookie', 'http://10.0.0.158:8082/js/cookie.js', array('jquery'), '1.0', true);
        wp_enqueue_script('json2', 'http://10.0.0.158:8082/js/json2.js', array('jquery'), '1.0', true);
        wp_enqueue_script('easing', 'http://10.0.0.158:8082/js/easing.min.js', array('jquery'), '1.0', true);
    }
    }
add_action('wp_enqueue_scripts', 'customScriptInit');
?>

我放置了一个 echo 命令以确保其运行正常（是的，我现在可以在我的页面中看到该消息）。

但是现在..看起来根本没有加载 js，我从 javascript 控制台收到了这个错误：

Uncaught ReferenceError: jQuery is not defined 

如果我删除关于 jQuery 注销并再次注册的 3 行，我得到了 jQuery 工作，但不是我导入的脚本，通常带有 cookie 的 js 错误：

Can't read cookie: TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method 'cookie'

如何将这些 js 文件正确导入我的页面？

我知道在 Wordpress 中使用“jQuery”而不是“$”很好，我只是将它们全部转换为这个结果，使用“$”最终一团糟！

编辑：用这段代码解决

<?php
function customScriptInit() {
    if (!is_admin()) {

        wp_register_script( 'my-jqueryUi', ABSPATH . '/js/jquery-ui-1.9.2.min.js');
        wp_register_script( 'my-cookie', ABSPATH . '/js/cookie.js');
        wp_register_script( 'my-json2', ABSPATH . '/js/json2.js');
        wp_register_script( 'my-easing', ABSPATH . '/js/easing.min.js');

        wp_enqueue_script( 'my-jqueryUi');
        wp_enqueue_script( 'my-cookie');
        wp_enqueue_script( 'my-json2');
        wp_enqueue_script( 'my-easing');
        }
    }
add_action('wp_enqueue_scripts', 'customScriptInit');
?>

感谢 adeneo 提供良好的分割实践！

Answer 1

您不应该加载您自己的 jQuery 版本，因为您很可能最终会在您的网站上使用多个版本的 jQuery。只需在其他脚本中设置 jQuery 和 jQueryUI，wordpress 就会自动加载 jQuery：

function customScriptInit() {
    if (!is_admin()) {
       $depends_on = array('jquery', 'jquery-ui-core', 'jquery-ui-sortable');

        wp_enqueue_script('cookie', ABSPATH . '/js/cookie.js', $depends_on);
        wp_enqueue_script('json2',  ABSPATH . '/js/json2.js', $depends_on);
        wp_enqueue_script('easing', ABSPATH . '/js/easing.min.js', $depends_on);
    }
}

add_action('wp_enqueue_scripts', 'customScriptInit');

并为 URL 使用 WP 变量之一，不要对它们进行硬编码。对于你通常会做的插件：

plugins_url('/js/cookie.js', __FILE__)

获取正确的网址等

另外请注意，在 wordpress 中，您需要单独加载 jQuery UI 的每个部分，具体取决于您的需要，这一切都在 Codex! 中进行了解释！

在 Wordpress 中，您无需使用 jQuery 更改所有美元符号，只需将其包装在无冲突的包装器中，如下所示：

jQuery(document).ready(function($) {
    // $() will work just fine as an alias for jQuery() inside of this function
});

在其中，您将照常使用$，这会使事情变得容易得多。

Answer 2

解决了之前注册js文件的问题

<?php
function customScriptInit() {
    if (!is_admin()) {

        wp_register_script( 'my-jqueryUi', ABSPATH . '/js/jquery-ui-1.9.2.min.js');
        wp_register_script( 'my-cookie', ABSPATH . '/js/cookie.js');
        wp_register_script( 'my-json2', ABSPATH . '/js/json2.js');
        wp_register_script( 'my-easing', ABSPATH . '/js/easing.min.js');

        wp_enqueue_script( 'my-jqueryUi');
        wp_enqueue_script( 'my-cookie');
        wp_enqueue_script( 'my-json2');
        wp_enqueue_script( 'my-easing');
        }
    }
add_action('wp_enqueue_scripts', 'customScriptInit');
?>