使用PHP将HTML标记附加到图像

Question

我试图在WordPress电子商务网站上为产品缩略图添加标题，方法是拉出每个图像的"alt“标签，并在其周围添加标签，使我能够将CSS应用于标题。

我已经找到了一个JQuery脚本(实际上，我已经找到了几个)，它可以成功地将"alt“文本作为标题提取出来，但是它没有添加任何HTML - or，甚至没有将标题插入到页面源代码中。所以它在前端，但我没有办法选择或样式它。

<script type="text/javascript">
$(document).ready(function(){
$(".thumbnails img.attachment-shop_thumbnail").each(function() {
var caption = $(this).attr("alt");
$(this).before('<figure>');
$(this).after('<figcaption>' + caption + '</figcaption></figure>'
);
});
});
</script>

如果我能找到一个可以工作的脚本，我愿意在这里使用JQuery；但是我觉得PHP可能是一个更好的方法。唯一的问题是，我还没找到能让我自相残杀的东西。。。

Answer 1

如果它在前端，那么此时您应该能够在css文件中添加标记并显示它：

figcaption {
  border: 1px solid red;
  font-weight: bold;
}

等等。或者，更好的做法是，将figure和figcaption更改为div，并为它们指定类名。

它没有出现在源代码中的原因可以从这个堆栈溢出问题中读出：

Is it correct that page elements created by jQuery do not show up in the source code