当您在页面或帖子中插入图像时,Wordpress 通常会生成以下内容或类似内容:
[caption id="attachment_IMAGEID" align="ALIGNMENT" width="WIDTH"]
<img src="IMAGEURL" alt="" width="WIDTH" height="HEIGHT"
class="size-SIZE wp-image-IMAGEID" />IMAGECAPTION
[/caption]
哪些流程:
<div id="attachment_IMAGEID" style="width: WIDTH" class="wp-caption ALIGNMENT">
<img src="IMAGEURL" alt="" width="WIDTH" height="HEIGHT"
class="size-SIZE wp-image-IMAGEID">
<p class="wp-caption-text">IMAGE CAPTION</p>
</div>
我想完全更改插入图像时创建的 HTML。大小、定位等将使用 CSS 完成。
这是理想情况下应该使用的 HTML:
<figure class="figure img-small-left">
<img src="IMAGEURL" />
<figcaption class="figure-caption">
IMAGECAPTION
</figcaption>
</figure>
在它说 img-small-left 的地方,我想为控制图像大小和定位的 CSS 放置类。这些是类:
img-small-right // small image, text wraps on the left
img-small-left // small image, text wraps on the right
img-medium // medium-sized image positioned in the center without wrap
img-medium-float // medium-sized image positioned left, text wraps right
img-large // large image, overflows the content width on both sides
我可以在 Wordpress 主题中或周围的什么位置更改插入 HTML?
而且:使用标准的后端图像插入对话框可能会有点棘手,不是吗?想法? Wordpress 想要提供的其他可能性可以回退到我想要的最接近的处理方式。
作为引用,这里是图像 CSS(SASS 语法)
figure
display: table
img
outline: 1px solid rgba(0,0,0,0.15)
outline-offset: -1px
&.img-small-right
float: right
margin: 0.2rem -3.5rem 1rem 1rem
img
width: auto
max-width: 250px
height: auto
&.img-small-left
float: left
margin: 0.2rem 1rem 1rem -3.5rem
img
width: auto
max-width: 250px
height: auto
&.img-medium
margin: 1rem 0 1rem 2rem
img
width: auto
max-width: 100%
height: auto
&.img-medium-float
float: left
margin: 0.2rem 1rem 1rem -10rem
img
width: auto
max-width: 450px
height: auto
&.img-large
margin: 1rem -6rem
img
width: 100%
height: auto
figcaption
+FontSans
font-size: 0.8rem
line-height: 1.35
display: table-caption
caption-side: bottom
color: lighten($Black,30%)
margin: 0.4rem auto 0.1rem 0
使图像和标题看起来漂亮是一项艰苦的工作,所以当我将静态设计转换为工作 Wordpress 主题时,我不想错过这一点。
最佳答案
您可以使用以下过滤器:
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
function my_img_caption_shortcode( $empty, $attr, $content ){
$attr = shortcode_atts( array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr );
if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
return '';
}
if ( $attr['id'] ) {
$attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
}
return '<figure ' . $attr['id']
. 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
. 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">'
. do_shortcode( $content )
. '<figcaption class="figure-caption">' . $attr['caption'] . '</figcaption>'
. '</figure>';
}
来源:Plugin API/Filter Reference/img caption shortcode « WordPress Codex
关于html - 更改为 Wordpress 图像插入的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46875349/