wordpress

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

投稿日:

LINE登録600人突破!LINEでなんでも質問しよう!

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

けんしろうです!

ブロガーからのおすすめもあり、僕は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でもスマホでも綺麗に表示されているはず!

WordPress4.4でブログカード(embedurl)が正しく表示されない時の対処方法

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

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

 

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

たぶん、これかも!

WordPress4.4でブログカード(embedurl)が正しく表示されない時の対処方法

  • この記事を書いた人
  • 最新記事

けんしろう

アニソンDJブロガー。動員300人規模のアニソンDJパーティーを主催。クラウドファンディングに2回成功し、ブログでDJ機材を1,000万円以上売っている。その経済効果と影響力は計り知れない。宮野真守が好き。

-wordpress

Copyright© けんしろうのブログ , 2019 All Rights Reserved Powered by AFFINGER5.