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

ワードプレス

2019-08-22

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に下記のコードを記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
// カスタムフィールドでページ別に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に下記のコードを記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
// カスタムフィールドでページ別に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」と入力します。

値の欄にファイル名だけ入力します。拡張子は入れません。
複数のファイルを読み込む場合はカンマ「,」で区切って入力します。

 参考、引用元

プラグイン不要！WordPressでページ別にCSSやJavaScriptを適用する方法 | らいふーる

こちらは編集ページで簡単に設定できるし、header.phpに書き込まずに済むからheader.phpもすっきり保てそうです！ありがとうございました！！

-ワードプレス

関連記事

アイキャッチ画像

アイキャッチ　テンプレートタグ 分岐　アイキャッチ

1
2
3
4
5
6
例）
<?php if ( has_post_thumbnail() ): //アイキャッチを指定している場合 ?>
<?php the_post_thumbnail( 'thumbnail' ); ?> //カッコ内はアイキャッチ画像のサイズ（初期値は150×150px）。
<?php else: // それ以外 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="no image" width="100" height="100" />
<?php endif; ?>

アイキャッチが設定されていない場合「no-image.png」を表示します。 最初 …

よく使うテンプレートタグ

パスを取得するテンプレートタグ ホームページのURL

1
2
3
4
<?php echo esc_url( home_url( '/' ) ); ?>
 
例）
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>

ワードプレスのURL ホームページのURLとワードプレスのURLが異なる場合に便 …

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

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

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

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

よく使う条件分岐

便利な条件分岐 トップページとその他

1
2
3
4
5
<?php if ( is_home() || is_front_page() ) : ?>
  トップページに表示させたいものを入れる
<?php else: ?>
  トップページ以外はこちら
<?php endif; ?>

カテゴリーとその他 カテゴリーごとに表示を変える場合 [crayon-61056d176d0a9 …

PREV
cssで作るいろいろなグラデーション
NEXT
画像を一括変換させたい

2021/02/14

スマホでhoverが効かない！タップでも対応させたい！

2021/01/31

スライダー「slick」の使い方

2021/01/31

アイキャッチ画像

2021/01/24

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

2021/01/24

CSSで縦書き

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