当サイトには広告が含まれております

WordPressでJQueryを”$”で動かせるようにする

この記事は最終更新日から11年経過しています。内容が古い可能性があります。

Image

このサイトのテーマはtwentyfourteenの子テーマなのですっかり普通にJQueryが使えるような気がしてしまっていました。普通に、というのは $( とかの書き方でなのですが…

自作のPluginにDatepickerを使いたくて試していたら、普通にJQueryを動かすまでちょっと手間がかかったので書いてみます。

記事をざっと見る

WordPressにはJQueryが既に読み込まれている

ググって調べると

・WordPressにはJQueryが既に読み込まれている
・だけど、それを使わずにgoogleのJQueryを使った方がいい

という記事が多数見つかりました。なぜ?と思ったのでちょっと実験してみました。

なにもしなくてもJQueryが動くかどうか

使っている子テーマの header.php を開いて

<?php wp_head(); ?>

の後に、

<script type="text/javascript">
$(document).ready(function() {
     alert("Hello world!");
});
</script>

と入れてみます。

正常に動いていればページを読み込んだところで、alert Hello world! と表示されるはずです。

トップページを表示しましたが、何もでません。chromeの開発者ツールでjavascriptエラーを見てみます。

↓こんなエラーが出てました

Image

$ が認識されていないようです。$ のかわりに jQueryにしてみます。

今度はちゃんと

Image

と表示されました。なぜ、$ではなく jQuery と書かないといけないかというと、WordPressのjQuery読み込みの時に、

noConflict();

という一文があるからのようです。jQueryはjavascriptのライブラリですが他にもprototypeなど別のライブラリもあります。これらがコンフリクト(競合、衝突)しないようにこの一文を書いてあるようです。

参考
jQuery日本語リファレンス prototype.jsと同時に使うには

私としてはJQueryしか使わないようなのでやはり $ でJQueryを動かしたいです。

デフォルトで読み込まれるWordPressのJQueryを打ち消す

header.phpの

<?php wp_head(); ?>

の記述より上に、

<?php wp_deregister_script('jquery'); ?>

と書くことでWordPress内部のJQueryの読み込みをなかったことにしてくれるようです。

WordPress内部のものでないJQueryは何を使うか

とういことで、独自にJQueryを読み込みたいと思います。方法は、2つあります。

・ダウンロードしてきてテーマフォルダとかに入れておく
・Googleライブラリを使う

今回は事例も多く、ダウンロードの手間もかからないGoogleライブラリを使う方法でやってみました。

最新の1系をよしなにお願いします

いくつかのサイトを見ていて悩んだのは、記事が作られた時期によって読み込みのgoogleライブラリのバージョンが色々なことでした。バージョンを細かく指定してあるとどんどん新しくなってそれを修正したりするのは面倒そうです。

そこで「googleライブラリのJQueryのバージョン1系の最新をインクルード」みたいな指定が出来るようなのでそれでやってみます。

先ほど追加した wp_deregister_script 行の後に、

<?php wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');?>

と記述することで最新の1系のものをよしなに持って来てくれるようです。

ということでようやくDatepickerを!

適当に作ったプラグイン「臨時ニュース」に開始日時、終了日時を設定したいのです。

↓いま
Image

↓こんな感じに
Image

入力も面倒なのでクリックすればカレンダーとかで指定できたらいいなぁと思って調べたところDatepickerやTimepickerというJQueryのユーザーインターフェースがあるらしいのです。

ということでここからいよいよこれから、このプラグインに日付と時刻の入力部分を作ってみたいと思います♪

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る