web-dev-qa-db-ja.com

ページ内のインラインjsを配置する場所と方法

インターネット上には、wp_enqueue_script（）を使用して外部スクリプトを挿入する方法に関する数千もの記事があります。

とにかく、インライン、<script>で囲まれた、スクリプトを追加する方法について説明できるものは何も見つかりませんでした。

私はページコードの真ん中にそれらを追加するために使用しますが、私はそれが最も洗練された方法ではなく、より良い方法があるべきだと思います.

何か案は？

編集：私は '<script>周辺を忘れていたのでキャンセルされました。今私の質問は明確になるはずです

pagesjavascript
4
Bakaburg

Mrwwebが正しいのでその手法を使用する必要がありますが、実際には完璧なものはなく、インラインスクリプトとスタイルが使用されることもあります。 wp script isを使用してスクリプトをチェックし、wp_headまたはwp_footerを使用してそれらをヘッダーまたはフッターに出力することができます。

この記事の中でscribuの答えを参照することができます、 wp依存関係によるインラインスクリプトのenqueue

2
Wyck

私は今、Twenty Seventeen functions.phpソースコードを見ていますが、script（またはそのことは何でも）を優先的にドキュメントにインライン化するためのパターンを残しました。

function add_inline_script() {
  echo "<script>/* do awesome things */</script>\n";
}
add_action( 'wp_head', 'add_inline_script', 0 );

たとえば、alternativeGoogle Analytics async tracking snippet のようなasyncスクリプトをロードする場合、これを行うとよいでしょう。 非ブロッキングスクリプトリクエストドキュメントの解析が開始されるとすぐに（ブロッキングリクエストの上に配置されている場合）。

asyncに加えて、最新のブラウザでは 非同期依存関係の管理フェッチAPI を活用して、外部依存関係をロード非同期で並列に競合状態のリスク。

次の画像と例は、このテクニックを使用して Twenty Elevenテーマ で ブロッキングなしでスクリプトをロード を使用してページのロード時間を短縮する方法を示しています Fetch Inject ：

Loading Twenty Seventeen with Fetch Injection 図1： 27個のテーマスクリプトに加えて、lazysizesが非同期で並列にロードされます。

文字列の補間に関する質問 の便乗。以下に示すように、NOWDOCまたはHEREDOCおよびecho割り当てを使用したglobal割り当てと文字列補間を使用して、ページにコンテンツの任意のブロックをドロップしながら使用します。

/**
 * Load scripts using Fetch Inject instead of wp_enqueue_script
 * for for faster page loads and lower perceived latency.
 *
 * @since WordCamp Ubud 2017
 * @link https://wordpress.stackexchange.com/a/263733/117731
 * @link https://github.com/jhabdas/fetch-inject
 *
 */
function add_inline_script() {
  $twentyseventeen_l10n = array(
    'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
    'expand' => __( 'Expand child menu', 'twentyseventeen' ),
    'collapse' => __( 'Collapse child menu', 'twentyseventeen' ),
    'icon' => twentyseventeen_get_svg( array( 'icon' => 'angle-down', 'fallback' => true ) )
  );
  $jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
  $jquery_dependent_script_paths = [
    get_theme_file_uri( '/assets/js/global.js' ),
    get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
    get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
    get_theme_file_uri( '/assets/js/navigation.js' )
  ];
  $lazysizes_path = get_theme_file_uri( '/assets/js/lazysizes.min.js' );
  $screen_reader_text_object_name = 'twentyseventeenScreenReaderText';
  $twentyseventeen_l10n_data_json = json_encode($twentyseventeen_l10n);
  $jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
  $inline_script = <<<EOD
window.{$screen_reader_text_object_name} = $twentyseventeen_l10n_data_json;
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.Push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.Push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.Push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
    fetchInject(["{$lazysizes_path}"])
})();
EOD;
  echo "<script>{$inline_script}</script>";
}
add_action('wp_head', 'add_inline_script', 0);

ストックのTwenty Seventeenテーマで知覚されるレイテンシーを最大50％削減します。任意のテーマに適用できます。

どのように機能しますか？

  • wp_enqueue_scriptでキューに入れられたスクリプトのallを置き換えるので、Fetch Injectionを使用してより高速に出力します。 （注：古いブラウザーとのブラウザーの後方互換性については、Fetch Injectのドキュメントを参照してください。）
  • HEREDOCを使用して、script内のheadタグ内のすべてを出力します。
  • テーマが必要とするウィンドウグローバルを定義します。
  • 上の画像に示すように、すべてのスクリプトを非同期で並列に読み込みますが、依存関係を実行する前にjQueryの読み込みが完了するのを待ちます（ダウンロード済み）。
  • 自由変数がwindowスコープにリークするのを防ぐために、IIFEですべての作業を行います。

HEREDOCは、混合テンプレートを介して著作権表示やその他のフォーマットを維持する必要がある場合に出力を制御するのに最適です。また、縮小されたコードが手元にない場合や、テストのためにドキュメントに何かを配置したい場合に、スクリプトのデバッグ速度を上げるのにも役立ちます。

アイテムが一度だけ追加されるようにする場合は、この回答を参照してください： https://wordpress.stackexchange.com/a/131640/117731

最後に、頭ではなくフッターに追加が必要な場合は、wp_head呼び出しのadd_actionをwp_footerに置き換えることができます。

編集：さらに掘り下げて見つけた この投稿 David Walshのブログで、少なくとも2012年から少なくとも単純なインライン展開が利用可能であることを示唆しています。お楽しみください！

4
Josh Habdas

wp_enqueue_script() がJavaScriptをあなたのサイトに追加する唯一の方法です。それはあなたと他のプラグインが依存関係を宣言し、必要ならスクリプトを登録解除することさえ可能にします。 別のスレッドで述べたように 今日、キャッシングプラグインはあなたが適切なWordPressテクニックを使わなければあなたのスクリプトをgzipまたは縮小することはできません。

コーデックスページを見ると、スクリプトがヘッダーにあるかフッターにあるかを制御できることがわかります。

2
mrwweb

wp_add_inline_script関数を使用して、インラインjsを追加できます。

function prince_scripts() {

    wp_enqueue_script( 'prince-script', get_template_directory_uri(). 'main.js');

    $hide_on_mobile = apply_filters( 'prince_hide_on_mobile', true );

    $data = 'var hideOnMobile = ' . ( $hide_on_mobile ? 'true': 'false' ) . ';';

    wp_add_inline_script( 'prince-script', $data, 'before' );

}

add_action( 'wp_enqueue_scripts', 'prince_scripts');
0
Prince Ahmed