WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

ワードプレス

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

2019-08-22

JavaScriptファイルはheader.phpかfooter.php、cssファイルはheader.phpに記述しています。でもJavaScriptのファイル、読み込まれるのに時間がかかりページが重くなるので困ります。必要なページだけにリンクさせたいですよね。
そこで、ページごとにリンクを記述できる方法を探してみました!

❶header.phpまたはfooter.phpに記述する方法

固定ページ限定で読み込ませる方法

header.phpまたはfooter.phpに下記のようにコードを記述すると固定ページだけにファイルがリンクされます。

投稿ページ限定で読み込ませる方法

is_single()にすると投稿ページだけにファイルがリンクされます。

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

()にスラッグを入れると特定の固定ページ限定でファイルがリンクされます。

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

()にスラッグを入れると特定の固定ページ限定でファイルがリンクされます。

❷カスタムフィールドで設定する方法

①functions.phpをカスタマイズ

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

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

②編集ページのカスタムフィールドで設定

カスタムフィールドの選択肢からCSSなら「includeCSS」、JavaScriptなら「includeJS」を選びます。選択欄にない場合、新規追加で「includeCSS」または「includeJS」と入力します。

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

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

-ワードプレス

関連記事

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

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

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

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

WordPress コード自動整形を解除する

ビジュアルモードにしたらコードが勝手に変わった!?
テキストモードで編集していたのではじめは気がつきませんでした。ビジュアルモードを開いたら、なんと表示くずれが!コードを確認すると.…

WordPress よく使うおすすめプラグイン

プラグインが増えれば内容によってスクリプトが増え、ページの読み込みが遅くなるので、使い過ぎないようにします。私が今まで制作していて本当に助かっているプラグインはこちらです!

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