Comment ajouter une classe CSS à un logo personnalisé?

18

J'ai activé custom-logomon 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 supplémentaires à cette image directement? Par défaut, il n'est fourni qu'avec custom-logo.

— leymannx
source

16

WordPress fournit un crochet de filtre pour la personnalisation du logo personnalisé. Le crochet get_custom_logoest 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 changer le logo personnalisé wordpress et la classe de lien de logo

— Dhinju Divakaran
source

14

Voici une suggestion sur la façon dont nous pourrions essayer d'ajouter des classes via le wp_get_attachment_image_attributesfiltre (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 cours à vos besoins.

— Birgire
source

7

Comme vous vous en êtes rendu the_custom_logocompte get_custom_logo, qui lui-même appelle wp_get_attachment_imageà ajouter la custom-logoclasse. Cette dernière fonction possède un filtre wp_get_attachment_image_attributesque vous pouvez utiliser pour manipuler les attributs de l'image.

Donc, ce que vous pourriez faire, c'est créer un filtre qui vérifie si la custom-logoclasse est là et si oui, ajoutez plus de classes.

— cjbj
source

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 fichier functions.php de mon thème et renommé les fonctions avec des classes personnalisées ajouté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 );
}

— leymannx
source

1

Pour tous ceux qui recherchent des solutions. J'ai trouvé cela , que je trouve beaucoup plus clair que la réponse acceptée.

De plus, il propose également des moyens simples de modifier l'URL du lien! Juste un peu plus détaillé que la réponse acceptée.

add_filter( 'get_custom_logo', 'add_custom_logo_url' );
function add_custom_logo_url() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( 'www.somewhere.com' ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo',
            ) )
        );
    return $html;   
}

— Fred Bradley
source