大阪市西区　Wild Cards ワイルドカーズ

新たにjQueryプラグインを追加する際、本体の.jsファイルは外部に設置して、head内に記述したコードで呼び出すよう指示されることが多いですよね。

導入するからには多少は知識あるんでしょって配布元は思うでしょう。そりゃそうですね。たとえば新しくプラグイン入れるたびにバージョンの違うjQueryライブラリを一緒にアップロードしたりしなくていいんだよとわざわざ教える義理はありません。

そして哀れなWordPress初心者が便利そうなプラグインを見つけたそばから足していくとどうなるか？

・
・
<script type="text/javascript" src="http://wild-cards.net/wc/wp-content/themes/wildcards/js/jquery.autopager-1.0.0.js"></script>
<script type="text/javascript" src="http://wild-cards.net/wc/wp-content/themes/wildcards/js/jquery.scrollUp.js"></script>
<script type="text/javascript" src="http://wild-cards.net/wc/wp-content/themes/wildcards/js/jquery.selectbox-0.2.js"></script>

<script type="text/javascript">
<!-- オートページャー -->
jQuery(function() {
    $.autopager({
        autoLoad: true,
        content: '.post',
        link: '.ajaxLoad a'
    });
});

<!-- TOPへ戻る -->
$(function () {
    $.scrollUp();
});

<!-- タブ選択 -->
$(function () {
    $("select").selectbox();
});
</javascript>

</head>

「script.js」にjQueryのソースを全部放り込む

・htmlのソースコードが見やすくなる！
・ページの読み込みが速くなる、かもしれない！
・そしてこれが一番大事、各スクリプトの稼動状態を把握できる！

というわけで、下のソースがscript.jsの記述例です。外部.jsファイル（ここではjquery.autopager-1.0.0.js）の中身をそのまんまコピペしたその続きに、head内に記述していた呼び出し用のコードをscriptタグを削除したうえでコピペします。長いので畳んでますがご覧ください。

/*本体の.jsファイル内のソースを以下にコピペ*/ 
(function($) {
	var window = this, options = {},
		content, currentUrl, nextUrl,
		active = false,
		defaults = {
			autoLoad: true,
			page: 1,
			content: '.content',
			link: 'a[rel=next]',
			insertBefore: null, 
			appendTo: null, 
			start: function() {},
			load: function() {},
			disabled: false
		};

	$.autopager = function(_options) {
		var autopager = this.autopager;

		if (typeof _options === 'string' && $.isFunction(autopager[_options])) {
			var args = Array.prototype.slice.call(arguments, 1),
				value = autopager[_options].apply(autopager, args);

			return value === autopager || value === undefined ? this : value;
		}

		_options = $.extend({}, defaults, _options);
		autopager.option(_options);

		content = $(_options.content).filter(':last');
		if (content.length) {
			if (!_options.insertBefore && !_options.appendTo) {
				var insertBefore = content.next();
				if (insertBefore.length) {
					set('insertBefore', insertBefore);
				} else {
					set('appendTo', content.parent());
				}
			}
		}

		setUrl();

		return this;
	};

	$.extend($.autopager, {
		option: function(key, value) {
			var _options = key;

			if (typeof key === "string") {
				if (value === undefined) {
					return options[key];
				}
				_options = {};
				_options[key] = value;
			}

			$.each(_options, function(key, value) {
				set(key, value);
			});
			return this;
		},

		enable: function() {
			set('disabled', false);
			return this;
		},

		disable: function() {
			set('disabled', true);
			return this;
		},

		destroy: function() {
			this.autoLoad(false);
			options = {};
			content = currentUrl = nextUrl = undefined;
			return this;
		},

		autoLoad: function(value) {
			return this.option('autoLoad', value);
		},

		load: function() {
			if (active || !nextUrl || options.disabled) {
				return;
			}

			active = true;
			options.start(currentHash(), nextHash());
			$.get(nextUrl, insertContent);
			return this;
		}

	});

	function set(key, value) {
		switch (key) {
			case 'autoLoad':
				if (value && !options.autoLoad) {
					$(window).scroll(loadOnScroll);
				} else if (!value && options.autoLoad) {
					$(window).unbind('scroll', loadOnScroll);
				}
				break;
			case 'insertBefore':
				if (value) {
					options.appendTo = null;
				}
				break
			case 'appendTo':
				if (value) {
					options.insertBefore = null;
				}
				break
		}
		options[key] = value;
	}

	function setUrl(context) {
		currentUrl = nextUrl || window.location.href;
		nextUrl = $(options.link, context).attr('href');
	}

	function loadOnScroll() {
		if (content.offset().top + content.height() < $(document).scrollTop() + $(window).height()) {
			$.autopager.load();
		}
	}

	function insertContent(res) {
		var _options = options,
			nextPage = $('<div/>').append(res.replace(/<script(.|\s)*?\/script>/g, "")),
			nextContent = nextPage.find(_options.content); 

		set('page', _options.page + 1);
		setUrl(nextPage);
		if (nextContent.length) {
			if (_options.insertBefore) {
				nextContent.insertBefore(_options.insertBefore);
			} else {
				nextContent.appendTo(_options.appendTo);
			}
			_options.load.call(nextContent.get(), currentHash(), nextHash());
			content = nextContent.filter(':last');
		}
		active = false;
	}

	function currentHash() {
		return {
			page: options.page,
			url: currentUrl
		};
	}

	function nextHash() {
		return {
			page: options.page + 1,
			url: nextUrl
		};
	}
})(jQuery);

/*head内に記述していた部分*/ 
jQuery(function() {
    $.autopager({
        autoLoad: true,
        content: '.post',
        link: '.ajaxLoad a'
    });
});

.
.
<script type="text/javascript" src="http://wild-cards.net/wc/wp-content/themes/wildcards/js/script.js"></script>
</head>

うまくいかない場合に考えられる4つの原因

• 原因1：jQueryのソース内の記述に”$”と”jQuery”が混在している
⇒　WordPress 同梱の jQuery 以外を使う方法

• 原因2：jQuery本体のバージョンが古い
⇒　http://jquery.com/　最新版をゲッツ
⇒　あるいは　jQueryをGoogle Developersから読込む方法

• 原因3：プラグインの実行順の問題、または単純な記述ミス
⇒　script.jsをまっさらに戻して、1つずつ動作を確かめながら追加していきましょう。何をしたら動かなくなったか分かります。

• 原因4：script.jsファイルをUTF-8N形式で保存していない
⇒　SJISとか論外。ちゃんとしたエディタを使ってUTF-8N形式で保存したものをUPしませう。