web-dev-qa-db-ja.com

Wp-captionに追加のクラスを追加しますか？

キャプション付きの画像が追加されたときに生成されるHTMLに新しいクラスをどのように追加しますか？

たとえば、これから：

<div id="attachment_xyz" class="wp-caption alignleft"...

これに：

<div id="attachment_xyz" class="wp-caption alignleft my_new_class"...

この場合、my_new_classを追加します。

ありがとう、スコット

captions
2
scottdaris

この答えから に適応

このコードをあなたのfunctions.phpファイルに追加してください：

add_action( 'after_setup_theme', 'wpse_74735_replace_wp_caption_shortcode' );

/**
 * Replace the default caption shortcode handler.
 *
 * @return void
 */
function wpse_74735_replace_wp_caption_shortcode() {
    remove_shortcode( 'caption', 'img_caption_shortcode' );
    remove_shortcode( 'wp_caption', 'img_caption_shortcode' );
    add_shortcode( 'caption', 'wpse_74735_caption_shortcode' );
    add_shortcode( 'wp_caption', 'wpse_74735_caption_shortcode' );
}

/**
 * Add the new class to the caption.
 *
 * @param  array  $attr    Shortcode attributes
 * @param  string $content Caption text
 * @return string
 */
function wpse_74735_caption_shortcode( $attr, $content = NULL )
{
    $caption = img_caption_shortcode( $attr, $content );
    $caption = str_replace( 'class="wp-caption', 'class="wp-caption my_new_class', $caption );
    return $caption;
}
4
shea

Wordpress 4.9では、align属性にクラスを書くことができます。このようにキャプションに全角を追加しました。

[caption id="attachment_11537" align="aligncenter full-width" width="1170"]<img src="http://pappmaskin.no/wp-content/2016/03/IMG_5199-1920x712.png" alt="" width="1170" height="434" class="size-large wp-image-11537" /> Fem øl takk[/caption]

出力（jetpackフォトンをオンにした状態）：

<figure id="attachment_11537" style="max-width: 1170px" class="wp-caption aligncenter full-width"><img data-attachment-id="11537" data-permalink="http://pappmaskin.no/?attachment_id=11537" data-orig-file="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?fit=7723%2C2863" data-orig-size="7723,2863" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Illustrasjon: Morten Skogly" data-image-description="" data-medium-file="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?fit=640%2C237" data-large-file="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?fit=1170%2C434" src="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=1170%2C434" alt="" class="size-large wp-image-11537" srcset="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=1920%2C712 1920w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=310%2C115 310w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=640%2C237 640w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=768%2C285 768w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?w=2340 2340w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?w=3510 3510w" sizes="(max-width: 1170px) 100vw, 1170px" width="684" height="254"><figcaption class="wp-caption-text">Fem øl takk</figcaption></figure>
0
Morten Skogly