修复WordPress中caption图片宽度超出致页面混乱问题【WP系列教程之三十】

我们都知道,在写文章的时候我们会插入图片,继而在图片下方添加图片描述,而在默认情况下,如果文章中的图片设置了说明文本(Caption),WordPress 会自动在图片外面添加一个类为.wp-caption的 div,并且设置了这个 div 的宽度值会根据图片尺寸自动加 10px,今天所说的问题就是这个宽度值,因为这个宽度会打乱我们设定的 CSS 样式。这就是我们今天所说的“WordPress中caption图片宽度超出致页面混乱问题

修复WordPress中caption图片宽度超出致页面混乱问题【WP系列教程之三十】
如何删除这个可恶的样式呢?总结下来主要有以下三种方式

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

以上方法,任选一种就可以解决问题!

古风网版权互动须知

请遵循相关法律法规,如有侵权、后门、不妥请联系本站删除!

原文地址:https://www.wzxiu.com/5158.html 修复WordPress中caption图片宽度超出致页面混乱问题【WP系列教程之三十】

发表评论