wp_enqueue_script で外部jsを /head前に読み込みたい

  • 解決済 RyouRyouRyouRyou

    (@ryouryouryouryou)


    9年前

    お世話になっております。以下内容で困っております。
    よろしくお願い申し上げます。

    【困っていること】
    ○jQueryで.slideUpを利用したアコーディオンメニューのスクリプトを、外部JSに記入しました。
    ○htmlの読み込みが終わってから外部jsを読み込むので、ページの読み込みが完了するまでに、アコーディオンメニューの中身が見えてしまいます。

    ○問題を解決するためにjsの読み込み場所を /head前 に変更するため、下記コードを作成、header.php　<body>タグ直下に配置しました。
    <?php wp_enqueue_script(‘アコーディオン専用.js’,get_bloginfo(‘template_url’) . ‘/js/アコーディオン専用.js’, array(), ‘1.0’, false); ?>

    しかし、falseを指定しない他のjsと同じく /body前 に読み込まれてしまいます。

    元々のテンプレートが?php wp_enqueue_scriptをfooter.phpに直書きしていたため、現状function.phpに記載をしておりません。

    ご教示頂ければ幸いです。よろしくお願い申し上げます。

    【環境】
    アプリケーション名 WordPress 4.3.1
    サイトURL http://luvme.tokyo/（該当箇所はスマホで使用）
    テンプレート stinger5ver20141227

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • nobita

    (@nobita)

    9年前

    こんにちは、

    body直下だと、もうすでに、header要素は書き出されていると思いますので、
    タイミング的に、間に合わなくて、falseでもフッタに書き出されているんだと思います。

    wp_enqueue_scripts　アクションを使って、読み込ませれば、headerに読み込まれると思います。

    モデレーター Seisuke Kuraishi

    (@tenpura)

    9年前

    お困りの現象は Flash of Unstyled Content (FOUC) と呼ばれるもので、以下のような手順で対策を行います。

    1. 見せたくない箇所を予め CSS で見えない設定にしておく
    2. ページ読み込み完了後に実行される JavaScript から当該箇所を見える設定にする

    以下のページにより詳しい情報がまとまっていますので参考にしてください。

    http://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/

    トピック投稿者 RyouRyouRyouRyou

    (@ryouryouryouryou)

    9年前

    nobita様
    ご教示ありがとうございます！
    wp_enqueue_scriptsを利用する場合、header閉じタグ直前に読み込ませる為には、function.phpにwp_enqueue_scriptsを記載する形式に変更すると、falseが有効になるのでしょうか。
    知識が足らずお手数をお掛けしますが、よろしくお願い申し上げます。

    Seisuke Kuraishi (tenpura)様
    ご教示ありがとうございます！
    FOUCに関しまして、内容ありがとうございます。

    ご教示頂きましたように、現状jsで表示の制御をしております。
    jQuery(“.該当箇所”).css(“display”,”none”);

    .該当箇所にcssでもdisplay:none;指定を追加してみようと考えております。

    解決できましたら、「解決済み」に変更させていただきます。
    よろしくお願い申し上げます。

    nobita

    (@nobita)

    9年前

    https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

    上の例のように、wp_enqueue_scripts アクションを使えば大丈夫です。

    トピック投稿者 RyouRyouRyouRyou

    (@ryouryouryouryou)

    9年前

    nobita様

    ご回答ありがとうございます！
    actionの表記は行っておりませんでした。

    表記方法について今一度確認して、実装してみます。
    よろしくお願い申し上げます。

    トピック投稿者 RyouRyouRyouRyou

    (@ryouryouryouryou)

    9年前

    Seisuke Kuraishi (tenpura)様

    </head>より上にstyleでdisplay: none;を追加してみましたが、問題の現象に変化はありません。

    FOUCを回避できないか、もう少し検証してみようと思います。
    よろしくお願い申し上げます。

    Toshimichi Mimoto

    (@mimosafa)

    9年前

    .該当箇所にcssでもdisplay:none;指定を追加してみようと考えております。

    ちなみに CSS で非表示にできればスクリプトの読み込みを head 内にしなくても大丈夫だと思います。

    むしろ、操作対象となる DOM （.該当箇所）が読み込まれる前にスクリプトが読み込まれる場合は、そのスクリプトがちゃんと DOM の準備ができたタイミングで実行されるように記述されているか気にする必要があります。

    jQuery( function( $ ) {
	// ここに記述された内容は DOM の準備後に読み込まれる
} );
    トピック投稿者 RyouRyouRyouRyou

    (@ryouryouryouryou)

    8年、 12ヶ月前

    mimosafa様
    ご回答ありがとうございました。

    皆さまの回答を元に、action hookの理解が必要な事が分かりました。
    一旦トピックを解決させて頂き、また分からない場合にご質問させて頂ければ幸いです。

    多くの大切なヒントをありがとうございました。
    よろしくお願い申し上げます。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「wp_enqueue_script で外部jsを /head前に読み込みたい」には新たに返信することはできません。