ワードプレスで投稿だけのheadでスクリプトを読み込ませる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日はワードプレスの業務メモです。投稿画面のみをカスタマイズしたい際に特定のスクリプトを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してお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください