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