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

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

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

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

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

BASE Item Listを使ったBASE商品一覧のWordPressへの表示

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

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-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)

テンプレート内でコメントアウトされている項目名は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

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

BASE Item Listで商品価格を表示している状態

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の登録が終わっている状態で、ショートコードを利用した商品リスト表示(デフォルトテンプレート使用)まで一律 10,000円(税別)となります。

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