親テーマでjQueryを拡張して子テーマで利用する : JavaScript

Pocket

親テーマの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. 引数が複数 : 引数のオブジェクトをマージして返す。
  2. 引数が1つ : jQueryオブジェクト自体を拡張。

参考サイト
»jQuery.extend() – jQuery API
»jQueryを読むために知っておきたい6つの知識 | tech.kayac.com – KAYAC engineers’ blog

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数