この記事は最後に更新してから1年以上経過しています。

ツイート引用が簡単になる仕組み

twitterのoEmbed対応について

説明

WordPress 3.4では、投稿記事の中にツイートのURLを記述するだけで、投稿ページにそれっぽい表示をしてくれるようになる。ちょっと気になったので、その仕組みを追っかけてみた。

ツイート引用がある投稿ページのHTML

はじめに、この記事はWordPress 3.4 RC1（3.3.2日本語版を上書き）にて検証した内容になり、正式版では内容が改訂される可能性があることをあらかじめお断りしておく。

まずは、実際に投稿記事にツイートのURLをペーストして、その表示内容を確認してみた。

：
<link rel="stylesheet" type="text/css" href="http://platform.twitter.com/embed/embed.css">
</head>
<body class="blog logged-in single-author two-column right-sidebar" data-twttr-rendered="true">
<div id="page" class="hfeed">
：

これはHEADタグの終わりからBODYタグの冒頭部分になる。ツイート引用部分のスタイルは青字のembed.cssで定義されている。

次は、実際のツイート引用部分のHTMLコード。

：
<div id="twitter-widget-0" class="twitter-tweet-rendered" lang="ja" style=";width:550px!important">
<div class="twt-border">
<blockquote data-twt-id="XXXXXXXXXXXXXXXXXX" data-twt-intents="false" data-twt-product="tweetembed" class="twt-o twt-tweet hentry twt-always-show-actions twt-pinned twt-standard">
	<div class="vcard author">
		：
	</div>
	<div class="entry-content">
		：
	</div>
	<div class="footer">
		：
	</div>
</blockquote>
</div></div>
：

引用部分全体をDIVタグで囲んでいて、幅550ピクセルが設定されているのがちょっと気になる。

BODYタグの終わりに次のようなIMGタグが追加されている。これでツイート引用の表示履歴を集計しているんでしょうかね。

：
<img src="//p.twitter.com/e.gif?status_id=XXXXXXXXXXXXXXXXXX&amp;context=subject&amp;twttr_variant=1.0&amp;twttr_referrer=http%3A%2F%2Flocalhost%2F" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px; ">
</body>
</html>

the_contentフィルターだけで対応

手始めにHEADタグやBODYタグの末尾が変わっているので、「wp_headアクションやwp_footerアクションが関係しているのかな？」と考え、試しにそれらのアクションを外してみたが、何の問題もなくツイート引用は表示される。どうやらそれらのアクションは関係ないらしい。

次に、実際にコンテンツを出力するthe_contentフィルターを調べてみる。the_contentフィルターの多くは /wp-includes/default-filters.php で定義されているので、そちらを調べてみたが、その中で定義されたフィルターも関係なかった。
the_contentフィルターにはほかにもフィルターが設定されていたので、名前を頼りに調べてみると、/wp-includes/media.php のWP_Embedクラスのautoembedメソッドにぶつかった。このメソッドは、管理者ページの「メディア設定」-「自動埋め込み－可能な時は、URL のメディアコンテンツを直接ページに埋め込む。」がチェックされている場合（ get_option('embed_autourls')の値）、the_contentフィルターに登録される仕組みだ。

autoembedメソッドは、投稿記事中にURLパターンがあったらそのURLをショートコードとみなし、 wp_oembed_get関数を使ってそのコンテンツを取得している。正しくコンテンツを取得できた場合は、投稿記事に適用される前にembed_oembed_htmlフィルターが適用できるので、自分のサイトに適用する際に調整を行う場合はこのフィルターが利用すればいいようだ。

return apply_filters( 'embed_oembed_html', $html, $url, $attr, $post_ID );

ちょっとだけ、おまけ

さて、このツイートの引用機能ですが、WordPress 3.3環境であれば、/wp-includes/class-oembed.php [50行目] に次に示すコード1行（赤字部分）を追加するだけで対応できちゃうようだ。

	'http://wordpress.tv/*'                              => array( 'http://wordpress.tv/oembed/',                       false ),
	'#http://(.+\.)?polldaddy\.com/.*#i'                 => array( 'http://polldaddy.com/oembed/',                      true  ),
	'#http://(www\.)?funnyordie\.com/videos/.*#i'        => array( 'http://www.funnyordie.com/oembed',                  true  ),
	'#https?://(www\.)?twitter.com/.+?/status(es)?/.*#i' => array( 'http://api.twitter.com/1/statuses/oembed.{format}', true  ),
) );

// Fix any embeds that contain new lines in the middle of the HTML which breaks wpautop().
add_filter( 'oembed_dataparse', array(&$this, '_strip_newlines'), 10, 3 );

来週には3.4がリリースされる予定だが、この週末、一足先にその気分を味わってみてはいかがだろうか。なお、WordPressのソースコードを直接編集するのは基本的にお勧めできることではないため、この「おまけ」の内容については自己責任で作業してほしい。

最終更新 : 2012年06月08日 13:01

お勧め

wp_get_current_user（2019年6月21日更新）

WP_User wp_get_current_user( )

現在のユーザ情報を取得する。

sanitize_locale_name（2023年5月22日更新）

string sanitize_locale_name( $locale_name )

ロケール名をサニタイズする。

the_custom_logo（2018年5月27日更新）

void the_custom_logo( [ int $blog_id = 0 ] )

カスタムロゴを表示する。

wp_unslash（2016年4月22日更新）

mixed wp_unslash( mixed $value )

スラッシュでクォートされた文字列のクォート部分を取り除く。

wp_embed_defaults（2011年12月1日更新）

array wp_embed_defaults( )

投稿記事中に埋め込む動画などのサイズを取得する。

説明

ツイート引用がある投稿ページのHTML

the_contentフィルターだけで対応

ちょっとだけ、おまけ

関連

お勧め