wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/09/25

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


今回は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など)

■テンプレートタグ/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

あとがき・まとめ

  • 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など)。

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webメディア制作運用, wpサイト制作事例
【タグ】 - , , ,

  関連記事

イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な ...

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

WP管理・投稿画面カスタマイズ~『p』『h2』みたいなタグ・定型文をボタン1つで記事に追加したい

今回は、以前サイト制作のお取引先さまと話した、WPの記事を投稿す ...

【WPプラグイン無し】3行のコードで、ブロックエディタ&ブロックライブラリCSSを無効にする方法

今回は、管理人が『お取引先さまのwebサイトでブロックエディタま ...