Comment ajouter une classe CSS à un logo personnalisé?

15

J'ai activé custom-logo le thème et l'ai imprimé avec <?php the_custom_logo(); ?> dans l'en-tête. Y a-t-il une chance d'ajouter simplement quelques classes à cette image directement? Par défaut, il ne s'agit que de custom-logo .

    
posée leymannx 16.06.2016 - 12:14

4 réponses

13

WordPress fournit un crochet de filtre pour la personnalisation du logo personnalisé. Le crochet get_custom_logo est le filtre. Pour changer de classe de logo, ce code peut vous aider.

add_filter( 'get_custom_logo', 'change_logo_class' );


function change_logo_class( $html ) {

    $html = str_replace( 'custom-logo', 'your-custom-class', $html );
    $html = str_replace( 'custom-logo-link', 'your-custom-class', $html );

    return $html;
}

Référence: Comment modifier le logo personnalisé Wordpress et la classe de liens de logo

    
réponse donnée Dhinju Divakaran 18.06.2016 - 07:48
12

Voici une suggestion sur la façon dont nous pourrions essayer d'ajouter des classes via le filtre wp_get_attachment_image_attributes (non testé):

add_filter( 'wp_get_attachment_image_attributes', function( $attr )
{
    if( isset( $attr['class'] )  && 'custom-logo' === $attr['class'] )
        $attr['class'] = 'custom-logo foo-bar foo bar';

    return $attr;
} );

où vous ajustez les classes à vos besoins.

    
réponse donnée birgire 16.06.2016 - 12:46
7

Comme vous l'avez constaté, the_custom_logo s'appuie sur get_custom_logo , qui lui-même appelle wp_get_attachment_image pour ajouter la classe custom-logo . Cette dernière fonction a un filtre, wp_get_attachment_image_attributes , que vous pouvez utiliser pour manipuler les attributs d'image.

Vous pouvez donc créer un filtre qui vérifie si la classe custom-logo est présente et si oui, ajoutez d'autres classes.

    
réponse donnée cjbj 16.06.2016 - 12:43
2

Je pense avoir trouvé une réponse. Mais je me demande vraiment si c'est la bonne façon? Cela semble un peu sale en quelque sorte: j'ai simplement copié les parties liées au logo de wp-includes / general-template.php dans le functions.php de mon thème et renommé les fonctions avec l'ajout de classes personnalisées:

function FOOBAR_get_custom_logo( $blog_id = 0 ) {
    $html = '';

    if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) {
        switch_to_blog( $blog_id );
    }

    $custom_logo_id = get_theme_mod( 'custom_logo' );

    if ( $custom_logo_id ) {
        $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( home_url( '/' ) ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo FOO-BAR FOO BAR', // added classes here
                'itemprop' => 'logo',
            ) )
        );
    }

    elseif ( is_customize_preview() ) {
        $html = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>',
            esc_url( home_url( '/' ) )
        );
    }

    if ( is_multisite() && ms_is_switched() ) {
        restore_current_blog();
    }

    return apply_filters( 'FOOBAR_get_custom_logo', $html );
}

function FOOBAR_the_custom_logo( $blog_id = 0 ) {
    echo FOOBAR_get_custom_logo( $blog_id );
}
    
réponse donnée leymannx 16.06.2016 - 12:29

Lire d'autres questions sur les étiquettes