如何向需要jQuery的页脚添加一个javascript代码段

时间：2011-11-06 作者：Saif Bechan

我知道我可以使用以下代码向wordpress的页脚添加一个需要jquery的脚本文件：

<?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\');

但是如何指定所使用的脚本requires jquery 运行。

5 个回复

最合适的回答,由SO网友:EAMann 整理而成

要做到这一点，最简单的方法实际上是wp_enqueue_script 以及Saif和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加载到页脚中，但我还没有测试过这一点。。。所以你的里程数会有所不同。

SO网友:Dhinju Divakaran

自wordpress 4.5以来，您可以通过以下方式添加内联脚本wp_add_inline_script(). 要向需要jQuery的页脚添加javascript片段，以下代码可以帮助您

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 with wordpress jquery

SO网友:v0idless

使用wp_footer 这样的动作：

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

SO网友:Walf

我知道OP想在jQuery上指定一个要求，WordPress的作者应该允许代码片段在脚本文件附近排队，但他们没有这样做，所以我建议不要强行这样做。如果你根本不想弄乱队列或它的顺序，就像我一样（因为我使用的是其他组合和优化脚本的插件），那么答案就是使用wp_footer 这样做：

<?php

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

SO网友:Rutwick Gangurde

您可以使用wp_footer 执行此操作的操作。检查法典wp_footer.

结束

小码农CODE

如何向需要jQuery的页脚添加一个javascript代码段

编辑我知道我可以使用此脚本向页脚添加内容：
`<?php function myscript() { ?> <script type="text/javascript"> // This depends on jquery </script> <?php } add_action(\'wp_footer\', \'myscript\');`
但是如何指定所使用的脚本requires jquery 运行。

相关推荐

WordPress jQuery淡入淡出效果

如何向需要jQuery的页脚添加一个javascript代码段

编辑我知道我可以使用此脚本向页脚添加内容：<?php function myscript() { ?> <script type="text/javascript"> // This depends on jquery </script> <?php } add_action(\'wp_footer\', \'myscript\'); 但是如何指定所使用的脚本requires jquery 运行。

相关推荐

WordPress jQuery淡入淡出效果

编辑我知道我可以使用此脚本向页脚添加内容：
`<?php function myscript() { ?> <script type="text/javascript"> // This depends on jquery </script> <?php } add_action(\'wp_footer\', \'myscript\');`
但是如何指定所使用的脚本requires jquery 运行。