WordPress 如何向需要 jQuery 的頁腳添加一個 JavaScript 代碼段

問題描述

我知道我可以添加腳本文件到 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 內聯代碼，而不是一個文件，該怎麼辦？如何才能做到這一點。

Edit

我知道我可以使用這個腳本向頁腳添加一些東西：

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

但是如何指定需要 jquery 運行的腳本。

最佳解決方案

實現此操作的最簡單方法實際上是 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' );

但是，這段代碼假定您是排隊腳本的代碼，即您在自己的插件或主題中執行此操作。

目前，沒有辦法將 in-line 腳本添加到 WordPress 頁腳，並且還可以使用依賴關係加載它。但是，如果你願意，還有一個選擇。

替代方案

當 WordPress 使用腳本時，它將內部加載到對象以跟蹤它們。對象中基本上有 3 個列表：

註冊
隊列
DONE
去做

當您首次使用 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 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 with wordpress jquery