在 Wordpress 中设置图片和标题（如果存在）

Question

这是与 Wordpress 相关的问题，但由于所需的解决方案纯粹与 CSS 相关，因此我将其发布在这里，而不是wordpress.stackexchange.com。

在我当前的样式中，如果图像没有以下标题，则使用 HTML 代码放置它：

<p>
    <a href="http://cnn.com/file.jpg">
        <img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55">
    </a>
</p>

在我目前的风格中，它的风格是这样的：

img {
    display: block;
    padding: 5px;
    background-color: #eee;
    border: 1px solid #ddd;
}

在它周围绘制简单的边框。

如果图片后面有标题，这部分的整个 HTML 会稍微复杂一点：

<div id="attachment_55" class="wp-caption aligncenter" style="width: 310px">
    <a href="http://cnn.com/file.jpg">
        <img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55">
    </a>

    <p class="wp-caption-text">Caption</p>
</div>

目前标题完全没有样式（根据我当前选择的主题）。

如果有任何标题，我想要实现的是整个div 样式（图像和标题）。如果我没记错的话，那只需要设置img 的样式（如当前），如果它后面没有<p class="wp-caption-text">。如果是，则根本不应该设置 img 的样式，而是应该设置它的第二行父 (<div class="wp-caption">) 的样式。

这就是算法的全部内容。但是如何在 CSS 中编码（以及是否可能）——我不知道。

最简单的解决方案是永远不要设置img 的样式，而始终设置<div class="wp-caption"> 的样式，无论图像后面是否有标题。但问题是，如果有标题，Wordpress 只会添加该 div。因此，如果只有图像，则仅对其进行样式设置将根本没有边框。

Answer 1

如果你可以使用 Jquery。

然后您可以操作标记。如果你的img 和img with caption 的模式是这样的，你可以这样做。

$('img').each(function(){
    if($(this).parent().parent().hasClass("wp-caption")){
        $(this).parent().parent().addClass('img');
     }
});

我确信这段代码可以得到更好的优化，但它应该会给你一个想法。

看到这个fiddle