ダッシュボードでも!WordPressでJQueryを”$”で動かせるようにする

Image

前回のblog WordPressでJQueryを”$”で動かせるようにする という記事を書きました。ということでいよいよ自作pluginにDatepickerを追加しよう!としたところ思わぬところでつまづきました。表画面とダッシュボードでは状況が違うためのようでした。対応できたのでそれについて書きたいと思います。

Datepickerを管理画面に付けたいのでコーディング

やり方についてはいつものようにググってこちらを発見しました。

jQuery UI の Datepicker (カレンダーから日付入力)

コードを入れる自作のプラグインはhtml部分はファイルを分けて admin.html というもので修正できるようにしています。

取り急ぎ、開始日時の方に日付を入れられるように

とコーディングして、JQueryはadmin.htmlの頭部分に上記ページからソースをコピーました。するとまた、

Image

のエラーが出ます。前回はテーマのheader.phpにWordPressのJQuery読み込みをなかったことにする、というコードを入れていましたが、ダッシュボードでheader.phpは使っていないのででてしまうようです。

なかったことにするコード、

を admin.html に入れてみました。すると今度は、

Notice: wp_deregister_script が誤って呼び出されました。管理画面では jquery スクリプトの読み込みをオフにしないでください。フロントエンドテーマだけをターゲットにするには、wp_enqueue_scripts フックを使いましょう。 詳細は WordPress のデバッグをご覧ください。 (このメッセージはバージョン 3.6 で追加されました) in C:\xampp\htdocs\ryuswp\wp-includes\functions.php on line 3049

というエラーが出てしまいました。ううう、うーん。管理画面ではJQueryを多用しているため、オフにはできない仕組みになっているようです。困ったのでこのメッセージでググってみました。

ダッシュボードではJQueryの読み込みをなかったことにはできない…そのかわりにラップする

すると なかったこと にする方法以外に $っていうのはJQueryって書いてあることと同じことなのよ とラップするやり方を見つけました。ラップしてくれる仕組みのことをラッパーというようです。

WordPressのjQueryで$(ドル)を使う方法

ここに書いてある、一番下のやり方、

をやってみました。具体的にやったことは、$が付いたJQueryのコードを (function($) { と })(jQuery); の間にそっくり移動しました。このやり方でできるなら前回のようになかったことにしなくても表側の画面でもこの方法でできそうですね。。

そしてエラーを起こしていたなかったことにするコードと、GoogleからJQuery を読み込むコード部分を削除します。このようになりました。

ダッシュボードのプラグイン管理画面で$を使ったJQueryが動きました

これで「臨時ニュース」の設定をクリックすると、このようになり

Image

開始日時の横の … をクリックすると

Image

カレンダーが表示されて、日付をクリックすると

Image

このように日付を入れられるようになりました。。。ふ~、ここまでまた遠回りしてしまいました。

次回はちゃんとこのあたりを組み込んでみたいと思います(^_^;

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る