关键词：
【中文标题】更改 Wordpress 图像的插入 HTML【英文标题】：Change inserted HTML for Wordpress images 【发布时间】：2018-04-03 04:11:28 【问题描述】：当您在页面或帖子中插入图像时，Wordpress 通常会产生这种或类似的东西：
[caption id="attachment_IMAGEID" align="ALIGNMENT" ]
<img src="IMAGEURL"
class="size-SIZE wp-image-IMAGEID" />IMAGECAPTION
[/caption]
哪些进程：
<div id="attachment_IMAGEID" style="width: WIDTH" class="wp-caption ALIGNMENT">
<img src="IMAGEURL"
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 主题时，我不想错过这一点。
【问题讨论】：
尝试查看“post_thumbnail_html”等过滤器来修改img html输出。 @AndrewSchultz 你能进一步解释一下你的意思吗？我不是在寻找包含缩略图的方法，我想通常更改在帖子或页面中插入图像时使用的 HTML 的结构。由于 Wordpress 在其内部某处指定了该内容，因此应该找到该代码并将其替换为新代码。 （我只是希望如果 Wordpress 更新，它不会被覆盖）。 这个线程向您展示了如何使用我正在谈论的过滤器来修改输出图像的结构。 wordpress.stackexchange.com/questions/134014/… 你会考虑写一个简码吗？如果是，我可以在下面提供答案。我也认为这更好，因此您不必重写函数或添加可能会减慢 WP 的过滤器。 OP 需要一种向字幕短代码添加额外类的方法，这意味着修改字幕短代码模式，而不是在帖子编辑器文本视图中手动添加自定义类。 【参考方案1】：这是您应该使用的正确过滤器：
/**
* Filters the image HTML markup including the caption shortcode.
*
* @since 2.6.0
*
* @param string $shcode The image HTML markup with caption shortcode.
* @param string $html The image HTML markup.
*/
return apply_filters( 'image_add_caption_shortcode', $shcode, $html );
例如：
function my_custom_markup( $shcode, $html )
return str_replace( "caption", "something_new" , $shcode );
add_filter( 'image_add_caption_shortcode','my_custom_markup', 10, 2 );
【讨论】：
【参考方案2】：您可以使用以下过滤器：
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
【讨论】：
php过滤wordpress的图像插入(代码片段)
更改 Wordpress 媒体图像 URL
】更改Wordpress媒体图像URL【英文标题】：ChangeWordpressmediaimageURL【发布时间】：2020-06-1413:40:17【问题描述】：我对wordpress开发比较陌生。我在我的网站上安装了SSL证书。SSL挂锁在某些页面上不可见，并认为这是一个混合内容问题... 查看详情
基于 Slider 图像的动态 wordpress 背景
】基于Slider图像的动态wordpress背景【英文标题】：DynamicwordpressbackgroundBasedonSliderimages【发布时间】：2015-08-1906:28:04【问题描述】：我在wordpress上使用nivoSlider，我希望我的主页背景根据当前幻灯片图像进行更改！我没有javascript和j... 查看详情
php在wordpress中更改特色图像框的位置(代码片段)
php阻止wordpress将额外的10px宽度插入图像标题短代码。(代码片段)
如何在 Wordpress 中更改默认图像缩略图大小
】如何在Wordpress中更改默认图像缩略图大小【英文标题】：HowToChangeDefaultImageThumbnailSizesinWordpress【发布时间】：2011-04-1303:47:47【问题描述】：嘿..真的很尴尬地问这个问题-我应该可以在Google上找到这个，但是由于所有新的WP功能... 查看详情
如何在 WordPress 网站中更改 WooCommerce 产品图像大小？
】如何在WordPress网站中更改WooCommerce产品图像大小？【英文标题】：HowtoChangeWooCommerceProductImageSizeinWordPressSite?【发布时间】：2017-03-0301:42:17【问题描述】：Linktowebsite我已经按照这里的说明进行操作http://www.cbdweb.net/woocommerce-and-imag... 查看详情
php更改wordpress图像编辑器(代码片段)
php根据帖子类型更改wordpress图像属性。(代码片段)
将自定义类插入到由 tinyMCE 通过 jQuery 呈现的 WYSIWIG 输出中（在 Wordpress 中处理带有标题的图像）
...自定义类插入到由tinyMCE通过jQuery呈现的WYSIWIG输出中（在Wordpress中处理带有标题的图像）【英文标题】：InsertcustomclassesintoWYSIWIGoutputrenderedbytinyMCEviajQuery(handlingimageswithcaptionsinWordpress)【发布时间】：2019-06-1421:45:48【问题描述】：... 查看详情
更改wordpress中特色图像框的位置
AddthistoyourWordpresstheme'sfunctions.phpfile.Itallowsyoutomovethe'featuredimage'upload/selectboxfromtheadminsidebartoanotherpositiononthepage,togiveitmoreprominence.add_action('do_meta_boxes','customposttype_image_box'); functioncustomposttype_image_box(){&... 查看详情
如何在wordpress中悬停时翻转产品图像？
】如何在wordpress中悬停时翻转产品图像？【英文标题】：HowtoflipProductimageonhoverinwordpress?【发布时间】：2016-02-2214:28:44【问题描述】：我想在鼠标悬停的产品图片上更改或翻转产品图片。所以请建议任何WordPress插件或任何实现该... 查看详情
将图像插入 Android 图库时如何更改图像名称？
】将图像插入Android图库时如何更改图像名称？【英文标题】：HowcanIchangethenameofanimagewheninsertingittotheAndroidgallery?【发布时间】：2011-01-1307:35:45【问题描述】：当我使用Android的相机应用拍照时，它会以与其创建日期/时间相同的名... 查看详情
如何更改图像.svg的样式[重复]
】如何更改图像.svg的样式[重复]【英文标题】：Howtochangestylesofimage.svg[duplicate]【发布时间】：2021-12-3112:55:37【问题描述】：我有一个SVG图像，我使用下一个HTML将其插入<imgalt=""src="src/icons/speedometer-outline.svg"/&am... 查看详情
使用 html 表单将数据插入到 wordpress 表中
】使用html表单将数据插入到wordpress表中【英文标题】：Insertingdataintowordpresstableusingahtmlform【发布时间】：2018-10-3114:47:53【问题描述】：我尝试了几个小时来解决我认为是一个简单的问题，但仍然没有进一步......下面是我将3个字... 查看详情
WordPress 自定义插入到帖子按钮
】WordPress自定义插入到帖子按钮【英文标题】：WordPressCustomInsertIntoPostButton【发布时间】：2012-10-2801:29:42【问题描述】：对于使用WordPress的媒体上传器上传的图片，有一个“插入帖子”按钮，可将短代码发送到该图片的编辑器。... 查看详情
如何使用css，html在wordpress的图像（链接）上覆盖文本
】如何使用css，html在wordpress的图像（链接）上覆盖文本【英文标题】：howtooverlaytextonimage(linked)forwordpressusingcss,html【发布时间】：2017-11-2005:55:59【问题描述】：我正在使用wordpress制作我的购物网站。现在我正在制作头版。我想在... 查看详情
为啥 Wordpress 自定义 HTML 块正在更改我的代码？
】为啥Wordpress自定义HTML块正在更改我的代码？【英文标题】：WhyWordprescustomHTMLblockischangingmycode?为什么Wordpress自定义HTML块正在更改我的代码？【发布时间】：2022-01-1921:12:20【问题描述】：我正在使用“地理定位IP检测”插件，以... 查看详情