¿Cómo agregar una clase CSS al logotipo personalizado?

Respuestas:

16

WordPress proporciona un gancho de filtro para personalizar el logotipo personalizado. El gancho get_custom_logoes el filtro. Para cambiar la clase de logotipo, este código puede ayudarlo.

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

Referencia: Cómo cambiar el logotipo personalizado de wordpress y la clase de enlace del logotipo

Dhinju Divakaran
fuente
14

Aquí hay una sugerencia de cómo podríamos intentar agregar clases a través del wp_get_attachment_image_attributesfiltro (sin probar):

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

donde ajustas las clases a tus necesidades.

Birgire
fuente
7

Como se encontró, the_custom_logodepende de sí mismo get_custom_logo, lo que a su vez requiere wp_get_attachment_imageagregar la custom-logoclase. La última función tiene un filtro, wp_get_attachment_image_attributesque puede usar para manipular los atributos de la imagen.

Entonces, lo que podría hacer es crear un filtro que verifique si la custom-logoclase está allí y, si es así, agregue más clases.

cjbj
fuente
2

Creo que encontré una respuesta. Pero realmente me pregunto si esta es la forma correcta? De alguna manera se siente un poco sucio: simplemente copié las partes relacionadas con el logotipo de wp-includes / general-template.php en las funciones de mi tema.php y cambié el nombre de las funciones con algunas clases personalizadas agregadas:

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
fuente
1

Solo para cualquiera que esté buscando soluciones. Encontré esto , que encuentro mucho más claro que la respuesta aceptada.

Además, también ofrece formas simples de cambiar la URL en el enlace. Solo un poco más detallado que la respuesta aceptada.

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
fuente