我们都知道，在写文章的时候我们会插入图片，继而在图片下方添加图片描述，而在默认情况下，如果文章中的图片设置了说明文本（Caption），WordPress 会自动在图片外面添加一个类为.wp-caption的 div，并且设置了这个 div 的宽度值会根据图片尺寸自动加 10px，今天所说的问题就是这个宽度值，因为这个宽度会打乱我们设定的 CSS 样式。这就是我们今天所说的“WordPress中caption图片宽度超出致页面混乱问题”
如何删除这个可恶的样式呢？总结下来主要有以下三种方式
1.修改 WordPress 系统文件media.php（不推荐）
设置函数被包含在了 wp-includes/media.php 这个文件中，在其中找到以下代码(wordpress4.0应该在846行)
$caption_width = 10 + $atts['width'];
或者将代码中的 10 改为 0 ，区别是前者不添加默认样式，后者添加一个宽度与图片宽度一样的样式。
这种方法因为涉及到修改系统文件，所以不建议使用此方法。
2.自定义 Shortcode
自定义 Shortcode 来代替 WordPress 默认的 Shortcode 。
将下面的代码粘到主题 functions.php 中即可。
// FixImageMargins
add_shortcode('wp_caption', 'my_img_caption_shortcode');
add_shortcode('caption', 'my_img_caption_shortcode');
function my_img_caption_shortcode($attr, $content = null) {
// New-style shortcode with the caption inside the shortcode with the link and image tags.
if ( ! isset( $attr['caption'] ) ) {
if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^/>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
$content = $matches[1];
$attr['caption'] = trim( $matches[2] );
}
}
// Allow plugins/themes to override the default caption template.
$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) . '" style="width: ' . (0 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
以上方法，任选一种就可以解决问题！
