どこでもカラーミーをWordPressにプラグインなしで設置する方法

WordPress(ワードプレス)は高いシェアを誇るCMS(Contents Management System)で、テーマ(用意されているページデザインと機能)の豊富さやプラグイン(追加の拡張機能)の多さなどから、個人のブログだけでなく企業サイトにも幅広く利用されています。

カラーミーショップでネットショップを開業していて、それとは別にWordPressを使ってブランディングサイトを構築しているオーナー様も多いと思います。
そういう場合に多いのが「WordPressのサイトにもカートが付けたい」という要望です。

今回は、どこでもカラーミー機能を使ってカートボタンを付ける方法について解説します。

カートボタン設置のための予備知識

カラーミーショップには、外部サイトに「カートに入れるボタン」を付けることができる機能「どこでもカラーミー」があります(導入当初はカートJS機能と呼ばれていました)。

どこでもカラーミーは、管理画面の商品管理>商品編集から「どこでもカラーミー(カートJS機能)」のリンク先に移動します。

どこでもカラーミーのリンク

 

リンク先には、JSコードという欄があります。これを設置場所にコピペします(中身はdocumet.writeでHTMLタグを書くJavaScript)。
https://example.shop-pro.jp/は各自のショップURLが入っていて、&pid=~はカートに入れる商品の商品IDになります。

JSコード(例)

<script type='text/javascript' src='https://example.shop-pro.jp/?mode=cartjs&pid=000000000&style=normal_gray&name=n&img=y&expl=n&stock=y&price=y&inq=n&sk=y' charset='euc-jp'></script>

 

どこでもカラーミーの概要としては以上です。詳細は下記リンクをご参照下さい。

参考1)カートJS機能(どこでもカラーミー)を設定する | ネットショップ開業マニュアル
参考2)フリーページを使ってランディングページを作ろう | ネットショップ開業マニュアル
参考3)「どこでもカラーミー」に新しいテンプレートが追加されました | ECお役立ち情報 ネットショップ運営サービス【カラーミーショップ】
参考4)どこでもカラーミーサンプルサイトbyカラーミーショップ

WordPressの個別投稿ページの問題点

通常はJSコードをコピペすればカートに入れるボタンを設置できる訳ですが、WordPressの個別投稿ページ(記事ページ)の場合は問題が生じます。
個別投稿ページではJavaScriptのコードが書けないため、JSコードをコピペしても動きません。

WordPressの個別投稿ページにJavaScriptを書く方法としては、プラグインを導入して実現する方法がよく紹介されていますが、ここではプラグインなしの方法を紹介します。

まず初めにWordPressの機能「ショートコード」についてです。
ショートコードは、functions.phpにコードを書いて個別ページからの[ショートコード名]で呼び出す、あらかじめWordPressに用意された機能です。
今回は、ショートコードを使ってどこでもカートのJSコード(JavaScript)を動かします。

WordPress側のコーディング

functions.phpに下記コードを追加します(追加場所は特に決まっていませんので適当で)。
functions.phpは、使用しているテーマディレクトリ(例えば、/wp/wp-content/themes/テーマ名)の直下にあります。

functions.php

function shortCode($atts) { 
$str = <<<EOT
<script type='text/javascript' src='https://example.shop-pro.jp/?mode=cartjs&pid=$atts[pid]&style=basic&name=n&img=y&expl=n&stock=y&price=y&inq=n&sk=y' charset='euc-jp'></script>
EOT;
return $str;
}
add_shortcode('cart_js', 'shortCode'); 

<<<はヒアドキュメントと言い、長い文字列を書く際に便利な書式です。EOT部分は識別子で任意の文字列(下のEOT;と対にします)。

https://example.shop-pro.jpは各自のショップURLが入っています。見て分かるかもしれませんが、<script>~</script>の箇所はJSコードそのものです。

&pid=$atts[pid]はショートコードの属性(引数みたいなもの)として商品IDを渡しています。

この準備によって、個別投稿ページからショートコード名 cart_jsでJSコードを呼び出せるようになりました。
呼び出し方については後述。

ショートコードを使って、カートに入れるボタンを設置する

実際に、WordPressの投稿記事にカートに入れるボタンを設置してみます。
[cart_js ~]がショートコードで、ショートコード名 cart_js、属性をpid="103234272"(カートに入れる商品の商品ID)とします。

記事本文に[cart_js pid="103234272"]と書くだけです。画像を参考にしてください。

どこでもカラーミーをショートコードで

 

実際にこの記事に、サンプル商品のショートコードを入れてみます。
表示項目についてはどこでもカラーミーの設定画面やCSSで非表示にすることができます。

↓↓↓この下にショートコードを書きました↓↓↓

おわりに

どこでもカラーミーを利用すると簡単にカートに入れるボタンが付けられますが、WordPressの個別投稿ページは例外で、すこし手間をかける必要があります。

注文後戻りURLが管理画面から設定できますが、本来ならカートに入れたページに戻りたいところですが、そういう設定はできないようです。この仕様は場合によっては使いづらいかもと思います。
用途は限定的ですが、上述の参考リンクに解決方法(metaタグで飛ばす)が載っていますので確認してみてください。

以前は、ロリポップ(レンタルサーバー)でどこでもカラーミーが使えましたが、現在は新規登録が行えなくなっています。
ランディングページを作る目的でしたら、heteml(レンタルサーバー)を借りて、どこでもカラーミーが使えるカラーミーショップ for hetemlを登録(無料)するのが安上がりです。商品点数、配送方法、決済方法などの制限がありますので、試用期間のうちに確認が必要です。

おまけ(ランディングページ用のボタン化)

カートボタンを画像に置き換えれば、ランディングページ用のカートボタンとしても使えます。
別記事に書いていますので「カラーミーショップのどこでもカラーミーについて実践的に学ぶ」を参考にしてください。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

ご相談・お問い合わせはこちら