WordPressで使用しているJSは何があるのか?

この記事が良ければ、ぜひシェアお願いします

とりあえず、HTML+CSS(+PHP少々)でWordPressのテーマ作成やカスタマイズを勉強してきましたが、CSSフレームワークに触れてみたりPHP自身の勉強をしたり、幅を広げて来ている日々なのですが、何事にも近道は良くないと考えるようになってきました。

先日、『HTML KickStart』というCSSフレームワークを使ってみて、その便利さを身を以て実感したのですが、「楽に楽に行こうとしていいのか?」と考えるようになってきたのです。自分はサービス主体の企画・設計が多かったので、UIはおざなりにしてはいけないと考えていました。アプリケーション主体の場合は、注力すべきはアプリケーション開発なのでCSSフレームワークでも全然構わないと思うのですが、『サービスを作る』(≠サイトを作る)場合には、CSSフレームワークで省エネ化してしまうと”UIにこだわる”ことが希薄になってしまうのではないかと危惧しました。

そんなこともあり、地道に階段を上ることから逃げてはいけないと考えました。そろそろ、記事も溜まってきたのでリファレンスとしてまとめていこうかなとところ、そのためにはjQueryの導入も必要そうなのが見えたので、今回はJavascript&jQueryについて見ていきたいと思います。

WordPressで使用されているJSは何か?

WordPressのパッケージをダウンロードして、一つ一つファイルを見る人はそうそういないと思いますが(笑)、「最新のjQueryを使おうとするとWordPressに同梱されているjQueryとコンフリクト(ぶつかり合う)を起こして想定通りに動かない」という話をよく聞きます。「あ~WordPress自体にも色んなJSが含まれているから、そこにjQueryがあるんだろうなぁ」と思っていたのですが、じゃあ実際何が入っているのか確認してみよう!と思いました。


WordPressのフォルダを開くと、”wp-admin””wp-content””wp-includes”と各種PHPファイルなどがあるのが分かります。この”wp-includes”の中に”js”というフォルダがありますが、ここに”jquery”というフォルダがあります。ここには下記のファイルが入っております。jQueryを分割して最適化させているように見受けられます。そのままjQuery使おうと思うとクソ重たいですからね。。。

  • jquery.color.dev.js 4.36 KB
  • jquery.color.js 2.25 KB
  • jquery.form.dev.js 23.51 KB
  • jquery.form.js 10.85 KB
  • jquery.hotkeys.dev.js 5.43 KB
  • jquery.hotkeys.js 1.84 KB
  • jquery.js 91.69 KB
  • jquery.query.js 3.70 KB
  • jquery.schedule.js 3.38 KB
  • jquery.serialize-object.js 783 Byte
  • jquery.table-hotkeys.dev.js 3.64 KB
  • jquery.table-hotkeys.js 2.24 KB
  • suggest.dev.js 7.13 KB
  • suggest.js 3.14 KB
  • jquery.effects.blind.min.js 888 Byte
  • jquery.effects.bounce.min.js 1.65 KB
  • jquery.effects.clip.min.js 1.05 KB
  • jquery.effects.core.min.js 10.69 KB
  • jquery.effects.drop.min.js 1.06 KB
  • jquery.effects.explode.min.js 1.61 KB
  • jquery.effects.fade.min.js 577 Byte
  • jquery.effects.fold.min.js 1.12 KB
  • jquery.effects.highlight.min.js 914 Byte
  • jquery.effects.pulsate.min.js 951 Byte
  • jquery.effects.scale.min.js 3.87 KB
  • jquery.effects.shake.min.js 1.12 KB
  • jquery.effects.slide.min.js 1.05 KB
  • jquery.effects.transfer.min.js 816 Byte
  • jquery.ui.accordion.min.js 9.01 KB
  • jquery.ui.autocomplete.min.js 8.79 KB
  • jquery.ui.button.min.js 7.06 KB
  • jquery.ui.core.min.js 4.26 KB
  • jquery.ui.datepicker.min.js 35.69 KB
  • jquery.ui.dialog.min.js 11.42 KB
  • jquery.ui.draggable.min.js 18.40 KB
  • jquery.ui.droppable.min.js 5.94 KB
  • jquery.ui.mouse.min.js 2.75 KB
  • jquery.ui.position.min.js 3.53 KB
  • jquery.ui.progressbar.min.js 1.80 KB
  • jquery.ui.resizable.min.js 17.56 KB
  • jquery.ui.selectable.min.js 4.21 KB
  • jquery.ui.slider.min.js 9.87 KB
  • jquery.ui.sortable.min.js 23.36 KB
  • jquery.ui.tabs.min.js 11.36 KB
  • jquery.ui.widget.min.js 3.23 KB

ちなみにWordPressのVerは3.3.1-jaです。
ファイル数合計 = 45 個
ファイルサイズ合計 = 378277 Byte
※ちなみに、さらに”ui”とフォルダも掘られており、そこにもJSがずらりとありました。

“jquery.js”を見てみると、バージョン表記は”v1.7.1″のようですね。必ずしも下位互換するというわけでもないと思うので、最新のjQueryだけを使おうとすると、他の箇所で不具合が起きそうな気がするので、デフォルトで含まれているjQueryと共存しつつ、最新のjQueryと仲良くする必要がありそうです。

他にも、”thickbox.js”や”prototype.js”、”cropper.js”なよく目にするJavascriptが含まれています。もうここまで来ると、『もっとシンプルな構成にしてくれよ!』と思っちゃったりもしますが、便利な機能を追加してバージョンアップをしてくれている開発者の方々には頭が上がらないので(笑)、どのように上手く共存するかを考えないといけないですね。

ということで、次回はjQueryを使うための方法を書いていきたいと思います。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク