WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

簡単に物販アフィリエイトページが作れるプラグイン「CS Shop」

公開日:2017(平成29)年3月12日/最終更新日:

WordPressのプラグイン情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

このプラグインはAmazonアソシエイトのPA-API5.0に未対応のため、Amazonアソシエイトでのアフィリエイトはできなくなりました。

無料のブログやhtmlで作るサイトからWordPressへシステム変更される方がやりたいことのきっかけというか代表的なコンテンツといえば「掲示板サイト」「口コミや情報などの投稿サイト」、「会員制のコミュニケーションサイト」そして「アフィリエイトサイト」ではないでしょうか??

掲示板を作るプラグインで代表的なのは「bbpress」

ですね。また、会員制のコミュニケーションサイトをつくるなら「BuddyPress」が人気のようですね。

そして誰かに投稿してもらう(フロントエンドからの投稿)プラグインでおすすめは「Wp User Frontend」

です。残念ながら無料で口コミサイトをきちんと作れるプラグインはまだ見つけられていません(これをやりたい!!というのが有料になっているものがほとんど)。まあ、WordPressの基本機能+αでそれとなく作るなら

のようにコメントフォームをうまく使って作ればそれなりの口コミサイト制作ができます。

あとはアフィリエイトだけ・・・ということになるのですが、アマゾンアソシエイトや楽天市場を使った物販を行うとき、皆さんはどうやってますか?

  1. 1つ1つアフィリエイトサービスの中から商品リンクを作って投稿
  2. 商品を選んでグリッド表示できるようなプラグインを使って投稿

というのが一般的でしょうか??確かにアマゾンアソシエイトに関してはいろいろなプラグインが出ていて、簡単に商品情報が挿入できるものがありますね。でも、商品が廃番になったり取り扱いがなくなったりしたときはどうしてますか??。いちいちチェックできないからそのまま・・・で放置でしょうか??

自分がユーザーとしてサイトを見たとき、穴の開いた商品一覧から「これ!」と選んで買い物はしませんよね?そもそもアマゾンのサイトで探せばいいわけですし・・・。そこを自分のサイト経由で買ってもらおうと思ったらそれなりのチェックと努力が必要ですよね?

ただできればノーメンテナンスを目指したいというのが世の常人の常、そんな願いをかなえてくれるのが今回紹介する【CS Shop】です。

【CS Shop】プラグインの基本的な機能・できること

  1. ショートコードで商品の一覧が表示できる
  2. 表示方法は検索型とアイテム表示型の指定ができる
  3. 表示数や商品のキーワードなどで一覧表示ができる
  4. 現在販売されている商品しか表示されないのでメンテナンスフリー

と一度設定したら何もしなくていい位の機能が備わっています。

私はかなり前からこのプラグインを使っていて、まだまだ雀の涙程度ですが実績があります。今回紹介することで使う人が増えて自分の実績に陰りが・・・となりそうでちょっと怖いですが、サイトの検索順位なんてコンテンツ次第!!ということがようやく分かってきたのでそろそろ紹介しようと思います。

しばらくアップデートされていないので終了した「Yahoo Shopping」のアフィリエイトが設定できるようになっていたりしますが、アマゾンアソシエイトと楽天アフィリエイトに関しては正常に動作しています(心配な方は使わないでくださいね)。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【CS Shop】プラグインの設定画面や表示の日本語化と翻訳

【CS Shop】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

QA AnalyticsQA Analytics

【CS Shop】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

設定はダッシュボードから「設定」→「CS Shop」で行います。

各アフィリエイトサービスのapi情報を追加するだけです。些細な意地悪ですがapiの取得方法は自身で調べてくださいね。

【CS Shop】プラグインの基本的な使い方

作者さんのサイトを見れば100%分かりますから割愛したいところですが、次項でそこに掲載されていないテクニックをサービスで2つ紹介しますね。あんまり詳しくするとコピペで済まそう!!なんて人が出てきそうですからヒントめいた内容になることをご容赦願います。

商品を表示する方法

商品を絞り込んで一覧表示するには

[csshop service="amazon" keyword="WordPress" category="Books" sort="-sales" mode="embed"]

のようなショートコードで表示しますが、これをもう少し楽に、ミスなく設置する方法を紹介します。

何をするかというと、カスタムフィールドにネタを入力してphpで呼び出してやろうという方法です。

これを行うには「EXEC PHP」などの本文でphpが使えるようにするプラグインと「Advance Custom Fields」などカスタムフィールドをフォーム化して使えるプラグインを併用します。続きは以前に書いた

https://www.momosiri.info/cms/csshop/

を参照ください。

ちなみにショートコードがウィジェットで動作するテーマならウィジェットに設定すればどの投稿でも共通の表示をしつつ、投稿ごとにアイテムを変えるなんてこともできますので工夫してみてください。

複数列で表示する方法

CS Shopプラグインで設定されている個々の商品のCSSは

div.csshop-item {
clear: both;
margin-bottom: 20px;
border-top: 1px #cccccc dotted;
border-bottom: none;
border-left: none;
border-right: none;
}

です。これを上書きするようにCSSを設定して、列数を増やします。

結論から言うとそのままテーマのCSSにコピペして

.csshop-item {
clear: none!important;
margin-bottom: 20px;
border-top: 1px #cccccc dotted;
border-bottom: none;
border-left: none;
border-right: none;
float: left!important;
width: 320px!important;
height:580px!important;
}

とすれば複数列表示になります。

簡単に解説すると、もともとのプラグインにあるCSSが後から適用されてもカスタマイズした内容が反映されるように、重複している要素には「!important」を付けます。今回に限らずCSSの編集をした際これをやらずに「変わらないなぁ」という方がよく見えます。特に追加する要素に対してはこれをやらないと100%反映されませんのでご注意ください。

「clear: both;」は1つの塊(商品)が終わったら改行しなさいという指示なので、これを「clear: none!important;」にします。

そして、できる限り左寄せにしなさいという「float: left!important;」を追加します。

さらに「width: 320px!important;」を追加します。なぜ320ピクセルかというと、スマホなどのモバイル表示の画面がだいたい最小でこの値だからです。モバイル表示を無視するなら50%(横2列)でも33%(横3列)でもいいです。

最後に高さの調整を「height:580px!important;」でしています。扱う商品などにもよりますが、写真が長かったり文章が長かったりするので値は調整するか、その他のdiv classに対して制限を設けることで解消できます。

・・・ちょっと詳しく書きすぎたかな??結構この表現方法がこのプラグインのキモ処のような気がするので・・・まあいいか。

【CS Shop】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

CS Shopのショートコードを入れた記事本文が表示されないときは

サーバーによってはCS Shopのショートコードを入れたとたんに投稿などの本文が表示されなくなることがあります。

これを解消するにはFTPなどでCS Shopのフォルダを開き、「Cache」と「cache-temp」の中のファイル・フォルダのパーミッションを変更することで解決できます。最低限動作するように調整した方がいいと思いますので、安易に「777(フルコントロール)」にするのだけは避けた方がいいと思います。

リスト表示で画像以外の部分にリンクタグを自動挿入するには

このプラグインを使う方はリンク切れを防止するため個別商品ではなくキーワードによるリスト表示をすることが多いと思います。

そのとき、キーワードや条件に応じてノーメンテナンスで一覧が表示されるのはすばらしいですね。でもその商品のリストからリンク先へ飛ぶように設定されているのは画像のみなんです。運よく画像をマウスオーバーしてくれればいいのですが、できればタイトルなどにもリンクを設定したいところ。そんなときはプラグイン編集を開いてCS Shopの「function-view.php」を開き、

286行目あたりの

{$item_escaped['name']}

<a href="{$item['aurl']}" target="_blank">{$item_escaped['name']}</a>

にすればパソコン表示でタイトルにリンクタグが付くようになります。

同様に305行目あたりにも同じコードがありますからそこを変更すればモバイル表示でもタイトルにリンクが付くようになります。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)