web-dev-qa-db-fra.com

Ajouter une classe supplémentaire à wp-caption?

Comment ajouter une nouvelle classe au code HTML généré lorsqu'une image avec des légendes est ajoutée?

Par exemple, à partir de ceci:

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

pour ça:

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

Ajouter, dans ce cas, my_new_class .

Merci Scott

captions
2
scottdaris

Adapté de cette réponse

Ajoutez ce code à votre fichier 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

Dans wordpress 4.9, vous pouvez écrire votre classe dans l'attribut align. J'ai ajouté une largeur complète à la légende comme celle-ci.

[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]

La sortie (avec le photon jetpack activé):

<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