けんしろうのブログ

初心者向アニソンDJ情報、DJ機材レビュー、雑記など。

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

wordpress

けんしろう DJ出演予定
【東京】12/24(日昼) パリピズム vol.18 [DJ]
【東京】12/29(日昼) ANIDELIC PARTY Vo.17 [DJ]
【大阪】1/? [DJ]
【大阪】2/? [DJ]
【大阪】3/3(土夜) フルスピード! vol.2 [DJ]

このブログは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でもスマホでも綺麗に表示されているはず!

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

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

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

 

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

たぶん、これかも!

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

 - wordpress

DJ関係の最新情報を発信中!
LINEフォローしてね!

友だち追加

スポンサーリンク

  関連記事

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

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

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

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

AmazonJSの検索設定がデフォルトでアメリカになってしまう時の解決策

Amazonの商品を並べるのに便利なAmazonJSですが、Wordpress4.0以降の場合、「アメリカ」がデフォルトになって …

けんしろう ミナトレイヴ主催
大阪のアニソンDJ
HAL大阪ゲーム学科卒
Web系の仕事
角川グループから出版
Amazon売上ランク1位2冠
県庁・デジハリ等講演多数
鹿児島県出身