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

Iframe


【img via Mark.Pilgrim

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

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

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

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

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

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

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

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

つまり、「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' );
	});

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

はてブボタンも正常に読み込まれるようになった。
WPTouch iframe 表示されない

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

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

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

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