ご挨拶と使用に至った経緯
こんばんは！黒田です。
今月は節分がありましたね。皆様も福を呼び込まれたことと思います。
最近は主戦力台のパソコン（主に使用しているものですね）の調子が悪いので、新調しようと思っております。
さて、先日新たに使用したプラグインのご紹介を今回もさせて頂こうと思います。
それが、BASE商品リストです。
こちらのプラグインの使い方、具体例の記事がなかなか無いので、
記述しようと思います。
こちらの使用に至った経緯なのですが、
- BASEで出品する商品についてWordPressでのサイト表示を望まれているクライアント様で、
- トップページにはおすすめ商品として任意の商品を並べたい
- 納品後はクライアント様がサイト管理を行う
という条件下で、どういった形が納品後の運用に最適かを検討しました。
BASEではifremタグ（<iframe>: インラインフレーム要素）で商品や商品一覧をWordPressに埋め込むことができます。（ブロック挿入ツールの「カスタムHTML」を利用します。）
ですが、これではトップページのおすすめ商品に上がる際、
もし投稿のカテゴリーを使用して並べたとしてもBASEでの商品管理とWordPress上での管理が二重となる為それは一つの手として
もっと良い方法はないかと思いました。
すると事前に話を頂いた時に、WordPress.orgにBASEとWordPressを連携するプラグインを発見しましたのでこちらを利用することにしました。
※今回はテスト時間が十分設けられなかった為、公式が案内しているプラグインの使い方をしました。
BASE商品リスト-準備
まず、使用する前にAPIの申請をしないといけないのですが、
プラグインをインストールしサイドバーに出てくるBASE Item Listを開くと
この様なプラグイン使用準備の説明が、用意されています。
この説明に従って、BASEの方でAPIの申請を行います。
その下には、BASEの情報を入力する場所があり、
APIの申請に必要なコールバックURLもこちらへ載っています。
- client_id
- client_secret
- ショップURL
これらの情報を載せて変更を保存します。
BASE商品リスト-テーマファイルへ複製ファイルを加える
API申請が通ったら、お次は実装準備に入ります。
そして今からご紹介するものは、作成者の方のブログを参考にさせて頂いてます。（下の記事）
テスト期間が設けられる状況でしたら、Code Snippetsで実現できるとより安全に扱うことが出来て良いなと思います。
記事内にもあるように、デフォルトの機能で表示は可能ですが
「金額を追加したい」など、より実現したいケースに合わせてこのプラグインでは
BASEの商品情報の各項目をWordPressに連携表示するための「テンプレート機能」を用意されています。
テンプレート機能を使うステップが、
- プラグイン内にある「base_items.php」をテーマ内にコピーする
- 「base_items.php」に各項目の出力を追加する
- 出力項目に合わせてCSSを調整する
です。
まず、バックアップをとっているファイル内からプラグイン内にある「base_items.php」を含んでいるファイルを探しインポートします。※1
ファイルの場所はこちらです。
{WordPressルート}/wp-content/plugins/base-item-listそして次に「base_items.php」を選択し開くと、VSCodeが立ち上がり開きます。
次に、FTPソフトを立ち上げて、クライアント様のWordPress環境と繋ぎます。
そこで該当のWordPress内、子テーマファイルを開きます。
FTPソフトの自分のデバイス内ファイルから「base_items.php」を見つけそこから子テーマファイル内へ
移動（状態はコピー&ペースト）すれば
サイトの子テーマ内に新たに「base_items.php」ファイルが加わったことが確認できます。
※このファイルをプラグインから削除すると正しく動作しないので留意しましょう。
移動先のファイルの場所はこちらです。
{WordPressルート}/wp-content/themes/使用中の子テーマここで、公式の案内では「テーマフォルダ内に「base_items.php」のコピーができたら、VS CodeなどのUTF-8で編集可能なエディタで編集します。」とありますが、
私は直接接続して編集せず、※1でインポートした「base_items.php」ファイルを使用しローカル環境で編集をして移動し、反映させます。
「base_items.php」の内容は次のようになっています。
GitHubではこちら→https://github.com/mt8/base-item-list/blob/master/template/base_items.php
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
global $base_items;
/*
Array
(
[n] => stdClass Object
(
[item_id] => int
[title] => string
[detail] => string
[price] => int
[proper_price] => int
[item_tax_type] => int
[stock] => int
[visible] => int
[list_order] => int
[identifier] =>
[modified] => 1601540864
[img(1-5)_origin] => string
[img(1-5)_76] => string
[img(1-5)_146] => string
[img(1-5)_300] => string
[img(1-5)_500] => string
[img(1-5)_640] => string
[img(1-5)_sp_480] => string
[img(1-5)_sp_640] => string
[variations] => Array
(
[n] => stdClass Object
(
[variation_id] => int
[variation] => string
[variation_stock] => int
[variation_identifier] =>
[barcode] =>
)
)
[options] => Array
(
[n] => stdClass Object
(
[option_id] => int
[option_name] => string
[option_type] => string
[required] => bool
[list_order] => int
)
)
)
)
*/
?>
<?php if ( isset( $base_items ) ) : ?>
<div class="base_items">
<ul class="base_items_list">
<?php foreach ( $base_items as $item ) : ?>
<li class="base_item">
<dt><span class="base_item_title"><?php echo esc_html( $item->title ); ?></span></dt>
<dd>
<a href="<?php echo esc_url( $item->shop_url) ?>/items/<?php echo $item->item_id; ?>" target="_blank">
<img src="<?php echo esc_url( $item->img1_300 ); ?>" alt="<?php echo esc_attr( $item->title ); ?>">
</a>
</dd>
</li>
<?php endforeach; ?>
</ul>
</div><!--/.base_items-->
<?php endif;因みに、BASEが用意しているBASEのAPIの開発者向けのドキュメントに沿って
テンプレート内でコメントアウトされている項目名と合わされています。
https://docs.thebase.in/docs/api/items/search#%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%81%AE%E4%BE%8B
BASE商品リスト-複製ファイルの編集
デフォルトの表示に加えて
商品価格や商品説明を表示させたいので、
<?php echo number_format( $item->price ); ?>や、
<?php echo esc_html( $item->detail ); ?>というコードが、<?php foreach ( $base_items as $item ) : ?>ループ内にあれば良いので、
コメントアウトの部分はそのままに
こちらが順番などクライアント様の要望に合わせてカスタマイズを加えたものになります。
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
global $base_items;
/*
ここは略
*/
?>
<?php if ( isset( $base_items ) ) : ?>
<div class="base_items">
<ul class="base_items_list">
<?php foreach ( $base_items as $item ) : ?>
<li class="base_item">
<dt>
<a href="<?php echo esc_url( $item->shop_url) ?>/items/<?php echo $item->item_id; ?>" target="_blank">
<img class="base_item_img" src="<?php echo esc_url( $item->img1_300 ); ?>" alt="<?php echo esc_attr( $item->title ); ?>">
</a></dt>
<dd><span class="base_item_title"><?php echo esc_html( $item->title ); ?></span></dd>
<dt><span class="base-item-price"><?php echo number_format( $item->price ); ?></span></dt>
<dd>
<span class="base-item-detail"><?php echo esc_html( $item->detail ); ?></span>
</dd>
</li>
<?php endforeach; ?>
</ul>
</div><!--/.base_items-->
<?php endif;追加の記述内では、
出力時のHTMLエスケープ処理である esc_html WP関数と、数値に桁区切りを追加するnumber_format PHP関数も使用しております。
BASE商品リスト-実装
[BASE_ITEM q="Tシャツ" limit="4"]こちらの様なショートコードを入れれば表示されます。
（ブロック挿入ツールの「ショートコード」を選択し、そちらへショートコードを入力します。）
トップページのおすすめ商品に商品を並べて行きたいと思います。
用意されているショートコードパラメータを利用し表示させるので、
その中でもトップページの中へ表示させる為に使うものはこれらです。
- q: 検索キーワード
- limit: 表示する商品数。 (MAX: 100)（未指定時：10）
- name: 複数エリアに設置する場合に指定します。この名前をキーにキャッシュが作成されます。（未指定時：base_item_list）
[BASE_ITEM q="おすすめ" limit="3" name="base_items1"]検索キーワードは商品の説明や、タイトル任意の場所へ「おすすめ」と入っていれば自動的にトップページへ表示されます。
表示する商品数の「limit」は、分かりやすいかと思いますので説明は省略します。
またBASE商品は投稿でも商品情報を表示する為、複数エリアに設置する場合に「name」を利用し、
この名前をキーにキャッシュが作成され表示を手助けします。
試しに複数箇所へ商品表示を配置している状態で、「name」指示をなくすと前の商品から別商品に遷移しても前情報が画面表示には残ってしまったりします。
※投稿へ表示させるショートコードパラメータの「q」や「name」には、今後のクライアント様の表示させやすさも考慮し商品名を入れるようにアドバイス資料を作成しました。
CSS
また、CSSにつきましては、デフォルトでもクラスが用意されていますし
ファイル内の追加項目にも任意に足すことが出来ます。
カスタマイズ例では、価格を囲っているspanタグに「base-item-price」というクラスを
商品説明を囲っているspanタグには「base-item-detail」というクラスを付けています。
出力項目に合わせてCSSを調整することが可能です。
トップページには商品説明が不要で、各商品紹介の投稿ページには商品説明が必要でしたので
CSSでトップページの非表示を指示し対応しました。
