wordpress内でjQueryを読み込む

2016.07.26

カテゴリー：タグ

Facebook

Twitter

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の読み込みファイルもお忘れなく！

Facebook

Twitter

Wordpress Tips