如何将JavaScript片段添加到需要jQuery的页脚中


27

我知道我可以使用以下代码将脚本文件添加到需要jquery的wordpress页脚中:

<?php
function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0',
       true);
   // enqueue the script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

但是,如果我只想添加普通的jquery内联代码片段而不是文件,该怎么办?如何才能做到这一点。

编辑

我知道我可以使用此脚本在页脚中添加一些内容:

<?php
function myscript() {
?>
<script type="text/javascript">
 // This depends on jquery
</script>
<?php
}
add_action('wp_footer', 'myscript');

但是,如何指定使用的脚本需要运行jquery


没有内置函数来做到这一点,我知道,这是为什么wp_register_scriptwp_enqueue_script存在的,但你可以检查使用jQuery本身。
Wyck

2
对不起,我很抱歉,但我认为您不明白我的问题。我已经阅读了抄本,并了解该选项。但是我不想将wp_enqueue_script脚本文件添加到页脚中,我想向需要jquery的页脚中添加一个代码段。我否决了直接来自法典的答案。我读了抄本,却没有找到答案,所以才问一个问题。如果您再次将我重定向到食典,我将投票否决。
Saif Bechan

谢谢wyck,我认为是这种情况,谢谢您正确理解了这个问题。我认为我只会使用外部JS脚本,而不是确保可以运行该脚本。
Saif Bechan

Answers:


30

最简单的方法实际上是wp_enqueue_scriptSaif和v0idless已经引用过的页脚操作以及它们的组合。我经常在主题和插件中使用jQuery,但同时也将所有其他脚本放在页脚中。

实际排队的最好方法是:

function myscript() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependent on jQuery
  }
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );

function myscript_jquery() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_head' , 'myscript_jquery' );

但是这段代码被截断了,假设您是一个正在排队的脚本,即您是在自己的插件或主题中执行的。

目前,还没有办法将内嵌脚本添加到WordPress页脚中,并同时加载依赖项。但是,如果您愿意的话,还有另一种选择。

另类

当WordPress使用脚本时,它将内部将它们加载到对象中以跟踪它们。该对象内部实质上有3个列表:

  • 注册
  • 队列
  • 做完了
  • 去做

首次注册脚本时,wp_register_scripts()它会被放置在注册列表中。当您wp_enqueue_script()编写脚本时,它将被复制到队列列表中。将其打印到页面后,将其添加到完成列表中。

因此,您可以记录需要使用jQuery的文档,而不是排队使用jQuery 的页脚脚本,并以编程方式检查以确保已加载jQuery。

这用于wp_script_is()检查脚本的列出位置。

function myscript() {
    if( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script type="text/javascript">
      // script dependent on jQuery
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'myscript' );

也许也可以使用相同的代码来强制jQuery在页脚中加载,但我尚未对此进行测试……因此您的里程数会有所不同。


您提供的代码段是否被WordPress插件开发标准接受?如果是,那么我将在我的插件中使用它……请对此给出答复……
laraib

最后一个片段?不会。WordPress 插件应始终满足脚本要求。以这种方式强制jQuery加载到队列系统之外只是您应该在自己的站点上做的事情,您可以在自己的站点上控制100%的环境。这是从来没有一个插件做适当的。
EAMann

那你能给我一些可行的例子吗?
laraib

因为我正在开发我的第一个WordPress插件,所以我希望被WordPress团队接受。 ...
laraib

12

从wordpress 4.5开始,您可以通过添加内联脚本wp_add_inline_script()。要将JavaScript片段添加到需要jQuery的页脚中,此代码可帮助您

function enqueue_jquery_in_footer( &$scripts ) {

    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'enqueue_jquery_in_footer' );

function theme_prefix_enqueue_script() {
   if(!wp_script_is('jquery', 'done')) {
     wp_enqueue_script('jquery');
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

wp_add_inline_script与wordpress jQuery


1

使用如下wp_footer操作:

add_action( 'wp_footer', 'wpse33008');
function wpse33008() {
?>
<script type="text/javascript">
    /** INSERT SCRIPT HERE **/
</script>
<?php
}

1
这不是一个好答案。我问我如何指定脚本所需的jQuery。如果用户没有运行jquery,则您的实现将无法运行。
Saif Bechan

0

我知道OP希望在jQuery上指定一个要求,而WordPress的作者应该允许片段在脚本文件旁边排队,但是没有,因此我建议不要尝试强制使用。如果您根本不想像我一样弄乱队列或其顺序(因为我正在使用其他结合并优化脚本的插件),那么答案确实是使用这样的wp_footer操作:

<?php

add_action(
    'wp_footer'
    , function() {
        ?>
        <script>
            if (window.jQuery) {
                // your snippet
            }
        </script>
        <?php
    }
    , 21 # after enqueued footer scripts
);

-2

您可以使用该wp_footer操作来执行此操作。检查Codep中的wp_footer


我知道,但是如何指定添加到页脚中的脚本取决于jquery。检查我的编辑更加具体。
Saif Bechan

在投票否决人们的答案之前,您是否还懒于阅读法典?您是否读过关于的in_footer论点wp_enqueue_script?阅读:codex.wordpress.org/Function_Reference/wp_enqueue_script。它告诉您如何在wp_footer操作中使用它。
Rutwick Gangurde 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.