ワードプレスでトップページだけに読み込ませる外部ファイル（jsとcss）の設定方法

本日は少しワードプレスに慣れた方へ向けた記事となります。ワードプレスではテーマ内に設置する「functions.php」を使えばテーマを細かくコントロール可能です。本日はトップページでのみ読み込ませたいスクリプト（Javascript）やスタイルシート（CSS）がある場合に利用できるナレッジです。

以下を簡単に説明しておくとfile_load_scripts_stylesという名前でファンクション（ユーザー定義関数）を作成しています。そしてis_front_pageが「フロントページの場合は」という条件分岐タグです。「if」でくくっているので「もしフロントページなら実行する」という条件文として動きます。

<?php
// 外部ファイル追加の関数
function file_load_scripts_styles() {
	if( is_front_page() ){ 
		// １つ目（js）
		wp_enqueue_script('file-script1', '/dist/js/script1.js', array());
		// ２つ目（js）
		wp_enqueue_script('file-script2', '/dist/js/script2.js', array());
		// １つ目（css）
		wp_enqueue_style('file-style1', '/dist/css/style1.css', array());
		// ２つ目（css）
		wp_enqueue_style('file-style2', '/dist/css/style2.css', array());
	}
}
// wp_footerに処理を登録
add_action('wp_footer', 'file_load_scripts_styles');
?>

そしてwp_enqueue_scriptはjavascriptを実行するワードプレス関数です。次にwp_enqueue_styleがCSSを実行するワードプレス関数です。いづれもif( is_front_page() ){内に記述されていますので「フロントページでだけ読み込まれる外部ファイル」という意味となります。

最後にあるadd_action('wp_footer', 'file_load_scripts_styles');がテーマのフッター部分（</body>直前）でfile_load_scripts_stylesを実行してくださいという実行文となります。

仮に運営中のURLが「http://example.com」で、インストール先が「http://example.com/wp」という状況を想定すると、トップページでのみ以下４つの外部ファイルが順番に読み込まれます。

<link rel='stylesheet' id='file-style1-css' href='http://example.com/wp/dist/css/style1.css' type='text/css' media='all' />
<link rel='stylesheet' id='file-style2-css' href='http://example.com/wp/dist/css/style2.css' type='text/css' media='all' />
<script type='text/javascript' src='https://example.com/wp/dist/js/script1.js'></script>
<script type='text/javascript' src='https://example.com/wp/dist/js/script2.js'></script>

ワードプレスの場合は、マーケティング面を考慮して『トップページのみランディングページとして構築する』シチュエーションも多いです。そのような状況下では上記に書いた条件分岐をfunctions.phpへ記述すれば柔軟な外部ファイル読込みが可能となります。

もしWPインストール先が「http://example.com/wp」になっていて、「/wp」をあえて無視したい場合は以下の記述方法でもOKです。下記のように「/../」で始めれば直前の「/wp」をスルーできます。

<?php
// 外部ファイル追加の関数
function file_load_scripts_styles() {
	if( is_front_page() ){ 

		// １つ目（js）
		wp_enqueue_script('file-script1', '/../dist/js/script1.js', array());

		// ２つ目（js）
		wp_enqueue_script('file-script2', '/../dist/js/script2.js', array());

		// １つ目（css）
		wp_enqueue_style('file-style1', '/../dist/css/style1.css', array());

		// ２つ目（css）
		wp_enqueue_style('file-style2', '/../dist/css/style2.css', array());

	}
}
// wp_footerに処理を登録
add_action('wp_footer', 'file_load_scripts_styles');
?>

上記の書き方にピンと来ない方は以下URLをクリックすれば意味が分かるはずです。正確には「直前のディレクトリ（上記で言う/wp）を１階層飛ばす」という記述法となります。実際にクリックください。
http://example.com/wp/../dist/css/style1.css

上記のリンクURLへマウスカーソルを合わせるだけでも確認できます↓

スマホであればURLを長押しすれば実際に開かれるアドレスが見れます。

上記により「/../」と記述すれば直前のディレクトリが省略されるのが分かりますね。なお、パスの記述は各運営状況に併せた最適な方法であれば問題ありません。ぜひお試しください。