Question

我正在尝试通过拉动每个图片的“alt”标记并在其周围添加标签来为WordPress电子商务网站上的产品缩略图添加字幕，以便我可以将CSS应用于标题。

我发现了一个JQuery脚本（实际上，我发现了几个）成功地将“alt”文本作为标题提取，但它没有添加任何HTML - 甚至将标题插入到页面中资源。所以它在前端，但我无法选择或设计它。

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

...等或者，更好的是，将数字和figcaption改为div并给它们命名。

可以在此堆栈溢出问题上读取它未显示在源中的原因：

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

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

1 个答案: