WPカスタムフィールド～記事にthe_metaでフィールド出力＆評価つける・get_post_metaとの違い

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用例をあげてみたいと思います。便利な機能で実装方法もcodexに書いてあるけど『具体的にどのように使えるか』を見てみたいと思います。 内容としては『投稿画面からフィールドつけてみる・the_metaで出力＆CSSで見栄え変更・get_post_metaとの違い』という感じでみていきましょう。

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

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

カスタムフィールドを使うための設定・出力させ方（the_meta）

この機能は今まで使ってなかったんで初です。管理画面の記事編集の上の方に、オプションがあるので押します。 カスタムフィールドにチェックを入れます。ただしこれだけでは出力しないので・・・

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

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

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

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

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

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

カスタムフィールドで、パラメーターを実装された焼きそば記事が出たんですけど・・・ なんか、むっちゃ味気ないですね～。リストの黒丸もちょっと邪魔になりそう。the_meta()で出力した場合、このようにリストの形で全部出るという特徴があります。

カスタムフィールドの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で色や枠などを指定することができました。

フィールド出力ファンクション『get_post_meta』との違いは？→キーを指定して出力できる

上の例では、組み込みファンクション『the_meta』を使いましたが、WordPressには、ほかにもカスタムフィールドを出力するファンクションがあります。ここでは、『get_post_meta』というのを使ってみますので、挙動の違いを確認しましょう。

普通に書いただけでは出ないので、まず『get_the_ID()』で記事のIDを取得。そのID記事に設定されているフィールド’bpm’を、get_post_metaで取ってきて変数に格納＆エコーします。３つめのパラメーターは『trueで文字列・falseで配列』という挙動のようです。

出力させてみるとこんな感じになります。『the_meta』だと全部出ましたが、『get_post_meta』だと、キーを指定して特定のフィールドを取るという、挙動の違いがあります。『検索狙い用の値は出さない』『表示用の値は出す』みたいな使い分けもできそうですね。

参考リンク（codex・カスタムフィールド関連）

■テンプレートタグ/the_meta
https://wpdocs.osdn.jp/テンプレートタグ/the_meta

■関数リファレンス/get_post_meta
https://wpdocs.osdn.jp/関数リファレンス/get_post_meta

■関数リファレンス/get_post_custom
https://wpdocs.osdn.jp/関数リファレンス/get_post_custom

あとがき・まとめ

カスタムフィールドをサクッと実装＆主な取得ファンクションの違いも確認してみました。ACF(Advanced Custom Fields)やSCF(Smart Custom Fields)など、プラグインでも対応させられる方法がありますが、取得ファンクションが違うので注意します（例：ACFは、the_fieldなど）。

フィールド系は少しややこしいけど、使いこなせると『管理画面項目』『ソート』『検索・絞り込み』など、できることが格段に増えます。当サイト管理人も、フィールドを扱う案件をお仕事でいくつか行っているので、今後もやり方・事例を紹介できればと思います。