2014-11-18 876 评论

修复 WordPress 中 caption图片宽度超出10px的问题

内容预览

默认情况下，如果文章中的图片设置了说明文本（Caption），WordPress 会自动在图片外面添加一个类为.wp-caption的 div，并且设置了这个 div 的宽度值会根据图片尺寸自动加 10px，这个宽度值非常可恶，会打乱我们设定的 CSS 样式。

默认情况下，如果文章中的图片设置了说明文本（Caption），WordPress 会自动在图片外面添加一个类为.wp-caption的 div，并且设置了这个 div 的宽度值会根据图片尺寸自动加 10px，这个宽度值非常可恶，会打乱我们设定的 CSS 样式。
如何删除这个可恶的样式呢？总结下来主要有以下三种方式

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>';
}