0

これは 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">代わりに行の 2 番目の親 ( ) をスタイルする必要があります。

アルゴリズムは以上です。しかし、これを CSS でコーディングする方法 (そしてそれが可能かどうか) はわかりません。

最も簡単な解決策は、画像の後にキャプションがあるかどうかに関係なく、決してスタイルimgを設定せず、代わりに常にスタイルを設定することです。<div class="wp-caption">しかし問題は、キャプションがある場合、Wordpress がその div のみを追加していることです。そのため、画像だけがある場合、それだけをスタイリングすると、境界線がまったくなくなります。

4

1 に答える 1

1

Jqueryが使えるなら

その後、マークアップを操作できます。imgとのパターンがimg with captionそのようになる場合は、これを行うことができます。

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

このコードはさらに最適化できると確信していますが、アイデアが得られるはずです。

このフィドルを参照してください

于 2013-03-23T19:09:08.160 に答える