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

      2021/06/16   2669文字


今回は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で取ってきて変数に格納&エコーします。3つめのパラメーターは『trueで文字列・falseで配列』という挙動のようです。


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

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

あとがき・まとめ

  • WPカスタムフィールドは、管理画面で簡単に設定できるほか、the_meta・get_post_metaで出力できる
  • the_metaは単純にリスト形式で出るので、見やすくするにはCSSで整えてもok
  • the_metaは全部出るが、get_post_metaはキー指定して出力できる

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

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


【カテゴリ】 - webサイト制作関連, wpサイト制作事例
【タグ】 - , , ,

  関連記事