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

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

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

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

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

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

WordPress側のコーディング

functions.phpに下記コードを追加します。
functions.phpは、使用しているテーマディレクトリの直下にあります。

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で呼び出します(後述)。

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

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

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

 

実際にこの記事に、サンプル商品のショートコードを入れてみます(下参照)。
画像、価格、リンクはどこでもカラーミーの設定画面で非表示にできますし、購入数はCSSで消せます(CSSはテーマディレクトリ直下のstyle.cssに追加します)。オプション項目があるときは要注意ですね。
CSSでいじってボタンのみにすれば、使い勝手は格段に良くなります。以前に書いた記事内の「カートに入れるボタンを画像にする」をご参考にどうぞ。
参考5)カラーミーショップのどこでもカラーミーについて実践的に学ぶ

おわりに

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

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

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

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。