【WordPress】キャプション付きの画像を追加する際にwidthを指定させない方法

公開日:2018-10-30
最終更新:2018-10-30
※この記事は外部サイト(https://note.mu/oceant/n/n5f0dc9eab6ed)からのクロス投稿です

WordPressで記事を投稿するとき、「メディアを追加」ボタンからキャプション付きの画像を挿入しようとすると、思っていたより画像の横幅が大きくなってしまうことがあります。

原因はcaptionのショートコードでstyle属性にwidthが指定されてしまうため。対策としてよくあるのはstyle属性を削除してしまうとか、cssでwidth: 100% !important;を付けるとか色々あるようです。 ただ、上記の対応だとせっかくの画像サイズ指定が無視されてしまうので、それはそれで微妙な気持ちになってしまいます。

対策

widthで指定されてしまうところをmax-widthに変えてしまえば、サイズ指定は無駄にならず、かつ予定より大きくなってしまうことも防げるはず。

function.phpに以下を記載することで、widthをmax-widthに変更させることができます。

function filter_caption_max_width( $output, $tag ) {
    if ( 'caption' === $tag || 'wp_caption' === $tag ) {
        $output = str_replace( 'width:', 'max-width:', $output );
    }
    return $output;
}

add_filter( 'do_shortcode_tag', 'filter_caption_max_width', 10, 2 );
記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@oceant'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする