この記事は最後に更新してから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

お勧め

delete_post_meta（2018年5月27日更新）

bool delete_post_meta( int $post_id, string $meta_key [ , mixed $meta_value = '' ] )

投稿情報のカスタムフィールド情報を削除する。

wp_is_numeric_array（2018年5月27日更新）

bool wp_is_numeric_array( mixed $data )

数値キーのみの配列か調べる。

get_tag_regex（2013年8月3日更新）

string get_tag_regex( string $tag )

HTMLタグの正規表現パターンを取得する。

get_all_page_ids（2012年5月30日更新）

array get_all_page_ids( )

全ページ（post_typeが'page'）の投稿IDを取得する。

the_post_thumbnail_caption（2018年5月27日更新）

void the_post_thumbnail_caption( mixed $post = null )

投稿ページのサムネイル（アイキャッチ画像）キャプションを表示する。

説明

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

the_contentフィルターだけで対応

ちょっとだけ、おまけ

関連

お勧め