けんしろうのブログ

アニソンDJ情報、DJ機材レビュー、雑記を自由に書いてます。

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

wordpress

DJけんしろう 出演予定
【大阪】12/11(日昼) TVアニメ「SHOW BY ROCK!!#」ドッキドキ♡Bighillcity!ぷるぷるイベントしちゃうにゃん♪ [DJ]
【大阪】12/18(日昼) たいむまし〜ん54 [DJ]
【大阪】12/23(祝昼) アニ鍋 [DJ]
【大阪】1/21(土夕) L.i.r1701 [DJ]

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

SPONSORED LINK

けんしろうです!

ブロガーからのおすすめもあり、僕は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です!

サンプル

SPONSORED LINK

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

https://ken46.com/wordpress4-4-blogcard-embedurl-notworking-1707/

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

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

 

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

たぶん、これかも!

https://ken46.com/wordpress4-4-blogcard-embedurl-notworking-1707/

関連記事
DJ関係のお役立ち情報を発信中!
Twitterフォローしてね!
無言フォロー大歓迎!

 - wordpress

スポンサーリンク

  関連記事

wordpress13
WordPress Popular Posts の文字数制限が反映されない時はウィジットを疑え!

こうやってウィジットに二重に入れていると、Shorten title to 30が Shorten title to 100に消 …

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

wordpress4.4以降からブログカードに対応したのだけど、正しく表示されない人向けに。 僕もどうしても解決できなくて、無効 …

wordpress13
wp list categories、widget_categories_args が効かないときの解決方法

たまにwordpressをカスタマイズしています。 今回は、カテゴリを投稿数の多いカテゴリ順に表示したいと思って以下のサイトを参 …

けんしろう ミナトレイヴ主催
大阪のアニソンDJ
鹿児島県出身
HAL大阪ゲーム学科卒
宮野真守のファン
Web系の仕事