wordpress、AmazonJSの読込エラー「商品画像がぐるぐる回ったまま表示されない場合」の対処法

web制作

読了の目安時間: 314

今日はwordpressのプラグイン「AmazonJS」を使った時、商品画像がぐるぐる渦を巻いて、まったく商品画像が表示されないエラーについて、その対処法を記事にしました。

AmazonJSとは

「AmazonJS」とは、Amazonアフィリエイト専用のwordpressプラグインのことです。AmazonJSを使うことで、通常のAmazonアフィリエイトコラムに比べて、見栄えの良いデザインでAmazonの商品を紹介することができます。たとえば特茶のアフィリエイトコラムを作成すると、下記のようになります。

▼AmazonJS適用しない場合

▼AmazonJS適用した場合

しかし、wordpressの設定次第では、AmazonJSのエラーが起きることも・・・

プラグイン「AmazonJS」を使うと、wordpressの設定によって、下記のように商品画像がローディングのアイコンでぐるぐる回って、一向に表示されないエラーが起きる場合があります。

▼商品画像がローディング状態となって読み込まない様子。
amazonjs_err

AmazonJSのエラー対処法

結論から述べますと、自分の場合、wordpress側で用意されているjqueryを設定したら、エラー解決となりました。

wordpress側のjqueryを使わず、外部jqueryを読み込む設定にしていると、ローディングエラーが起きてしまう。

wordpressでは、下記コードをheader.phpに記述することで、wordpress側のjqueryではなくて外部jqueryを読み込ませることができます。

<?php wp_deregister_script('jquery'); ?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.*.*/jquery.min.js">

wordpress側jqueryの使用を禁止して、外部jqueryを使うメリットとしては、wordpressのコンフリクト対策をしなくて済むというメリットがあります。静的環境で作ったjquery関連のコードをコンフリクトするのは確かに手間です。

しかし、AmazonJSでは、おそらくwordpress側のjqueryを想定して作られているようですので、外部jqueryではエラーが起きてしまいます。

AmazonJSを使いたいなら、wordpress側のjqueryを設定・利用する

カプセル化などのコンフリクト対策をして、wordpress側のjqueryを使うだけでOKな設定にします。また、その時はwp_headとwp_footerを忘れずに設置するようにしましょう。

▼header.phpのheadタグ終わり前に記述
<?php wp_head(); ?>

▼footer.phpに記述
<?php wp_footer(); ?>

自分の場合、これで画像読込エラーは無事に解決しました。

なおjqueryや、jqueryを使ったコードの読込時は、function.phpにwp_enqueue_script関数を使って読み込みするように記述する方法がwordpressの仕様上、スマートです。headタグ内に記述している人はせっかくなので見直ししてみても良いと思います。

wordpressのバージョンと、AmazonJSのバージョンの組み合わせ次第では、エラーが起きる可能性もあります。どちらも最新版にすれば大丈夫だと思いますが、その場合は他のプラグインなどの確認も必要になりますので、バージョンを変える時は慎重に試しましょう。

まとめ

wordpressのjqueryは、デフォルトで準備されているものを使うようにしましょう!

キヨタツ
キヨタツの一言

wordpressのコンフリクト対策を覚えておくとAmazonJS以外にも色々便利です!

今読んだ記事をシェアする

wordpress

wordpress、AmazonJSの読込エラー「商品画像がぐるぐる回ったまま表示されない場合」の対処法

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。