wordpress

Stinger5を使っている人向け。wordpress4.4以降のブログカードを綺麗に表示させる技

この記事は２年以上前の情報です。
最新情報と異なる場合がございます。

このブログはStinger５を使っています。

けんしろうです！

ブロガーからのおすすめもあり、僕はStinger5を使っています。

とても使いやすいです！製作者の方いつもありがとうございます！

ただ、ブログカードの表示が変。

ブログカードの表示が上手く表示されないんですよ。
それはStinger5自体がスマートフォンでも
綺麗にYoutubeの埋め込みが表示されるように設定されているから。

ブログカード自体の表示をOFFにする方法もあるのだけど、
管理画面はブログカードで表示されちゃうし、
せっかくのブログカード、使ってみたい！

で、いろいろ試行錯誤した結果、解決しました！

function.phpの中身を書換

function.phpの中身を書換することで解決します！

まずWordpressの管理画面から、外観→テーマの編集を選んで、function.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のレスポンシブ対応
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);
    $the_content = str_replace('<div class="youtube-container"><iframe class="wp-embedded-content"','<div class="wp-container"><iframe class="wp-embedded-content"', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

 

そのあと、style.cssに下記を追加して下さい。

.wp-container iframe {
    max-width:100% !important;
}

 

これでOKです！

サンプル

下のブログカードとYoutubeがPCでもスマホでも綺麗に表示されているはず！

ブログカードクセモノ過ぎて苦労します！

僕のブログはこれで綺麗に表示されています！お試し下さい！

 

Stinger5でブログカード自体が表示されない！そんなときは？

たぶん、これかも！

アクセスランキング

-wordpress