javascript - WordPress 主题 : add custom scripts and jquery the correct way

Question

刚接手一个wordpress项目。以前的开发人员搞砸了主题，因此它阻止了我的 ajax 表单 (gravityform) 正常工作。问题是他们在 header.php 中添加 jquery 和自定义 js 的方式:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tabs.min.js"></script>

我对 wordpress 主题思想完全陌生，如何使用 wp_register_script 和 wp_enqueue_script 将这些脚本正确添加到我的 functions.php 中。

我如何找出哪个脚本依赖于其他脚本？喜欢调用它们的正确顺序吗？

编辑我通过 wp_enqueue_scripts 以正确的方式包含脚本。但是现在我面临着奇怪的 JS 错误。 类型错误:$ 不是函数

当我用 jQuery 替换 $ 时它起作用了。但这不是解决方案。为什么无论如何都会出现此错误？

Answer 1

避免 Assets 冲突的最佳方法是正确查询文件。为此，您必须使用 wp_enqueue_script

这样做的一个好方法是像这样将它作为函数的一部分放在 functions.php 文件中

1. 创建一个函数
2. 将wp_register_script插入到函数中
3. 然后将wp_enqeue_script插入函数
4. 使用 add_action() 来初始化入队过程

---

所以-

function load_scripts() {
  wp_register_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'scriptyouwillwaittobeloaded' ) );
  wp_enqueue_script( 'script-name' );
}

add_action('wp_enqueue_scripts', 'load_scripts');

---

在此示例中，将在 header.php 文件中调用函数 load_scripts()。看看wp_register_script以及更好地理解为此的论点，但总而言之 -

第一个参数:是您要用作此脚本引用的名称

第二个参数:是脚本的实际链接

第三个参数:是你想要在这个脚本之前加载的脚本(这个脚本加载之前你想要等待的脚本)

---

对于wp_enqueue_script，参数只是对名称的引用(wp_register_script 的第一个参数)

---

add_action 函数参数:

第一个参数:你“ Hook ”到的函数

第二个参数:您创建的将被“ Hook ”的函数

---

请注意 - 您可以在此函数中加载任意数量的脚本，这只是加载单个脚本的示例。