LuxeritasでRinkerを使う時につまずいたこと。

2019-02-16WordPress

楽天のアフィリエイトのデザインは好きなんですけど、やっぱり何種類かのショップを一緒に並べたい時もあるし、品物が楽天にない時もあるなあと思って、プラグインの「Rinker」も使い始めました。

楽天、amazon、Yahooショッピングなどへのリンクが綺麗に手早く設置できます。

編集画面でタグがずらーーーっと並ぶことがなくなったので、リライト作業もしやすくなりました。

今回はこちらを導入する時につまずいたことと、その解決方法についてシェアします。同じことで悩んでいる方のヒントになったらいいなーと思います。

 

 amazonのPA-APIについては記事の下の方にあります。

目次か、こちらからどうぞ。

プラグイン:Rinker

▼ Rinkerのダウンロードはこちら

▼ Rinker作成者・やよい様のブログに詳しい使い方などが書かれています。

LuxeritasにRinkerを導入すると外部リンクのマークが出て…

外部リンクのマークはあるほうが好きなんですけど、それがRinker内のボタンにもできてデザインが壊れてしまう問題に悩まされました。

こういう感じでamazonと楽天のボタンの中に外部リンクマークができて、Yahooのにはなぜかマークはないんですけどボタンは大きくなってしまいました。

Rinkerのカスタマイズの記事をいくつか確認しましたが、こんな例はみつからず、どうすればいいのか…。…。

試しにデザインをお借りして当てはめてみても、

これはfor men様:Rinkerのカスタマイズ!デザインをシンプルにしてみるのSANGO風デザインです。

やっぱりこうなってしまうのです。。

NAZE…???
誰か〜〜〜…

いろいろなワードでねちねちと検索を続けた結果、Luxeritasだけでこうなるということや、そのための解決方法がこちらにありました。

なるほど!! と思い、さっそくここに書かれていた方法を実行しました。

プロトコルをつけるつけないがよくわからなかったので、ふたつとも追加CSSに記入して、外部リンクの設定はもともとそうだったのでそのままに。

これで消えるやろ…と思っていました。

結果…まさかの変化なし

もしかしたらアップデートなどで仕様が変更になっているのかもしれませんが、よくわかりません。

だけどここまでヒントをいただけたら、あとは自分でなんとかできるような気がしてきました!
ほんとうにありがとうございます(●´◒`●)

気を取り直していつものようにさっそくRinkerのソースコードに目を凝らすと…

Rinkerのソースコード

<div class="yyi-rinker-contents yyi-rinker-postid-3667 yyi-rinker-img-m">
<div class="yyi-rinker-box">
<div class="yyi-rinker-image">
<a href="アマゾンのリンク" target="_blank" rel="nofollow" class="yyi-rinker-tracking external" data-click-tracking="amazon_img 画像の名前">
<img src="画像" data-src="画像.jpg" class="lazy yyi-rinker-main-img" style="border: none;">
<noscript><img src="https://画像_.jpg" class="yyi-rinker-main-img" style="border: none;"></noscript></a> </div>

<div class="yyi-rinker-info">
<div class="yyi-rinker-title">
<p><a href="アマゾンのリンク" target="_blank" rel="nofollow" class="yyi-rinker-tracking" data-click-tracking="amazon_title タイトル">タイトル</a>
<span class="ext_icon"></span></p> </div>

<div class="yyi-rinker-detail">
<div class="credit">created by <a href="https://oyakosodate.com/rinker/" rel="nofollow noopener" target="_blank" class="external">Rinker</a><span class="ext_icon"></span></div>

<div class="brand">会社名</div>
<div class="price-box"><span title="" class="price">¥値段</span>
<span class="price_at">(日付と時刻;Amazon調べ-</span><span title="注意事項">詳細)</span>
</div> </div>

<ul class="yyi-rinker-links">
<li class="amazonlink">
<a href="アマゾンボタンのリンク rel="nofollow" target="_blank" class="yyi-rinker-link yyi-rinker-tracking" data-click-tracking="amazon タイトル">
Amazon</a><span class="ext_icon"></span>
</li>

<li class="rakutenlink">
<a href="楽天のリンク" rel="nofollow" target="_blank" class="yyi-rinker-link yyi-rinker-tracking" data-click-tracking="rakuten タイトル">
楽天市場</a><span class="ext_icon"></span>
</li>

<li class="yahoolink">
<a href="ヤフーのリンク rel="nofollow" target="_blank" class="yyi-rinker-link yyi-rinker-tracking external" data-click-tracking="yahoo タイトル">
<img src="// …/images/trans.png" class="lazy" data-src="画像" height="1″ width="0″ border="0″>
<noscript><img src="リンク" height="1″ width="0″ border="0″></noscript>Yahooショッピング</a>
</li>

</ul>
</div>
</div>
</div>

というように、classの名前が違っていることに気づきました。

先のブログで教わったタグは以下のものです。

▼プロトコルを指定する場合(URLに http: https: をつける)

.external[href^="https://www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.external[href^="https://hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}

valuecommerceのリンクもあるなら、それも http 以下の部分を書き換えて追加してください。

▼プロトコルを指定しない場合(URLに http: をつけずに //ドメイン名 にしたいとき)

.external[href*="www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.external[href*="hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}

^を*に変えて、ドメインから始める形にします。

引用:やるぞう様:Luxeritas の外部リンクアイコンを、特定のURLへのリンクから外す方法

画像の部分とYahooショッピングのボタンにだけもともと外部リンクマークがありませんが、

“yyi-rinker-tracking external"

というクラス名が共通しているからかも。

クラスの名前を変更して追加すればいいのでは…、と考えました。

プロトコルのことがよくわからないので、二つとも書き換えて追加。

するとついに…

外部リンクのマークを消すことに成功しました!
そしてデザイン崩れも直りました!ヤッターーーー✨

Rinkerへのリンクだけ外部リンクのマークをつけたままにしました。

▲ こちらは実際に作成したリンクです。すこしデザインも変更しました。

以下にまとめます。

スポンサーリンク

解決方法

Rinkerで作ったリンクを貼ったページから「カスタマイズ>追加CSS」を開いて、プレビューしながらお試しください。これで直らない時は…スミマセン!

これは「Luxeritasを使用していて外部リンクが以下のようになっている方が、Rinkerの表示から外部リンクマークを外しデザイン崩れを修正するためのもの」です。

解決方法

以下をCSSに追加する。

.yyi-rinker-tracking[href^="https://www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.yyi-rinker-tracking[href^="https://hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}
.yyi-rinker-tracking[href*="www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.yyi-rinker-tracking[href*="hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}

無事に整えられたら…Rinkerにはデザインを変えるためのショートコードも用意されているので、いろいろ試してみるのも楽しいです。(とっても簡単!)

Rinkerショートコード一覧

Rinkerの編集画面について

あんまりいないでしょうけど…私みたいに

Rinkerの編集画面って「使い方」によく出てくるけど…どこや…?

という方のために、蛇足ですが買いておきますね。。

リンクを編集する画面は「ダッシュボード>商品リンク」にあります。

使い方を説明されているページでよく出てくる編集画面は、ここからしか開けないんですね。。なんとなく、投稿画面でショートコードを入力する直前にも開くものだとばかり思っていました。。

記事を投稿する画面から作ったリンクは編集はできないようです。そのまま記事に反映されます。

編集してから投稿したい場合には「新規追加」からリンクを作り、カーソルを合わせると出てくる「編集クイック編集ゴミ箱へ移動」から希望の処理を行いましょう。

もちろん作成済みのリンクをここで編集することもできます。

ここから自由ボタンの設定もできます。この機能が使いたくて探してしました。

タイトルリンクをamazonと楽天どちらにするかも選べますし、どちらかに商品がない場合にボタンを非表示にすることもできるようです(一番下の項目)。

なんて簡単で便利…✨

amazonのPA-API問題

さてさて。

amazonのPA-APIのことがあってカエレバ を使えないと考えて使用をやめたんですけど、実のところ結局なにが問題なのかはわかっていませんでした。とにかく検索ができないんだな??とだけ理解していました。

でもやっぱりリンクを可愛く並べて貼りたい、ああいうサービス使いたい、という思いがあり、しっかり調べてみることにしました。

Rinkerでの対処法

するととてもわかりやすく、しかも対処方法までのっている記事を見つけました。

カエレバ の場合もPA-APIを通すこともできるという記述を見た気がしましたが、カエレバ のところに書いてある説明がよく理解できてないし、もしもアフィもやってないし、自分には荷が重いことかも…と思って最初から読まずに諦めてました。。

 

amazonのアクセスキーIDとシークレットキー、トラッキングIDなどをきちんと設定したのち、Rinkerでどのように設定すればPA-APIを経由したと見なされるのかは、上の記事の

WordPressプラグイン「Rinker」の設定

にズバリと書かれていて、それは単純にひとつのボタンを押すだけ、でした。

「ダッシュボード > 設定 > Rinker設定」の画面の上記の項目で、上の画像のように「リンク先を詳細画面にする」にチェックを入れるだけです。

すごく簡単です!! ありがたい!!!

 

amazonのAPIの設定についてはRinkerの設定ページにあります。

Rinkerを利用するためにはAmazonのAmazon Product Advertising APIの認証キーを取得する必要があります。
Amazon Product Advertising APIの認証キーを取得からキーを取得して、アクセスキーID、シークレットキーを登録してください。
認証キーの詳しい取得方法はAmazon Product Advertising APIの認証キー取得方法にも記載しています。

 

そんなわけでRinker導入を決めたのでした。

PA-APIについてはこちらの記事もわかりやすくて、とてもスッキリしました。

それにしても、検索って不思議ですね…。あんなに探してもなかったのに、数日後にはこんなにわかりやすい記事がいくつも見つかるんですから。。

今回もなんとか解決できました。みなさまありがとうございます。

 

また、amazonから制限がかかってRinkerで商品検索ができなくなっても、PA-APIを経由して発生した売上があった(発送された)直後にまた使えるようになります。(実際に確認済みです)

 

 

 

Rinkerなどで作ったリンクがPA-API経由になっているかどうかは、上にご紹介した記事にあるようにどなたかがクリックしてくださらないとわかりません。

このブログの場合はRinkerを設置してすぐ押してみてくださった方があり、これで大丈夫だったんだとわかってとてもほっとしました。どなたかわかりませんが、ありがとうございますっ✨

Rinkerを設置する前はリンクタイプレポートを見てもこの項目はなくて、それもとても不安でした。おそらくですが、PA-APIを経由したことがないと、このリンクタイプの項目は現れないようです。

amazon:リンクの動作確認ツールの使い方

またamazonにはリンクが正しく貼れているかどうか(自分のアカウントと紐づいているかどうか)をチェックするツールもあるのですが、そこにどのリンクを貼ってみたらいいのかわからなくてけっこう時間を費やしました。。

これですー。

そんなことで悩む人もまたほとんどいないとは思うのですが、そのこともメモしておきます。

商品リンクの編集画面の上の方にある「Amazon商品詳細URL」にあるリンクをテキストボックスに貼り付けてください。

恥を忍んで言いますが…私はページのソースを見てそこにあったリンクを貼り、「有効なURLを入力してください」と言われ続けました ヨ。。

単純に希望した商品にきちんとリンクが貼られているかどうかを見るには、右にある「確認」を押すだけです。