Come aggiungere una classe CSS al logo personalizzato?

16 giu 2016, 13:14:28
Visualizzazioni: 30.2K
Voti: 22

Ho abilitato custom-logo per il mio tema e l'ho inserito con <?php the_custom_logo(); ?> nell'header. C'è un modo per aggiungere semplicemente altre classi direttamente a questa immagine? Di default viene solo con custom-logo.

0
Tutte le risposte alla domanda 7
1
27

WordPress fornisce un hook filter per la personalizzazione del logo personalizzato. L'hook get_custom_logo è il filtro. Per cambiare la classe del logo, questo codice potrebbe esserti utile.

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;
}

Riferimento: Come cambiare la classe del logo personalizzato e del link del logo in WordPress

18 giu 2016 08:48:29
Commenti

Grazie, funziona perfettamente!

Più guardo questa cosa, più mi rende triste.

get_custom_logo() dovrebbe accettare una stringa di classi, e non richiedere un filtro. Dovrebbe anche avere l'opzione per restituire o meno un link HTML.

Adam Patterson Adam Patterson
30 mar 2020 06:38:35
1
15

Ecco un suggerimento su come potremmo provare ad aggiungere classi attraverso il filtro wp_get_attachment_image_attributes (non testato):

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;
} );

dove puoi modificare le classi in base alle tue esigenze.

16 giu 2016 13:46:23
Commenti

Grazie, la tua soluzione funziona al meglio.

S1awek S1awek
17 gen 2020 12:18:16
0

Come hai scoperto, the_custom_logo si basa su get_custom_logo, che a sua volta chiama wp_get_attachment_image per aggiungere la classe custom-logo. Quest'ultima funzione ha un filtro, wp_get_attachment_image_attributes, che puoi utilizzare per manipolare gli attributi dell'immagine.

Quindi quello che potresti fare è creare un filtro che verifichi se la classe custom-logo è presente e, in caso affermativo, aggiungere altre classi.

16 giu 2016 13:43:16
0

Per chiunque altro stia cercando soluzioni. Ho trovato questo, che trovo molto più chiaro della risposta accettata.

Inoltre, fornisce modi semplici per modificare anche l'URL del link! Solo un po' più dettagliato della risposta accettata.

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;   
}
26 giu 2019 14:48:28
0

Credo di aver trovato una soluzione. Ma mi chiedo se sia il modo corretto? Sembra un po' sporco in qualche modo: ho semplicemente copiato le parti relative al logo da wp-includes/general-template.php nel functions.php del mio tema e rinominato le funzioni aggiungendo alcune classi personalizzate:

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', // aggiunte classi qui
                '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 );
}
16 giu 2016 13:29:13
0

Puoi utilizzare il filtro get_custom_logo_image_attributes

add_filter( 'get_custom_logo_image_attributes', function(  
$custom_logo_attr, $custom_logo_id, $blog_id  )
{
    $custom_logo_attr['class'] = 'your-custom-class';

    return $custom_logo_attr;
} ,10,3);
21 apr 2022 21:17:30
0

Una piccola modifica alla risposta di @Dhinju Divakaran sopra. Sostituisci prima la stringa "custom-logo-link" e poi "custom-logo" perché "custom-logo" all'interno di "custom-logo-link" veniva sostituito erroneamente. Di seguito il codice aggiornato.

function change_logo_class($html) {
    
    $html = str_replace('custom-logo-link', 'navbar-brand', $html);
    $html = str_replace('custom-logo', 'img-fluid', $html);
    return $html;
}
add_filter( 'get_custom_logo', 'change_logo_class' );
31 mag 2024 13:53:34