当ブログテーマのCocoonでAmazon商品リンクを設定した際、楽天/Yahooのリンクボタンが表示されない状態を解決する方法をご紹介します。
ブログ執筆に必要なものが全て揃っているのに、完全無料の素晴らしいテーマです。
さて、私はAmazon・楽天・Yahooへのアフィリエイトリンクが一括で表示される、CocoonのAmazon商品リンク機能を使っています。
私のブログの性質上、アフィリエイトリンクを使い回すので便利なんですよねこれ。
しかしある日、本来はAmazon、楽天とYahooのリンクボタンが表示されるはずなのに、下記のように表示されない状態になっていることに気付きました。
一応Amazonへのリンクだけが生きている状態。
これ、いくら調べても解決方法が見つからなかったんですが、ひょんなことから自分で解決できました。
もしかしたら同じ症状で困っている人が居るかもしれないので、メモがてら書き記します。
この方法は、恐らく楽天やYahooから商品リンクを作って、同じような症状が出た人も使えるはずです。
症状
再度書きますが、症状は下記の通り。
- ブログテーマCocoonのテンプレート機能を使用
- Amazon商品リンクを作成すると、商品リンクのブログカード上にAmazon・楽天・Yahooのリンクボタンが表示されない
これまでカラフルなボタンが３つ並んでいた光景に慣れ親しんでいたので、見た目としてもあまりよろしくない感じです。
解決方法
では早速解決方法を。
端的に言うと以下の通り。
以上です。
これだと何が何やらなので、キャプチャ画像を交えて説明しますね。
1.WordPressのブログ編集画面から、Cocoon設定>テンプレートを開く
2.問題が発生しているテンプレートの編集画面を開く
3.ビジュアル編集画面になっているならテキスト編集画面にする
4.不要なコードを削除する
この場合、具体的には以下のコードです。
<span id="productTitle" class="a-size-large product-title-word-break">---</span>5.保存して問題が発生しているページを確認しにいく
各種ボタンが復活しましたね。
これで一件落着です。
原因
原因はさっきの不要なコードだということは皆さんもおわかりになったかと思います。
つまりは、HTML部分に原因があった、ということなんです。
ではそもそも、何故そんなコードが入ったのか、根本的な原因はなんでしょう？
実は先程の邪魔なコードが入る前に、一段階踏んでいます。
次のキャプチャ画像をご覧ください。
私はAmazon商品リンクテンプレートを新規登録する時、入力が面倒なので対応しているAmazonページの商品名をコピペしてからビジュアル画面で編集していました。
コピペすると、上記のように文字のサイズが変わるので、ビジュアル編集画面でいらない文字を消したりサイズを元に戻したり。
すると何が起こるのか。
実はビジュアル編集画面上では、適正なサイズの文字になったように見えますが、HTML編集画面で見ると不要なコードが書き込まれたままなんです。
これが商品リンクの正常な動作を阻害していたということです。
まとめ
再度まとめると、HTMLに不要なコードが書き込まれていたために商品リンクの表示がおかしくなっていた、と言うことです。
その要因はコピペ。
と言うことで今後はコピペせず、ちゃんとイチから手打ちします…。
それではまた。