動かないプラグインには注意jQueryでカスタマイズの幅をひろげましょうワードプレスにはjQueryという、プログラミング言語のjavascriptを扱いやすくしたライブラリが標準で搭載されています。簡単なコードでjavascriptを実行してくれる関数や機能がまとめられているので便利なものです。アコーディオン」といった機能で検索します。機能が動かなかった・・・という経験もあるかもしれません。jQueryが読み込まれているはずのワードプレスでなぜ動いてくれないんでしょうか?今回はワードプレスでjQueryを使う場合の注意点について書いていきます。テーマでjQueryが読み込まれているか確認ワードプレスでjQueryはコアファイルの一つとして実装されています。実際にWEBサイトとして表示するテーマにjQueryが読み込まれていなければ、いくらコードを書いても動くことはありません。いえ、先ほど書いた通りWEBサイトの運営にとって便利な機能が詰まっているライブラリなので、読み込まれていないことはほとんどありませんが。一応、確認のために見ておきます。ブラウザの「ソースを表示」で見ていきます。デベロッパーツールでもかまいません。クロームで説明します。jQueryの読み込まれているかの確認で見る場所はソースコードの中の<head></head>の内側です。大体閉じタグの</head>近くで読み込まれていると思います。このコードがあればjQueryが読み込まれていることになります。ワードプレスの場合、<head>のコードはテンプレートファイルのheader.phpに書かれています。自作のテンプレートで<head>の内容を直接書いていない限り、基本的にはどのテンプレートでも読み込んでくれます。header.phpの中では直接呼び出すためのコードは書かれていませんが、wp_head()関数で呼び出されています。class="page-area">この関数はjsファイルだけではなく、テーマのメインCSSファイルもこちらで呼び出しているので、入力しないことはほぼ無いコードです。一緒に呼び出されているはず・・・ということになります。コードを自作した場合や、テーマ制作者がこの関数を使用していない場合など、上記のHTMLコードがソースの中にない時はhrader.phpに次のコードを書き込みます。?>このwp_enqueue_script()という関数は、ワードプレスのテーマに外部ファイルを読み込んでくれる関数です。jQueryもコアファイルに含まれているとはいえ、テーマから考えると外部ファイルとなります。テーマに読み込ませるための関数を使います。wp_enqueue_acript()は、同じプログラムの2重読み込み防止の機能もあります。それにより、ライブラリの読み込みの重複が避けられ、ページの速度低下も防いでくれています。ちなみに、CSSを読み込ませる場合はwp_enqueue_style()という関数を使います。日本語版このように、ソースコードからjQueryが読み込まれているのかの確認をすることができます。他のブラウザでもほぼ同じような方法で調べることができるので、まずは確認してみましょう。ワードプレスでjQueryを読み込むコードがちゃんと設置されているのに、機能が動かないのは次の内容が原因であることがほとんどです。ワードプレスのjQueryの書き出しは「$」ではない多くの場合、jQueryを使用する時の書き出しは「$」から始めることがほとんどですが、ワードプレスでは「jQuery」で始める必要があります。コードが動かない原因となっていることが多いです。このようになっているかというと、他のJavascriptライブラリやフレークワークとの競合をさけるためのワードプレス側の配慮です。「$」はjavascriptでライブラリやフレームワークを問わず、変数や関数の名前として良く使用されているのでそのまま使用すると機能が競合してしまうんですね。ワードプレスでjQueryを使用する場合、「$」と同じ意味をもつ「jQuery」に置き換える操作が必要となっています。気に入ったデザインのサンプルコードをある場合、手軽にコピペで試してみたいと思うのが人情です。その時には、カプセル化して「$」を使えるようにします。{//ここにコピペ});</script>この{}内にサンプルコードを貼り付ければ、「$」から始まるコードでも動くようになります。「$」を仮引数にして「jQuery」を渡し、「$」が{}内で「jQuery」表記と同じ意味を持つようになっています。これで気軽に試す事ができますね。ワードプレスの作法としてjQueryの読み込みなどの機能的なものは、テーマファイルのfunctions.phpに書いておくことが良いとされています。直接テンプレートファイルを編集するのではなく、機能として各ファイルに反映されるようにするためです。);?>ページ毎に読み込みを振り分けがしたくなった時も、functions.phpに書いてあると管理が楽になります。最新バージョン(この記事時点では5.7)のワードプレスでは、3系(ver=3.〇.〇という表記のバージョン)の新しいjQueryが搭載されていますが、5.4より前のバージョンだと1系(ver=1.〇.〇という表記のバージョン)のものとなります。一応、バージョンによる変更でトラブルは起きにくいと言われていますが、非推奨となった機能などもあるので、100%ではありません。使用するjQueryのコードがどのバージョンを元にしているかを確認して使用する方が安全です。3系のjQueryを搭載するに当たり、ワードプレスの設計自体が見直されているため、過去のバージョンを元にして作成されたプラグインなどは、正常に動かない場合があります。先ほども書きましたが、ワードプレスにおいてjQueryはダッシュボードなどでも使われています。プラグインもワードプレスの搭載バージョンに合わせて設計されています。プラグインのインストール時は使用しているワードプレスのバージョンにプラグインが対応していないと、インストールできなくなるので避けることができます。今まで使用していたプラグインが、ワードプレスのコアアップデート後に動かなくなる可能性はあります。その時に、バージョンの古いjQueryを読み込ませて対処する方法もありますが・・・本当にそのプラグインを使い続けて良いのでしょうか?ワードプレスを安全に使うために、コアファイル・テーマ・プラグインは最新のものを使う事が推奨されています。プラグインの更新が止まっていて、最新のコアファイルのバージョンに対応していないものを使う方がリスクが大きいです。ユーザーに安心してWEBサイトを利用してもらうために、他のプラグインを使用することや、自分でコードを組むなどの対応を考える方が良いでしょう。jQueryでカスタマイズの幅をひろげましょうワードプレスでjQueryが読み込まれないほとんどの理由は、一般的なjQueryの書き方である「$」から書いてしまっているというものです。jQueryに置き換えるかカプセル化して$を使えるようにするといった対応をとりましょう。それでも読み込まれない場合は他に原因があります。jQueryのバージョンが違うとか、記述がそもそも間違っていたなどです。今回はjQueryが読み込まれない時の対処がメインだったので詳しくは書きませんでしたが、jQueryを読み込むために使用した方法は、自作のjsファイルの読み込みなどにも利用できます。jQueryと併用して、こだわりのカスタマイズを行う事ができますよ。ようにファイルを追加・変更するようなカスタマイズを行う場合は、子テーマを作成してから行うのがオススメです。【WordPress】子テーマを使ってワードプレスのカスタマイズを便利に!ワードプレス関係の他の記事はこちらからどうぞ!「ホームページは必要なのだろうか・・・?」SNSや様々なWEBサービスの登場で、ホームページ以外にもネット上で活動する方法はどんどん増え続けています。そのようにサービスが増えても、ホームページは中心に据えられる数少ない必要不可欠なツールであると、当社は考えています。東建工業-インターネット事業部-では、ホームページ制作のご依頼を随時お受けしております。・ECサイトの作成など、ご要望に合わせて作成します。ご相談頂いた内容を踏まえて、こちらからご提案もさせて頂きます。新規ホームページの作成だけでなく、すでに使用されているホームページのリニューアルについてのご相談もお受けしております。ホームページ開設後の運営・運用についてのご相談もお受けしております。当社はオリジナルイラストの制作を行っております。制作例を一部掲載していますので、是非ご覧ください!「イラスト制作例」ページはコチラ!当社のデザイン作成について当社はWEB制作に加え、デザイン作成と制作も行っております。様々なデザインに関する制作をご依頼頂けます。詳しくは当社のデザイン作成についてのブログ記事をご覧ください。【WordPress】ファビコンを設定する方法は?ワードプレスマークを変える方法とファビコンの効果について!お問い合せこの記事の内容や当社についてのお問い合わせはこちらのフォームをご覧下さい。ご利用前に当社のプライバシーポリシーと免責事項をお読み下さい。送信ボタンを押された時点で、当社プライバシーポリシー又は、免責事項にご同意頂いたものとみなします。ポートフォリオはこちら!当社で働くWEBデザイナーが、業務の合間にデザイン・動画編集・イラスト作成・ロゴ作成などを行っていたので、一つのサイトにまとめました!デザインの参考や、サイトのイメージ作りにご覧ください。FAX番号:0428-30-5659。