在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