特定のページだけにcssやjsを読み込ませたい!

ワードプレス

2019-08-22

JavaScriptやcssのファイル、読み込まれるのに時間がかかりページが重くなります。
必要なページだけにリンクさせたいですよね。
今日はページごとにファイルをリンクする方法をまとめました!

❶header.phpまたはfooter.phpに分岐を使って記述

固定ページ限定で読み込ませたい!

header.phpまたはfooter.phpに下記のように記述します。
こちらは固定ページだけにファイルがリンクされます。

<?php if ( is_page() ): ?>
↓リンクさせたいファイルのパスを入れます
<link rel="stylesheet" href="cssファイルurl" />
<script src="jsファイルurl"></script>

<?php endif; ?>

 

投稿ページ限定で読み込ませたい!

こちらは投稿ページだけにファイルがリンクされます。

<?php if ( is_single() ): ?>
<link rel="stylesheet" href="cssファイルurl" />
<?php endif; ?>

 

特定の固定ページ限定 スラッグで指定

スラッグで指定したい場合はこちら。スラッグのページ限定でファイルがリンクされます。

<?php if ( is_page( 'リンクさせたい固定ページのスラッグ' ) ): ?>
<link rel="stylesheet" href="cssファイルurl" />
<?php endif; ?>

 

特定の固定ページ限定 IDで指定

こちらは入力したIDのページ限定でファイルがリンクされます。

<?php if ( is_page( ID ) ): ?>
<link rel="stylesheet" href="cssファイルurl" />
<?php endif; ?>

 

分岐についてはこちらでも紹介しています!

❷カスタムフィールドで設定

①functions.phpをカスタマイズ

cssファイルの場合functions.phpに下記のコードを記述します。

// カスタムフィールドでページ別に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に下記のコードを記述します。

// カスタムフィールドでページ別に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もすっきり保てそうです!ありがとうございました!!

➌カスタムフィールドで設定

カスタムフィールドで設定してheader.phpに出力する方法は、こちらも分かりやすかったです。カスタムフィールドに入れた内容が、そのまま追加されます!

-ワードプレス

関連記事

ページの最初の画像を自動でアイキャッチにする

読みやすさや視線誘導のために、記事一覧にアイキャッチ画像を設定します。 「読んでみたい」と思ってもらえるアイキャッチ画像を準備したいですね! WordPressでは編集画面右下の「アイキャッチ画像を設 …

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

WordPressテーマ「lightning」カスタム投稿

「lightning」のカスタム投稿 WordPress無料テーマで人気の「lightning」。 サポートの終了しているテーマ「BizVektor」から後継の「lightning」に移行したという方 …

MW WP Formが動かない!確認画面にいかない!原因は?

入力画面でループして確認画面やエラーの表示に遷移しない、せっかく入力したのに確認画面を押すと、リロードされて消えてしまい、先に進まない…。なかなか解決せずはまってしまったMW WP Form。試してみた内容をご紹介しています。

WordPressのお引っ越し。アイキャッチ画像の移行も大丈夫?

プラグインを使ってWordPressを移行する WordPressの移行で今よく使っているのが、アイキャッチ画像もちゃんと移してくれる「Attachment Importer」です。(「WordPre …

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。