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

ツイート引用が簡単になる仕組み - 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のソースコードを直接編集するのは基本的にお勧めできることではないため、この「おまけ」の内容については自己責任で作業してほしい。

関連

  • add_filter - フィルター関数を追加する
  • get_option - オプションの値を取得する
  • the_content - 投稿内容を表示する
  • wp_oembed_get - oEmbedに対応したページの埋め込み用コンテンツを取得する

お勧めコンテンツ

get_category(2011年5月25日 登録)

mixed get_category( mixed $category [ , string $output = OBJECT [ , string $filter = 'raw' ] ] )
IDを指定してカテゴリー情報を取得する。

get_queried_object(2011年12月8日 登録)

mixed get_queried_object()
ページリクエストにマッチした情報(オブジェクト)を取得する。

esc_url_raw(2011年4月7日 登録)

string esc_url_raw( string $url [ , array $protocols = null ] )
URL文字列を調べ、データベース向けに余分な文字を取り除いたり、変換したりする。

wp_footer(2010年9月8日 登録)

void wp_footer( )
wp_footerアクションを実行する。

get_the_author(2010年9月9日 登録)

string get_the_author( [ string $deprecated = '' ] )
現在の投稿情報の著者名を取得(表示)する。

最終更新日時 : 2012-06-08 13:01