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

プラグインへのお問い合わせが増えているので、よくある質問ページを準備しました。本プラグインについてBASEさんへ問い合わせても回答は得られませんのでご注意ください。 mt8が開発・メンテナンスをしているWordPressにBASEの商品情報を表示させるためのプラグイン、BASE Item Listについてです。 プラグインの導入方法は以下のこちらの記事を参考にしてください。 プラグインのデフォルト機能では、以下のように商品タイトル・画像のみのシンプルな一覧表示となっています。 サイトによっては、価格などの情報も表示したいケースがあるかと思います。 BASE Item Listではそういったケースに対応するために、BASEの商品情報の各項目をWordPressに連携表示するための「テンプレート機能」を用意しています。 テンプレート機能を使うには以下の3ステップが必要です。 プラグイン内にある「base_items.php」をテーマ内にコピーする 「base_items.php」に各項目の出力を追加する 出力項目に合わせて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) テンプレート内でコメントアウトされている項目名は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コードを追加する お使いのテーマによって、どこにCSSを書くかが変わってきます。 一般的なテーマの場合、管理画面 -> 外観 … Continue reading BASE Item Listのテンプレート機能で、BASEのさまざまな商品情報をWordPressに表示させる方法