WordPress（ワードプレス）

WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

グローバルナビにアニメーションを導入したい。パララックスエフェクトのようなエフェクトを加えたい。スクロールに応じてクラスを変更したい。

こういったことはjQueryを使うことで解決できますが、WordPress内のphpファイルを編集しないといけないので、初心者にはとっつきにくいです。今回の記事では、そんな方もjQueryの導入に一歩踏み出せるように丁寧に解説しています。

高速化におすすめのレンタルサーバー
wpxshin top - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点
2021年5月31日にリリースされた、エックスサーバーのシステムをベースにしたシン・レンタルサーバー！

月額料金がスタンダードプランで1,540円〜（税込）なので、コスパよく爆速なサイト運営が可能に！

管理画面はエックスサーバーと同じで使いやすくなっているので、これからサイト運営をする方にはおすすめです！

＼ Twitterでも口コミ良好！ ／

シン・レンタルサーバー 公式サイト

jQueryとは？

laptop 593673 640 530x342 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

まず、jQueryとは何かについて説明しておきます。

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。

参考-wikipedia

より簡単に表現するのであれば「JavaScriptをより簡単に書くための方法」です。

jQueryでできること

programmer 1653351 640 530x368 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

簡単に、jQueryで何をすることができるか？を纏めておきました。

この「できること」を知っていると、アイデアの幅が広がるのでまだ不安な方は一回確認しておきましょう。

  • CSSを変更できる
  • クラスやID(HTML)を取得・追加・削除できる
  • イベントの条件分岐ができる

CSSを変更できる

jQueryを使うと、CSSを直接変更できます。

$('p').css('color','red');

このように記載することで、今回の例だとpセレクタの文字色が変わります。

複数のCSSを同時に変更したい場合は、以下のように書きます。

$("p").css(
    color:"red",
    font-size:"16px",
    font-weight:"700"
);

このjQueryの.css()を利用した場合は、HTMLタグのstyle指定を直接した場合と同様になります。

クラスやID(HTML)を取得・追加・削除できる

jQueryを使ってHTMLセレクタにクラスやIDを追加したり、削除したりできます。

$('header').addClass('fixed');
$('header').removeClass('fixed');

上記の記述の仕方で、クラスを追加・削除できます。

細かくは省略しますが、.attr()を使うことでIDやクラス、href要素を取得することも可能です。

CSSと組み合わせて使うことで、デザインを変更することが可能です。

イベントの条件分岐ができる

ここがjQueryを導入する一番のポイントでしょう。ただCSSを変更したり、クラスやIDを変更したりするだけでは意味がありません。

「画面をクリックしたら」「100pxスクロールしたら」「要素にhover(覆う)したら」などの条件分岐ができます。

このイベントの条件分岐によって、HTMLやCSSにはできないことが実現できます。

レンタルサーバーの選び方

WordPressにおすすめのレンタルサーバーは、料金やスペックを総合的に比較しましょう。ブログ規模に合ったレンタルサーバーを選べます。

jQueryプラグインとは？

screen 1839500 640 530x354 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

JavaScript初心者にとって、jQueryを使ったとしても難しい仕組みのスクリプトを作るのは大変です。

実はそんな方のために「jQueryプラグイン」というものがあります。jQueryプラグインとは、jQueryの中でもよく使う仕組みをパッケージにして、初心者の方も使いやすいように纏めてくれたものです。

WordPressのプラグインと少しイメージは違って、JavaScriptのライブラリと仕組みは似ています。「JavaScriptを簡単に書けるようにしたものがjQuery」「難しいjQueryを簡単に書けるようにしたのがjQueryライブラリ」です。

少しややこしいですが、雰囲気だけでも覚えておくと役立ちます。

jQueryプラグインをWordPressに導入する手順

wordpress 589121 640 530x350 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

jQueryプラグインは、JavaScriptのライブラリを使うのと似ています。つまり、jQueryを導入する時と似ています。

head内に読み込み用のスクリプトを記述し、scriptタグ内にコードを記載します。実際に導入する時の方法を紹介します。

  1. jQueryプラグインを選ぶ
  2. header.phpを編集する
  3. jQueryのスクリプトを記述する

①jQueryプラグインを選ぶ

まずは、jQueryプラグインを選びましょう。

jQueryプラグインは非常に多く出ているので「目的にあったもの」を検索する必要があります。

  • メニューのスライドバーなどを簡単に出せるようになるjQueryプラグイン「Slidebars.js」
  • パララックスエフェクトを導入できるjQueryプラグイン「scrollr」

このように、目的にあったjQueryプラグインを自分で調べる必要があります。「○○(やりたいこと)　jQueryプラグイン」で検索をすると、比較的見つけやすいかと思います。

②header.phpを編集する

導入したいjQueryプラグインが決まったら、head内に書き込む必要があります。試しに、slidebars.jsを導入する場合について書いていこうと思います。

slidebars.jsの場合は、ファイルをアップロードした上で読み込む必要があります。head内には下のような記載が必要です。

<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の場合も使い方が結構大変なので手順を纏めておきます。

  1. HTML設計を変更する(プラグインごとに指定があります)
  2. HTMLのクラスやIDを変更する(プラグインごとに指定があります)
  3. scriptタグ内にjQueryを記述する

WordPressにjQueryプラグインを導入する際の注意点

desk 2037545 640 530x298 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

jQueryプラグインを使う際は、以下の2つに注意しましょう。

  • コンフリクトを避ける
  • バージョンを確認する

コンフリクトを避ける

コンフリクト(衝突)という概念を覚えておく必要があります。

これは、複数のjQueryプラグインやJavaScriptライブラリが同じものを参照しようとしてバグる現象です。jQueryプラグインで起きやすい現象としては、

  • idやclassの指定が重複する
  • $()がJavaScriptライブラリと重複する

などがあります。これは仕様をよく見るしか無いのですが、2番目に関してはjQueryの記述に関しては「jQuery」と記載することが大事です。

バージョンを確認する

jQueryプラグインの中には、元のjQuery本体を利用するものがあります。

この時、jQueryのバージョンが関係してきます。jQueryは1~3までバージョンがあり、今はjQuery 3が最新です。バージョンによって、対応ブラウザや設計が変わってきます。

これからjQueryを使う場合はjQuery 3をオススメしますが、現時点で古いバージョンを使っている場合は慎重になってください。

「jQueryのバージョンアップをしたら、JavaScriptが動かなくなった」という事例が存在します。既にjQueryを使っている方は、jQuery3に変えてみて、エラーが無ければ移行するといいでしょう。

WordPressでjQueryのスクリプトは記述する場所

ここでは、jQueryのスクリプトをどこに書くかを説明していきます。

JavaScriptと同様に記述

JavaScriptと同様で、scriptタグを入れればどこにでも記載できます。WordPressだと「footer.php」に記載するのが多いですね。

footer 1024x925 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

footer.phpにする理由は、jQueryの読み込むタイミングなどの理由があるのですが、本題から逸れるので省略します。

固定ページに記述

WordPressのテーマによっては、固定ページ毎にJavaScriptを追記できるテーマがあります。

バズ部の「Xeory Base」でも個別にJavaScriptを記述できる機能があります。scriptタグで囲って記載することで、jQueryを記述できます。

javascript 1 1024x367 - WordPressでjQueryはどこに書く？プラグインの導入方法や注意点

 

ちなみに、jQueryを使った具体例として、jQueryのスライダーなどがあります。

スライドショーの仕組みは、jQueryを使って「イベントに応じて要素のCSSを変更すること」によります。4000ミリ秒毎に、translate3dを使って左にスライドするjQueryを.css()を使って記載することで、実装できたりします。

他にも、opacityの値を変更して実装するスライドショーの方法なども考えられます。もう少し詳しくこの辺りのことを学びたいという方には、筆者も受講したプログラミングスクールの受講がおすすめです。

おすすめの記事