クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

jQueryを使えるように準備しよう [Stingerは不要]

f:id:clrmemory:20170422175622p:plain 

javascriptで動きを付ける際に「jQuery」という機能を使う事によって、より理想的な動きができるようになります。

ですが、jQueryをコードから使うためには準備が必要になりますので、今回はjQueryを使うための準備を紹介します。

 

 

はじめに

 

今回紹介する方法を行う事によって、ブログやサイトのカスタマイズでjQueryを使うための準備ができます。

これをしておかないと、jQueryを使わない処理であれば今回の方法は必要ないのですが、jQueryを使う事で、カスタマイズの幅が広がりますのでぜひ実装してみてください。

 

ではまず、jQueryを実装するためのファイルを配置していきましょう。

 

jQueryを用意しよう

 

http://jquery.com/download/

 

まずはこちらのサイトからjqueryをダウンロードしてください。

Download the compressed, production jQuery 3.0.0 と書かれたリンクを選択すると、「jquery-X.X.X min.js」というファイルをダウンロードできると思います。

 

ここでダウンロードしたファイルを設置する事によって、カスタマイズにjQueryを使う事ができるようになります。

では実際に配置してみましょう。

 

jQueryを配置する

 

wordpressなどのサイトをカスタマイズする場合、ダウンロードしたjQueryをサーバーにアップロードする必要があります。

FTPソフトなどを使って、jQueryのファイルを配置します。

 

jQueryの配置はそこまで意識する必要はありません。

htmlやphpなどで、jQueryが配置されている場所を記述するので、わかりやすい場所に配置しておくと良いと思います。

 

jQueryを呼び出す

 

jQueryを実際に使えるようにするためには、htmlやphpのコードの中にjQueryが配置されている場所を書き記す必要があります。

 

jQueryの配置場所を指定する時は、以下のように記述する事になります。

(ダウンロードしたjQueryのファイル名は、jquery.jsに変更してあります。jqueryのファイル名を変更した場合は、コード側のファイル名も変更してください)

<script src="jQueryを配置した場所/ファイル名.js"></script>

 

このようなコードをhtmlなり、phpなりで呼び出してあげる事によって、jQueryを使う準備ができました。

 

 

私の場合、jQueryを呼び出すファイルとjQuery本体の配置場所を同じ階層にしているので、呼び出すためのコードは以下のようになりました。

<script src="jquery.js"></script>

 

同じ階層の場合は、このようにファイル名だけ記述すれば良いのですが、読み込む階層が変わる場合は「/」を使って実際の階層を指定する必要があります。

 

これでjQueryの配置は完了しました。

 

 

ここで、ひとつ注意点があります。

WordPressで使っているテーマが「Stinger」の場合は、すでにjQueryを読み込むためのコードが記述されているので、書く必要はありません。

 

jQueryを使う

 

では実際にjQueryを使ってコードを書いてみましょう。

( jQueryの配置場所はすでに呼び出してあります。)

(function($){
    コード
})(jQuery);

 

このようなコードを記述しておく事で、jQueryを使い始める事ができます。

jQueryで囲まれた内側にjQueryのコードを記述してみてください。

 

まとめ

 

今回紹介した方法で、ブログやサイトのカスタマイズにjQueryを使えるようになりました。

 

jQueryを使えば、カスタマイズの幅が広がりますのでphpやcss、jsなどを使ってサイトをカスタマイズしている方はぜひjQueryを使ってみてください。

 

ではまた。