Nov 2, 2013

新たに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>

キャー恥ずかしい! 2~3年前の僕じゃないですか!
でも当時はこれが普通だと思ってたんですよね。知らんもんは知らん。

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

ちょっと気にして他人様のサイトのHTMLを拝見してたら、妙にスッキリしてるんですよね。これは明らかに何かやってるなと。どこに隠しやがった!出せコラ!

よくよく調べてみると、複数にわたるjQueryのソースコードを、たとえば「script.js」と名付けたファイルに全部放り込んでるんですね。なんとかかんとか.jsって名の付くファイルの中身を全部移して、その1ファイルだけをheadから呼び出せばいいっていう(もちろん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'
    });
});
こんな感じに本体.js+head内呼び出しコードを全部コピペしたscript.jsを任意のディレクトリ、たとえば /js/ にアップロード。そのパスを改めてhead内に記述します。
.
.
<script type="text/javascript" src="http://wild-cards.net/wc/wp-content/themes/wildcards/js/script.js"></script>
</head>
はい、これで完了です。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しませう。

これらを全部試してもダメだったら僕ではもうハンズアップです。


WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

このあたりになるとちょっとハードル高いですが、脱初心者を目指す方には最適かと。とことんやってみたいツワモノはCodexやフォーラムに凸撃していっちょう揉まれてみるのもいいでしょー。



Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

サイト内検索
  • Author

  • Twitter

    Follow @jay0926 (534 followers)
  • Facebook