WordPress（ワードプレス）のカスタムフィールドを使って、記事ごとにCSSを追加する方法

wordpress(ワードプレス)のカスタムフィールドを使って、記事ごとにCSSを追加する方法

wordpress(ワードプレス)を運用していて、投稿や固定ページごとにレイアウトや装飾を変えたいな…と思ったことはありませんか？

一番簡単な解決策として、独自の装飾にしたい箇所に独自のクラスを与えて記事をコーディングしつつ、テーマファイル内のstyle.cssを編集することで、レイアウトを変更することは可能です。

しかしながら、全ページで読み込まれる共通のstyle.cssに、特定のページでしか使われないCSSを記述することは、なんだか非効率な気がすることも確か。この方針でサイトを運営し続けていくと、いつかサイトが重くなりそう…なんて不安も頭をよぎります。また、PCに詳しくないスタッフがビジュアルエディタを使用している等の理由で、気軽に編集画面の「ビジュアル」「テキスト」を切り替えることができない事情がある方もいることでしょう。

この課題が、wordpress(ワードプレス)に標準装備されている「カスタムフィールド」という機能を用いて解決することが可能です。本日は、カスタムフィールドについて解説をしつつ、本課題を解決する方法を記載いたしました。

カスタムフィールドとは

カスタムフィールドとは、wordpress(ワードプレス)管理画面の「投稿」や「固定ページ」にある、投稿ごとに自由なデータを入力することができる入力フォームのこと。

▲上記のようなフォームが、管理画面での各記事編集ページに用意されています。

▲もし、表示されていない場合は、各編集ページの右上にある「表示オプション」をクリックし、「カスタムフィールド」にチェックを入れて表示させてみましょう。

ここでは「名前」と「値」を登録することができます。対にして登録することで、管理しやすくなるわけですね。ここで登録した「名前」と「値」は、外観編集上で改造できるテンプレートPHP上の好きな位置で表示させることができるのです。

カスタムフィールドは、登録するだけでは何も記事に害がないため、試しになにか登録してみてはいかがでしょうか。まずは操作に慣れることが大事！

厳密には、登録したカスタムフィールドはデータベースに登録され容量を使うため、害が無いという表現は正確ではないものの…表面上は、PHP上で命令をしないと露出しないため安心して触ることができます。（※私も、登録しただけでは表示されないことを良いことに、「メモ」という名前のカスタムフィールドに、「値」の中にアイデアや推敲前のテキストなどを登録していることもあります…カスタムフィールドは、自由なんです！）

このカスタムフィールドを使って、個別ページにCSSを登録しましょう。

記事ごとにCSSを個別登録！

さて、実際に記事ごとにCSSを個別登録する手順をご説明いたします。

まずはカスタムフィールドに下記の画像のように入力してみましょう。「名」に「css」と入力し、「値」に、スタイルを記入しました。「名」はあくまでも識別子のため何でも良い点は、ひとつのポイントです。（cssと入力したからcssになる、というわけではありません。）そして、「値」には、スタイルタグごと記入しています。

記載をしたあとは「カスタムフィールドを追加」を押して、第一段階は完了となります。（記事を更新しなくても、完了しています。）

その後、第二段階の加工として、外観編集機能（バージョンにより、管理画面サイドバー「外観」のメニュー内の「エディター」または「編集」）にてテンプレートPHPを編集しましょう。今回、個別記事ごとにCSSを表示させることが最終目標であるため、登録したカスタムフィールドを「header.php」の</head>タグの直前に登録したいと思います。

※外観編集機能ではなく、FTPソフトから直接テーマファイルを編集することも可能です。
※PHPテーマファイルを操作する前に、バックアップを忘れずにとっておきましょう。

下記のプログラムを、header.phpの</head>タグの直前に登録し、更新を押すことで、今回の作業は完了です。

いかがでしょうか。上記の工程で、特定の記事のみ、CSSを登録することに成功しました。

注意点として、カスタムフィールドは大文字小文字の区別、半角英数・全角英数の区別がありますので、カスタムフィールドで登録する名「css」と、PHPプログラム上の「css」の文字の形式を揃えることが大事です。同じく、半角スペースの混入なども、表示されない原因のひとつになりがちですので、お気をつけ下さい。