5

我在 WordPress 网站的主页上有一个基于 jquery 的自定义滑块。我正在使用我主题的functions.php文件中的以下代码加载jQuery（jquery.js）和滑块js（jquery.advanced-slider.js）。

function my_load_scripts() {
  if (!is_admin()) {
    wp_enqueue_script("jquery");

    if (is_home()) {
      wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'));
      wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'));
    }
  }
}

add_action('wp_enqueue_scripts', 'my_load_scripts');

现在我把下面的代码放在我的 header.php 文件之前 wp_head();

<script type="text/javascript">
  var $j = jQuery.noConflict();

  $j(document).ready(function () {
    //Slider init JS
    $j(".advanced-slider").advancedSlider({
      width: 614,
      height: 297,
      delay: 1000,
      pauseRollOver: true
    });
  });
</script>

很明显，我的 jquery.js 和 jquery.advanced-slider.js 在上面的 JavaScript 代码之后加载，因此我的滑块不起作用。<head>如果我把它放在滑块工作中的wp_head() 调用之后。

但是，如果我把它放在 wp_head() 之后，那不是 hack 吗？我希望我的代码是干净的。正如二十一主题清楚地表明

/* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */

我在这里很困惑。我可能在这里遗漏了一些非常简单的线索。但请帮帮我。将 JavaScript 放在 wp_head() 之前并在 jquery.js 和 slider.js 加载之后加载它的最佳方法是什么？

4

6 回答 6

3

根据 wordpress 函数参考：

将 JavaScript 添加到 WordPress 生成的页面的安全且推荐的方法是使用 wp_enqueue_script()。如果尚未包含该脚本，则此函数将包含该脚本，并安全地处理依赖关系。

如果你想保持你的“代码干净”，你可能会重新考虑你的 js 是如何组织的。我使用 wordpress 的方法是（通常）为所有初始化和小脚本保留一个 scripts.js，并为插件保留一个单独的文件。但一切都取决于您拥有的文件大小和数量——您希望避免太多的 http 请求和难以管理的文件。

同样， wp_enqueue_script 允许您将脚本放在页脚中。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script

于 2012-09-01T07:30:30.903 回答
3

将您的脚本块添加到 HTML 页面的底部，就在</body>.

无论如何，在浏览器中解析完整的 DOM 之前，您的滑块初始化 JS 代码不会被执行，因此这没有缺点。

事实上，像 Steve Souders 这样的 Web 性能专家建议应该在 HTML 页面的末尾添加脚本块，因为脚本块会阻止渲染，这样页面加载速度会更快。

于 2012-09-01T07:04:50.047 回答
3

等待加载带有window.onload函数的 jQuery，一旦加载了jQuery文件和其他 js / 内容，window.onload函数就会被触发。

<script type="text/javascript">
window.onload = function(){

var $j = jQuery.noConflict();
    $j(".advanced-slider").advancedSlider({
        width:614,
        height:297,
        delay:1000,
        pauseRollOver:true
    });
}
</script>
于 2012-09-01T07:36:47.950 回答
1

您添加到页面底部的代码应该外部化到它自己的文件中，并添加wp_enqueue_script();如下所示的函数。

请注意在每次调用 wp_enqueue_script 结束时使用“true”指令。这告诉 WordPress 您希望它们包含在应该直接出现在结束标记之前的wp_footer();钩子（而不是钩子）中- 根据其他人提到的性能最佳实践。wp_head();</body>

function my_load_scripts() {

    if (is_home()) {
        wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'), true);
        wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'), true);
        wp_enqueue_script('your-custom-script', get_template_directory_uri().'/js/yourcustomscript.js', array('jquery'), true);
        }
    }

}
add_action('wp_enqueue_scripts', 'my_load_scripts');

我已经删除了您包含的 jQuery enqueue 行，因为您不需要注册 jQuery 脚本，因为它已经由 WP 核心注册，并且由于您已将其定义为依赖项之一，它将为您包含在内。

由于您已将其全部包装在is_home()条件语句中，因此所有 3 个文件（加上 jQuery）将仅包含在主页中。

于 2013-10-03T00:38:28.287 回答
1

一个更简单（但可能不是很好）的技巧是简单地添加一个 1 毫秒的超时

setTimeout(function () {
    jQuery('#text-6').insertBefore('#header'); 
}, 1);
于 2017-10-31T10:04:26.410 回答
0

get_template_directory_uri()确实为您提供了主题目录，但如果您使用的是子主题，这不是您想要的。

get_stylesheet_directory_uri()将为您提供“当前主题”的目录，因此无论哪种情况，使用它都是最安全的。

于 2021-03-18T07:09:42.880 回答