5

WordPress サイトのホームページに jquery ベースのカスタム スライダーがあります。テーマの functions.php ファイルで以下のコードを使用して、jQuery (jquery.js) とスライダー js (jquery.advanced-slider.js) をロードしています。

function my_load_scripts() {
  if (!is_admin()) {
    wp_enqueue_script("jquery");

    if (is_home()) {
      wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'));
      wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'));
    }
  }
}

add_action('wp_enqueue_scripts', 'my_load_scripts');

ここで、wp_head(); の前に、header.php ファイルに以下のコードを追加します。

<script type="text/javascript">
  var $j = jQuery.noConflict();

  $j(document).ready(function () {
    //Slider init JS
    $j(".advanced-slider").advancedSlider({
      width: 614,
      height: 297,
      delay: 1000,
      pauseRollOver: true
    });
  });
</script>

ここで、jquery.js と jquery.advanced-slider.js が上記の JavaScript コードの後に​​ロードされるため、スライダーが機能しないことは明らかです。wp_head() 呼び出しの後に配置すると<head>、スライダーが機能します。

しかし、 wp_head() の後に置くと、それはハックではないでしょうか? コードをきれいにしたい。21 のテーマが明確に言うように

/* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */

私はここで非常に混乱しています。ここで非常に単純な手がかりが欠けている可能性があります。しかし、私を助けてください。JavaScript を wp_head() の前に配置し、jquery.js とslider.js がロードされた後にロードする最良の方法は何でしょうか?

4

6 に答える 6

3

wordpress関数の参照に従って：

JavaScript を WordPress 生成ページに追加する安全で推奨される方法は、wp_enqueue_script() を使用することです。この関数は、スクリプトがまだインクルードされていない場合はインクルードし、依存関係を安全に処理します。

「コードをクリーン」に保ちたい場合は、js の編成方法を再考する必要があります。wordpress での私のアプローチは、(通常) すべての初期化と小さなスクリプト用に scripts.js を保持し、プラグイン用に別のファイルを保持することです。しかし、すべては所有しているファイルの大きさと数に依存します。管理が難しい HTTP リクエストやファイルが多すぎるのは避けたいものです。

同様に、wp_enqueue_script を使用すると、スクリプトをフッターに配置できます。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script

于 2012-09-01T07:30:30.903 に答える
3

window.onload関数を使用して jQuery をロードするのを待ちます。jQueryファイルと他の js / コンテンツがロードされると、window.onload関数が起動します。

<script type="text/javascript">
window.onload = function(){

var $j = jQuery.noConflict();
    $j(".advanced-slider").advancedSlider({
        width:614,
        height:297,
        delay:1000,
        pauseRollOver:true
    });
}
</script>
于 2012-09-01T07:36:47.950 に答える
3

スクリプト ブロックを HTML ページの下部の</body>.

とにかくブラウザで完全なDOMが解析されるまで、スライダーのinit JSコードは実行されないため、これには欠点はありません。

実際、Steve Souders などの Web パフォーマンスの専門家は、スクリプト ブロックがレンダリングをブロックし、ページの読み込みが速くなるように見えるため、HTML ページの最後にスクリプト ブロックを追加することを提案しています。

于 2012-09-01T07:04:50.047 に答える