親テーマでjQueryを拡張して子テーマで利用する : JavaScript
親テーマのjQueryを拡張して小テーマで使う方法。
wp-content
|
|-- themes
|-- parent
| |-- style.css
| |-- index.php
| |-- jquery.js
| |-- base.js // ユーティリティなどを定義して小テーマを含め全体で利用
| |-- .....
|
|-- child
|-- style.css
|-- index.php
親テーマのJavaScriptファイル(例ではbase.js)に汎用的なユーティリティを定義する。
jQuery(function ($) {
// 拡張用の名前空間
var Util = {};
// jQueryの拡張
jQuery.extend({'util': Util});
// 静的メソッドの追加
Util.hoge = function () {
};
// その他の処理
});
小テーマのindex.phpの中で親テーマで定義したjQueryの機能を利用する。
<head>
.......................................................
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/base.js"></script>
.......................................................
<script type="text/javascript">
jQuery(function ($) {
$.util.hoge(); // 親テーマのbase.jsで拡張した機能を実行
});
</script>
jQuery.extendメソッド
jQuery.extendメソッドは引数の数に応じて2通りの動作をする。今回は2のプラグインの拡張を利用。
- 引数が複数 : 引数のオブジェクトをマージして返す。
- 引数が1つ : jQueryオブジェクト自体を拡張。
参考サイト
»jQuery.extend() – jQuery API
»jQueryを読むために知っておきたい6つの知識 | tech.kayac.com – KAYAC engineers’ blog
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。