Katteneという、リンクを並べて配置できるツールを知って、早速設定してみたのですが、商品画像がうまく表示されません。
ネットでたくさん調べましたが、なかなか情報をキャッチできずだったので、ブログにアウトプットしておきたいと思います。
はじめてのワードプレスに困惑しながらも困ったときはネットで調べていきながらなんとかブログを更新できております。
困ったことがすぐに解決できるように、ネットサーフィンの語彙力も必要なスキルだとヒシヒシと感じています。
Kattene設定をしてこのような表示から抜け出せない方は、解決できると思います。
使用環境は、ワードプレステーマは「JIN」。
楽天ブックスと電子書籍のkoboの二つのリンクを同時に貼るためにプラグイン「kattene」を使用しています。
Katteneの使い方
Katteneはプラグインをインストールする必要があります。
インストールしたら必ず有効化してください。
また、ショートコードの呼び出しに便利なAdd QuickTagというプラグインも使用しています。
Katteneのインストールが完了したら、コードをAdd QuickTagに貼り付けておき、記事を書くときに必要があれば呼び出して使用します。
赤丸内に下記コードを貼り付けて設定しておきます。
[kattene]
{
"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"
},
{
"color": "red",
"url": "【商品のURL】",
"label": "楽天"
},
{
"color": "blue",
"url": "【商品のURL】",
"label": "Yahoo!ショッピング"
}
]
}
[/kattene]「変更を保存」を押すと設定が完了し、投稿画面上部のQuicktagsから呼び出して貼り付けられるのでとても簡単です。
また、今回は楽天と楽天koboの２種類だけを使用したいと思いますので、そのようなときは必要のないリンク部分は削除して使用します。
Kattenneの商品画像がうまく表示されない時は？
商品リンクのURLを貼り付けても、商品画像が表示されない。と検索に検索重ねていました。
問題なく、該当コード部分に貼り付けできているはずでした。
何度確認しても、エラーはないはずでお手上げ状態でした。
コード貼り付け箇所はコード内の下記部分と、それぞれのアフィリエイトリンク部分です。
【画像URL】商品画像を右クリックし、「画像アドレスをコピー」から貼り付けます。
【タイトル】商品名のタイトルを入力します。
【説明】必要な説明文を入力しておきます。
リンク個所は間違ってないように思いましたが、このように画像が表示されない状態でした。
解決方法
【商品URL】の【】を消すことで、解決しました。
【】の中にURLを入力していたのですが、"image": "【画像URL】",の部分を"image": "画像URL",とし、【】を削除することで表示することができました。
これで悩みに悩んだ商品画像を表示させることができました。
商品画像がうまく表示されない時は【画像URL】の【】を消して置き換える。
ワードプレスの投稿画面では、テキストモードでコードを貼り付ける。
まとめ
すごく調べるのに時間がかかってしまいましたが、商品画像も表示させることができてよかったです。
楽天だけでなく、ユーザーに対し商品の選択肢をたくさん与えてあげられるように、Amazonのリンクも貼って見やすいブログ作りをしていきたいと思います。
今回の原因は【】の記号でしたが、ほかの記号を一個でも間違えるとちゃんと表示されません。
同じような画像表示になってしまった方は一度試してみてください。