Come aggiungere la classe CSS al logo personalizzato?

18

Ho abilitato il custom-logomio tema e l'ho stampato con <?php the_custom_logo(); ?>nell'intestazione. C'è qualche possibilità di aggiungere semplicemente altre classi direttamente a questa immagine? Per impostazione predefinita viene fornito solo con custom-logo.

— leymannx
fonte

16

WordPress offre un gancio per la personalizzazione del logo personalizzato. Il gancio get_custom_logoè il filtro. Per cambiare la classe del logo, questo codice può esserti di aiuto.

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 modificare il logo personalizzato wordpress e la classe di collegamento logo

— Dhinju Divakaran
fonte

14

Ecco un suggerimento su come potremmo provare ad aggiungere classi attraverso il wp_get_attachment_image_attributesfiltro (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 adegui le lezioni alle tue esigenze.

— birgire
fonte

7

Come ti sei trovato the_custom_logosu get_custom_logocui contare , che a sua volta chiama wp_get_attachment_imageper aggiungere la custom-logoclasse. Quest'ultima funzione ha un filtro, wp_get_attachment_image_attributesche puoi usare per manipolare gli attributi dell'immagine.

Quindi quello che potresti fare è costruire un filtro che controlla se la custom-logoclasse è presente e se sì aggiungi altre classi.

— cjbj
fonte

2

Penso di aver trovato una risposta. Ma mi chiedo davvero se questa è la strada giusta? Mi sembra un po 'sporco in qualche modo: ho semplicemente copiato le parti relative al logo da wp-Includes / general-template.php nelle funzioni.php del mio tema e ho rinominato le funzioni con alcune classi personalizzate aggiunte:

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
fonte

1

Solo per chiunque cerchi soluzioni. Ho trovato questo , che trovo molto più chiaro della risposta accettata.

Inoltre offre semplici modi per modificare anche l'URL sul 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;   
}

— Fred Bradley
fonte