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

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

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

<?php
// 外部ファイル追加の関数
function file_load_scripts_styles() {
	if( is_front_page() ){ 
		// 1つ目(js)
		wp_enqueue_script('file-script1', '/dist/js/script1.js', array());
		// 2つ目(js)
		wp_enqueue_script('file-script2', '/dist/js/script2.js', array());
		// 1つ目(css)
		wp_enqueue_style('file-style1', '/dist/css/style1.css', array());
		// 2つ目(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」という状況を想定すると、トップページでのみ以下4つの外部ファイルが順番に読み込まれます。

<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() ){ 

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

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

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

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

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

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

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

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

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

最新式のプラグインを事前公開!

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。オウンドメディアのマーケティング力をさらに高めるチャンスです。まずはフリーDLからお試しくださいませ。
改良されたプラグインを確認する