时间戳

首页 > 解决方案 > Wordpress 页面上需要脚本，最佳实践是什么？

jquery - Wordpress 页面上需要脚本，最佳实践是什么？

问题描述

我有一些 JQ 插件需要在我的 Wordpress 安装中初始化ON页面 ( front-page.php )。

即我需要在标签下方嵌入以下脚本。</body>

这里的最佳做法是什么？

我的所有脚本都按照Wordpress codex的建议进行注册和排队。

</body>
  <script>
    // . Plugin Init

    $(window).on('load', function () {
      // initialization of svg injector module
      $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
    });

    $(document).on('ready', function () {
      // initialization of slick carousel
      $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
    });

    // . End Plugin Init
  </script>

我看过wp_localize_script但我很确定这不是我需要的（可能是错的）。任何能帮助我指出正确方向的帮助都将不胜感激。

这是我目前在 footer.php 文件中使用的内容；

<?php if ( is_front_page() ) : ?>
    <!-- JS Plugins Init. -->
    <script>
        jQuery(window).on('load', function () {
         // initialization of svg injector module
        jQuery.HSCore.components.HSSVGIngector.init('.js-svg-injector');
         });

        jQuery(document).on('ready', function () {
        // initialization of slick carousel
        jQuery.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
        });
    </script>
<?php endif; ?>

为了澄清我不需要嵌入 file.js。我需要嵌入原始代码。

标签： jquerywordpress

解决方案

原始答案

您如何将 JavaScript 链接放置在之前</body>而不是内部<head>？

根据文档，这是在您将脚本排入队列时完成的。只需做类似的事情

wp_enqueue_script('script_handle', plugin_dir_url(__FILE__).'script.js', [], null, TRUE);

最后一个参数 ,TRUE告诉wp_enqueue_script()插入之前</body>而不是</head>

更新的答案

之后如何输出原始 JavaScript </body>？

我们需要的函数 ,wp_print_scripts()在 Wordpress 3.3 中已被弃用，取而代之的是，你猜对了，wp_enqueue_script(). 如果要附加已注册的脚本，则可以使用wp_add_inline_script('script_handle', $data)which 将在放置入队脚本的链接之后立即输出您在第二个参数 , $datainside <script></script>-tags 中放置的任何内容。

至于把它放在外面，<body>我猜你必须创建自己的插件，因为主题的设计者和 Wordpress 的开发人员总是将所有输出放在里面<head>和<body>-tags，因为这是正确的做法它根据 HTML 规范。

推荐阅读