インターネット上には、wp_enqueue_script()を使用して外部スクリプトを挿入する方法に関する数千もの記事があります。
とにかく、インライン、<script>
で囲まれた、スクリプトを追加する方法について説明できるものは何も見つかりませんでした。
私はページコードの真ん中にそれらを追加するために使用しますが、私はそれが最も洗練された方法ではなく、より良い方法があるべきだと思います.
何か案は?
編集:私は '<script>
周辺を忘れていたのでキャンセルされました。今私の質問は明確になるはずです
Mrwwebが正しいのでその手法を使用する必要がありますが、実際には完璧なものはなく、インラインスクリプトとスタイルが使用されることもあります。 wp script is
を使用してスクリプトをチェックし、wp_head
またはwp_footer
を使用してそれらをヘッダーまたはフッターに出力することができます。
この記事の中でscribuの答えを参照することができます、 wp依存関係によるインラインスクリプトのenqueue
私は今、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 :
図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のドキュメントを参照してください。)script
内のhead
タグ内のすべてを出力します。window
スコープにリークするのを防ぐために、IIFEですべての作業を行います。HEREDOCは、混合テンプレートを介して著作権表示やその他のフォーマットを維持する必要がある場合に出力を制御するのに最適です。また、縮小されたコードが手元にない場合や、テストのためにドキュメントに何かを配置したい場合に、スクリプトのデバッグ速度を上げるのにも役立ちます。
アイテムが一度だけ追加されるようにする場合は、この回答を参照してください: https://wordpress.stackexchange.com/a/131640/117731
最後に、頭ではなくフッターに追加が必要な場合は、wp_head
呼び出しのadd_action
をwp_footer
に置き換えることができます。
編集:さらに掘り下げて見つけた この投稿 David Walshのブログで、少なくとも2012年から少なくとも単純なインライン展開が利用可能であることを示唆しています。お楽しみください!
wp_enqueue_script()
がJavaScriptをあなたのサイトに追加する唯一の方法です。それはあなたと他のプラグインが依存関係を宣言し、必要ならスクリプトを登録解除することさえ可能にします。 別のスレッドで述べたように 今日、キャッシングプラグインはあなたが適切なWordPressテクニックを使わなければあなたのスクリプトをgzipまたは縮小することはできません。
コーデックスページを見ると、スクリプトがヘッダーにあるかフッターにあるかを制御できることがわかります。
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');