WordPressで画像にキャプションを設定して、メディアから追加すると何故か10px増えている。んです。
なんやこの機能は、、ということでこの10pxを追加しないような処理を行おうと思います。
10pxの現象
「メディアから追加」から追加するとキャプションがあった場合、このように表示されると思います。
[caption id="attachment_{post id}" align="alignnone" width="2000"]<img class="size-full wp-image-{post id}" src="{画像のパス}" alt="" width="2000" height="1500" /> キャプション内容[/caption]
koukiTipsの場合は、現在横幅800pxで設定しているので、例えば800pxに設定して書くじゃないですか〜?
[caption id="attachment_{post id}" align="alignnone" width="800"]<img class="size-full wp-image-{post id}" src="{画像のパス}" alt="" width="2000" height="1500" /> キャプション内容[/caption]
で、ブラウザで見ると、インラインでstyle=”width: 810px”ってなっちゃうんですよ。
<div id="attachment_{id}" style="width: 810px" class="wp-caption alignnone">
<img src="パス">
<p class="wp-caption-text"><a href="パス" target="_blank" rel="noopener noreferrer">キャプション</p>
</div>
困る。
ということで解決策。
10px増えないようにする
functions.phpに下記のコードを書きます。
function remove_caption_padding( $width, $atts, $content ) {
$width = $width - 10; // ここで10px引く
return $width;
}
add_filter( 'img_caption_shortcode_width', 'remove_caption_padding', 10, 3 );
とりあえずはこれで、解決するはず!
が!!
毎回、captionのショートコードにwidht設定めんどくさい。。
ということで、インラインのstyleは消しちゃおう♪
ということで最終的なコードは下記になります!
add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);
function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
extract(shortcode_atts(array(
'id' => '',
'align' => '',
'width' => '',
'caption' => ''
), $attr));
if ( 1 > (int) $width || empty($caption) )
return $val;
$capid = '';
if ( $id ) {
$id = esc_attr($id);
$capid = 'id="figcaption_'. $id . '" ';
$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
}
return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
. do_shortcode( $content ) . '<figcaption ' . $capid
. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
もし独自で編集したかったら、最後の行あたりのreturnのところをごにょごにょしてください!
ということで、設定完了!!