@soraiyのjquery.twitterTrackback.jsを改良してみた。

で公開されていたスクリプトを導入して使わせていただいているのだけれど、なぜかFirefox3.5とiPhoneでうまく表示されなくて困っていました(ちなみに全ブラウザで動作確認したわけではありませんが、IE8、Firefox4、Safariでは動いていました)。

いろいろと調べていると、Twitterの公式ツイートボタンと関係があるっぽい。ツイートボタンを消してみたり、ツイートボタンより上にtwittertrackbackを表示させる要素を動かすと表示されたので、コンフリクトしてるのかな?

だけど、デザインとか変えたくなかったので、jQuery名前空間に関数を定義してプラグイン化したらどうだろうと思い試したところ、Firefox3.5とiPhoneでも表示されるようにできました。

以下ソース。

jQuery(function(){
	jQuery.fn.twitterTrackbackList = function(post){
		var topsyOtterapi = 'http://otter.topsy.com/trackbacks.js';
	
		var dispId = this;
		var tweetHtml = '';
	
		jQuery.ajax({
			type: 'GET',
			url: topsyOtterapi,
	    	cache: false,
			dataType: 'jsonp',
			data: {
				perpage: '100',
				order: 'date',
				url: post.url
			},
			success: function(trackbackData)
			{
				tweetHtml += (
					'<h3>このエントリーの Twitter からのトラックバック<span class="entryTracbackNum"> (' + trackbackData.response.list.length + ') </span>' +
					'<span class="entryTrackback"><a href="' + trackbackData.response.topsy_trackback_url + '">' +
					'トラックバックページへ飛ぶ</a></span></h3>'
				)
				if(trackbackData.response.list.length == 0) {
					tweetHtml += ('<p>このページにはまだ Twitter からのトラックバックはありません。</p>');
				} else {
					jQuery.each(trackbackData.response.list, function(n)
					{
						tweetHtml += (
							'<li class="tweet' + n + '">' +
								'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
								'<ul class="section">' +
									'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' + 
									'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
									'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' + 
								'</ul>' +
							'</li>'
						);
					});
				}
				jQuery(dispId).append('<ul>' + tweetHtml + '</ul>');
			},
			complete: function() {
			}
		});
	};
});

で、以下のような感じで実行(#twitterTrackback内に表示する場合)。

jQuery(function(){
	jQuery('#twitterTrackback').twitterTrackbackList({
		url: '<?php the_permalink(); ?>'
	});
});

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく