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

16 jun 2016, 13:14:28
Vistas: 30.2K
Votos: 22

Habilité custom-logo para mi tema y lo imprimo con <?php the_custom_logo(); ?> en el encabezado. ¿Hay alguna manera de agregar simplemente más clases a esta imagen directamente? Por defecto solo viene con custom-logo.

0
Todas las respuestas a la pregunta 7
1
27

WordPress proporciona un filtro para personalizar el logo personalizado. El hook get_custom_logo es el filtro. Para cambiar la clase del logo, este código puede ayudarte.

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 la clase del logo personalizado y el enlace del logo en WordPress

18 jun 2016 08:48:29
Comentarios

¡Gracias, esto funciona perfectamente!

Cuanto más lo miro, más me entristece.

get_custom_logo() debería aceptar una cadena de clases, y no requerir un filtro. También debería tener la opción de mostrar o no un enlace HTML.

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

Aquí hay una sugerencia sobre cómo podríamos intentar añadir clases a través del filtro wp_get_attachment_image_attributes (no probado):

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 puedes ajustar las clases según tus necesidades.

16 jun 2016 13:46:23
Comentarios

Gracias, tu solución funciona mejor.

S1awek S1awek
17 ene 2020 12:18:16
0

Como descubriste, the_custom_logo depende de get_custom_logo, que a su vez llama a wp_get_attachment_image para añadir la clase custom-logo. Esta última función tiene un filtro, wp_get_attachment_image_attributes, que puedes utilizar para manipular los atributos de la imagen.

Así que lo que podrías hacer es construir un filtro que verifique si la clase custom-logo está presente y, de ser así, añadir más clases.

16 jun 2016 13:43:16
0

Para cualquiera que esté buscando soluciones. Encontré esto, que me parece mucho más claro que la respuesta aceptada.

¡Además, proporciona formas simples de cambiar la URL del enlace también! 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;   
} 
26 jun 2019 14:48:28
0

Creo que encontré una respuesta. Pero realmente me pregunto si esta es la forma correcta? Se siente un poco sucio de alguna manera: simplemente copié las partes relacionadas con el logo de wp-includes/general-template.php a functions.php de mi tema y renombré las funciones añadiendo algunas clases personalizadas:

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', // añadí clases aquí
                '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 jun 2016 13:29:13
0

Puedes usar el 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'] = 'tu-clase-personalizada';

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

Solo un pequeño cambio a la respuesta de @Dhinju Divakaran anterior. Primero reemplaza la cadena "custom-logo-link" y luego "custom-logo", ya que "custom-logo" dentro de "custom-logo-link" también estaba siendo reemplazada. A continuación se muestra el código actualizado.

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 may 2024 13:53:34