こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
今回は本サイトで使用している「もしもアフィリエイト」の「かんたんリンク」のボタンが崩れることがある…と気づき、その調整をした話です。
100%ではありませんが、ページを表示していると高確率で崩れている…といったところです。
外部サービスを使っていれば遭遇することもままある話です。
かんたんリンクが崩れた状態
かんたんリンクが崩れた状態です。
謎のオレンジボタンが…。
ボタンクリックで該当ページに移動することはできていましたが、見た目よ。
コンソールのエラーを見るとjs関係のエラーが起きていることがわかりました。js周りを調べていきます。
jquery読み込み順が悪いのかも（無関係だった）
本サイトではjqueryをheaderで読み込んでいます。諸々のプラグインを追加したときに不都合が生じないように、わざとそのままにしています。今のところプラグイン追加して云々ってありませんけれども。
これをfooterに持ってきたら直るのか？と思って試してみましたが、直りませんでした。
jqueryのdeferが悪いのかも（無関係だった）
読み込みを早くしようと思って、scriptにdeferをつけています。
もしかしてdeferのせいで読み込み順が微妙に変わって変なことになっている？と思ってdeferを外してみましたが、特に問題ありませんでした。
それもそうです、defer属性付与したときは崩れてなかったと思いますから…または気付かないくらいの低確率で崩れていたか…
→【WordPress】javascriptをdefer（遅延）読み込みさせて表示を速くする
jqueryのバージョンが悪いのかも（正解）
ここで重要な情報。「前は問題なく動いていた」のですね。そこで「jqueryのバージョンが悪い可能性がある」と推測できます。
となるとjqueryのバージョンが怪しいです。試しにWordPressで自動的に読み込まれるjqueryを読み込まないようにしてみたら、エラーが消えました。
これでjqueryが原因だということがわかりました。
どのバージョンなら動作するのか探す
WordPressで自動的に読み込まれるものは使えないので、自分で用意したものを読み込むようにします。こんな感じです。
/**
* themeFooterEnque
* CSSとJSをフッタで読み込む
*/
function themeFooterEnque() {
$template = get_template_directory_uri();
// JS
wp_dequeue_script('jquery');
// もしもアフィリエイトの関係でバージョン低い物を使用
wp_enqueue_script('jquery-2.1.4', $template. '/js/jquery-2.1.4.js');
}
add_action('wp_footer', 'themeFooterEnque');
念のため自動で読み込まれるjqueryを読み込まない（dequeue）ようにしてから、テーマファイル内に専用のjsファイルを用意し、それを読み込ませるようにします。dequeueしなくてもWordPress同梱のjqueryは読み込まないようでしたが、念のため。
元々NaoLightを使用した本テーマはheaderではなくfooterで読み込んでいるので、それをそのまま流用しています。
動作バージョンの探し方
公開されているバージョンの低いバージョンを読み込ませ、問題なければそれよりも上のバージョンに移動して動作するか、と当たっていきます。地道な作業です。
読み込まれていた3.5.1で動作しなかったので、3系の一番下の物にしてみましたが、これもダメでした。3系は相性が悪いようです。
となればボトムアップで、と1系の最後、1.12.4を指定してみたら問題なく動作しました。
これで1系の最後までは良かった、とわかります。
そのまま2系のものを下から順番に試していき、問題なく動作する最終バージョンを探していきます。
もしもアフィリエイトのかんたんリンクと相性の良かったものは2.1.4になりました。
他のjs動作の確認
もしもアフィリエイトのかんたんリンクはこれで動くようになりましたが、他で使用しているjsはどうでしょうか。要確認です。
本サイトで主に使用している独自のjsは目次機能、お問い合わせ、画像拡大機能、スマホ版のハンバーガーメニューなど。公開側で使用しているプラグインはありません。
そんな凝ったことはしていないので問題ないとは思いますが、一通り流し見しましたが、特別問題なさそうでした。
これがプラグイン使っているとjsのバージョンを下げたことで動作しないことが発生するので厄介なんですよねー…(/・ω・)/だから自分のところでは使ってません。
まとめ
外部サービスを使っていると起こり得る話ですね。
今回はもしもアフィリエイトでしたが、他のアフィリエイトリンクを生成したときにも発生するかもしれません。そのときはコンソールを見て、考えられる原因を予想して対処していけばいいですね。
ライブラリのバージョンを下げるときは、他の機能に影響がないか十分確認して行いましょう。
