STINGER6でSoundCloudやhearthis.atのウィジェットの表示が変になるのを防止する方法
ごきげんよう、蟻坂(4risaka)です。
ちょっとウィジェットの表示でハマったので、その解消について共有しておきます。
SoundCloudのウィジェットをそのまま貼れない
WordPressでSoundCloudや先日紹介したhearthis.atのウィジェットを貼る場合、
サービスから埋め込み用のHTMLタグをそのまま持ってきたら動きます。
便利です。
……ところが、わたしが使用しているWordpressテーマ「STINGER6」の場合、
テーマが特殊な処理をしているためそのまま貼り付けるとおかしくなります。
具体的には、こんなふうにやたら縦に伸びます。
困った。
解消する方法
結論を書きます。
以下の手順に従って特定箇所のテーマのソースコードを差し替えてください。
まず、ダッシュボードから「外観」→「テーマの編集」を行います。
functions.phpを編集します。
かなり下の方に「/** iframeのレスポンシブ対応 */」というコメントが見つかりますので、
323行目の「function st_wrap_iframe_in_div」〜336行目「}」までを
以下のコードに差し替えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function st_wrap_iframe_in_div( $the_content ) { if ( is_singular() ) { if ( !preg_match('!(<\s*?iframe.*(hearthis_at|soundcloud)(?:\s+[^>]*>)?)(.*?)(</\s*?iframe\s*?>)!is', $the_content) ) { $the_content = preg_replace( '!(<\s*?iframe(?:\s+[^>]*>)?)(.*?)(</\s*?iframe\s*?>)!is', '<div class="youtube-container">$1$2$3</div>', $the_content ); } } return $the_content; } |
見る人が見たらわかりますが、適当な対応をしております。
本当は否定先読みを使ってpreg_replaceのほうにスマートな修正をしたかったのですが、
1時間以上こねくり回して上手く行かなかったので諦めました。
原因と対応
STINGER6のfuncitons.phpにある上記のコードですが、
「記事内のiframeタグを youtube-container クラスの div タグに差し替える」ということをしています。
この youtube-container タグのCSSがレスポンシブ向けの調節がなされており、
Youtubeの動画を貼るときは自動的に画面サイズに合わせた拡大縮小を行ってくれる便利機能となります。
ところが、
SoundCloudとhearthis.atのウィジェットを貼り付けて
この置換処理に食べさせた場合、youtube-container クラスのCSSが悪さをして
paddingの分縦に伸びてしまうようです。
SoundCloudとhearthis.atのウィジェットのデザインはiframeを何もいじらない前提で作っているようで、
当然ながらなんかダサくなってしまう、というわけです。
スマートフォンなどで弊ブログのSoundCloud、hearthis.atのウィジェットを確認した場合、
youtube-container クラスに差し替えされてなくても(iframeそのままで)崩れたりはみ出ること無く表示できてましたので、
対処としてはこれらのウィジェットについては差し替え処理を行わないということになります。
そこで、以下のif文を差し替え処理本体preg_replace()関数の手前に入れて、
iframeの中にhearthis_atとsoundcloudがある場合無視しれ、という命令にしました。
|
1 2 3 4 5 6 |
if ( !preg_match('!(&lt;\s*?iframe.*(hearthis_at|soundcloud)(?:\s+[^&gt;]*&gt;)?)(.*?)()!is', $the_content) ){ : (中略) : } |
結果としては、狙ったとおりウィジェットが綺麗に表示されました。
よかったよかった。
まとめと今後の課題
というわけで、
音楽制作をやっていて、かつSoundCloud使いで、STINGERでブログを書いているひと向けのニッチ記事でした。
一旦はこれで対応できているのでまぁいいんじゃないかなーとおもいます。
が、ご覧のとおりSoundCloudとhearthis.atの2サービスにしか対応してなかったり、
そもそもこの修正で本当にいいのかっていうところもありますので、
もっと頭がよくて技術力のあるひとからのアイデアは随時お待ちしております。
「できる」というだけで苦手なんです。。。