web-dev-qa-db-ja.com

ページ内のキャプションが幅に不要な10ピクセルを追加

作業中のページにキャプション付きの画像を作成しようとしています。画像オプションでは、画像幅220で正しく整列しています。表題なしでは問題ありませんが、表題を追加するとインラインスタイル幅230pxのdivラッパーが追加されます。これを修正する唯一の方法は、画像オプションの幅を210pxに手動で設定することです。これにより、インライン幅は220pxになります（値に10pxが加算されるだけです）。

この10pxがインラインスタイルの幅に追加されないようにするにはどうすればよいですか。

imagespagescaptions
2
Dave Hunt

できることは次のとおりです。フロントエンドのショートコード実行関数の先頭には、キャプションをハイジャックできるフィルターがあります。空でない値を返すと、ショートコードの実行が停止するため、ショートコードを処理したい方法で処理し、その結果を返す場合、厄介な10pxのインラインパディングを取り除くことができます。このようなものをテーマのfunctions.phpファイルまたはプラグインに入れると動作します：

function wpse14305_img_caption( $empty_string, $attributes, $content ){
  extract(shortcode_atts(array(
    'id' => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => ''
  ), $attributes));
  if ( empty($caption) )
    return $content;
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

add_filter( 'img_caption_shortcode', 'wpse14305_img_caption', 10, 3 );
4
John P Bloch

.

function wp456_img_caption_width( $width, $atts, $content){
    //by default 10 is added if image caption
    return $width - 10;
 }

add_filter( 'img_caption_shortcode_width', 'wp456_img_caption_width', 10, 3 );
1
Bridget

私はこれに異なるアプローチをする傾向があります John -彼の解決策はWordpressアップデートで変更されたimg_caption_shortcode()関数の内部を複製することを含みます。 。代わりに、キャプション生成コードに渡されたショートコードパラメータをフックし、幅から10pxを差し引くだけで、Wordpressが実行していることに対処できます。

add_filter('shortcode_atts_caption', 'fixExtraCaptionPadding');

function fixExtraCaptionPadding($attrs)
{
    if (!empty($attrs['width'])) {
        $attrs['width'] -= 10;
    }
    return $attrs;
}
0
pospi

.

.wp-caption {
    display: table-cell;
    width: auto !important;
}

Setting the width to auto on a block element would result in its width expanding to fill the available space, which is probably not what is wanted, but setting display: table-cell causes the div to automatically resize according to the content.

As a table-cell element, the wp-caption div auto-sizes as if it were an inline-block, yet it behaves like a block element in that content that follows after it, even inline content with no container, renders below the div and not on the same line, as it would if it were an inline-block.

(The !important is needed as inline styling otherwise overrides the stylesheet.)

I've not managed to find a definitive description of how a css table-cell is supposed to behave, but I have tested this in Internet Explorer (including IE8 on WinXP), Firefox, Chrome and Opera, and found complete consistency.

0
WebSmithery