页面标题将不需要的10px添加到宽度

时间:2011-04-08 作者:Dave Hunt

我正在尝试在正在使用的页面中创建一个带有标题的图像。在图像选项中,我将其向右对齐,图像宽度为220。没有标题我没有问题,但是添加了标题后,它添加了一个div包装,内联样式宽度为230px。解决此问题的唯一方法是在图像选项中将宽度手动设置为210px,然后使内联宽度为220px(只需将该值加10px)。

如何防止将额外的10px添加到内联样式宽度?

4 个回复
SO网友:John P Bloch

这是你能做的。前端的短代码执行函数的开头有一个过滤器,可以让您劫持字幕。返回一个非空值将停止短代码的执行,因此,如果您只是按照希望的方式处理短代码并返回结果,那么您就可以摆脱烦人的10px内联填充。在你的主题中加入这样的内容functions.php 文件或插件将起作用:

function wpse14305_img_caption( $empty_string, $attributes, $content ){
  extract(shortcode_atts(array(
    \'id\' => \'\',
    \'align\' => \'alignnone\',
    \'width\' => \'\',
    \'caption\' => \'\'
  ), $attributes));
  if ( empty($caption) )
    return $content;
  if ( $id ) $id = \'id="\' . esc_attr($id) . \'" \';
  return \'<div \' . $id . \'class="wp-caption \' . esc_attr($align) . \'">\' . do_shortcode( $content ) . \'<p class="wp-caption-text">\' . $caption . \'</p></div>\';
}

add_filter( \'img_caption_shortcode\', \'wpse14305_img_caption\', 10, 3 );

SO网友:Bridget

从3.7开始,有一个过滤器可以直接更改包裹div的宽度。这将修复额外的10px,并且不会让标题超出图像的宽度(与宽度不同:auto!important)。

function wp456_img_caption_width( $width, $atts, $content){
    //by default 10 is added if image caption
    return $width - 10;
 }

add_filter( \'img_caption_shortcode_width\', \'wp456_img_caption_width\', 10, 3 );

SO网友:pospi

我倾向于以不同的方式John - 他的解决方案包括复制img_caption_shortcode() 函数,自添加该解决方案以来,该函数已在Wordpress更新中更改。相反,您可以挂接传递给标题生成代码的短码参数,只需从宽度中减去10px,即可抵消Wordpress的作用:

add_filter(\'shortcode_atts_caption\', \'fixExtraCaptionPadding\');

function fixExtraCaptionPadding($attrs)
{
    if (!empty($attrs[\'width\'])) {
        $attrs[\'width\'] -= 10;
    }
    return $attrs;
}

SO网友:WebSmithery

还有一个简单的CSS解决方案可以覆盖WordPress的内联样式。

.wp-caption {
    display: table-cell;
    width: auto !important;
}
将宽度设置为auto 在块元素上,将导致其宽度扩展以填充可用空间,这可能不是所需的,而是设置display: table-cell 导致div 根据内容自动调整大小。

作为一个表单元元素,wp caption div自动调整大小,就像它是一个内联块一样,但它的行为就像它后面的内容中的一个块元素,即使没有容器的内联内容,也会呈现在div下面,而不是在同一行上,就像它是内联块一样。

(The!important 需要作为内联样式,否则会覆盖样式表。)

我还没有找到css表单元格应该如何运行的明确描述,但我已经在Internet Explorer(包括WinXP上的IE8)、Firefox、Chrome和Opera中对此进行了测试,并发现了完全一致性。

结束

相关推荐

fetch images and videos

是否可以获取特定网站的视频和图像并将其发布?我的意思是我正在考虑写一个函数,在这里我只写网站名称,然后在网站url的帮助下,所有或最新的图片和视频都会发布到我的帖子上。这可能吗?