Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
WordPress

Logo de tema, nueva característica en WordPress 4.5

WordPress 4.5, entre otras mejoras y resolución de incidencias y vulnerabilidades, introduce una nueva característica para agregar un logo de tema de forma nativa. Ya en la versión 4.3 se añadió el Site Icon, y ahora en la misma opción del personalizador podemos definir también una imagen para el logotipo de nuestro sitio.

Para activar esta característica en nuestro tema, debemos indicarlo en el functions.php. Normalmente los temas tienen una función de setup en éste archivo, simplemente tendríamos que indicar que nuestro tema soporta la nueva característica custom-logo:

function my_theme_setup() { add_theme_support( 'custom-logo', array( 'height' => 240, 'width' => 240, 'flex-height' => true, )); } add_action( 'after_setup_theme', 'my_theme_setup' );

Como vemos, podemos establecer unas dimensiones por defecto. Ahora ya podemos dirigirnos a Apariencia => Personalizar y pinchar en la opción Identidad del sitio y subir la imagen para el logotipo de nuestro sitio.

custom logo

Para mostrarlo en el front de nuestro sitio disponemos de unas nuevas funciones llamadas the_custom_logo() y get_custom_logo() que pintan o devuelven un html como el siguiente:

<a href="http://misitio.com/" class="custom-logo-link" rel="home" itemprop="url"><img width="240" height="240" src="http://misitio.com/wp-content/uploads/2016/04/mi-logo.png" class="custom-logo" alt="Mi Sitio" itemprop="logo" srcset="http://misitio.com/wp-content/uploads/2016/04/mi-logo.png 240w, http://misitio.com/wp-content/uploads/2016/04/mi-logo.png 150w" sizes="(max-width: 240px) 85vw, 240px"></a>

Como podemos ver es una etiqueta imagen con enlace a la home de nuestro sitio. En la etiqueta a nos añade la clase custom-logo-link y en la etiqueta img la clase custom-logo, para poder trabajar con ellas en nuestra hoja de estilos y personalizar su apariencia, posición, etc…

Si lo que queremos es obtener únicamente la URL de la imagen que hemos establecido como logo de tema, podemos hacer esto:

<?php $custom_logo_id = get_theme_mod( 'custom_logo' ); $image = wp_get_attachment_image_src( $custom_logo_id , 'full' ); echo $image[0];

Con esto ya tendremos el tema preparado para poder establecer una imagen para el logotipo. De este modo se facilita la creación de sitios corporativos tanto para el usuario final, que se beneficiará de tener esta opción integrada dentro del panel de personalización de WordPress, como para los desarrolladores que no tendremos que inventar nada nuevo ya que a partir de ahora esta opción la tendremos disponible de forma nativa.

Puede que también te interese

Cómo solucionar el error interno del servidor en WordPress
Cómo solucionar el error interno del servidor en WordPress
Otro de los errores más comunes o que con más frecuencia nos podemos encontrar, es el error interno del servidor ó error 500. Se identifica claramente…
WP-CLI Parte 3, trabajando con posts
WP-CLI Parte 3, trabajando con posts
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…
Cómo añadir nuestras propias opciones multi-idioma en el personalizador de WordPress
Cómo añadir nuestras propias opciones multi-idioma en el personalizador de WordPress
En la entrada anterior veíamos cómo agregar nuestras propias opciones en el personalizador de WordPress. En ésta entrada vamos a ver cómo podríamos organizarlas por…
Cómo integrar los estilos de los menús de bootstrap con WordPress
Cómo integrar los estilos de los menús de bootstrap con WordPress
Si estás desarrollando un tema nuevo en WordPress y estás usando el framework Bootstrap para la maquetación del Front-end, probablemente te hayas encontrado con el…