BASE Item Listのテンプレート機能で、BASEのさまざまな商品情報をWordPressに表示させる方法

この記事はプラグインバージョン1のものです。
2022年8月にリリースしたバージョン2については以下の記事を参照してください。

WordPressプラグイン「BASE Item List」をバージョン2にアップデートしました

プラグインへのお問い合わせが増えているので、よくある質問ページを準備しました。本プラグインについてBASEさんへ問い合わせても回答は得られませんのでご注意ください。

mt8が開発・メンテナンスをしているWordPressにBASEの商品情報を表示させるためのプラグイン、BASE Item Listについてです。

プラグインの導入方法は以下のこちらの記事を参考にしてください。

プラグインのデフォルト機能では、以下のように商品タイトル・画像のみのシンプルな一覧表示となっています。

サイトによっては、価格などの情報も表示したいケースがあるかと思います。

BASE Item Listではそういったケースに対応するために、BASEの商品情報の各項目をWordPressに連携表示するための「テンプレート機能」を用意しています。

テンプレート機能を使うには以下の3ステップが必要です。

1. プラグイン内にある「base_items.php」をテーマ内にコピーする
2. 「base_items.php」に各項目の出力を追加する
3. 出力項目に合わせてCSSを調整する

---

1.プラグイン内にある「base_items.php」をテーマ内にコピーする

BASE Item Listのプラグインフォルダは以下のようになっているはずです。

{WordPressルート}/wp-content/plugins/base-item-list

「base-item-list」フォルダ内にある、”base_items.php”を利用中のテーマフォルダの中にコピーします。

※移動ではなく、コピーをしてください。このファイルをプラグインから削除すると正しく動作しません。

たとえば、WordPress 5.x系のデフォルトテーマである、Twenty Nineteenをお使いの場合は次のフォルダ内にコピーすることになります。

{WordPressルート}/wp-content/themes/twentynineteen

---

2.「base_items.php」に各項目の出力を追加する

テーマフォルダ内に「base_items.php」のコピーができたら、VS CodeなどのUTF-8で編集可能なエディタで編集します。

「base_items.php」には必要な情報を出力するためのサンプルがプログラム内にコメントアウトされています。

「base_items.php」の内容は次のようになっています。（BASE Item List ver 1.1.1）

https://gist.github.com/mt8/5fa06848826ac44acfce25cb8418d048

テンプレート内でコメントアウトされている項目名はBASE APIのドキュメントと合わせています。

38行目のコードで、商品の価格（price）を出力しています。

出力時のHTMLエスケープ処理である esc_html WP関数と、数値に桁区切りを追加するnumber_format PHP関数も使用しています。

＜参考＞

esc_html：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/esc_html

number_format：

https://www.php.net/manual/ja/function.number-format.php

上記コードを追加すると、画像の下に価格をカンマ編集した状態で表示させることができます。

---

3.出力項目に合わせてCSSを調整する

先ほどのコードをサンプルに、価格を赤色にしたいとします。

その場合は次のようなコードを追加する必要があります。

上記例では、価格を囲っているspanタグにbase-item-priceというクラスを付けています。

2.CSSコードを追加する

.base-item-price {
    color: red;
}

お使いのテーマによって、どこにCSSを書くかが変わってきます。

一般的なテーマの場合、管理画面 -> 外観 -> カスタマイズの「追加CSS」に記述することができます。

CSSの詳細については以下のサイトを参考にしてください。

https://developer.mozilla.org/ja/docs/Web/CSS

---

以上が、BASE Item Listを使って、BASEの商品の細かい情報をWordPressで表示する方法となります。

いろいろな情報が表示できるので、カスタマイズにチャレンジしてみてください。

最後に

本プラグインへのサポートについて。

本プラグインはWordPress.orgに公式プラグインディレクトリにオープンソースとして公開しています。

無償で公開していますが、設置サポート等はすべて有償にて承っております。

設置サポートについては、BASE APIの登録が終わっている状態で、ショートコードを利用した商品リスト表示（デフォルトテンプレート使用）まで一律 33,000円(税込)となります。

上記ご確認頂き、お問い合わせフォームより送信をお願いします。