【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを（CSSつけ方もあり）

2018/03/13

こんにちは、管理人@SS_mshpです。

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用例をあげてみたいと思います。

便利な機能で実装方法もcodexに書いてあるけど『具体的にどのように使えるか』を見てみたいと思います。

■今回カスタムフィールドをつけてみる記事(カップ焼きそばレビュー)

去年はこんなの書いてたんですね～。とりあえずこの記事をチョイス。これに、カスタムフィールドを使って、『値＆内容』みたいな余計な情報を出してみたいと思います。例えば『辛さ○○点・総合評価○○点』みたいな感じで。

https://sounds-stella.jp/music-creation/archives/3437

■カスタムフィールドを使うための設定

この機能は今まで使ってなかったんで初です。管理画面の記事編集の上の方に、オプションがあるので押します。

カスタムフィールドにチェックを入れます。ただしこれだけでは出力しないので・・・

データを呼び出す『<?php the_meta(); ?>』を入れます（single.php・個別投稿ページ）。『php the_content();』が記事本体を出す部分なので、その下に入れると、本文が終わった後にカスタムフィールドが出てきます。

■記事投稿ページ内での操作と、表示のされ方

■記事投稿ページ内で、カスタムフィールドを追加していく

とりあえず、先ほどの焼きそばの記事の投稿ページ管理画面にきました。記事欄の下のほうにカスタムフィールド入力欄ができたので、『新規作成』を押して作っていきます。

『名前と値欄』があるんで、こんな感じで、焼きそばに関するパラメータをどんどん設定していきます。ある程度項目を共通化しておくと、他の記事でも使いまわせるのでラクになります。

■カスタムフィールドのデフォルト表示例

カスタムフィールドで、パラメーターを実装された焼きそば記事が出たんですけど・・・

なんか、むっちゃ味気ないですね～。リストの黒丸もちょっと邪魔になりそう。

■カスタムフィールドのCSSをエディットして、見栄えを変えてみよう

しかし、カスタムフィールドは、クラスが指定されて出力されています（デフォルトだとpost-metaやpost-meta-key）。ここに、適当にですが、リストの黒丸消したり、文字の色やマージン・ボーダーを指定してみます。span（インライン要素）で、display:blockにする必要性がでてくるかどうかは、運用しだいです。

（CSS記載例）
.post-meta{margin: 8px;color: #666666;}
.post-meta li{list-style-type:none;border: 1px dotted #666666;}
.post-meta-key{font-size: 18px;font-weight: bold;color:#FF0073;}

CSSで色や枠などを指定することができました。