前回はWordPressの商品リンクプラグインRinker（リンカー）のダウンロード、インストール、設定までを図解で書きました。
今回はRinkerの基本的な使い方を色々まとめてみました。
- Rinker利用でおすすめのASP
- 基本的な商品リンク作成（GUTENBERG、旧エディタ）
- 【エラー】リクエスト回数が多すぎますと表示される場合の対処
- ショップボタンが2段になっちゃう場合の対処
- ショップボタンが太く表示される場合の対処
- 公式サイトとかのボタンを追加する方法
- ボタン消したり、価格を消したりする場合
- ボタンの文言変更する場合
- Rinkerの支援とクレジット削除
などなど。
※まだRinkerのインストールと設定が終わってない場合は先に以下の記事からどうぞ。
Rinker使うなら「もしもアフィリエイト」と「バリューコマース」のリンクを使うのがおすすめ
Rinkerを使うためにはAmazonや楽天、Yahoo!ショッピングなどと提携しておく必要があります。
本家Amazonや本家楽天アフィリエイトに登録して提携するか、Amazonや楽天の商品も紹介できるASP「もしもアフィリエイト」で提携する事ができます。
本家Amazonアソシエイト経由だと報酬が5,000円以上にならないと振込みされないというデメリットがありますし、「本家楽天アフィリエイトは報酬が現金ではなくポイント」になってしまいますので正直本家Amazonや楽天よりも「もしもアフィリエイト経由」がメリットあります（もしも経由の審査も本家よりも簡単）。
ASP（もしもアフィリエイト）経由でも報酬は一緒ですし、前述した問題は全て解決します。また、振り込み報酬の手数料も「もしも負担」という神対応なので本家Amazonや楽天を利用するよりも「もしも経由」がおすすめです。
■もしもアフィリエイト
⇒https://af.moshimo.com/
Yahoo!ショッピングはバリューコマース経由
Yahoo!ショッピングも「もしもアフィリエイト経由」にできますが、Yahoo!ショッピングの報酬だけはバリューコマース経由の方が高めです。
- もしも経由（0.77%）
- バリューコマース経由（1%）
さらにバリューコマースでは「クロスデバイストラッキング」というシステムがあって違うブラウザやアプリからの購入も反映されるようになってます。
という事で「Amazon、楽天はもしも経由」「Yahoo!ショッピングのリンクはバリューコマース経由」が良いです。
登録も利用も無料なので登録してない方は済ませておいて下さい。
■もしもアフィリエイト
⇒https://af.moshimo.com/
■バリューコマース
⇒https://www.valuecommerce.ne.jp/
Rinker商品リンク作成方法
まずは基本的な商品リンク作成なんですが商品リンク作成方法は2通りです。
- 先に管理画面で商品リンクを作成しておく
- 投稿画面から商品リンク作成
１．管理画面から商品リンク作成する方法
先に商品リンクを登録しておいていつでも呼び出せるようにしておく方法です。
前もって商品リンクを作成する場合はGUTENBERG（グーテンベルク）でも旧エディタでもやり方は同じです。
WordPressの管理画面から「商品リンク」⇒「新規追加」。
「商品情報を取得」をクリック。
商品検索して「商品リンクを追加」をクリック。
自動で商品リンクなどの情報が自動で入力されます。
一応念の為、Amazon、楽天、Yahoo!ショッピングの飛び先を一度確認しておくと安心。
問題ないなら公開をクリックして商品を登録します。
後は商品リンクで作成したリンクのショートコードを記事内で貼り付けたらOKです。
もしくは記事の投稿画面の「商品リンクを追加」⇒「登録済み商品リンクから検索」からでも追加できます。
プレビューで見るとちゃんと商品リンクが挿入されてます。
２．投稿画面から商品リンク作成する方法（旧エディタの場合）
Rinkerを有効化していると投稿画面に「商品リンク追加」というボタンが追加されてますのでクリック。
商品検索して「商品リンクを追加」をクリック。
商品リンクのショートコードが挿入されました。
プレビューで見るとちゃんと商品リンクが挿入されてます。
一度作成したリンクを再度追加する場合は「商品リンクを追加」⇒「登録済み商品リンクから検索」から再度リンク追加できます。
新エディタGUTENBERG（グーテンベルク）の投稿画面から商品リンクを作成する場合
GUTENBERG（グーテンベルク）の場合は投稿画面で「＋」をクリックして「rinker」で検索するとRinekerが出てくるのでこれをクリック。
商品リンクを追加のボタンをクリック。
紹介したい商品を検索して「商品リンクを追加」をクリック。
以下のようにRinkerの商品IDが挿入されたらOKです。
追加できたらプレビューで確認してみて下さい。
Rinkerの使い方などでよくある質問
Rinekrでエラーが出たりうまくボタンが表示されないなどよくある質問をまとめてみました。
【エラー】リクエスト回数が多すぎます。 RequestThrottledと表示される場合の対処方法
Amazon API側の商品検索の回数制限です。
2019年の1月にAmazonの「Product Advertising API 利用ポリシー」というのが変更されました。
PA-APIはAmazonで取り扱っている商品の情報をプログラムによって自動で取得して処理することができます。
RinkerはこのAPIを利用してAmazonの商品を検索しリンクを作成しているのですが、過去30日間に売上がないと商品の検索回数を制限される仕様になりました。
売上実績の発生がない場合は、PA-APIの利用開始はできません。
また、発送済み商品売上が過去30日以内に発生していない場合、PA-APIをご利用いただけなくなる恐れがございます。
参考：Product Advertising API 利用ポリシーの変更について
そのためPA-APIの制限されている方は何度やってもRinkerで「【エラー】リクエスト回数が多すぎます。 TooManyRequests」と表示されてしまいます。
AmazonのPA-APIが制限されてずっとエラーが出る場合はAmazonではなく、楽天検索機能を使って商品リンクを作成します。
※楽天検索で生成したリンクでもAmazonボタンは表示されますしもちろんAmazonの売上（紹介料）も発生します。
※PA-APIの制限を解除するにはどの種類のリンクでも良いのでAmazonでの売上を上げる必要があります。
Rinkerのショップボタンが2段になるのを1列にしたい場合の対処
ショップボタンが2段になるのはテーマ自体のコンテンツ部分の横幅が狭いからです。
この場合はコンテンツ部分の横幅を広げるもしくはRinkerの商品リンクの商品画像の部分の横幅をちょっと小さくしたらOKです。
スタイルシート（CSS）の一番下に以下コードを追加して調整。
/* rinkerの横幅を調整 */
@media all and (min-width: 421px) {
div.yyi-rinker-contents div.yyi-rinker-info {
width: 100%;
}
/* rinkerの商品画像の横幅を調整 */
div.yyi-rinker-image {
width: 150px !important;
min-width: 150px !important;
}
}スマホ以外ではという条件分岐をして、商品画像の横幅を150pxにしてます。PCで見ながら調整して下さい。
PCページでショップボタンが一列になりました。
ショップボタンが太くなる場合の対処方法
プレビューで見るといい感じなのに、公開してから確認するとAmazon、楽天、Yahooショッピングのボタンが太くなっている場合の対処です。
↓こんな感じでショップボタンの下に余白ができている場合。
これはもしもアフィリエイトのリンク使う時に起こります。インプレッションタグ（imgタグ）が原因ですのでCSSで非表示にしておけばOKです。
スタイルシートの一番下に以下コードを追加してみて下さい。
/* rinkerボタン調整 */
ul.yyi-rinker-links img {
display: none !important;
}もし上記コード追加でも上手くいかない場合はボタンの高さを固定する方法もあります。
/* rinkerボタン調整 */
ul.yyi-rinker-links li {
height:37px;
}
Amazon、楽天、Yahoo!以外にもボタンを増やしたい
RinkerではAmazon、楽天、Yahoo!以外にもフリーのリンクが２つ追加する事が可能です。
ASPに案件がある商品なら「公式サイト」となどボタンを追加できます。
私は2つ目の自由欄使って少しCSSで幅を変更して使ってます。
注意点としてはASPのリンクはリンク部分だけを抜き出してRinkerの自由URL欄に入力する必要があります（a href=”この囲まれた部分を抜き出し”）。
ただ、基本的にASPのリンクの改変は基本禁止されているのでこの辺は自己責任ですね。
もちろんASPのリンクで使う以外の使い方もできるので、商品の関連記事（内部リンク）に使ったりするのも良いかもしれません。
商品リンクが多すぎて探しにくい カテゴリー登録しておくと便利
たくさんの商品リンクを登録して使う予定ならそれぞれの商品リンクをカテゴリー分けしておくと便利です。
商品リンクをカテゴリー別に分けていれば、記事投稿画面⇒「商品リンク追加」⇒「登録済みの商品リンクから検索」を選択して、カテゴリーで絞り込みができます。
すでに登録済みの商品リンクをカテゴリー分けしたい場合はWordPressの管理画面から商品リンク⇒商品を選択して「編集」をクリックして編集できます。
ショップボタン（Amazon、楽天、Yahoo!ショッピング）を消したい
Amazonの限定品を紹介する場合はAmazon以外のリンクボタンは必要ないって事もありますし、Yahoo!ショッピングは必要ないって方もいるかもしれません。
サンプルとしてYahoo!ショッピングのボタンを消してみます。
WordPressの管理画面から商品リンクをクリック。商品を選択して「編集」。
Yahoo!商品URLの部分を空欄にして「更新」。
Yahoo!ショッピングのボタンが消えてAmazonと楽天だけになりました。
Amazonのショップリンクボタンを消したいというケースですが、先程のようにAmazon商品URLを消してもボタンが表示される場合があります。
その時はRinkerの設定⇒Amazonのリンク先の設定を「リンク先を検索画面にする」に変更するとボタンが消えます（非推奨）。
- リンク先を検索画面にする⇒この設定なら消える
- リンク先を商品の詳細画面にする⇒この設定だと消えない
価格表示を消したい
価格表示の有無に関しては2通り。
- 基本設定で価格の表示設定：全体的な設定
- ショートコードに属性を追加：その商品リンクだけ非表示
基本設定で価格の表示、非表示を切り替え（すべての商品リンクが対象）
バージョンver1.1.0から価格の表示、非表示を基本設定で行えるようになりました。
WordPressの管理画面から「設定」⇒「Rinker設定」。
こちらは全体的な設定になるので、価格を非表示にするとすべてのリンクの価格が非表示になります。
ショートコードに属性を追加して価格を非表示（その商品リンクだけ価格が非表示）
商品リンクのショートコード自体に「price=”-“」という属性を追加したらOK。
という感じです。これはその属性を追加したリンクだけ価格が非表示になります。
Amazon、楽天、Yahoo!ショッピングボタンの文言を変更したい
デフォルトではショップボタンは「Amazon」「楽天」「Yahooショッピング」になってますが、この文言を「Amazonで探す」などに変更する方法です。
方法は２つあります。
- ショートコードに属性を追加：部分的
- functions.phpで編集する：全体的
１．ショートコードに属性を追加してボタンの文言を変更する方法
ショートコードに属性を追加する場合は以下のように設置した商品リンクのショートコード自体にラベル文言を追加する方法です。適応範囲はそのショートコードだけなので、過去全部のリンクボタンの変更ではありません。
以下のように記事内で投稿したショートコードに「alabel」「rlabel」「ylabel」を追加すればボタンの文言を上書きできます。
例えばAmazonボタンの文言を変更する場合。
Amazon、楽天、Yahooボタンすべての文言を変更する場合。
属性を追加したショートコードだけ文言が変更されますので、過去記事すべての商品リンクボタンが一括で変更されるものではありません。
参考：Rinker（リンカー）ショートコード属性｜おやこそだて
２．functions.phpの編集で文言を変更
functions.phpの編集をすれば過去に設置した商品リンクのボタン文言もすべて変更されます。
functions.phpの編集に関しては公式サイトでも紹介されてますが、サポート月額199円以上支援すると閲覧できるようになりますので、是非支援してカスタマイズしてみてください。
Rinkerクレジットリンク(Created by Rinker)を削除する方法と支援について
Rinkerクレジットリンク(Created by Rinker)の削除方法はいくつかあって、ちょっと詳しい方ならCSSで非表示にするとか、functions.phpにコードを記述して消したりする方法思いつくと思います。
ただ、無料でこのような便利ツールを利用させてもらっている事も考えるとクレジットは削除せずに使わせてもらうのが筋かなと思います。
どうしても消したいって場合には「Rinkerへのご支援とクレジットリンク(Created by Rinker)の削除方法」から支援をして削除される事をおすすめします。
Rinkerのカスタマイズ
現在私のRinkerはこんな感じで表示されてます。
カスタマイズについてはBear face（@Bearface18）さんのカスタマイズをほぼそのまま使わせて頂いてます。
/*Rinker変更*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
content: "";/*ボタンのアイコンを消す*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
background: #51a7e8;/*Yahoo!ボタンをブルーに*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding-left: 0px;/*PC表示のボタンテキストを真ん中寄せ*/
}
@media screen and (max-width:500px){/*スマホ表示用*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;/*縦表示になるように*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-info {/*全体*/
padding: 0;/*余白削除*/
margin: auto;/*中央揃え*/
width: 87%;/*横幅*/
text-align: center;/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
display: block;/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
width: 100%;/*横幅いっぱい*/
margin: .5em 0;/*上下の余白 左右の余白削除*/
line-height:44px;
height: 44px;
font-size: 0.95em;
padding: 0 14px 0 10px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/
padding: 0;/*文字の余計な余白を削除*/
height:44px;
line-height:44px;
font-size: 0.95em;
}
/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: calc(100% - 20px);
display:block;
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
width: 230px;
min-width: 140px;
padding: 0;
margin-left:auto;
margin-right:auto
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}}
/*Rinker自由ボタンのマウスオーバー時*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}参考：Rinker（リンカー）のカスタマイズ！デザインをシンプルにしてみる｜for men
Rinkerでのショップリンク作成には以下ASPの無料会員登録が必要になるので済んでない方は先に登録を済ませておいて下さい。
※登録も利用ももちろん無料です。
■Amazonアソシエイト
⇒https://affiliate.amazon.co.jp/
■もしもアフィリエイト
⇒https://af.moshimo.com/
■バリューコマース
⇒https://www.valuecommerce.ne.jp/
以上Rinkerの使い方まとめてみました。
コメント