HOME || Wordpress || Agregar imagen Logo en el título del sitio WordPress
Creado el: 15 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Agregar imagen Logo en el título del sitio WordPress (Versión AMP)

Agregar imagen Logo en el título del sitio WordPress

Agregar imagen Logo en el título del sitio WordPress

Modificamos la plantilla de nuestro tema WordPress para agregar un Logo justo al lado del título de nuestro sitio.

Indice de contenido

Modificar el Tema en WordPress

Cada tema utilizado en WordPress es diferente, cada uno viene con sus opciones para poder modificarlo a nuestro gusto. Esas opciones son limitadas y no todo puede modificarse desde el editor de WordPress. Para hacer algunas cosas va a ser indispensable que modifiquemos la plantilla desde el código PHP o la hoja de estilo CSS del tema que hayamos elegido para nuestro sitio WordPress, para así lograr que se vea justo como nosotros queramos.

Una de las grandes ventajas de WordPress es precisamente eso. No hay nada que no se pueda modificar. No hay limitaciones. El código es “nuestro”, para eliminar, agregar o modificar lo que queramos. Solo necesitamos un editor de texto del estilo Bloc de notas o si es algún editor como Notepad++ mejor aún, ya que nos muestra el código bien estructurado y con los colores correspondientes al lenguaje que estamos programando.

Hay dos formas de hacer esta operación. Modificando la plantilla PHP o la hoja de estilo CSS del tema que utilicemos. Según como queramos que se vea el resultado final deberemos elegir una u otra opción. Vamos a ver en detalle las dos opciones.

WordPress permite agregar una imagen de cabecera a nuestro sitio, pero éste no es el asunto de este artículo. Lo que queremos hacer es agregar una imagen a modo de “logo” justo al lado del título. Tal cual lo vez en este sitio. Yo he colocado la imagen e inmediatamente después he puesto el título en modo texto.

Como dijimos hay dos maneras de hacerlo:

  • Modificar plantilla PHP
  • Modificar hoja de estilo CSS

Modificar la PLantilla PHP

Los temas de WordPress están compuestos de varios tipos de archivos, entre ellos los llamados de plantilla y se identifican con la extensión PHP. No son más que archivos de texto, pero tienen un código que entienden los servidores web donde tienes alojado tu sitio.

Para agregar un logo en el título de nuestro sitio debemos escribir un código HTML dentro del código de la plantilla PHP que usemos. El archivo ha modificar es header.php aunque podría variar según el tema utilizado, este será comúnmente el archivo a modificar. Búscalo en la carpeta de tu tema.

Al abrirlo, si no estás acostumbrado a ver código PHP mezclado con HTML no te asustes! No es difícil y si es difícil se aprende.

Vamos a buscar el bloque de código en la cual deberemos insertar la etiqueta IMG para indicarle a WordPress que debe insertar una imagen justo antes del texto de nuestro título.

Antes de modificar cualquier archivo de nuestra plantilla haz una copia de seguridad del archivo que vas a modificar. No es necesario hacerla en todos los archivos.!!!

<?php if ( is_front_page() && is_home() ) : ?>
  <h1 class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
      <?php bloginfo( 'name' ); ?>
    </a>
  </h1>
<?php else : ?>
  <p class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
      <?php bloginfo( 'name' ); ?>
    </a>
  </p>
/** RESTO DE CÓDIGO */

Vamos a analizar un poco este código. PHP analiza si la página cargada es la HOME. En ese caso inserta una etiqueta HTML H1 con la clase “site-title”. Luego inserta una etiqueta A y luego el nombre del sitio el cual definimos en el editor de WordPress (en Apariencia –> Identidad del sitio). Ahora bien, si la página no es la HOME hace lo mismo pero reemplaza la etiqueta H1 por P dándole la misma clase (site-title)

Lo que vamos a hacer es insertar ya sea dentro o fuera del enlace una imagen que acompañe a nuestro título del sitio.

Entonces el bloque de código quedaría de esta manera:

<?php if ( is_front_page() && is_home() ) : ?>
  <h1 class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
      <img src="<?php echo esc_url( home_url( '/' ) ); ?>milogo.png" alt="logo de mi sitio" width="xxx" height="xxx">
      <?php bloginfo( 'name' ); ?>
    </a>
  </h1>
<?php else : ?>
  <p class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
      <img src="<?php echo esc_url( home_url( '/' ) ); ?>milogo.png" alt="logo de mi sitio" width="xxx" height="xxx">
      <?php bloginfo( 'name' ); ?>
    </a>
  </p>
/** RESTO DE CÓDIGO */

Las líneas 4 y 11 son las modificadas. Con esto agregamos a todas las páginas de nuestro sitio la imagen Logo. Ten en cuenta que deberás reemplazar la ruta completa a tu imagen y nombre de archivo y extensión.

<?php echo esc_url( home_url( '/' ) ); ?>
Esta línea devuelve la URL home del sitio más una /
En nuestro ejemplo la URL completa a nuestra imagen quedaría como:
http://www.misitio.com/milogo.png

La imagen la podemos poner a la izquierda o derecha. Yo la he puesto dentro de la etiqueta A para que el enlace se conforme por la imagen y texto lo que sería todo nuestro LOGO personal del sitio.

Es aconsejable indicar el ancho y alto ya que si no se carga la imagen por algún problema se dibujará el tamaño exacto de la imagen que, aunque no se vea, no nos deformará la estructura del sitio. También podemos indicarle mediante el atributo ALT el título de la imagen y si llegamos a insertar solo una imagen y quitamos el texto título de nuestro sitio los buscadores utilizarán lo contenido en este atributo.

Si es que quieres que la imagen Logo actúe como enlace a la HOME del sitio debes utilizar este método (el de modificar la plantilla PHP)

Modificar hoja de estilo CSS

Otra forma de agregar una imagen Logo en nuestro título de sitio es modificando la hoja de estilo CSS del tema que tengamos activado en WordPress.

Todos los temas tienen un archivo llamado style.css que es la hoja de estilo principal del mismo, la cual da formato a todo el sitio y a todos los elementos de nuestras páginas. También es un archivo de texto pero en este caso el encargado de interpretar el código CSS es el navegador que utilices para visualizar el sitio.

Debes tener cuidado de modificar la hoja de estilo ya que un cambio mínimo hará que la estructura de tu sitio cambie por completo. Si el tema es responsive quizás tengas problemas de visualización en algún tipo de dispositivo especifico como por ejemplo Tabletas o Móviles.

Abre el archivo style.css al cual vamos a agregarle unas modificaciones para lograr visualizar una imagen en el título del sitio.

Es posible la clase site-branding no esté definida en tu hoja de estilo CSS así que si buscas el código no lo encontrarás. Aún así intenta buscarlo, si lo encuentras agrega el código necesario y si no existe deberás agregar todo el código como te lo muestro abajo.

.site-branding {
	background-image: url('http://www.misitio.com/milogo.png');
	background-repeat:no-repeat; 
	height: 30px;
	padding-left: 70px;
	padding-top: 10px;
}

La clase .site-branding pertenece a una etiqueta DIV. Lo que estamos haciendo en este caso por medio de CSS es agregar una imagen de fondo en este bloque mediante el atributo background-image . Como queremos que el Logo se vea 1 vez sola especificamos que no se repita mediante no-repeat . El valor de atributo height deberás modificarlo para que adapte a la altura de la imagen que utilices. Si la imagen tiene 40 píxeles de alto y al DIV le das 30 se cortará la imagen. Los atributos padding sirven para posicionar el texto del título, ve cambiando estos valores para acomodarlo donde mejor quede según el diseño de tu sitio y de la imagen Logo que hayas diseñado.

Yo utilizo éste método para agregar las imágenes Logo en mi sitio aunque reconozco que para ciertos casos sería mejor modificar la plantilla PHP.

Como verás en mi sitio, en el pie de página también tengo el mismo logo. Esto también lo puedes hacer modificando la clase site-info . Te dejo un ejemplo para que veas como se hace.

.site-info{
	background-image: url('http://www.misitio.com/blog/IMG/logo2.png');
	background-repeat:no-repeat; 
	height: 60px;
	padding-left: 70px;
	padding-top: 20px;
}

Como verás es exactamente lo mismo pero para otra clase diferente. Aunque en este caso los valores de los atributos también son diferentes, los he tenido que adaptar un poco en este caso.

Recomendaciones: uso de Tema HIJO

Todo esto tiene una gran desventaja e inconveniente a la hora de actualizar el tema que utilicemos en WordPress. Como bien sabrás, si eres usuario de WordPress, que los temas, ya sean gratuitos o pagos, se actualizan constantemente para ofrecer nuevas funcionalidades, mejorar el desempeño, seguridad y para seguir siendo compatible con las nuevas versiones de WordPress.

Cuando tu tema se actualice básicamente el programador del mismo reemplaza los archivos viejos por nuevos. Por lo que cualquier modificación directa que le hayas hecho, en este caso al archivo header.php, se reemplazará con el archivo de actualización y perderás todos los cambios y modificaciones personales que hayas hecho.

Es por eso que se recomienda siempre utilizar un “Tema HIJO” para realizar las modificaciones en tu “Template padre”. Si todavía no lo hiciste te recomiendo, antes de que tu sitio crezca y se vuelva más complejo, que realices la operación de creación de un tema hijo en nuestro tema original.

Te ayudará muchísimo a separar tus modificaciones del código original del tema. Te ahorrará mucho trabajo y no correrás ningún riesgo a la hora de actualizar tu tema, lo que es indispensable si es que quieres que tu sitio se adapte a las nuevas funcionalidad de los navegadores actuales y por supuesto tenga la seguridad que el creador del tema ofrece en el mismo.

Para saber paso a paso como crear tu tema hijo visita el siguiente enlace:
Como crear un tema hijo en WordPress

Resumen

Vimos Agregar Imagen Logo en el título

Modificamos la plantilla PHP o la hoja de estilo CSS para insertar una imagen del tipo Logo en el título de nuestro sitio WordPress. Vimos lo versátil que es el CMS y cómo nos permite modificar el diseño y/o estructura de las entradas o páginas tan solo agregando unas líneas de código.

Si queremos asegurarnos que las modificaciones que le hagamos al código se mantengan, aun actualizándose el tema que usemos, recomendamos el uso de un tema HIJO.

Te fue útil el artículo? Califícalo

Votos: - Promedio: