WPtouchでYoutubeなどのiframeコードが本文に含まれる記事の表示が崩れてしまう場合の対処法

【img via Mark.Pilgrim】

先日、WPTouchが表示に関わるアップデートをリリースしたと耳にしたため、テーマを再度修正するのが面倒で見送ってきたアップデートを実施することに！

バックアップを取っていたためデザインの復元は1時間以内に完了したものの、以前悩んでいたiframeが原因で表示が崩れるバグが再発してしまった。

Twitterの過去ログに救われて修正することができたが、今後のためにもWPtouchでYoutubeなどのiframeコードが本文に含まれる記事の表示が崩れてしまう場合の対処法をメモしておく！

gori.meのモバイルテーマに何が起きていたか

iframeが記事内に含まれると表示が崩れる、という状況は以下のスクリーンショットで説明する。

世にも奇妙な競技！イギリスに「スネ蹴り（Shin-Kicking）」という謎のスポーツが存在するらしい！という記事にはアイキャッチ画像の他、本文中にYouTube動画を埋め込んでいるのだが、以下にある通りアイキャッチ画像が元のサイズのまま表示されてしまっている。

さらに記事タイトル下に設置してあるはてなブックマークボタンが表示されていない。

これは以前も同じことで悩んでいたのだが、その際に友人がソースコードを調べて以下のように教えてくれた！持つべきものは友…。

@planetofgori core.js:121でyoutubeとかへのiframeに対してunwrap（対象の親要素の削除）をかけてるんだけど、江南スタイルのiframeはdiv#singlentry直下にあるから、そのときにdiv#singlentryが削除されてる。

— Shotaro Osakiさん (@sfc) 2012年11月11日

つまり、「wptouch/themes/core/core.js」の121行目にある「$wpt( this )」のあとに記載されている「.wrap()」を削除することによって解決されるということ！削除後は以下のような記述になるはず。

	$wpt( allVideos ).each( function(){ 
		$wpt( this ).addClass( 'wptouch-videos' ).parentsUntil( '.content', 'div:not(.fluid-width-video-wrapper), span' ).removeAttr( 'width' ).removeAttr( 'height' ).removeAttr( 'style' );
	});

これでキャッシュをクリアして読み込み直すと表示が崩れていた画像の表示も元通り！

はてブボタンも正常に読み込まれるようになった。

僕が既存テーマをゴリゴリいじっているせいでこのようなことが起きてしまっているのかもしれないが、もし同じような問題に直面している人がいたら試してみるべし！

WordPressで読み込み速度1秒台を実現するために実施した5つの施策 | gori.me

ページの読み込み速度を劇的に改善！CloudFlareとW3 Total Cacheを組み合わせて高速化する方法 | gori.me

表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ！！ | gori.me