Wordpress4.4にてブログカードが正しく表示されない時の対処法 #stinger5

こんにちは、しろうめず@ShiroUmezです。

先日、WordPress4.4にしたけどブログカードがちゃんと表示されない件という記事を書きました。タイトル通り、Wordpressを4.4にバージョンアップしたはいいけど、新機能であるブログカード（はてなブログ風のリンク埋め込みカード）が正しく表示されなかったというお話。

ブログとTwitterにて助けを求めたところ、フォロワーの方々の拡散のお陰で無事解決でき、ブログカードを正しく表示させることが出来ました！この場をお借りして（？）御礼申し上げます。本当にありがとうございましたm(__)m

では早速いってみましょう。WordPress4.4にてブログカードが正しく表示されない時の対処法！

stinger（5・6）系特有の問題かも・・・
ブログカードを正しく表示させるためのphpコード
1. functions.phpを書き換え
2. style.cssに一行追記
沢山の方々に助けていただきました
1. 拡散ありがとうございましたm(__)m
2. そして・・・大物君臨！
  1. ブログカードの表示崩れが発生した原因
【まとめ】餅は餅屋に
1. 追記／新verにて修正予定とのこと

stinger（5・6）系特有の問題かも・・・

おっとその前に。

この記事に書いておりますが、僕のWordpressのテーマはstinger5です。どうやらこの症状はstinger系テーマ（stinger6も試しました）特有の問題っぽいです。

すなわち、stinger系テーマ使用時にWordpressを4.4にバージョンアップすると、上記リンク先のようなブログカードの不具合（というか表示崩れ）が発生してしまうということ。stinger系を使用されている全ての方が同じ症状になるかどうか・・・までは、僕にはちょっとわかりません。この辺り後で詳しく書きますね。

あ、勿論stingerは素晴らしいテーマです。stingerを否定したりdisったりするつもりはこれっぽっちもありませんのであしからず。今後もずっとお世話になるつもりでいますので、ここでキチッと修正しておこうと思います。

ブログカードを正しく表示させるためのphpコード

それでは改めましていってみましょう。流れとしては、

functions.phpを書き換え
スマホ表示でブログカードがはみ出さないようにstyle.cssに一行ほど追記

以上です。簡単ですよ！

functions.phpを書き換え

まずはFTPソフトなどで使用しているブログテーマのディレクトリを開きます。（例・・・ドメイン/public_html/wp-content/themes/stinger○）

その中にあるfunctions.phpを、pc上の解りやすいどこかにバックアップ。経験ある方は多いと思いますが、functions.phpを書き換えたりする場合、一歩間違うとブログが真っ白になってしまうので、こうして必ずバックアップをしてから作業を行いましょう。

バックアップが出来ましたらfunctions.phpの次の部分を探します。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    $the_content = preg_replace('/< *?iframe/i', '<div class="youtube-container"><iframe', $the_content);
    $the_content = preg_replace('/<\/ *?iframe *?>/i', '</iframe></div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

//iframeのレスポンシブ対応

functionwrap_iframe_in_div($the_content){

if(is_singular()){

$the_content=preg_replace('/< *?iframe/i','<div class="youtube-container"><iframe',$the_content);

$the_content=preg_replace('/<\/ *?iframe *?>/i','</iframe></div>',$the_content);

}

return$the_content;

}

add_filter('the_content','wrap_iframe_in_div');

ここを、以下のコードに書き換えてください。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    //YouTube
    $the_content =
preg_replace('/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is', '<div
class="youtube-container">${0}</div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

//iframeのレスポンシブ対応

functionwrap_iframe_in_div($the_content){

if(is_singular()){

//YouTube

$the_content=

preg_replace('/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is','<div

class="youtube-container">${0}</div>',$the_content);

}

return$the_content;

}

add_filter('the_content','wrap_iframe_in_div');

コピペでOK。コレでうまく表示されるようになるはずです。

style.cssに一行追記

あと、style.cssに一行だけ追記します。上でも書きましたが、これはスマホ表示でブログカードがはみ出さないようにするため。

iframe { max-width: 100%; }

1	iframe{max-width:100%;}

↑このコードを、

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {

/*media Queries タブレットサイズ

----------------------------------------------------*/

@mediaonlyscreenand(max-width:780px){

の真上辺りに追記してください。これで解決するはずです。

そうそう、それでも表示が崩れたままだぞって方は、ブラウザのキャッシュをクリアしてみてくださいね。

沢山の方々に助けていただきました

拡散ありがとうございましたm(__)m

今回の件は、沢山の方にTwitter上でシェア（拡散）して頂いたお陰で解決出来ました。重ねて御礼申し上げます。ありがとうございました。

@ShiroUmez この記事が参考になれば。 https://t.co/EyKwjc6iMK
— イチ@スーパーベターズ (@kumacharo115) 2015, 12月 14

誰か～！　詳しい人～！！！　　　⇒WordPress4.4にしたけどブログカードがちゃんと表示されない件 | 考えるオヤジ https://t.co/TeDT8hkUJM
— うーと (@utodisney) 2015, 12月 14

わたしもスティンガーなので、もうちょっと更新待っとこ。解決するといいですね。→WordPress4.4にしたけどブログカードがちゃんと表示されない件 | 考えるオヤジ https://t.co/e9zNUpmpwD
— くみんぼ (@kuminomail93) 2015, 12月 14

全然わからないので、解決したらまた記事でアップお願いします( ☆∀☆) / “WordPress4.4にしたけどブログカードがちゃんと表示されない件 | 考えるオヤジ” https://t.co/nnFKdaAaZ1
— 双子のパパYuichi＠梅干届いた！ (@fp_yuichi_fp) 2015, 12月 14

ブログカード機能が付いたことすら知らなかった。SOS記事→WordPress4.4にしたけどブログカードがちゃんと表示されない件 | 考えるオヤジ https://t.co/TxhM2YAaYk
— のんべえ@リア多忙です (@0822kiseki) 2015, 12月 15

（※エゴサーチが不調のようです。せっかくシェアして頂いたのに検索に引っかからず、ご紹介できてない方がいらっしゃいましたら誠に申し訳ありません。「俺もシェアしたぞこの野郎！」という方は是非ご連絡下さい！）

そして・・・大物君臨！

皆さんの拡散のお陰で、なんと、naifix.comを運営されている超有名大物ブロガーエローラさん君臨！

@ShiroUmez たぶんレスポンシブ対策でiframeがあったら自動的にクラス名つきのdivで囲まれるんだと思います
— エローラforever (@uszero800) 2015, 12月 15

おお！エローラさんだ！ありがてぇ！だけどド素人の自分は、何言ってんのか全然わかんねー。

@uszero800 おお！エローラさん初めまして！レスポンスありがとうございます！で…つまり、…どういうことだってばよ…？ #理解が追い付かずスミマセン
— しろうめず (@ShiroUmez) 2015, 12月 15

↑初対面のくせにこんな失礼な態度をとったにも関わらず、

@ShiroUmez 長くなるので、あとでメールします(･∀･)
— エローラforever (@uszero800) 2015, 12月 15

このような優しい対応をして頂けました。なんていい人！

つまり今回の記事はこのエローラさんに頂いたメールからの（ほぼ）丸パクリです（ｷﾘｯ）。丸パクリついでにもう少しメール内容を引用致します（まずかったらご連絡くださいね。）

ブログカードの表示崩れが発生した原因

以下、エローラさんから頂いたメール内容からの引用です。ブログカードの表示崩れが発生した原因を詳しく教えていただけました。

ブログカードの件ですが、Stinger5では
YouTubeなどの動画を貼ったときにスマホで枠から飛び出ないよう
自動的に処理されています。

ふむふむなるほど。

YouTube動画の埋め込みタグは、こんな感じです。
<iframe>YouTubeタグ</iframe>
Stinger5では、以下のように<iframe>を見つけると
自動的に<div class=”youtube-container”>で囲むようになっています。
<div class=”youtube-container”><iframe>YouTubeタグ</iframe></div>

ほうほう。

ブログカードにも、<iframe>がついています。
<iframe>ブログカードタグ</iframe>
そうすると、YouTubeと同じく<div>が自動的についてしまいます。
<div class=”youtube-container”><iframe>ブログカードタグ</iframe></div>

ほう！するとどうなる？

で、<div class=”youtube-container”> はCSSで動画用のスタイルが指定されています。
.youtube-container {
position: relative;
padding-bottom: 56.25%; /* 下の余白 */
padding-top: 30px; /* 上の余白 */
height: 0px;
overflow: hidden;
}
この余白が原因で、ブログカードの下に変な余白がついたりしてしまったり、
スマホで見切れてしまったり、という現象が起きます。

なるほどー！！というわけでやはり、stingerのレスポンシブ対策からきた表示崩れだったわけですね！？優秀なテーマであるが故の結果！

この後解決策をご教授頂いたわけです。改めましてエローラさん、この度は本当にありがとうございました！

また宜しくお願いしますね☆（ゝω・）vｷｭﾋﾟｯ（ﾁﾗｯ