アップロードした画像に自動的にWidthが付いてしまい、レスポンシブ対応されない場合の対処方法
はじめに
オリジナルテーマを製作した際、投稿記事の画像の横幅がレスポンシブに反応せず、大きくはみ出してしまうという現象がありました。（下記画像参照）
cssで、該当するimgのwidthを100%にしているのに、
色々調べていくと、下記のような怪しい点が。。。
＜怪しい点＞
・～で囲まれた画像のコードに、自動的に、インライン属性「style=”width=〇〇”」が付く。
（インライン属性は、詳細度が!importantの次に高いため、優先されてしまう。）
ということで、早速検索したら、対処方法が出てきましたのでご紹介します。
対処方法
下記のようなコードを、functions.phpに書き込みます。
（PRESSSTOCKERさんのサイトを参考にさせていただきました。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//画像にcaptionが付いてWidthがレスポンシブにならない際の対処法 add_shortcode('caption', 'my_img_caption_shortcode'); function my_img_caption_shortcode($attr, $content = null) { if ( ! isset( $attr['caption'] ) ) { if ( preg_match( '#((?:<a [^>]+>s*)?<img [^>]+>(?:s*</a>)?)(.*)#is', $content, $matches ) ) { $content = $matches[1]; $attr['caption'] = trim( $matches[2] ); } } $output = apply_filters('img_caption_shortcode', '', $attr, $content); if ( $output != '' ) return $output; extract(shortcode_atts(array( 'id' => '', 'align' => 'alignnone', 'width' => '', 'caption' => '' ), $attr, 'caption')); if ( 1 > (int) $width || empty($caption) ) return $content; if ( $id ) $id = 'id="' . esc_attr($id) . '" '; return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>'; } |
28行目が、出力されるコードを制御しています。
上記を記述する事で、コード内のインライン属性が自動的につく事もなくなりました。
＜記述後＞
元のコードは、wp-include/media.phpと、wp-include/widgets/class-wp-widget-media-image.phpが関連しているようです。
しかし、WordPressのコアファイルは基本的にいじらないほうが良い。（参考記事：9ensanのLifeHack）
なので、修正部分は「theme」フォルダ内のfunctions.phpで設定しなおした、というところです。
まとめ
WordPressでは、自分が必要としない機能がデフォルトで付いていることが多々あり、戸惑いがちです。
まずは自分でコードを見比べてみて、どこが原因なのかをじっくり探ります。
その上でgoogle先生にお願いすると、同じような悩みを持ち、そして解決した事例がほぼ確実に出てきます^^
このあたり、wordpressの奥が深いところ？ですね^^;
公開日：2017年10月5日
最終更新日：2017年10月30日
