Mejorando la cabecera de WordPress

La cabecera de un sitio web es lo primero que vemos al entrar en el mismo. En este artículo partiremos de la cabecera básica que creamos en el primer artículo de esta serie, para ir completándola y mejorándola hasta darle el toque profesional que buscamos.

Veamos primero el archivo header.php que creamos en el primer artículo, para pasar a explicarlo antes de realizar los cambios:

Antes que nada, veamos cuál es la estructura básica de una página web:

Como vemos, en nuestro archivo header.php, lo que hacemos es definir todos los parámetros de la sección HTML <head>…</head>, abrimos la sección <body>, dentro abrimos la capa <div class=”wrapper”> y, finalmente incluimos la cabecera que se visualiza <header>…</header>.

Parecería más lógico pasar todo el código a partir de la etiqueta <body> (incluida esta) al archivo de plantilla index.php, pero ello nos obligaría a repetir todo este código en diversos archivos (como, p. ej., single.php, pero también muchos más), lo que haría más complicadas las tareas de mantenimiento y podría provocar errores. Recordemos que en programación web una de las premisas que debemos tener en cuenta es que todas las páginas de nuestro sitio tengan una apariencia muy similar.

Si nosotros ahora vemos el código fuente de la página en ejecución, tenemos estas primeras líneas:

El cambio se debe a las siguientes funciones de WordPress:

  • language_attributes() muestra los atributos de lenguaje para la etiqueta HTML <html>. Estos atributos pueden ser dir (dirección del texto), lang (idioma) y xml:lang. Generalmente, suele resultar lang. Tiene también la forma language_attributes( $doctype ), donde $doctype es una cadena opcional que indica el tipo de documento: ‘xhtml’ o ‘html’. Por defecto, es ‘html’.
  • bloginfo ( $show ) muestra información del sitio, que hemos indicado nosotros en el panel de administración, en el perfil de usuario y en ajustes generales. El parámetro $show puede tener muchísimos valores, entre los que vamos a destacar:
  • ‘charset’ muestra el juego de caracteres de la codificación del sitio.
  • ‘pingback_url’ muestra la URL del fichero XML-RPC de pingback (para conexiones entre sitios).
  • ‘stylesheet_url’ muestra la URL del fichero primario CSS, generalmente style.css.
  • ‘name’ muestra el título del sitio
  • ‘description’ muestra la descripción del sitio
  • get_option( $option, $default ) es una forma segura de extraer y establecer valores de la tabla ‘options’ de la base de datos de WordPress. En el parámetro $option se debe especificar qué valor queremos que nos devuelva y en $default le podemos especificar dicho valor.

Así pues, si vamos línea por línea, lo que hacemos en header.php, es:

  • Le indicamos al navegador que este documento es html con <!DOCTYPE html>.
  • Le indicamos el idioma de la página lan=”es-ES”
  • El juego de caracteres a emplear UTF-8.
  • Preparamos la página web para que sea legible en dispositivos móviles. <meta name=”viewport” content=”width=device-width, initial-scale=1″>.
  • Con <link rel=”pingback”> le indicamos el archivo PHP que atenderá cuándo nuestra página sea vinculada desde otra.
  • Establecemos el archivo style.css, como el archivo CSS de estilos
  • Finalmente, con la función de WordPress wp_head(), activamos funciones del ‘core’ de WordPress y de los plugins que tengamos instalados, los cuales añadirán a la sección <head>…</head> elementos necesarios para su funcionamiento.

Vamos a mejorar la cabecera

Primero, vamos a arreglar la pestaña de nuestro navegador cuando está en nuestra página. Aquí hay dos elementos: el título y un icono.

Para hacerlo, añadimos las siguientes líneas a nuestro header.php:

Más adelante, bajo el título de la cabecera que se visualizará por pantalla, añadimos la descripción:

Finalmente, quiero poner un menú con las diferentes categorías de artículos que tengo en mi sitio. Para ello, tras la descripción, incluimos las siguientes líneas:

Y, paralelamente, al final del archivo functions.php, añadimos:

Explicación:

Primero, tenemos que habilitar los menús en el archivo functions.php:

  • add_theme_support( $feature, $args ) habilita una característica nueva al tema que estamos creando, en nuestro caso $feature es ‘nav-menus’.
  • register_nav_menus( $localizaciones ) requiere una matriz (array) asociativa con la clave y un nombre. El nombre de la localización nos aparecerá después en el gestor de menús del tema para que podamos asignar el menú que creemos a dicha localización.

Entonces, ya podemos emplearla en el lugar del tema que queramos, en este caso, en la cabecera:

  • wp_nav_menu( $args ) muestra un menú con los argumentos que le pasamos en una matriz (array) asociativa. En dicha matriz, las claves son múltiples, si bien la obligada es ‘menu’ cuyo valor debe coincidir con el nombre de la localización, en nuestro caso ‘Principal’. El resto de parámetros nos sirven para formatear el menú.

Al final, nuestro archivo header.php nos ha quedado así:

Formateando la cabecera

Vamos a añadir en el fichero style.css las siguientes líneas:

Por partes: Primero la cabecera:

  1. Integramos una nueva fuente de letra, al estilo Minority Report, la fuente Orbitron, extraida de Google fonts. La establecemos a las cabeceras tipo h1, h2 y h3. También le damos un color clarito y semi-transparente con rgba( 28, 255, 255, 0.4) (el último índice 0.4 indica el nivel de opacidad).
  2. Los vínculos que son cabeceras (h1 a, h2 a), les eliminamos la decoración subrayada por defecto y le ponemos el mismo color.
  3. Cuando pasamos el ratón por encima de los vínculos (a:hover) aparece una sombra difuminada (text-shadow).

Y el menú:

  1. La clase ‘menu’ que hemos asignado en la función wp_nav_menu es asignada a la caja (div) generada. Le damos el azul clarito y semi-transparente como color de fondo.
  2. El menú es generado como una lista (ul) con la clase también asignada en wp_nav_menu ‘horizontal’. Como lista, por defecto nos muestra los elementos unos debajo de otros y con un símbolo delante. El símbolo lo eliminamos con list-style-type: none. La disposición horizontal, con display: inline-flex. También nos separa el conjunto del margen izquierdo, lo que anulamos con padding-left: 0px;
  3. Para diferenciar los elementos de la lista (.horizontal li), los separamos 20 píxeles por cada lado, con padding: 0px 20px 0px 20px.
  4. A los vínculos a las diferentes categorías (.horizontal li a) les asignamos la misma fuente de letra ‘Orbitron’ y también les quitamos el subrayado y cambiamos el color a un gris marengo (que destaque).
  5. Finalmente, cuando pase el ratón por encima aparece también la sombra.

Si le añadimos un fondo un poco oscuro al body (body {background: #888;}), podemos ver cómo queda de momento.

muestra1

Y aquí se acaba este artículo, mas no las modificaciones que se le pueden hacer a la cabecera, a la que en un próximo artículo le pondremos un logo. En el siguiente artículo, veremos cómo podemos mejorar el pie de página.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *