INSPIRE TECH » jQuery

WordPressでjQueryのプラグインが正しく動作しない場合の対処法

家富正幸 — Sun, 24 Jun 2012 08:04:25 +0000

WordPressのテーマで、jQueryを利用したプラグインを組み込んでいるのにもかかわらず、エラーが発生して利用出来ないことがあります。

原因

これはテーマ側で wp_enquere_script() 関数を用いて、WordPress本体に附属するjQueryを利用している場合によく発生する問題です。

/* WordPress附属のjQueryを、wp_head() 内で読み込む */
wp_enqueue_script('jquery');

WordPressの wp_enqueue_script() 関数を用いてjQueryを読み込んだ場合、通常利用できるはずのjQueryのインスタンスである$変数が利用できません。

これは、WordPress附属のjQueryでは他のライブラリとの競合を防ぐために jQuery.noConflict() を自動的に実行させているため、$変数が設定されないのが原因です。

対処

テーマ側で独自にjQueryを用意して読み込んだり設置してもかまわないのですが、プラグインなどで wp_enqueue_script('jquery') でjQueryを呼び出されてしまうと、既にテーマ附属のjQueryが読み込まれているのにもかかわらず、WordPressに附属しているjQueryも読み込まれてしまいます。

そのため、scriptタグの記述される順番によっては、WordPress附属のjQueryが優先され、jQuery.noConflict() 関数が実行されてしまうために$変数が使えなくなる事もあります。

そのため、いかなる場合にも正常に動作させられるようにするには、jQueryを利用するコードを工夫する必要があります。

問題の起きないコード

下記のように、jQueryのインスタンスを$変数として利用できるスコープを作り、その内部にjQueryを利用したコードを書きましょう。

(function($) {
    /* いつも通りのjQueryを利用したコードを書く */
    $(function() {
        /* 初期化コードなど */
    });
})(jQuery);

こうすることで、WordPressに附属するjQueryが利用された場合でも問題無く$変数を使ったコードを実行することができますし、他のフレームワークとのバッティングも起きません。

Twitterからのトラックバックを簡単に設置できるjQueryプラグインをさらに改造してページネーションにも対応してみた

家富正幸 — Tue, 02 Aug 2011 01:10:23 +0000

以前に作成した、特定のURLへのTwitterの投稿を一覧で取得できるjQueryプラグインを、さらに改造してみました。

前回のプラグインではツイートが多くなっても、100件までは全て取得して表示するような仕組みになっていたため、そのまま表示してしまうとページが縦に異常に長くなる現象が発生していました。

そこで、今回の改造で1ページに表示する件数を指定可能にし、さらにページネーションの仕組みを取り付けてみました。

ソースコード

利用方法

ツイートの一覧を表示したいDOMオブジェクトを用意し、下記のように利用します。

$('#tweets').twitterTrackback();

オプション

下記のように、twitterTrackbackメソッドにオブジェクトを渡すことで、動作オプションを指定できます。

$('#tweets').twitterTrackback({ exclude: [ 'jyokyoku' ], renderCallback: renderTweets });

オプションの一覧

url (string)

ツイートを取得したいURLを指定します。デフォルトでは、スクリプトを設置したURLが利用されます。

wrapperTag (string)

ツイートの一覧を囲むタグを指定します。デフォルトではulです。

removeHash (boolean)

ツイートを取得するurlにハッシュが含まれる場合に、それを削除するかを指定します。デフォルトではtrueです。

renderCallback (function)

ツイートをレンダリングする関数を指定します。

pagerCallback (function)

ページャをレンダリングする関数を指定します。

pagerPos (string)

ページャを表示する位置を指定します。

both – ツイート一覧の上下
top – ツイート一覧の上
bottom – ツイート一覧の下

perpage (integer)

1ページに表示するツイートの数を指定します。デフォルトでは10です。

noTrackback (string)

ツイートが1件も無い場合に表示するメッセージを指定します。デフォルトではTwitterからのトラックバックはありません。が表示されます。

exclude (array)

ツイートを表示したくないユーザーIDを配列で指定します。

生成されるHTMLコード

renderCallbackオプションやpagerCallbackオプションに何も指定しない場合、下記のようなHTMLコードが生成されます。

適宜CSSを利用してスタイリングしてください。

ツイート一覧


	
		
		
			家富正幸
			ツイートの内容が表示されます。
			1 days ago
		
	
	
		
		
			家富正幸
			ツイートの内容が表示されます。
			1 days ago

ページャ


	1
	2

コールバック関数を利用する

renderCallbackオプションやpagerCallbackオプションに適切な関数を渡すことで、表示されるツイートの内容やページャのコードを変更する事ができます。

renderCallbackオプションを指定する

renderCallbackオプションを指定する場合、引数を1つ取る関数を指定してください。
引数にはツイートの番号が数値で渡されます。

また、関数のthisスコープはツイートの情報が格納されたオブジェクトになるため、this.author.nameなどでツイートに関する情報を表示することができます。

デフォルトで実行される関数を載せておきます。

function renderHtml(n) {
	return (
		'' +
			'' +
			'' +
				'' + this.author.nick + '' +
				'' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "$1") + '' +
				'' + this.date_alpha + '' +
			'' +
		''
	);
}

pagerCallbackオプションを指定する

pagerCallbackオプションを指定する場合、引数を3つ取る関数を指定してください。
引数は下記の値が渡されます。

(integer) 現在のページ番号
(integer) 1ページにいくつツイートを表示するか
(integer) 現在のURLに対する全ツイート数

また、ページャで生成されたリンクがクリックされた場合には、必ず下記の関数を実行して、ツイート一覧を書き換えるようにしてください。

jQuery.twitterTrackback.update(pageNumber)

デフォルトで実行される関数を載せておきます。

function pagerHtml(current, perpage, total) {
	var totalPages = total / perpage;
	var links = '';

	for (var i = 1; i < totalPages; i++) {
		if (current != i) {
			links += '' + i + '';

		} else {
			links += '' + i + ''
		}
	}

	return (
		'' + links + ''
	);
}

バグやご要望など

バグやご要望などありましたら、ツイッターかコメントフォーム、Facebook、またはお問い合わせフォームからご連絡ください。

Twitterからのトラックバックを簡単に設置できるjQueryプラグインを改造してみた

家富正幸 — Sat, 18 Jun 2011 15:21:12 +0000

本プラグインにさらに手を加えたものを公開しています。Twitterからのトラックバックを簡単に設置できるjQueryプラグインをさらに改造してページネーションにも対応してみた（2011.08.02）

「@soraiyのjquery.twitterTrackback.jsを改良してみた。」で公開されているTwitterからのツイートを表示するjQueryプラグインに、さらに手を加えたものを作ったので、ここにおいておきます。

URLを自動取得に

元のスクリプトでは実行時にURLを指定しなくてはいけませんでしたが、これを location.half の値を使って自動取得に変更しました。

下記のように、オプションさえ指定しなければ引数無しで記述可能です。

$('#twitterTrackback').twitterTrackbackList();

removeHash オプションを指定することで、URLに含まれるハッシュを削除することができます。これは、ページ内リンクなどでURLにハッシュが含まれる場合、正しくツイートが取得できない問題を回避するためです。

$('#twitterTrackback').twitterTrackbackList({
    removeHash: true // デフォルトでtrue
});

レンダリング用のコールバック関数を指定できる

callback オプションにコールバック関数を指定することで、自由にHTMLを生成できるようにしました。
このサイトでは下記のような関数を使ってレンダリングしています。

$('#twitterTrackback').twitterTrackbackList({ callback: renderTweets });

function renderTweets(n) {
	return (
		'' +
		'' + this.author.nick + '' +
		'' + this.date_alpha + '' +
		'' +
		'' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "$1") + '' +
		''
	);
}

コールバック関数の this スコープにはツイートの情報が入っていますので、HTMLと組み合わせて自由にデザインが可能です。

除外するユーザーを設定可能に

exclude オプションに除外したいユーザー名を配列で指定することで、そのユーザーからのツイートを非表示にします。
自分のツイートを非表示にする場合なんかに利用できます。

$('#twitterTrackback').twitterTrackbackList({ exclude: [ 'jyokyoku' ] });

ソースコード

こちらのリンクからダウンロードするか、下記ソースコードを保存して利用して下さい。

動作確認は下記環境で行っています。

InternetExplorer7
Firefox4
Opera10

(function($) {
	jQuery.fn.twitterTrackbackList = function(options){
		var topsyOtterapi = 'http://otter.topsy.com/trackbacks.js';
		var self = this;
		var tweetHtml = '';

		function renderHtml(n) {
			return (
				'' +
					'' +
					'' +
						'' + this.author.nick + '' +
						'' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "$1") + '' +
						'' + this.date_alpha + '' +
					'' +
				''
			);
		}

		options = $.extend({
			url: window.location.href,
			wrapperTag: 'ul',
			removeHash: true,
			callback: renderHtml,
			noTrackback: 'Twitterからのトラックバックはありません。',
			exclude: []
		}, options);

		if (options.removeHash) {
			options.url = options.url.replace(/#.+/, '');
		}

		jQuery.ajax({
			type: 'GET',
			url: topsyOtterapi,
			cache: false,
			dataType: 'jsonp',
			data: {
				perpage: '100',
				order: 'date',
				url: options.url
			},
			success: function(trackbackData) {
				if(trackbackData.response.list.length == 0) {
					tweetHtml += options.noTrackback;

				} else {
					jQuery.each(trackbackData.response.list, function(n) {
						for (var i = 0; i < options.exclude.length; i++) {
							if (options.exclude[i] != this.author.nick) {
								tweetHtml += options.callback.call(this, n);
							}
						}
					});

					if (!tweetHtml) {
						tweetHtml = options.noTrackback;

					} else if (options.wrapperTag) {
						tweetHtml = '<' + options.wrapperTag + '>' + tweetHtml + '';
					}
				}
				jQuery(self).append(tweetHtml);
			},
			complete: function() {}
		});
	};
})(jQuery);

不具合等があれば、コメントかツイッターで報告下さると有り難いです。