URL de Logo Personalizado | Ayúdame a mostrar la URL del logo personalizado que inserté en mi tema

Question

URL de Logo Personalizado | Ayúdame a mostrar la URL del logo personalizado que inserté en mi tema

22 ene 2020, 19:10:02

Vistas: 19.8K

Votos: 1

Estoy tratando de usar los componentes separados de la función the_custom_logo() para crear mi propia visualización del logo.

¿Podría alguien informarme cómo puedo acceder a la URL y a la referencia de la imagen de forma separada?

Muchas personas han preguntado cómo cambiar la URL, lo cual no es la pregunta que necesito que me respondan. Deseo poder manipular el código de esta manera (este es un ejemplo básico de mis planes, para que puedan entender los dos componentes que deseo poder obtener):

<div class="site-branding">
    <a href="<?php get_custom_logo_url(); ?>" class="box-link">
        <img src="<?php get_custom_logo_src(); ?>" class="site-logo" alt="Logo">
    </a>
</div>

Estoy usando un tema en blanco, con el logo y el enlace ya configurados en el back-end de WordPress.

Usando este fragmento en mi encabezado, el logo y el enlace se muestran como se esperaría:

<?php the_custom_logo(); ?>

Gracias a todos los contribuyentes, Jason.

Jason Is My Name

378

php funciones desarrollo de temas logotipo

Todas las respuestas a la pregunta

Comentarios

Ese es un gran método para manejar la imagen, ¿hay alguna forma de obtener el enlace asociado al logo del tema (no el enlace al logo, sino a dónde apunta)? Necesito ambos. Agrega eso a tu respuesta para que pueda votar y aceptar c:

Jason Is My Name

23 ene 2020 11:09:01

Eso es absolutamente perfecto amigo, agradezco la actualización y la extensión al texto alternativo. ¡Por favor vota mi pregunta si disfrutaste respondiéndola!

Jason Is My Name

23 ene 2020 12:58:51

Tim Elsass 1.34K · Accepted Answer · 2020-01-22T19:37:00Z

Usa wp_get_attachment_image_src para obtener las propiedades y la URL de la imagen:

$logo = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $logo , 'full' );
$image_url = $image[0];
$image_width = $image[1];
$image_height = $image[2];

Editar: Añadiendo más información basada en tu comentario.

La URL a la que apunta simplemente se crea con home_url:

esc_url( home_url( '/' ) );

Otra cosa que a menudo se olvida al usar este método es respetar el contenido del alt si está configurado en los medios:

$alt = get_post_meta( $logo, '_wp_attachment_image_alt', true );
if ( empty( $alt ) ) {
    // Usar el título del sitio si no se proporciona alt.
    $alt = get_bloginfo( 'name', 'display' );
}

Te animo a que mires el código fuente de get_custom_logo ya que utilizaría la mayor parte de esto.

También vale la pena mencionar que si estás desarrollando este tema para lanzarlo en WordPress.org/themes, es un requisito usar the_custom_logo o get_custom_logo en lugar de crear tu propia solución.

Por esta razón, hay un filtro para la salida HTML en get_custom_logo, que podría ser mejor usar y reemplazar las partes que necesites. La función get_custom_logo (utilizada por the_custom_logo) también maneja un poco más, como multisitio y asegurar que el marcador de posición esté allí para la vista previa del personalizador. El uso sería algo como esto:

add_action( 'get_custom_logo', function( $html ) {
    $new_url = 'href="' . get_theme_mod( 'custom_logo_url', esc_url( home_url( '/' ) ) ) .'"';
    $new_link_class = 'class="box-link"';
    $html = str_replace( 'href="' . esc_url( home_url( '/' ) ) . '"', $new_url, $html );
    $html = str_replace( 'class="custom-logo-link"', $new_link_class, $html );
    return $html;
} );

Eso leería un valor del theme_mod custom_logo_url que podría provenir de un control del personalizador, y cambia la clase de .custom-logo-link a .box-link en tu ejemplo.