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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

そして何より日本の方が作った日本のためのプラグインなので

に詳しく解説されています。使い方もとても簡単なので本当に便利でする

ちなみにこのサイトの本文下にあるアマゾンアソシエイトや楽天市場の商品一覧は【CS Shop】を使って作っています。もちろんノーメンテナンスです。

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

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

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressで作ったページに自由なタイミングでポップアップ画面を表示できるプラグイン「Call To Action Popup」

WordPressでGoogleアドセンスの関連広告の表示精度が上がるプラグイン「Google Ad Wrap」

WordPressで作った商品紹介ページへアマゾンのカスタマーレビューを表示するプラグイン「ScrapeAZon」


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

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

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

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示される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」などカスタムフィールドをフォーム化して使えるプラグインを併用します。続きは以前に書いた

を参照ください。

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

複数列で表示する方法

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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

です。これを上書きするように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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

簡単に解説すると、もともとのプラグインにある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']}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


<a href="{$item['aurl']}" target="_blank">{$item_escaped['name']}</a>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

108 円 (税込)
エビスコム【著】販売会社/発売会社:ソシム発売年月日:2009/09/18JAN:9784883376735//付属品〜CD−ROM1枚付
【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

2,786 円 (税込) 送料込
基本情報ジャンル建築・理工フォーマット本出版社翔泳社発売日2019年06月ISBN9784798156514発売国日本サイズ・ページ303p 23×19cm関連キーワード 9784798156514 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報