WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
本日はワードプレスの業務メモです。投稿画面のみをカスタマイズしたい際に特定のスクリプトをhead内で読み込ませたいシチューションがありますよね。下記で解説させていただきます。
ワードプレスで投稿だけのheadでスクリプトを読み込ませる方法
まずはもっとも一般的な書き方からご紹介いたします。
function js_head_include_enqueue_scripts() {
wp_enqueue_script(
'sample-script',
get_template_directory_uri() . '/js/sample.js'
);
}
add_action( 'wp_enqueue_scripts', 'js_head_include_enqueue_scripts' );上記を指定すると管理画面以外の全ページで下記ソースが出力されます。
<script src='https://example.com/wp-content/themes/theme-name/js/sample.js?ver=6.1' id='sample-script-js'></script>ただ、上記の書き方ではテーマ内にファイルの格納が必要です。たとえば「CDN」を指定する方法は以下です。
function js_head_include_enqueue_scripts() {
wp_enqueue_script(
'sample-script',
'https://cdn.example.com/src/sample.js'
);
}
add_action( 'wp_enqueue_scripts', 'js_head_include_enqueue_scripts' );下記の通り指定URLが差し込まれます。
<script src='https://cdn.example.com/src/sample.js?ver=6.1' id='sample-script-js'></script>もし投稿ページのみに差し込むなら条件分岐を追加すればOK。
function js_head_include_enqueue_scripts() {
if ( is_single() ) {
wp_enqueue_script(
'sample-script',
'https://cdn.example.com/src/sample.js'
);
}
}
add_action( 'wp_enqueue_scripts', 'js_head_include_enqueue_scripts' );参考までにスクリプト自体は第5引数まで指定可能です。上記サンプルでは第1と第2しか指定していません。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );オプションとして稀に指定するのは「第5引数」ですね。読込ませる位置をヘッダーからフッターに変更可能。初期値はfalseなので「head」内となります。もしtrueを指定するとフッター側で読込みます。
ぜひお試しくださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
