どうもムラタです。
今回はGMOペパボさんが公式で提供しているカラーミーショップとWordpressを連携させるプラグイン「ColorMeShop WordPress Plugin」を使ってみた話になります。
このプラグインを使うことで、カラーミーショップに登録した商品情報をもとにWordPress上に商品ページを自動生成し、商品の受注管理等はカラーミーショップのシステムを利用しながら、より自由なデザインやコンテンツマーケティングを駆使したEC構築が実現可能になるとのこと。
初期設定
まず管理画面のプラグインの新規追加より「ColorMeShop WordPress Plugin」で検索して「カラーミーショップ WordPress プラグイン」をインストールします。
管理メニューに「カラーミーショップ」という項目が追加されているので選択して「カラーミー連携設定」ページへ移動します。
「クライアントID」や「クライアントシークレット」などを入力する項目が見えますが、まずは画面下部の手順にも記載のある通り、「カラーミーデベロッパーアカウント」を作成しておく必要があります。
カラーミーデベロッパーアカウントの作成
メールアドレスとパスワードを入力して登録すると、入力したメールアドレス宛に本登録完了のためのURLが記述されたメールが届くので、URLにアクセスして登録を完了させます。
登録が完了したら早速メールアドレスとパスワードでログインします。
ログインした先の画面には「アプリはまだありません」とあるだけなので、「アプリを作成する」ボタンをクリックしてアプリを作成します。
「アプリ名」と「リダイレクトURL」の入力を求められるので、アプリ名は任意の名前（今回は「ColorMeShop WordPress Plugin」とします）を、リダイレクトURLには「http://【ドメイン】/wp-admin/admin-ajax.php」とします。
カラーミーショップとの連携設定
アプリの保存が完了すると「クライアントID」と「クライアントシークレット」が発行されるので、プラグインの画面に戻り、画面上部の基本設定にそのふたつを入力して「変更を保存」ボタンをクリックします。
設定の保存が完了したら「カラーミーショップアカウントで認証する」というテキストリンクをクリックする。
リンク先で連携したいカラーミーショップのログインIDとパスワードの入力を促されるので入力して「ご利用内容確認へ」に進む。
※ここはデベロッパーアカウントではなくカラーミーショップのIDとパスです。
利用するアプリ名（先ほど登録したもの）と、そのアプリがどのような処理を行うかを確認させられるので、同意にチェックをいれて「アプリをインストール」をクリックします。
完了したら先ほどのプラグインの画面に戻り、「トークン」に入力がされていることが確認できます。
これで連携に必要な設定は完了です。
商品ページの作成＆各種ページURLの生成
次に商品詳細ページを固定ページに作成します。
「固定ページ」→「新規追加」でとりあえず仮でページ名「商品詳細」、スラッグを「product」とします。
ページの追加が済んだら、一旦先ほどのプラグイン設定画面に戻り、「商品ページID」に追加した固定ページのIDを入力して保存します。
保存が完了すると、「商品詳細」「商品カテゴリー」「商品一覧」「サイトマップ」の各ページへのURLが指定した固定ページに付随する形で生成されるので、各ページへリンクを貼る場合はここを参考するといいでしょう。
使用できるショートコード
肝心の商品情報をどうやって取得するかですが、これはプラグインが用意しているいくつかの「ショートコード」を用いることで可能になります。
プラグインのバージョン「1.0.2」の時点で使用できるショートコードは以下の通りです。
colormeshop_product
商品ID（product_id）と取得したい情報（data）のパラメーターを一緒に指定することで任意の情報を出力することができます。
例えば、
「colormeshop_product product_id=”136356429” data=”name“」
と指定すると、その部分に商品ID「136356429」の商品名が出力されます。
ただ商品詳細ページは基本的にURLの末尾に「?colorme_item=商品ID」でアクセスすることになり、その場合URLパラメーターの商品IDを自動で取得するようになっているので、ブログ記事等で本文途中で特定の商品情報を掲載したい時以外ではこの指定は不要だと思います。
dataパラメーターについて
取得する内容を指定する「data」パラメーターはname以外にも下記の指定が可能です。
- id…商品IDを取得
- model…型番を取得
- price…定価を取得
- regular_price…通常販売価格を取得
- members_price…会員価格を取得
- unit…単位を取得
- weight…重量を取得
- simple_explain…簡易説明を取得
- explain…商品詳細説明を取得
colormeshop_image
次は商品画像を取得することができるショートコードになります。
こちらも先ほどと同じく取得したい商品のIDとどのタイプの画像を取得するのか（type）の指定をすることができます。
typeの指定について
typeパラメーターで指定できるサイズは以下の通りです。
- main…メイン画像を取得
- thumbnail…サムネイルを取得
- other1…その他の画像（other2、other3と続く）
colormeshop_option
商品のオプション情報を取得することができます。
オプションの組み合わせ（index）を指定して、その組み合わせの情報（data）を取得できます。
例えば「カラー」というオプションがあって、項目が「白」「黒」「青」とします。
更にもう一つ「サイズ」というオプションで項目が「S」「M」「L」とした場合、オプションの組み合わせは9つになるので、1～9の番号をindexパラメーターに指定させます。
index番号はカラーミーショップの画面で表示されてる「オプション一覧」の上から順番に1、2…となります。
なので
[colormeshop_option index=”1″ data=”title”]
とした場合は、「白 × S」という項目名が出力されることになります。
dataの指定について
取得する内容を指定する「data」パラメーターは下記の指定が可能です。
- title…項目名を取得
- stocks…在庫数を取得
- models_number…型番を取得
- option_price…販売価格
- option_members_price…会員価格
colormeshop_cart_button
「カートに入れる」ボタンを出力します。
styleパラメーターを指定することで7種類のデザインをボタンに付けることができます。
styleの指定について
指定できるボタンスタイルは以下の7つです。
- basic…シンプルなデフォルトなデザイン
- cloth_blue…布地テクスチャの青いボタン
- cloth_yellow…布地テクスチャの黄色ボタン
- cloth_green…布地テクスチャの緑ボタン
- washi…茶ぽい色のボタン。和紙のテクスチャというわけではない
- check_blue…水色ボタン。チェック柄というわけではない
- check_red…赤ボタン・こちらもチェック柄というわけではない
各デザインは以下の通りです。
「basic」以外はtype=imgaeでの画像になるので、cssの知識がある人は「basic」を指定して好きなデザインにカスタマイズするのが良さそうです。
それにしてもwashiとcheckは本当にこれで正常なのか気になる…
colormeshop_page
別途用意されているテンプレート名を「template」パラメーターに指定して、そのテンプレート内に情報を当て込んで出力します。
前述までの各種情報を1つにまとめたものというわけですね。とりあえず通常はこちらをメインに使っていくことになるんじゃないかと思います。
例えばデフォルトで用意されているテンプレート「default」だと以下のようになります。
「商品名」「商品詳細説明」「価格」「商品メイン画像」「購入ボタン」というようなテンプレートになっているのが分かります。
templateの指定について
デフォルトで用意されているのは先ほどの「default」のみになりますが、自分でカスタマイズしたテンプレートを「/wp-content/plugins/colormeshop/templates/product/」の中に保存して、ショートコードのtemplateパラメーターでその保存したファイル名（拡張子除く）を指定することでも使用することができます。
商品詳細に関しては以上です。デフォルトのままでは見た目がアレなので独自のテンプレートを用意してcssで見栄えを整える必要がありますね。
カテゴリーページ
カラーミーで登録している商品カテゴリーの一覧を出力するページになります。
URLは今回でいうと
「http://xxxx/product/?colorme_page=categories」
になりますが、プラグインの管理画面の「商品ページID」を指定しておかないと動作しません。
デフォルトで用意されているテンプレートでは「カテゴリー名」「カテゴリーID」「カテゴリー画像」「説明文」、属する小カテゴリーがあれば同じように名前やID、画像などが出力されるようになっています。
デフォルトのテンプレートは「/wp-content/plugins/colormeshop/templates/categories.php」になりますが、
内容をカスタマイズして独自のテンプレートを使用したい場合は、現在使用しているテーマディレクトリに「colorme-categories.php」という名前で設置しておくと、そちらを優先して読み込んでくれるようになります。
商品一覧ページ
カラーミーで登録している商品の一覧を出力するページになります。
URLは今回でいうと
「http://xxxx/product/?colorme_page=items」
になります。こちらもカテゴリーページと同じく事前に商品ページIDを指定しておく必要があります。
デフォルトで用意されているテンプレートでは「商品ID」「商品名」「販売価格」「定価」「会員向け価格」「原価」「PC用画像」「モバイル向け画像」「サムネイル画像」「その他画像」「簡易説明」「モバイル用説明」「PC用説明」が出力されるようになっています。
定価や原価など設定しなくても「0円」で出力されてしまうので、この辺は適宜調整する必要があります。
表示件数はデフォルトでは10件となっていて、それを超える分に関してはページングにて次のページで出力されます。
表示件数を変更したい場合はテンプレートファイルの中の下記部分を書き換えることで変更が可能です。
|
1 2 3 4 |
// 表示件数 $params = [ 'limit' => 10, ]; |
こちらもカテゴリーページと同じくデフォルトのテンプレートは「/wp-content/plugins/colormeshop/templates/items.php」にあり、
内容をカスタマイズして独自のテンプレートを使用したい場合は、現在使用しているテーマディレクトリに「colorme-items.php」という名前で設置しておくと、そちらを優先して読み込んでくれるようになります。
サイトマップ
登録した商品ごとのURLを記述したサイトマップのページです。
URLは
「http://xxx/【商品ページ】/sitemap.xml」
となっています。
最後に
一通りこのプラグインを触ってみて思ったのは、ある程度カラーミーから情報を引っ張ってこれるようになったものの、正直まだ全てwordpress側だけで完結させることは難しいのかなという感じです。
特にカテゴリー一覧に関しては今のところページとしてしか出力できないので、サイドカラムなどの全ページ共通部分に出力できるようにしたいですね（もしかしたらできるけど自分が調べきれていないんだけ・・・？）
このプラグインが提供されてからまだまだ日が浅いので、検索しても情報もまだ全然出てこないので手探りな感じもありますが、今後のアップデートでどんどんできることも増えていくんじゃないかと思うのでこれからの展開に期待ですね。
