WordPress初心者へのjQuery設定方法【導入編】

やぁ、ブログのデザインは順調かい?

ふむふむ、最近はもうHTMLゴリゴリに書いて、CSSでギラギラにしまくってるってか。それは良いことだ!

でもなんか物足りないな〜もう少し違った事したいなって思ったりしてないか?

そんな俺にはjQueryがオススメだ!

このjQueryってのはブログに動きをつけてくれるんだ。例えば俺のブログのスマホ版で表示されるカテゴリタグをタッチすると、ずらっと一覧が表示されるよね。これもjQuery。

jQueryって何?

jQueryってのはJavascriptのよく使う機能をぎゅっと詰め込んだライブラリのこと。

ライブラリにすることで、今まで長ったらしくて、重たかったりしたJavascriptが、誰でも簡単に書けて動作も速くなってしまうって訳。

だからそうだな、jQuery書けますってよりは、Javascript書けますって方がより知ったか出来るかも。

まぁ、どっちでもいいか。

jQueryの設定

どうやったらjQueryが使えるようになるのかって言うと2通りある。

どっちもサイトのヘッダー部分にjQuery使うよって記述するのは同じだけど、ライブラリを読み込んでくる場所が違うんだ。

1つは自分のサーバから読み込む方法、もう1つは俺のjQuery使っていいよっていう親切な人がいるんだけど、そこから読み込む方法だ。

ファイルをダウンロードして使用

まずはjQuery公式ダウンロードサイトにアクセス。

大まかに言うとjQueryには1.X系と2.X系があって、1.X系はIE8以前のブラウザもサポートするバージョン。2.X系がIE8を含むそれ以前のサポートを捨てた代わりに高速に動くバージョン。今回は1.X系で行きます。

jQuery

まず赤枠で囲った「Download the compressed, production jQuery 1.XX.X」(XX.Xはバージョンで変わるよ。)を右クリック。そして別名で保存を押し、自分のPCにダウンロードする。

その後、サーバにファイルをアップロードするのだが、どこに置けば良いかって思うよね。正直どこでも良いけど専用の「jquery」フォルダを作るのがオススメ。サーバの一番上から「jquery」→「jQueryのファイル名」って感じ。そしたらブログのヘッダー内に<script~></script>を記述する。

<!doctype html>
<html lang="ja">
<head>
    <script src="jquery/jquery-1.XX.X.min.js"></script>
</head>
<body>
</body>
</html>

(1.XX.Xのところはバージョンによって変わるので注意して欲しい。)

ダウンロードして使うメリット

  • 自分のサーバにアップしてるのでCDNで読み込む先のサーバがダウンしてても使える

CDNで読み込んで使用

CDNとはコンテンツ・デリバリー・ネットワークの略で、Webコンテンツをネットで効率的に配信するための仕組み。googleやMicrosoftが公開しているサーバにアクセスして、そこからデータを読み込むことが出来る。今回はgoogleからjQueryのデータを読み込む方法を紹介するがとても簡単。ヘッダー内に以下のコードを記述してくれ。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.XX.X/jquery.min.js"></script>

CDNを使うメリット

  • 多くの人が使っているのでファイルがキャッシュされていれば、サイトを速く表示できる

俺の使ってるStinger3ではどうするの?

そうそう、言い忘れてたけどStinger3使ってる人はjQueryの設定しなくてもいいよ!

なんでかって?実はfunctions.phpに記載されているんだ。しかも先頭に。たぶんこれ。

 

function load_script(){
    wp_enqueue_script('jquery');
}
add_action('init', 'load_script');

 

うん、ちゃんとjqueryって書いてある。ありがたいね。Stinger3使ってる人はENJIさんに感謝しよね。

でもなんでそんな書いただけでjQuery使えるようになるのさ?URLの記述とか無いじゃんって思った人。ありがとうございます。最初から読んでくださってる人ですね。

実はWordpressの中にjQueryは入ってるんだ。しかも常に新しいのを入れてくれている。

WordPressにおけるjQueryの置き場所はwordpress/wp-includes/js/jquery/jquery.jsってとこにあるから、皆も自分のサーバで探してみてくださいな。

なのでWordpressでjQueryを使うにはfunctions.phpとかに書けば、バージョンの指定がない限りはファイルをダウンロードしたり、CDNで読み込んだりってのは必要ないということ。

逆にStinger使ってなくてfunctions.phpにjQueryを使う記述がなかったら、上のコードを先頭に書き足してくれ。でも先にしっかりバックアップは取ってちょうだい。

最後に

jQueryを使うとブログに今までと違う動きが出せるので、とっても楽しいです。でも結構つまずくことも多いので、これから少しずつ試していってブログにフィードバックしていきたいな。