
JavaScriptファイルはheader.phpかfooter.php、cssファイルはheader.phpに記述しています。でもJavaScriptのファイル、読み込まれるのに時間がかかりページが重くなるので困ります。必要なページだけにリンクさせたいですよね。
そこで、ページごとにリンクを記述できる方法を探してみました!
❶header.phpまたはfooter.phpに記述する方法
固定ページ限定で読み込ませる方法
header.phpまたはfooter.phpに下記のようにコードを記述すると固定ページだけにファイルがリンクされます。
1 2 3 4 5 |
<?php if ( is_page() ): ?> <link rel="stylesheet" href="cssファイルurl" /> <script src="jsファイルurl"></script> (↑リンクさせたいファイルのパスを入れる) <?php endif; ?> |
投稿ページ限定で読み込ませる方法
is_single()にすると投稿ページだけにファイルがリンクされます。
1 2 3 |
<?php if ( is_single() ): ?> <link rel="stylesheet" href="cssファイルurl" /> <?php endif; ?> |
特定の固定ページ限定 スラッグで指定
()にスラッグを入れると特定の固定ページ限定でファイルがリンクされます。
1 2 3 |
<?php if ( is_page( 'リンクさせたい固定ページのスラッグ' ) ): ?> <link rel="stylesheet" href="cssファイルurl" /> <?php endif; ?> |
特定の固定ページ限定 IDで指定
()にスラッグを入れると特定の固定ページ限定でファイルがリンクされます。
1 2 3 |
<?php if ( is_page( ID ) ): ?> <link rel="stylesheet" href="cssファイルurl" /> <?php endif; ?> |
❷カスタムフィールドで設定する方法
①functions.phpをカスタマイズ
cssファイルの場合functions.phpに下記のコードを記述します。
12345678910111213 // カスタムフィールドでページ別にCSSを読み込むfunction include_custom_css() {$dir = get_template_directory_uri();if ( is_single() || is_page() ) {if ( post_custom( 'includeCSS' ) ) {$css = explode( ',', post_custom( 'includeCSS' ) );foreach ( $css as $value ) {echo "<link rel=\"stylesheet\" href=\"{$dir}/css/{$value}.css\">\n"; // テーマディレクトリ内「css」ディレクトリ参照}}}}add_action( 'wp_head', 'include_custom_css' );
JavaScriptファイルの場合functions.phpに下記のコードを記述します。
12345678910111213 // カスタムフィールドでページ別にJavaScriptを読み込むfunction include_custom_js() {$dir = get_template_directory_uri();if ( is_single() || is_page() ) {if ( post_custom( 'includeJS' ) ) {$js = explode( ',', post_custom( 'includeJS' ) );foreach ( $js as $value ) {echo "<script src=\"{$dir}/js/{$value}.js\"></script>\n"; // テーマディレクトリ内「js」ディレクトリ参照}}}}add_action( 'wp_footer', 'include_custom_js' );
②編集ページのカスタムフィールドで設定
カスタムフィールドの選択肢からCSSなら「includeCSS」、JavaScriptなら「includeJS」を選びます。選択欄にない場合、新規追加で「includeCSS」または「includeJS」と入力します。
値の欄にファイル名だけ入力します。拡張子は入れません。
複数のファイルを読み込む場合はカンマ「,」で区切って入力します。
こちらは編集ページで簡単に設定できるし、header.phpに書き込まずに済むからheader.phpもすっきり保てそうです!ありがとうございました!!