グローバルナビにアニメーションを導入したい。パララックスエフェクトのようなエフェクトを加えたい。スクロールに応じてクラスを変更したい。
こういったことはjqueryを使うことで解決できますが、wordpress内のphpファイルを編集しないといけないので、初心者にはとっつきにくいです。今回の記事では、そんな方もjqueryの導入に一歩踏み出せるように丁寧に解説していきたいと思います。
CONTENTS
jqueryとは？
まず、jqueryとは何かについて説明しておきます。
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
参考-wikipedia
より簡単に表現するのであれば「javascriptをより簡単に書くための方法」です。
jqueryで何ができるのか？
簡単に、jqueryで何をすることができるか？を纏めておきました。
この「できること」を知っていると、アイデアの幅が広がるのでまだ不安な方は一回確認しておきましょう。
CSSを変更できる
jqueryを使うと、CSSを直接変更できます。
|
1 |
$('p').css('color','red'); |
このように記載することで、今回の例だとpセレクタの文字色が変わります。
複数のCSSを同時に変更したい場合は、以下のように書きます。
|
1 2 3 4 5 |
$("p").css( color:"red", font-size:"16px", font-weight:"700" ); |
このjqueryの.css()を利用した場合は、HTMLタグのstyle指定を直接した場合と同様になります。
クラスやID(HTML)を取得・追加・削除できる
jqueryを使ってHTMLセレクタにクラスやIDを追加したり、削除したりできます。
|
1 2 |
$('header').addClass('fixed'); $('header').removeClass('fixed'); |
上記の記述の仕方で、クラスを追加・削除できます。
細かくは省略しますが、.attr()を使うことでIDやクラス、href要素を取得することも可能です。
CSSと組み合わせて使うことで、デザインを変更することが可能です。
イベントの条件分岐ができる
ここがjqueryを導入する一番のポイントでしょう。ただCSSを変更したり、クラスやIDを変更したりするだけでは意味がありません。
「画面をクリックしたら」「100pxスクロールしたら」「要素にhover(覆う)したら」などの条件分岐ができます。
このイベントの条件分岐によって、HTMLやCSSにはできないことが実現できます。
jqueryプラグインとは？
javascript初心者にとって、jqueryを使ったとしても難しい仕組みのスクリプトを作るのは大変です。
実はそんな方のために「jqueryプラグイン」というものがあります。jqueryプラグインとは、jqueryの中でもよく使う仕組みをパッケージにして、初心者の方も使いやすいように纏めてくれたものです。
wordpressのプラグインと少しイメージは違って、javascriptのライブラリと仕組みは似ています。「javascriptを簡単に書けるようにしたものがjquery」「難しいjqueryを簡単に書けるようにしたのがjqueryライブラリ」です。
少しややこしいですが、雰囲気だけでも覚えておくと役立ちます。
jqueryプラグインの導入方法
jqueryプラグインは、javascriptのライブラリを使うのと似ています。つまり、jqueryを導入する時と似ています。
head内に読み込み用のスクリプトを記述し、scriptタグ内にコードを記載します。実際に導入する時の方法を紹介しておきます。
使用するjqueryプラグインを選ぶ
まずは、jqueryプラグインを選びましょう。
jqueryプラグインは非常に多く出ているので「目的にあったもの」を検索する必要があります。
- メニューのスライドバーなどを簡単に出せるようになるjqueryプラグイン「Slidebars.js」
- パララックスエフェクトを導入できるjqueryプラグイン「scrollr」
このように、目的にあったjqueryプラグインを自分で調べる必要があります。「○○(やりたいこと) jqueryプラグイン」で検索をすると、比較的見つけやすいかと思います。
header.phpを編集する
導入したいjqueryプラグインが決まったら、head内に書き込む必要があります。試しに、slidebars.jsを導入する場合について書いていこうと思います。
slidebars.jsの場合は、ファイルをアップロードした上で読み込む必要があります。head内には下のような記載が必要です。
|
1 2 3 |
<link rel="stylesheet" href="css/slidebars.min.css"> <script src="js/jquery.js"></script> <script src="js/slidebars.min.js"></script> |
CSSやjavascriptライブラリを読み込む際とほとんど同様ですね。
jqueryのスクリプトを記述する
読み込んだら、あとはスクリプトを記載します。slidebars.jsの場合も使い方が結構大変なので手順を纏めておきます。
- HTML設計を変更する(プラグインごとに指定があります)
- HTMLのクラスやIDを変更する(プラグインごとに指定があります)
- scriptタグ内にjqueryを記述する
jqueryプラグインを導入する際の注意点
ただし、jqueryプラグインを使う際にも、注意点があります。
コンフリクトを避ける
コンフリクト(衝突)という概念を覚えておく必要があります。
これは、複数のjqueryプラグインやjavascriptライブラリが同じものを参照しようとしてバグる現象です。jqueryプラグインで起きやすい現象としては、
- idやclassの指定が重複する
- $()がjavascriptライブラリと重複する
などがあります。これは仕様をよく見るしか無いのですが、2番目に関してはjqueryの記述に関しては「jQuery」と記載することが大事です。
バージョンを確認する
jqueryプラグインの中には、元のjquery本体を利用するものがあります。
この時、jqueryのバージョンが関係してきます。jqueryは1~3までバージョンがあり、今はjquery 3が最新です。バージョンによって、対応ブラウザや設計が変わってきます。
これからjqueryを使う場合はjquery 3をオススメしますが、現時点で古いバージョンを使っている場合は慎重になってください。
「jqueryのバージョンアップをしたら、javascriptが動かなくなった」という事例が存在します。既にjqueryを使っている方は、jquery3に変えてみて、エラーが無ければ移行するといいでしょう。
jqueryのスクリプトをどこに書くのか？
ここでは、jqueryのスクリプトをどこに書くかを説明していきます。
javascriptと同様に記述できる
javascriptと同様で、scriptタグを入れればどこにでも記載できます。wordpressだと「footer.php」に記載するのが多いですね。
footer.phpにする理由は、jqueryの読み込むタイミングなどの理由があるのですが、本題から逸れるので省略します。
固定ページに個別に記述する(テーマによる)
wordpressのテーマによっては、固定ページ毎にjavascriptを追記できるテーマがあります。
バズ部の「Xeory Base」でも個別にjavascriptを記述できる機能があります。scriptタグで囲って記載することで、jqueryを記述できます。
ちなみに、jqueryを使った具体例として、jqueryのスライダーなどがあります。
スライドショーの仕組みは、jqueryを使って「イベントに応じて要素のCSSを変更すること」によります。4000ミリ秒毎に、translate3dを使って左にスライドするjqueryを.css()を使って記載することで、実装できたりします。
他にも、opacityの値を変更して実装するスライドショーの方法なども考えられます。もう少し詳しくこの辺りのことを学びたいという方には、筆者も受講したプログラミングスクールの受講がおすすめです。
それでは最後まで読んでいただき、ありがとうございました。
