2016.07.26
wordpress内でjQueryを読み込む
jsファイルの読み込み
wordpressでjQueryを読み込む方法はいくつかありますが、ここではheadタグ内で数行書き加えるだけの方法を紹介します。
<?php wp_deregister_script(‘jquery’); ?>
このコードをheadタグのjsファイルをを読み込む前に記述します。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> . . . <?php wp_deregister_script('jquery'); ?><!-- ここです --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head>
次に<script>タグも<?php echo get_template_directory_uri(); ?>による記述に変えてあげましょう。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> . . . <?php wp_deregister_script('jquery'); ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script><!-- ここです --> </head>
最後にheadタグ直前に<?php wp_head(); ?>を記述して準備完了です。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> . . . <?php wp_deregister_script('jquery'); ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> <?php wp_head(); ?><!-- ここです --> </head>
jsファイルの書き換え
これだけではまだjQueryは動きません。
jsファイル自体を書き換えてあげる必要があります。
プラグインを実行させるためのコードや、ちょっとしたイベント等自分で書いたjsファイルの「$」を「jQuery」に書き換えます。
$(function(){ .... }); //下記に書き換えます jquery(function(){ .... });
以上の作業でjQueryを実行することができます。
まとめ
wordpressにはjQueryが動作する環境が元々備わっています。(ツールバーが最初から装備されているのもそういうことです。)
<?php wp_deregister_script(‘jquery’); ?>が何をしたかというと、この標準装備のjQuery環境と競合しないようにwordpress自体のjQuery環境を停止させたのです。
なので、当然ながらjqueryの読み込みファイルもお忘れなく!