Cómo colocar un logo en un encabezado en WordPress

Escrito por sara williams | Traducido por ana maría guevara
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo colocar un logo en un encabezado en WordPress
Edita el archivo de tu encabezado para añadir un logo. (Comstock Images/Comstock/Getty Images)

WordPress usa temas, similares a las plantillas para sitios web, para mostrar tu contenido en sus blogs y páginas. Lo que hace que estos temas sean ejecutados son los archivos de plantillas escritos en HTML y PHP. Estos archivos usan funciones PHP integradas llamadas "etiquetas de plantillas" para traer el contenido y otra información de la base de datos en donde WordPress lo almacena todo. El encabezado de tu sitio web, por ejemplo, existe en el archivo de plantilla "header.php". Puedes usar una combinación de etiquetas de plantillas y tus propios archivos de gráficos para añadir un logo a la plantilla del encabezado, el que se mostrará en la parte superior de cada página de tu sitio web en WordPress.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 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".

  2. 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.

  3. 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" />

  4. 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.

  5. 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>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles