Cómo colocar un logo en un encabezado en WordPress

Edita el archivo de tu encabezado para añadir un logo.
Por sara williams

Paso 1

Abre el archivo de plantilla "header.php" de la carpeta que contiene todos los archivos de tu tema actual de WordPress. Puedes encontrar esta carpeta navegando hasta la carpeta principal de tu sitio web y haciendo doble clic en "wp-contents" y después en "themes".


Paso 2

Coloca una etiqueta <img> en el código en donde quieres mostrar el logo. Puedes colocarlo en cualquier parte después de <body>, pero una etiqueta <div> que se llame algo como "header" o "logo" es lo mejor. Los nombres de las etiquetas <div> en los temas varían, pero deberías saber cuál es su propósito basándote en su nombre. Aquí tienes un ejemplo:

<div id="heading"> <img src="logo.png" /> <?php wp_nav_menu(); ?> </div>

En el código de arriba, se añadió una etiqueta <img> a un <div> llamado "heading" y debajo está el código para un menú WordPress.


Paso 3

Añade la función bloginfo() a la ruta de tu logo dentro de la etiqueta <img>. Puedes usar bloginfo() para indicar la ruta de los archivos de tu tema. El código luce así:

<img src="<?php bloginfo('template_directory'); ?>/logo.png" />

El navegador verá entonces la ruta a la carpeta del tema. Si tu logo está ubicado dentro de una carpeta llamada "Imágenes" dentro de la carpeta de tu tema, usa un código como éste:

<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" />


Paso 4

Envuelve una etiqueta de ancla alrededor de tu logo para convertirlo en un enlace. Debes vincular el logo a tu página de inicio ya que es lo que esperan los usuarios. Este es el código:

<a href="<?php bloginfo('wpurl'); ?>"><img src="<?php bloginfo('template_directory'); ?>/logo.png"></a>

Nota que la etiqueta de ancla también usa la función bloginfo(), pero ahora contiene "wpurl" en vez de "template_directory". Estos parámetros le indican a la función qué tipo de información quieres mostrar. En este caso, "wpurl" muestra la URL, la dirección web, de tu sitio web en WordPress.


Paso 5

Usa bloginfo() para añadir más información a tu logo, como un título para el enlace o un texto alternativo. Añadir esta información es bueno para la Optimización de Motores de Búsqueda, o SEO por sus iniciales en inglés, y mejorará tu ranking en Google. Aquí está el código con los atributos "title" y "alt" añadidos:

<a href="<?php bloginfo('wpurl'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php bloginfo('template_directory'); ?>/logo.png" alt="Welcome to <?php bloginfo('name'); ?>"></a>