webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2020/09/25

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

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


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

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

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

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

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...