Theme WordPress Inclusivo 6: Insertando el Logo

En el capítulo anterior tratamos la estructura básica html en un theme wordpress, en esta ocasion empezaremos a dar forma al html del header e insertamos el logotipo, que en esta ocasión será un fichero que aportamos con el theme, emulando lo que ocurriría con el logo de un cliente en un theme a medida.

Como primer paso abramos header.php y escribamos el siguiente código:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Nombre del sitio web</title>
  </head>
  <body>
    <header>
      <div id="logo">
        <!--Aqui el logo-->
      </div>
      <nav aria-label="Menu Principal">
        <!--Aqui el menú de navegación-->
      </nav>
    </header>

Básicamente sustituimos el h2 del capítulo anterior por una estructura mejorada en html5 con el mínimo de elementos id y class, y un aria-label en el nav que permitirá a usuarios de lector de pantalla navegar entre los menús de navegación por nombre, algo que aumenta notablemente el nivel de accesibilidad funcional en este tipo de menús.

Incrustando el Logo

Ahora que hemos mejorado la estructura del header para dar cabida a los elementos principales, menú y logo, vamos a incorporar el primer de estos, de nuevo abrimos header.php y colocamos el siguiente código:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
	  <title>Nombre del sitio web</title>
  </head>
  <body>
    <header>
      <div id="logo">
        <figure>
          <img src="<?php echo get_template_directory_uri();?>/img/logo.svg" 
               alt="Descripcion #alttext">
        </figure>
      </div>
      <nav aria-label="Menu Principal">
        <!--Aqui el menú de navegación-->
      </nav>
    </header>

En primer lugar, puede que te haya llamado la atención el uso de la etiqueta figure en lugar de directamente usar img, esto responde a las recomendaciones actuales de uso de html5 que establecen la especial importancia de la semántica de las etiquetas.

En segundo, el uso de get_template_directory_uri, esta función nos devuelve la ruta de la carpeta del theme, recomiendo situar las imágenes dentro de una carpeta “img” en el theme de forma que las tengamos localizadas. Si colocamos en ella nuestro fichero logo.svg correspondiente al logo deseado, este aparecerá en pantalla.

Por último, la descripción de la imagen a través del atributo alt, no solo necesaria, sino imprescindible en un contexto de inclusión.

¿Por qué sale enorme?

Sirva decir que por ahora estamos incorporando elementos al html, obviando completamente el uso de css. Mas adelante ya centraremos la atencion en la parte visual, pero por ahora me gustaría centrarme en la parte estructural y no preocuparme tanto por el aspecto como por hacer que aparezca y explicaros como es que lo hace.

En el próximo capítulo centraremos nuestra atención en el menú de navegación principal de nuestro sitio web.

¡Compártelo!

Ayudame a difundir este contenido a todo aquel que pueda sacarle partido, difundelo en redes, cuéntaselo a tus amigos, coméntalo en la cola del supermercado, además de aportar, ¡seguro que conoces a gente interesante y acabas uniéndose al bando rebelde!

Sígueme en Redes

Acelera mi progreso de la materia que te interesa.

El calendario y ritmo de publicaciones actualmente responde a mis necesidades de estudio y desarrollo de proyectos personales, si quieres invertir en que acelere alguna materia concreta, te ofrezco una posibilidad:

Puedes donar en mi paypal (paypal at metsuke.com), indicando la materia, por cada 25 euros donados, priorizaré un capítulo de la materia que me indiques que ya tenga escrito para que salga el proximo dia viable y disponible de lunes a viernes (en orden de llegada y a un post diario).

En caso de que el capítulo aún no exista, centraré mi atención en escribirlos y publicarlos con prioridad, pero no puedo prometer inmediatez.

De nuevo priorizaré las donaciones por orden de llegada pero cuando coincidan varias, iré rotando cada dia una para evitar la monopolización de mi foco de tareas.

Me reservo el fin de semana para priorizar lo que considere pertinente en el caso de que haya cola de entrega. Si te gusta el proyecto, ¡es un buen modo de apoyarme!

¿Te interesan mis servicios como consultor?

En ese caso, pudedes contactarme en mi correo r.carrillo@metsuke.com y cuéntame que necesitas, si lo que leo me gusta, te pongo en contacto con el comercial de mi empresa de consultoría.

Si quieres que sea yo expresamente quien te atienda, puedes indicármelo y llegamos a un acuerdo.

Advierto que esta última posibilidad te saldrá bastante más cara que hablar con mi equipo, pero si es lo que deseas, a tu disposición.

Un Abrazo.

Sobre las traducciones

Por el momento me he visto obligado a detener la traducción del contenido, apenas doy abasto a escribirlo (que es mi objetivo, ya que son mis apuntes de estudio), por lo que no parece tener sentido mantener activas unas traducciones que no doy abasto a crear.

En caso de que más adelante el flujo de caja me lo permita, es mi intención contratar servicios de traducción y editores que realicen la tarea, pero por ahora lo dejo desactivado.

Quizá te interese leer más sobre Wordpress Inclusivo

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>