中村桐子のポートフォリオサイト、LIFE IS A PARTY!

沖縄出身のデザイナーナカムラキリコの人生はパーティーだ!ブログ

  • ウェブ

    AmazonJSのぐるぐるエラーについて解決策をまとめてみた

    2016年1月20日

    2016010901

     

    こんにちは、WordPress初心者のキリコです。

     

    ブログを構築するにあたって、Amazonへのリンクをきれいに見せるためのプラグイン、AmazonJSを導入してみました。

     

    AmazonJSの導入方法についてはこちらの記事をご参照ください。

    WordPress[AmazonJS] Amazonアソシエイトのプラグインを導入 | ディーエムガジェット

     

    で、導入後にこんな感じで画像がグルグルしてうまく表示されないという現象が出てしまい、

    キャプチャ0120_01

    色々と調べてなんとか解決したのですが、これが原因では?という部分がたくさんあり、1つにまとめてある記事がなかなか無かったので、初歩的な内容ではありますが備忘録&同じく初心者の方の為に記事にすることにしました。

     

    以下、AmazonJSのぐるぐるエラーの原因をチェックリスト的な感じで簡単なものから書いていきます。

     

     

    1. header.phpとfooter.phpは用意しているか、記述内容は間違っていないか?

    基礎中の基礎ですが、jQueryを読み込むためのheader.phpとfooter.phpがないと動作しないプラグインが多数です。

     

    【header.phpファイルの作成方法】

    まずはphpファイル「header.php」を作成し、head部分~ヘッダーまでをドンっと入れちゃいましょう。

    そして、</head>タグの直前に<?php wp_head(); ?>タグを入れましょう。

    ここでやりがちなミスなのですが、<?php wp_header(); ?>って書かないように注意。

     

    【footer.phpファイルの作成方法】

    まずはphpファイル「footer.php」を作成し、フッター~</body>までをドンっと入れちゃいましょう。

    そして、</head>タグの直前に<?php wp_footer(); ?>タグを入れましょう。

     

    【それぞれのページでheader.phpとfooter.phpを読み込む】

    index.php、single.php、category.phpなど各ページのテンプレの最初と最後に、

    <?php get_header(); ?>

    <?php get_footer(); ?>

    を記述してヘッダーとフッターを読み込みましょう。

     

    これでOKです。

     

    2.外部jQueryを読み込む設定にしていないか?

    これ、私が実際にやっちゃってたやつなのですが。

     

    wordpressでは、wordpress側のjQueryではなくて外部jQueryを読み込ませることができます。

    head部分にこんな感じの記述があれば、それは外部jQueryを読む設定になっています。

    <?php wp_deregister_script(‘jquery’); ?>
    <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.min.js”>

    先ほどの項目でheader.phpとfooter.phpを用意した方は、この記述はまるっと消しちゃって大丈夫です。

     

    特に、既存のテーマをいじった方、他サイトからhead部分をコピペで持ってきた方なんかはぜひチェックしてみてください。

     

    3. jQueryのバージョンは古くないか?

    AmazonJSを使うにはjQueryの.onというメソッドが必要なので、バージョン1.7 以上のjQueryを使用しましょう。

    というか、特に理由が無い限り最新にしましょう。

    jQuery公式サイト

     

    4. WordPressのバージョンは古くないか?

    これ結構調べたのですが、AmazonJSの場合どのバージョン以前は動かないです!という明確な記事は見つからなかったので、できれば最新にしてあげましょう。

    が、契約しているサーバーによって最新バージョンに対応してない(動作確認をしていない)場合もあるので、確認の上可能な限り新しいバージョンにしてください。

    バージョンの更新は管理画面左のダッシュボード→更新から。

     

    5. Head Cleaner、WP Keyword Linkなどのプラグインと競合していないか?

    AmazonJSの場合は

    ・Head Cleaner

    ・WP Keyword Link

    というプラグインと競合が起きてしまうそうです。

     

    Head Cleanerの場合は削除せずに対応できるようですが、WP Keyword Linkは残念ながら削除するべしといった記事しか見つかりませんでした。

     

    【Head Cleanerの対処法はこちら】
    WordPressプラグイン「Amazon js」の画像が表示されない場合の対処法

     

    また、その他のプラグインと競合している可能性もあるので、一つずつ停止にして確認する、という作業を繰り返すと確実です。

     

     

    6. 停止にしているプラグインのキャッシュが残っていないか?

    以前使用していたプラグインを停止にして残してある場合、キャッシュも残ってしまっていることがあるそうです。

     

    使用中のプラグイン全部チェックしたのにまだ動かないー!って場合はもしかするとキャッシュで競合している可能性もあるので、使わないプラグインは削除、使わないけど残しておきたいプラグインは一度削除してから再度インストールして停止にしておきましょう。

     

    ちなみにこの現象、テーマを変更した場合などに起きやすいようです。

     

     

    7. それでも動かなければ・・・

    すみませんが、これ以上はウルトラ初心者の私には分かりません。。

    ので、潔く類似プラグインに乗りかえるのも手かなと思います。

     

    類似プラグインはたくさんあるのですが、以下の2種類が代表的かなと。

    【カエレバ】

    カエレバとAmazonJSの違いを調べてみた件 | すあろぐ

    【BabyLink】

    広告主張が控え目なAmazonアソシエイトリンク作成ツール「BabyLink」を作ってみた|寝ログ

     

     

    以上です。

    ぶっちゃけAmazonJS特有のエラーは5番ぐらいなのですが、「改めて確認するとここが間違ってた!」ってところがあるかもしれないので、参考になれば幸いです。

     

     

沖縄出身のWebデザイナー6年生。
1993年生まれ、現24歳。
ビールとお相撲が好きです。

ページトップへ戻る