WordPressの高度なカスタマイズ⑦　カスタムフィールドをつくってみる

こんにちは。fsです。
WordPressでオリジナルのECサイトを制作するとき、商品ページで

• 価格
• サイズ
• 仕様

などの詳細情報の記載が必要です。
そのままでも使えますが、時々ズレてしまったり使い勝手が悪い場合があります。

商品情報の統一感を出すために、Wordpressにはカスタムフィールドという機能があります。
そんなわけで今回は、商品ページにカスタムフィールドを作っていきたいと思います。

仕上がりのイメージはこんな感じです。

それではご覧ください。

カスタムフィールドの機能を追加

まずはWordpressにカスタムフィールドをサポートさせます。
functions.phpのregister_post_typeの配列にカスタムフィールドのサポートを入れるだけでOKです。

<?php
/**
 * fs functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package fs
 */

add_action('init',function(){
	register_post_type('item',[
		'public' => true,
		'label' => '商品',
		'menu_position' => 5,
		'menu_icon' =>'dashicons-store',
		'show_in_rest' => true,
		'supports' => ['title','editor','custom-fields']
	]);
	register_taxonomy('genre', 'item', [
		'label' => '商品ジャンル',
		'hierarchical' => true,
		'show_in_rest' => true,
	]);

});

簡単ですね😌

カスタムフィールドを表示させる

続いて、カスタムフィールドを作成していきます。

カスタムフィールドの設定

まずは、商品ページの編集画面よりカスタムフィールドの設定を有効にします。
編集画面の右上の設定メニューをクリックし、設定を選択。

カスタムフィールドを有効化しリロードします。

そうすると、編集ページの下部にカスタムフィールドの記入画面が表示されるので、入力欄（名前と値）に商品情報を入れていきます。
今回は価格と出版社を書いてみました。
※一度入力すると次からは選択式にもなります

作ったカスタムフィールドを表示させる

作ったカスタムフィールドを表示させるにはget_post_metaという関数を使います。
商品情報を表示させるファイル（content-item.php）にコードを書いていきます。

まず、get_post_metaで商品情報を取得します。
一つ目のパラメーターに商品のID、二番目のパラメーターにキー（ここでは価格の値）、三番目にsingleをtrueにします。
※三番目のパラメーターをfalseにすると配列の情報を取得することになります

ここではテーブルで表示したいので、dlタグで囲いechoで出力していきます。

<p>商品名： <?php the_title(); ?></p>

<?php $price = get_post_meta(get_the_ID(),'価格',true); ?>
<dl>
    <dt>価格</dt>
    <dd><?php echo esc_html(number_format($price)); ?>円</dd>
</dl>

ページを読み込むと、ちゃんとカスタムフィールドが表示されています。

同じ要領で出版社も追加していきます。

<p>商品名： <?php the_title(); ?></p>

<?php $price = get_post_meta(get_the_ID(),'価格',true); ?>
<?php $publisher = get_post_meta(get_the_ID(),'出版社',true); ?>
<dl>
    <dt>価格</dt>
    <dd><?php echo esc_html(number_format($price)); ?>円</dd>
    <dt>出版社</dt>
    <dd><?php echo esc_html($publisher); ?></dd>
</dl>

再読み込みすると、出版社も表示できています。

これで統一感のある情報記載ができましたので、あとはcssでお好みのレイアウトを調整していきましょう。

まとめ　カスタムフィールドで統一感が出せます

いかがだったでしょうか。

カスタムフィールドを使うことで、

• 価格
• 商品の提供元
• 仕様

など、複数の商品やサービスで共通して使う情報を一括して管理/表示することができます。

このあたりは人によって好みが分かれますが、

「統一感を持って管理/表示させたい！」

という方はぜひ試してみてください。

今回は以上です。
最後までお読みいただきありがとうございました。

簡単操作！MacBookでWordpressテーマをつくってみる！