未分類

WordPressカスタムフィールドの設定方法まとめ

こんにちは、ユウトです。

今回は、カスタムフィールドの設定方法について備忘録として残しておきます。

まず、カスタムフィールドを設定する理由ですが、以下のようなメリットがあるからです。

  • HTMLの知識がない人でも入力・更新が簡単になる(複数人でのWordPress運用時に活躍)
  • 後でCSSやJavaScriptで見た目やアニメーションなどを調整しやすい
  • 本文とは別でデータを保存できるので、データの管理や活用がやりやすい

私が運営している化粧品サイトであれば、以下のような項目はカスタムフィールドに設定しておくと、ユーザが自分の気になる項目で化粧品を並べ替えて比較したりできるので便利ですね。

  • 価格
  • アットコスメの評価
  • 美肌成分

では、前置きはこれくらいにして、さっさと設定方法をまとめておきます。

まずは、記事投稿画面にて、表示オプションのカスタムフィールドにチェックを入れます。

続いて、カスタムフィールドの変数と値を設定します。

今回は、表示を確認したいだけなので、適当に商品名を設定しておきます。

設定が完了したら、カスタムフィールドを表示させたい場所にWordPressのタグを設定します。

今回は、表示を確認しやすい場所として、記事の最上部に設定しました。

ここで、post_custom関数を使うと、指定したカスタムフィールド変数の値を出力できます。

そして、設定したカスタムフィールドのデータをすべて表示させたい場合は、the_meta関数を使うといいです。

表示をチェックすると、post_custom関数で出力させた商品名とviewsのデータが表示されていますね。

そして、the_meta関数も設定しているので、カスタムフィールドの変数と値がセットで出力されています。

というわけで、カスタムフィールドの設定と表示方法を確認できたので、これで終わりです。