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

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テーマをつくってみる!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 6 人中 6 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました