修复 WordPress 中 wp-caption 宽度超出10px的问题

默认情况下,如果文章中的图片设置了说明文本(Caption),WordPress 会自动在图片外面添加一个类为.wp-caption的 div,并且设置了这个 div 的宽度值会根据图片尺寸自动加 10px,这个宽度值非常可恶,会打乱我们设定的 CSS 样式,我在做 MinimalismPro 主题的相册样式时就深受其害。

如何删除这个可恶的样式呢?Google 搜罗了一下,总结下来主要有以下四种方式:

(1)修改 WordPress 系统文件

设置函数被包含在了 wp-includes/media.php 这个文件中,在其中找到以下代码(WordPress 3.6 中应该是655行)

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'

就是这行代码会根据图片文件的宽度自动设置一个增加 10px 的宽度值。删除:

style="width: ' . (10 + (int) $width) . 'px"

或者将代码中的 10 改为 0 ,区别是前者不添加默认样式,后者添加一个宽度与图片宽度一样的样式。

这种方法因为涉及到修改系统文件,所以不建议使用此方法。

(2)样式表修整

这个方法比较简单,但可能不太实用。如果你的页面为固定宽度,可以在样式表使用 !important 属性值修正为想要的宽度:

.entry-content .wp-content {
    width:xxxpx!important;
}

(3)自定义 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>';
}

原理和第一种方法一样,当然也可将 style="width: ' . (10 + (int) $width) . 'px" 删除,原因参考第一种方法。

(4)使用插件

将下面的代码保存为一个 .php 文件,然后放在 wp-content\plugins 目录下,在后台插件页面激活即可。

<?php
/**
 * @package FixImageMargins
 * @author Justin Adie
 * @version 0.1.0
 */
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: http://rathercurious.net
*/
class fixImageMargins{
    public $xs = 0; //change this to change the amount of extra spacing

    public function __construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
    }
    public function fixme($x=null, $attr, $content){

        extract(shortcode_atts(array(
                'id'    => '',
                'align'    => 'alignnone',
                'width'    => '',
                'caption' => ''
            ), $attr));

        if ( 1 > (int) $width || empty($caption) ) {
            return $content;
        }

        if ( $id ) $id = 'id="' . $id . '" ';

    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
    . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
}
$fixImageMargins = new fixImageMargins();

?>

以上方法仅供参考,更多的解决方法可以戳这里:http://wordpress.org/support/topic/10px-added-to-width-in-image-captions

EOF

文章标签:

发表评论

HIPQ