Blackbird Pie の吐き出す HTML を修正する

WordPress に簡単に Twitter のツイートを表示する Twitter Blackbird Pie というプラグインがあります。
このプラグイン、ショートコードで簡単にツイートを表示できて便利なんですが、吐き出す HTML がちょっとアレな感じです。

Blackbird Pie は、こんな感じの HTML を吐き出します。

<!-- tweet id : 87798635173130240 -->
<style type="text/css">
	#bbpBox_87798635173130240 a { text-decoration:none; color:#0084B4; }
	#bbpBox_87798635173130240 a:hover { text-decoration:underline; }
</style>
<div id="bbpBox_87798635173130240" class="bbpBox" style="padding: 20px; margin: 5px 0pt; background-color: rgb(192, 222, 237); background-image: url(&quot;http://a3.twimg.com/profile_background_images/53527310/gundam.jpg&quot;);">
	<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 10px; margin: 0pt; min-height: 48px; color: rgb(51, 51, 51); border-radius: 5px 5px 5px 5px;">
		<span style="width: 100%; font-size: 18px; line-height: 22px;">Blackbird Pie の WordPress プラグインが吐き出す HTML が、ちょっとアレなので修正した。後でブログに書く。
		<div class="bbp-actions" style="font-size: 12px; width: 100%; padding: 5px 0pt; margin: 0pt 0pt 10px; border-bottom: 1px solid rgb(230, 230, 230);">
			<img src="http://example.com/wp-content/plugins/twitter-blackbird-pie/images/bird.png" align="middle"><a title="tweeted on 2011年7月4日 17:23" href="http://twitter.com/#%21/wokamoto/status/87798635173130240" target="_blank">2011年7月4日 17:23</a> via <a href="http://ubersocial.com" rel="nofollow" target="blank">UberSocial for BlackBerry</a><a href="https://twitter.com/intent/tweet?in_reply_to=87798635173130240" class="bbp-action bbp-reply-action" title="Reply"><span><em style="margin-left: 1em;"></em><strong>Reply</strong></span></a><a href="https://twitter.com/intent/retweet?tweet_id=87798635173130240" class="bbp-action bbp-retweet-action" title="Retweet"><span><em style="margin-left: 1em;"></em><strong>Retweet</strong></span></a><a href="https://twitter.com/intent/favorite?tweet_id=87798635173130240" class="bbp-action bbp-favorite-action" title="Favorite"><span><em style="margin-left: 1em;"></em><strong>Favorite</strong></span></a></div><div style="float: left; padding: 0pt; margin: 0pt;">
			<a href="http://twitter.com/intent/user?screen_name=wokamoto"><img style="width: 48px; height: 48px; padding-right: 7px; border: medium none; background: none repeat scroll 0% 0% transparent; margin: 0pt;" src="http://a2.twimg.com/profile_images/1357232956/wo_glasses_normal.png"></a>
		</div>
		<div style="float: left; padding: 0pt; margin: 0pt;"><a style="font-weight: bold;" href="http://twitter.com/intent/user?screen_name=wokamoto">@wokamoto</a><div style="margin: 0pt; padding-top: 2px;">wokamoto</div></div>
		<div style="clear: both;"></div>
	</div>
</div>
<!-- end of tweet -->

注意： 構造が分かり易いように改行・インデント入れてます。

何がよろしくないかと言うと2〜5行目なんですが、ハレンチにも <head> 外に <style> タグを吐き出しちゃってます。
まぁ、個別のツイートでリンクの色とか変えたいと思うと、これしか方法が無いと思っちゃったのはしょうがないんですが…

で、これを修正する方法なんですが Blackbird Pie のソースを読んでみると、独自のフィルターフック bbp_create_tweet を用意していてくれてるのがわかります。
これをフックして jQuery で、リンクの色を変えてやるようにコードを書き直してやれば、問題無さそうです。
functions.php に、以下の記述を追加してやってください。

/*
 Fix BlackBird Pie
*/
if (class_exist('BlackbirdPie')) {
	function my_bbp_create_tweet_html( $tweet_details, $options = array()) {
		global $post, $BlackbirdPie;

		if (!isset($BlackbirdPie))
			return;

		/* PROFILE DATA */
		$name = $tweet_details['screen_name'];                      //the twitter username
		$real_name = $tweet_details['real_name'];                   //the user's real name
		$profile_pic = esc_url($tweet_details['profile_pic']);      //url to the profile image
		if ( !$tweet_details['profile_bg_tile'] ) 
			$profile_bg_tile_HTML = " background-repeat:no-repeat"; //profile background tile
		$profile_link_color = $tweet_details['profile_link_color']; //link color
		$profile_text_color = $tweet_details['profile_text_color']; //text color
		$profile_bg_color = $tweet_details['profile_bg_color'];     //background color
		$profile_bg_image = esc_url($tweet_details['profile_bg_image']);     //background image
		$profile_url = esc_url("http://twitter.com/intent/user?screen_name={$name}"); //the URL to the twitter profile

		/* GENERAL INFO */
		$id = $tweet_details['id'];                                     //id of the actual tweet
		$url = esc_url( "http://twitter.com/#!/{$name}/status/{$id}" ); //the URL to the tweet on twitter.com

		/* TIME INFO */
		$time = $tweet_details['time_stamp'];                       //the time of the tweet
		$date = date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), 
				$time + ( get_option('gmt_offset') * 3600 )  );     //the local time based on the GMT offset
		$time_ago = $BlackbirdPie->how_long_ago( $time );                   //the friendly version of the time e.g. "1 minute ago"

		/* SOURCE of the tweet */
		$source = $tweet_details['source'];
		preg_match( '`<a href="(http(s|)://&#91;\w#!$&+,\/:;=?@.-&#93;+)&#91;^\w#!$&+,\/:;=?@.-&#93;*?" rel="nofollow">(.*?)</a>`i', $source, $matches );
		if( ! empty( $matches[1] ) || ! empty( $matches[3]) )
			$source = '<a href="' . esc_url( $matches&#91;1&#93; ). '" rel="nofollow" target="blank">' . esc_html( $matches[3] ) . '</a>';
		else
			$source = esc_html( $source );

		//the plugin's base URL
		$base_url = BBP_URL;

		// Tweet Action Urls
		$retweet_url = esc_url( "https://twitter.com/intent/retweet?tweet_id={$id}" );
		$reply_url = esc_url( "https://twitter.com/intent/tweet?in_reply_to={$id}" );
		$favorite_url = esc_url( "https://twitter.com/intent/favorite?tweet_id={$id}" );

		// If we have a Twitter handle for this post author then we can mark them as 'related' to this tweet
		if ( !empty ( $BlackbirdPie->handles[$post->post_author] ) ) {
			$retweet_url .= "&related=" . $BlackbirdPie->handles[$post->post_author];
			$reply_url .= "&related=" . $BlackbirdPie->handles[$post->post_author];
			$favorite_url .= "&related=" . $BlackbirdPie->handles[$post->post_author];
		}

		$tweet = $tweet_details['tweet_text'];
		$tweetHTML = "
		<div id='bbpBox_$id' class='bbpBox' style='padding:20px; margin:5px 0; background-color:#{$profile_bg_color}; background-image:url({$profile_bg_image});{$profile_bg_tile_HTML}'>
			<div style='background:#fff; padding:10px; margin:0; min-height:48px; color:#{$profile_text_color}; -moz-border-radius:5px; -webkit-border-radius:5px;'>
				<span style='width:100%; font-size:18px; line-height:22px;'>
					{$tweet}
				</span>
				<div class='bbp-actions' style='font-size:12px; width:100%; padding:5px 0; margin:0 0 10px 0; border-bottom:1px solid #e6e6e6;'>
					<img align='middle' src='{$base_url}/images/bird.png' />
					<a title='tweeted on {$date}' href='{$url}' target='_blank'>{$time_ago}</a> via {$source}
					<a href='{$reply_url}' class='bbp-action bbp-reply-action' title='Reply'>
						<span><em style='margin-left: 1em;'></em><strong>Reply</strong></span>
					</a>
					<a href='{$retweet_url}' class='bbp-action bbp-retweet-action' title='Retweet'>
						<span><em style='margin-left: 1em;'></em><strong>Retweet</strong></span>
					</a>
					<a href='{$favorite_url}' class='bbp-action bbp-favorite-action' title='Favorite'>
						<span><em style='margin-left: 1em;'></em><strong>Favorite</strong></span>
					</a>
				</div>
				<div style='float:left; padding:0; margin:0'>
					<a href='{$profile_url}'>
						<img style='width:48px; height:48px; padding-right:7px; border:none; background:none; margin:0' src='{$profile_pic}' />
					</a>
				</div>
				<div style='float:left; padding:0; margin:0'>
					<a style='font-weight:bold' href='{$profile_url}'>@{$name}</a>
					<div style='margin:0; padding-top:2px'>{$real_name}</div>
				</div>
				<div style='clear:both'></div>
			</div>
		</div>
		<script type=\"text/javascript\">
			jQuery(function(){
				jQuery('#bbpBox_$id a')
					.css({'text-decoration':'none', color:'#{$profile_link_color}'})
					.hover(function(){jQuery(this).css({'text-decoration':'underline'});},function(){jQuery(this).css({'text-decoration':'none'});});
				}
			);
		</script>";

		//remove any extra spacing and line breaks
		$tweetHTML = preg_replace( '/\s*[\r\n\t]+\s*/', '', $tweetHTML );

		return $tweetHTML;
	}
	wp_enqueue_script('jquery');
	add_filter('bbp_create_tweet', 'my_bbp_create_tweet_html');
}

これで Blackbird Pie が吐き出す HTML は、以下のような感じになります。
スタイルシートで処理していたところを jQuery で処理するように変更しただけですね。

<div id="bbpBox_87798635173130240" class="bbpBox" style="padding: 20px; margin: 5px 0pt; background-color: rgb(192, 222, 237); background-image: url(&quot;http://a3.twimg.com/profile_background_images/53527310/gundam.jpg&quot;);">
	<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 10px; margin: 0pt; min-height: 48px; color: rgb(51, 51, 51); border-radius: 5px 5px 5px 5px;">
		<span style="width: 100%; font-size: 18px; line-height: 22px;">Blackbird Pie の WordPress プラグインが吐き出す HTML が、ちょっとアレなので修正した。後でブログに書く。
		<div class="bbp-actions" style="font-size: 12px; width: 100%; padding: 5px 0pt; margin: 0pt 0pt 10px; border-bottom: 1px solid rgb(230, 230, 230);">
			<img src="http://example.com/wp-content/plugins/twitter-blackbird-pie/images/bird.png" align="middle"><a title="tweeted on 2011年7月4日 17:23" href="http://twitter.com/#%21/wokamoto/status/87798635173130240" target="_blank">2011年7月4日 17:23</a> via <a href="http://ubersocial.com" rel="nofollow" target="blank">UberSocial for BlackBerry</a><a href="https://twitter.com/intent/tweet?in_reply_to=87798635173130240" class="bbp-action bbp-reply-action" title="Reply"><span><em style="margin-left: 1em;"></em><strong>Reply</strong></span></a><a href="https://twitter.com/intent/retweet?tweet_id=87798635173130240" class="bbp-action bbp-retweet-action" title="Retweet"><span><em style="margin-left: 1em;"></em><strong>Retweet</strong></span></a><a href="https://twitter.com/intent/favorite?tweet_id=87798635173130240" class="bbp-action bbp-favorite-action" title="Favorite"><span><em style="margin-left: 1em;"></em><strong>Favorite</strong></span></a></div><div style="float: left; padding: 0pt; margin: 0pt;">
			<a href="http://twitter.com/intent/user?screen_name=wokamoto"><img style="width: 48px; height: 48px; padding-right: 7px; border: medium none; background: none repeat scroll 0% 0% transparent; margin: 0pt;" src="http://a2.twimg.com/profile_images/1357232956/wo_glasses_normal.png"></a>
		</div>
		<div style="float: left; padding: 0pt; margin: 0pt;"><a style="font-weight: bold;" href="http://twitter.com/intent/user?screen_name=wokamoto">@wokamoto</a><div style="margin: 0pt; padding-top: 2px;">wokamoto</div></div>
		<div style="clear: both;"></div>
	</div>
</div>
<script type="text/javascript">
	jQuery(function(){
		jQuery('#bbpBox_87798635173130240 a')
			.css({'text-decoration':'none', color:'#0084B4'})
			.hover(
				function(){jQuery(this).css({'text-decoration':'underline'});},
				function(){jQuery(this).css({'text-decoration':'none'});}
				);
	});
</script>

注意： 構造が分かり易いように改行・インデント入れてます。

dogmap.jp

独断と偏見の何でもレビュー。since Feb. 27, 2005

Blackbird Pie の吐き出す HTML を修正する

コメントを残すコメントをキャンセル

共有:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル