こんにちは、たつき(@tatsuuu_227)です。
先日、HTMLファイルからWordPressに移行(WordPress化)するにあたって、起きた以下の問題がおきました。
・jQueryが動かない
・表示されている画像と表示されない画像がある
この記事では、この2つの解決方法とその他に覚えておいた方が良い事を紹介していきます。
案件でWordPress化していて表示されなかったら、とても焦りますよね
僕もとても焦ったので、そうなってしまう人の参考になれば幸いです
この記事を書いている僕は、毎日Web制作の学習をしつつ有益だと思う情報を発信してまとめています。
それでは、本題にいきます↓
WordPress移行時の正しいjQuery記述方法
僕が実際に案件でWordPressに移行作業をしていた時に、HTMLファイルだと正常に動いていた
jQueryが突然うごかなくなった時の原因と対処方法を紹介していきます
まず、本題のjQueryを動かすようにするとは関係ないことをまとめました↓
・テンプレートを分割する(header.php,footer.phpなど)
・読み込む位置をbodyの直前にする
これらは記述方法としては正しいですが、今回のjQuery反映させる事とは関係ないです
また、前提としてパスの記述方法は合っていますか?
間違っている書き方
<script src="./js/script.js"></script>
正しい書き方
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
<?php echo get_template_directory_uri(); ?>を使ってパスの指定をしていない場合はまずは、
その修正をしましょう!
$をjQueryにする
WordPress化前
$(function(){
jQueryのコード記述
});
WordPress化後
先頭の「$」を「jQuery」に書き直して()内に「$」を書く
中身の「$」は変更しなくて大丈夫です!
jQuery(function($){
jQueryのコード記述
$使ってOK
});
Bootstrapの読み込みよりもあとにしましょう
もしBootstrapを使っている場合は、Bootstrapのファイルを読み込んでいる位置よりもあとにしましょう
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
Bootstrapを読み込んでから、jQueryのCDNを読み込むようにします。
jQueryはこれで解決できましたか?
これで、jQueryの正しい記述方法になりました!
おまけ(WordPressのjQueryを読み込ませない方法)
jQueryが表示されない原因とは関係ありませんがおまけとして、紹介します
WordPressにはもともと備え付けのjQueryが読み込まれています
でも、自分で読み込む位置をしていたい時や他のJavascriptライブラリとのコンフリクトを避けるためにjQueryを読み込みたくないケースもあります。
そんな時はWordPressのjQueryを読み込ませない方法があります
functions.phpの一番下に以下のコードを記述します
function my_delete_local_jquery() {
wp_deregister_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );
これで、備え付けのjQueryを読み込ませないことができます
まとめ
最後まで読んでいただきありがとうございます
今回は、WordPress化したら急に動かなくなったjQueryの対処方法をまとめていきました
この2つの修正だけで、jQueryが動くようになるはずです。
Twitterでは毎日の学習過程を記録・発信しているのでよかったらフォローすると喜びます
たつき(@tatsuuu_227)