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

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

プラグインは便利だけれど、有効化するプラグインの数はできるだけ減らしたいもの。
サイトが重くなるのも、何か不具合が起きてしまうのもイヤですからね。

コードをfunctions.phpに記述することで、投稿画面に『カスタムCSS』入力フィールドを表示させる方法を紹介しますね。

こんな場合におススメ

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

functions.phpを編集する

functions.phpに変更を加える場合は、バックアップを取ってから行うようにしてください。また、コードの書き換えは自己責任でお願いします。
  • 外観 > テーマエディター > functions.phpを編集する
    functions.phpにコードを追記する
  • または、FTPソフトを使用して wp-content > themes > 使用しているテーマフォルダ 内のfuncstions.phpをバックアップ・編集する

追記するコード


Webお役立ちネタ帳

WordPressで投稿ページや固定ページに個別でCSSを追加したい場合、プラグイン「WP Add Custom CSS…

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

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

functions.php

add_meta_box('custom_css', __('カスタムCSS', 'custom_css_input'), 'custom_css_input', 'カスタム投稿のスラッグ', 'normal', 'high');

『カスタムCSS』表示イメージ

カスタムCSS入力フィールド表示
functions.phpに追記保存すれば、自動的に投稿画面に『カスタムCSS』入力フィールドが表示されるはずですが、もし表示されなかった場合は、表示オプション内の『カスタムCSS』にチェックを入れてください。

動作確認環境

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

まとめ

  • プラグインを使わないで、記事や固定ページごとにCSSを追加させる『カスタムCSS』入力フィールドを投稿画面に表示するカスタマイズ方法です
  • functions.phpに変更を加えたくなかったり、もしくは自信がないという方は、プラグインを使うことをおススメします。
[kanren id=”4867″ target=”_blank”]
記事ごとに異なるCSSを適用させるカスタマイズ方法【プラグイン不使用】
最新情報をチェックしよう!
スポンサーリンク