TEL:050-1746-5247。お気軽にお電話ください。

ワードプレスにカラーミーのプラグイン入れてみた

カラーミーショップでショップを運営している方のなかには、それとは別にWordPressでメディアサイトなどを開設している方も多いのではないでしょうか。カラーミーの公式WordPressプラグイン活用することで、ショップとサイトを連動させてより自由な発想でECを構築することができます。f

プラグインのインストール手順

デベロッパー登録

WordPressにカラーミープラグインをインストールするにあたって、カラーミーデベロッパーアカウントが必要です。デベロッパー登録の画面からメールアドレスとパスワードを入力して登録手続きを行います。

アプリ作成

登録が完了したら、ログイン画面からログインします。

アプリ一覧画面で「アプリを作成する」をクリックします。

アプリ名は何でもOKなので、分かりやすい名前を入力します。リダイレクトURIは「https(またはhttp)://(ドメイン名)/wp-admin/admin-ajax.php」とします。

アプリが作成できました。画面に表示された「クライアントID」と「クライアントシークレット」がこのあとの手順で必要になるので、控えておきます。

インストール

デベロッパー登録とアプリ作成が完了したら、いよいよWordPressプラグインをインストールします。

WordPressにログインします。プラグイン > 新規追加に進み、「ColorMeShop WordPress Plugin」を検索します。

「カラーミーショップWordPressプラグイン」が見つかったら、「今すぐインストール」をクリックします。

インストールが完了するとボタンが「有効化」に変わるので、クリックします。

カラーミーショップ連携設定

有効化が完了すると、管理画面左側のメニューに「カラーミーショップ」の項目が現れます。これをクリックすると「カラーミーショップ連携設定」の画面が表示されます。

先ほどアプリ作成の際に発行されたクライアントIDとクライアントシークレットを入力し、「変更を保存」をクリックします。

カラーミーショップアカウントで認証する

保存が完了したら、「カラーミーショップアカウントで認証する」をクリックします。

カラーミーのログイン画面が表示されます。カラーミーショップのログインIDとパスワードを入力してログインします。ここで入力するのはデベロッパーアカウントではないので注意して下さい。

画面に表示されたアプリ内容を確認し、同意項目にチェックを入れて「アプリを連携」をクリックします。

連携ができると、WordPressのカラーミーショップ連携設定の「トークン」の欄が入力されます。

カラーミーショップ

WordPressでのページ生成

固定ページの作成

カラーミーショップに登録されている商品情報を表示させるための固定ページを作成します。

WordPressの管理画面のメニューから、固定ページ > 新規追加 に進みます。

ページ名とスラッグは何でもOKですが、ここでは「商品ページ」「colorme」とします。

ページ内容には、ショートコードで「colormeshop_page」と記述します。

作成したら、固定ページ一覧を開き、先ほど作成したページにマウスカーソルを当てます。ブラウザの下部に表示されたURLの「post=」に続く数字がこのページの固定ページIDなので、控えておきます。

連携設定

もう一度WordPressの管理画面のメニューから「カラーミーショップ」をクリックし、カラーミーショップ連携設定の画面に移動します。商品ページIDの欄に、先ほど控えておいた固定ページIDを入力し、「変更を保存」をクリックします。

保存が完了すると、「変更を保存」ボタンの下に、商品・商品カテゴリー・商品一覧・サイトマップのURLが表示されます。

ページの表示例

実際に、カラーミーショップで運営しているショップ「熊本の味 馬刺し屋」をこのサイトと連携してみました。

商品ページ(生 冷蔵 おせち料理 2020 和洋折衷 白木三段重 村上元彦シェフ手作りが入る 送料無料 お節 冷蔵 生詰め 【代引き・キャンセル・同梱不可】):https://商品登録ドットコム.com/colorme/?colorme_item=141836984

商品カテゴリー:https://商品登録ドットコム.com/colorme/?colorme_page=categories

商品一覧:https://商品登録ドットコム.com/colorme/?colorme_page=items

「熊本の味 馬刺し屋」の商品情報が当サイト内に表示されているのが分かります。CSSでレイアウトを調整すれば、より見栄えの良いページを作ることができます。

商品ページは、URLのクエリパラメータ「?colorme_item=」に続けてカラーミーショップの商品IDを指定します。上記のリンクでは「生 冷蔵 おせち料理 2020 和洋折衷 白木三段重 村上元彦シェフ手作りが入る 送料無料 お節 冷蔵 生詰め 【代引き・キャンセル・同梱不可】」を表示しましたが、別のIDを指定すると他の商品を表示させることができます。

商品ページ(熊本馬刺し屋 馬肉ウィンナー 5本入り 180g):https://商品登録ドットコム.com/colorme/?colorme_item=141836932

テンプレートとショートコード

テンプレート

上記の表示例で見たページは、固定ページに記述したショートコード「colormeshop_page」に対応するデフォルトのテンプレートで定義されています。

デフォルトのテンプレートは、下記のファイルに定義されています。
/wp-content/plugins/colormeshop/templates/product/default.php

この内容を変更したい場合、上記のdefault.phpと同じ階層に別のテンプレートファイル(例えば、myshop,php)を作成します。ショートコードには、「colormeshop_page template=”myshop”」のようにテンプレートを指定する記述を追加します。

ショートコード

「colormeshop_page」以外にも、さまざまなショートコードが利用できます。

ショートコードは、固定ページだけでなく、WordPressの投稿でも表示させることができます。この投稿でも実際に表示させてみます。

商品情報

[colormeshop_product product_id="141836984" data="name"]

—▼以下がショートコードによる表示です▼—

馬刺し 馬肉 熊本 国産 大盛セット 800g

—▲ここまで▲—

name(商品名)以外にも、下記のものが指定可能です。

id (商品ID)・model (型番)・price (定価)・regular_price (通常販売価格 (割引前の販売価格))・members_price (会員価格)・unit (単位)・weight (重量)・simple_explain (簡易説明)・
explain (商品詳細説明)

商品画像

[colormeshop_image product_id="141836984" type="main"]

パラメータ「type」を省略した場合、main(メイン画像)が表示されます。他に、thumbnail (サムネイル画像)・other1 (その他画像)が指定可能です。

商品オプション

[colormeshop_option product_id="141836984" data="title"]

—▼以下がショートコードによる表示です▼—

了承して注文する × 12月30日着(本州)

—▲ここまで▲—

パラメータ「data」を省略した場合、title(オプション名)が表示されます。他に、stocks (在庫数)・models_number (型番)・option_price (販売価格)・option_members_price (会員価格)が指定可能です。

カートボタン

[colormeshop_cart_button product_id="141836984" style="basic"]

[colormeshop_cart_button product_id="141836984" style="cloth_blue"]

[colormeshop_cart_button product_id="141836984" style="cloth_yellow"]

[colormeshop_cart_button product_id="141836984" style="cloth_green"]

[colormeshop_cart_button product_id="141836984" style="washi"]

[colormeshop_cart_button product_id="141836984" style="check_blue"]

[colormeshop_cart_button product_id="141836984" style="check_red"]

パラメータ「style」の指定によって、さまざまなデザインのカートボタンを表示できます。

カラーミーショップでWordPressをサブディレクトリに設置できるの?

 ショップサーブ(Eストアー)やMakeshop・フューチャーショップのように、WordPressをサブディレクトリに設置して運用する事はできなそうです。カラーミーショップでは、下記のようなサブディレクトリ下に
https://basasiya.shop-pro.jp/wp/ などのように設置は現状のプランではできませんでした。因みに、現プランとよくある質問・マニュアルもチェックしてみましたが、カラーミーショップWordPressプラグイン以外の運用ななさそうです。(2020年1月現在)現在では、カラーミーWPオプションを追加する事で、ワードプレス運用が可能となっています。

待望の カラーミーWPオプション ※ 2020年4月20日追記

2020年4月20日追記
待望の カラーミーWPオプション(カラーミーワードプレス プラグイン)
カラーミーのワードプレスプラグインを使って既存wordpressに商品ページ設置方法を記述しましたが、カラーミー内のディレクトリ直下に設置できる、カラーミーのプラグインがリリースされました。
https://basasiya.shop-pro.jp/apps/basashiya/  というような設置が可能となりカラーミーでもネットショップにおけるSEOの取り組み方が変わってくるかと思います。
 但し、1点気になる部分で言うと、月額が5,500円とお高めで、カラーミーはお安く高機能が売りでしたよね?レギュラープランが3,000円である事を考えると導入を足踏みする人も多いのではないでしょうか?

このアプリでできること
サーバーやドメインを別途契約をすることなく、ネットショップと同じドメインに「WordPress」を開設することができます。「WordPress」でオウンドメディアを運用することで、商品情報や開発背景などを発信することができ、ユーザーへのアプローチを積極的に行うことができます。また、今まで接触することができなかったユーザーへの認知拡大も可能になり新規顧客獲得にもつながります。

情報引用元: https://app.shop-pro.jp/apps/74

カラーミーWPオプション(カラーミーワードプレス プラグイン)
とは言え、ネットショップにおいても現在はオウンドメディア対策やSEOでの集客の軸となるwordpressを導入できるのは1つのメリットとと言っても良いと思います。現在運用中で、別のwordpressを設置されている場合だと2重運用はなくなりますし、元のWPからリダイレクトをうまくかけて、移行するのも1つの手かもしれません。

カラーミーショップ 商品登録代行

カラーミープラグインを活用しよう

プラグインによって、WordPressで運営するサイトへのアクセスをショップの成果に強く結びつけていくことができそうです。ぜひ活用してみてください。

 カラーミーは安くて手軽、他のカートから比べても高機能です。ワードプレスへのプラグインでのEC構築は、色々出ているものの既成のしっかりとしたカートシステムとの連携であれば安心して利用できますよね?ワードプレスではオープンソースで手軽ではありますが、まだセキュリティ面で不安という店舗様も多くいます、そんな場合に、カラーミーショップ+Wordpress連携がオススメです。カラーミーにてワードプレスでの構築を検討されている方は一度ご相談ください。(カラーミーショップ商品登録代行もお待ちしております)

お問い合わせはこちら


関連記事

商品登録のお見積もり大公開中 商品登録事例 EC関連用語ディクショナリー 特集記事一覧 Eストアー ショップサーブ ビジネスパートナー正規代理店
ページ上部へ戻る