記事ごとに異なるCSSを適用させるカスタマイズ方法【プラグイン不使用】

記事毎に異なるCSSを適用させることができると、便利になりますね。

以前、投稿や固定ページごとにCSSを追加させるプラグインWP Add Custom CSSを紹介しましたが、プラグインを使わなくても記事毎にCSSを適用させる方法があります。

プラグインは便利だけれど、有効化するプラグインの数はできるだけ減らしたいもの。

サイトが重くなるのも何か不具合が起きてしまうのもイヤですからね。

コードをfunctions.phpに記述することで、投稿画面に『カスタムCSS』入力ボックスを表示させるカスタマイズ方法です。

入力ボックスを表示させることで、投稿・固定ページ毎に異なるCSSを適用させることができます。

こんな場合におススメ

  • 投稿・固定ページごとに異なるCSSを追加したい
  • カスタムCSSの機能はほしいけれど、プラグインは使いたくない
目次

functions.phpを編集する

functions.phpに変更を加える場合は、バックアップを取ってから行うようにしてください。
また、コードの書き換えは自己責任でお願いします。

  • 管理画面 > 外観 > テーマエディター を開き、functions.phpを編集します。
    functions.phpにコードを追記する
  • または、FTPソフトを使用して wp-content > themes > 使用しているテーマフォルダ 内のfuncstions.phpをバックアップ・編集します。

functions.phpに記述するコード

コードを記述したらファイルを更新します。

カスタム投稿タイプでもカスタムCSSを使用したい場合

7行目あたり『add_meta_box(‘custom_css’, ‘カスタムCSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’);』の次の行に下記のコードを追記し、『カスタム投稿のスラッグ』をお使いの環境のものに変更してください。

カスタマイズ後の投稿画面

functions.phpにコードを記述すると、投稿画面に『カスタムCSS』ボックスが表示されるようになるので、適用したいCSSを記述します。

ブロックエディターの場合

WP Add Custom CSS 使用方法

旧エディターの場合

WP Add Custom CSS 使用方法

『カスタムCSS』ボックスが表示されていない場合

ブロックエディターの場合

ボタンをクリックし、オプションを選択。オプションが開いたら詳細パネル内の『カスタムCSS』にチェックを入れてください。

WP Add Custom CSS 表示されていない場合 ブロックエディター
『カスタムCSS』ボックスが表示されなかった場合 ブロックエディター

旧エディターの場合

functions.phpにコードを記述・保存しても、『カスタムCSS』ボックスが表示されなかった場合は、表示オプション内の『カスタムCSS』にチェックを入れてください。

『カスタムCSS』ボックスが表示されなかった場合

動作確認環境

  • WordPress 5.4.1

このカスタマイズは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • プラグインを使わないで、投稿や固定ページ毎に異なるCSSを適用させるカスタマイズ方法です。カスタマイズ方法の紹介です。
  • functions.phpに変更を加えたくなかったり、もしくは自信がないという方は、プラグインを使うことをおススメします。
投稿・固定ページ毎にCSSを追加するプラグイン
目次
閉じる