JavierSam: 7. La plantilla cabecera del tema de WordPress: header.php

domingo, 11 de agosto de 2013

7. La plantilla cabecera del tema de WordPress: header.php

(El artículo original y en inglés, fue publicado el 31 de octubre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicaron una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotaron y actualizaron ese tutorial. Esta vez con 16 artículos a cargo de Michelle Langston: The ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Ahora sí estamos entrando en el meollo del asunto: la construcción de su archivo header.php y la validación de su Tema con un Doctype html. Habrá un montón de php en esta lección, pero no se desespere.
También vamos a ver dos técnicas esenciales (y bastante buenas) de optimización para motores de búsqueda y añadiremos algunas cosas más a su archivo functions.php.

En esta lección asumo que ya agregó a su archivo header.php los elementos html estructurales y básicos de los que hablamos en Plantillas y estructura de directorios de un Tema de WordPress. Por favor, si su archivo header.php aún está vacío, vuelva a esa lección, haga el trabajo correspondiente y vuelva a este punto. Lo espero.

La sección HEAD

En este momento, su Tema de WordPress, absolutamente en blanco, no es técnicamente válido. Eso es debido a que le falta el doctype que le dice al navegador cómo interpretar el código html que está viendo. Vamos a utilizar el doctype de html5. El uso de html5 ha crecido lo suficiente como para ya sea tiempo de utilizarlo en un Tema de WordPress.
Abra header.php y pegue allí, antes que cualquier otra cosa, el siguiente código.

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package Shape
 * @since Shape 2.0
 */
?><!DOCTYPE html>

Vamos a agregar una etiqueta html de apertura con algunos atributos que harán más evidente para el navegador el tipo de página que estamos creando. Al mismo tiempo, si el navegador en cuestión es Internet Explorer 8, la etiqueta html de apertura tendrá un id con el valor “ie8″. Esto nos permitirá crear más adelante estilos css específicos para ie8, sin necesidad de crear un hoja de estilos aparte. Continúe adelante y agregue lo que sigue, debajo del doctype.

<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

La etiqueta html de apertura está envuelta con comentarios html condicionales. Si el navegador es Internet Explorer 8, la etiqueta html obtiene el valor “ie8″ como id. Si el navegador no es ie8, no incluye el id “ie8″. ¿Desea apuntar a más versiones de ie? Sólo tiene que añadir más comentarios condicionales.
Ahora nos vamos a meter en la sección <head> de su Tema de WordPress.
La sección contiene meta-información sobre una página web. Normalmente, cosas como el título del documento que se ve en la barra superior del navegador (y en los resultados de los motores de búsqueda), y vínculos a las hojas de estilo y los canales rss. Coloque el siguiente código a continuación del último código que agregó.

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
// Add the blog name.
bloginfo( 'name' );
 
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
 
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'shape' ), max( $paged, $page ) );
 
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>

Si todo esto le parece incomprensible, está bien. Le explicaré las secciones principales.

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />

Esto es meta información sobre nuestro contenido. La primera línea muestra el set de caracteres que está utilizando su blog. La segunda línea define el ancho de la ventana al ancho del dispositivo que se está utilizando (por ejemplo, una computadora de escritorio, un iPhone, un iPad, etc).

<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
// Add the blog name.
bloginfo( 'name' );
 
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
 
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'shape' ), max( $paged, $page ) );
 
?></title>

Esta es la etiqueta <title> que aparece en la parte superior del navegador mostrando el título del sitio. ¿Cómo va a aparecer este título? depende de la página que se esté visitando. Separémoslo en secciones.
Para cada página de nuestro Tema, excepto en la página principal, queremos mostrar el título de la página actual seguido inmediatamente por una barra vertical, como separador. La función de WordPress wp_title() hace su trabajo para nosotros. Inmediatamente a la derecha de la barra vertical, queremos incluir el nombre del blog. La práctica función bloginfo() lo hace posible.
Vamos a mostrar el título un poquito diferente en la página principal: el título del sitio, un separador y la descripción del sitio.
Primero declaramos una función llamada $site_description para almacenar en ella la descripción del sitio de manera que la podamos utilizar más tarde. En php, las variables empiezan con “$”. Definimos la variable $site_description con el mismo valor que devuelve get_bloginfo( 'description', 'display' );. Note el punto y coma (“;”) al final. Siempre que declare una variable en php, asegúrese de finalizarla con un punto y coma.

Luego, tenemos una simple declaración condicional que, en español, se leería así: “si el sitio tiene una descripción y esta página es la home o una página principal estática, muestra la descripción del sitio.”
Finalmente, le agregamos números de página a las páginas de “entradas anteriores”.

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

La primera línea agrega soporte para XFN, y la segunda brinda los vínculos para nuestros pingbacks.

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

¡Mire! ¡Más condicionales de html! Esta porción del código carga un archivo JavaScript que le permite a viejas versiones del Internet Explorer reconocer los nuevos elementos html5, y solo se carga para visitantes que estén usando ie8 o anterior.
Agregar esto es opcional. Si quiere usar el plugin, configurémoslo ahora. Ya debe tener un directorio “js” en la estructura de su Tema. Vaya hacia allí y cree un nuevo archivo llamado “html5.js”. Aquí tiene el código del plugin de _s. Cópielo y péguelo en su archivo html5.js.

Después, tenemos:

<?php wp_head(); ?>

Este es un "gancho" requerido para plugins de WordPress y otras cosas interesantes que dependen de él.

<body <?php body_class(); ?>>

Esta es la etiqueta body de nuestro Tema. La función body_class() agrega un montón de útiles clases css a la etiqueta body que serán muy prácticas cuando queramos estilizar el Tema basado en varias condiciones. Para ver un ejemplo real, pueden ver el código fuente de la página original de este artículo, y busque la etiqueta body. Verá algo como esto:

<body class="single single-post postid-3781 single-format-standard singular">

Como se trata de una entrada sola, tenemos la clase “single”. Además, como esta entrada es estándar, tenemos la clase “post-format-standard”. Vea el código fuente de diferentes tipos de vistas (archivos, páginas, página frontal, resultados de búsqueda, etc) y observe cómo cambian, en el código fuente, las clases del body.

La sección cabecera

Ahora queremos agregar a nuestro sitio el título, que funcionará como vínculo a nuestra página principal; una descripción del sitio y un menú.
En el archivo header.php busque las etiquetas hgroup. Aquí es donde agregaremos el título y la descripción. Reemplace las etiquetas hgroup de apertura y de cierre con esto:

<hgroup>
     <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
     <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

En el código precedente estamos usando una etiqueta de plantilla de WordPress llamada home_url(). Puede ver que la estamos usando para obtener la URL principal de nuestro sitio de WordPress.

Para obtener el nombre de nuestro blog y su descripción, estamos usando bloginfo(). Recordará que, previamente en esta lección, ya utilizamos esta función para producir la etiqueta title (también note el escape con esc_attr() en el atributo "title" del vínculo del título del sitio). Se puede utilizar para obtener más de 20 porciones diferentes de información sobre su blog. Toma la información y la imprime en la plantilla. Entienda esto y entenderá los Temas de WordPress. Tomamos una estructura html y llamamos a etiquetas de plantilla de WordPress para rellenarla. Es, en realidad, muy sencillo. Es sólo cuestión de acostumbrarse a ver esas etiquetas de plantilla, junto con algunas instrucciones if y unos bucles php (también vamos a llegar a ellos).

Baje un poco más, hasta la sección nav. Vamos a agregar un vínculo para saltearlo, para que la gente con un lector de pantalla no tenga que sufrir con nuestro menú, cuando lo que quieren es llegar al contenido. Justo después de <nav>, agregue lo siguiente:

<h1 class="assistive-text"><?php _e( 'Menu', 'shape' ); ?></h1>
<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', 'shape' ); ?></a></div>

y vamos a agregar el menú personalizado que creamos en la lección Configuración de las funciones de su Tema, realmente no podría ser más fácil, ya que se trata de una sola etiqueta de plantilla, con solo un argumento:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Sencillo, ¿no? Entonces, su sección <nav> debe verse así:

<nav role="navigation" class="site-navigation main-navigation">
     <h1 class="assistive-text"><?php _e( 'Menu', 'shape' ); ?></h1>
     <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'shape' ); ?>"><?php _e( 'Skip to content', 'shape' ); ?></a></div>
     <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- .site-navigation .main-navigation -->

Si creó múltiples menúes nav en functions.php, los puede agregar del mismo modo que tenemos aquí, en la ubicación que quiera que aparezca su menu (y asegúrese de cambiar “primary” en ‘theme_location’ => ‘primary’ para ajustarse al nombre del menú adicional).

Tenemos algunas cosas más de las que preocuparnos, y habremos terminado. Vayamos al archivo functions.php y le agregaremos una nueva función para cargar nuestra hoja de estilos y algunas otras bondades potenciadas con JavaScript. Abra functions.php y agregue lo que sigue al final del archivo.

/**
 * Enqueue scripts and styles
 */
function shape_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
 
    wp_enqueue_script( 'small-menu', get_template_directory_uri() . '/js/small-menu.js', array( 'jquery' ), '20120206', true );
 
    if ( is_singular() && wp_attachment_is_image() ) {
        wp_enqueue_script( 'keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
    }
}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

Como puede ver, estamos usando wp_enqueue_style() y wp_enqueue_scripts() para cargar nuestros archivos de hojas de estilos y JavaScript, respectivamente. Actualmente, usar estas funciones para cargar el css y el JavaScript en los temas y plugins, es la mejor práctica, en lugar de codificar los enlaces en header.php.
Al final de la función, enganchamos shape_scripts() en wp_enqueue_scripts(), que agregará dinámicamente a la cabecera los vínculos a sus scripts y hojas de estilos.
Veamos el resto de la función.

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}

Aquí, estamos cargando el script comment-reply.js (que viene incluido con WordPress) que mueve el formulario de comentarios debajo del comentario al que está respondiendo al pinchar en el vínculo "reply" (responder). Note que sólo estamos cargando comment-reply.js si estamos en una entrada singular o página, si los comentarios están abiertos y si están habilitados los hilos de comentarios. No es necesario gastar recursos cargando este script en lugares donde no se lo necesita.

wp_enqueue_script( 'small-menu', get_template_directory_uri() . '/js/small-menu.js', array( 'jquery' ), '20120206', true );
 
if ( is_singular() && wp_attachment_is_image() ) {
    wp_enqueue_script( 'keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
}

Aquí se ven dos scripts opcionales, pero estupendos (si no desea utilizarlos, simplemente bórrelos de la función). El primero, small-menu.js, convierte a su menú de navegación principal en un menú para pantallas pequeñas, ingenioso y amigable para móviles. El segundo, key-board-image-navigation.js, añade la capacidad de navegar a través de las imágenes usando las flechas derecha e izquierda del teclado. Este script solo se carga en las páginas individuales de imágenes adjuntas.

Ambos scripts requieren jQuery. Note como le pasamos “jquery” como parámetro de la función wp_enqueue_script(). Esto le dice a WordPress que el script depende de jQuery. Como resultado, WordPress también cargará la librerías de jQuery. No necesitamos incluir la librería entre los archivos de nuestro Tema, porque WordPress ya viene con varias bibliotecas JavaScript y scripts preestablecidos. Si, en el futuro, encuentra otros scripts interesantes para añadir a su Tema, simplemente regresen y agréguenlos a shape_scripts, del mismo modo que hemos cargado estos scripts. Interesante ¿no?

Ya casi hemos terminado. Si decide utilizar small-menu.js y keyboard-image-navigation.js, necesitará agrearlos a su estructura de archivos. Cree los dos archivos en el directorio de su Tema. Aquí está el código respectivo para pegar dentro de cada uno, tomado de _s: small-menu.js y keyboard-image-navigation.js.

¡Y eso es todo! La plantilla de cabecera de su Tema de WordPress está escrita y optimizada para motores de búsqueda, y su hoja de estilos y tiene una correcta y limpia función para cargar su hoja de estilos y otros scripts del Tema.

Nota de la traducción:
Según lo que hayamos ingresado en los campos "Título del sitio" y "Descripción corta" durante la instalación de WordPress, en este punto, nuestro sitio, aún sin contenido, debería estar viéndose así:

Sumario de entradas

1 comentario:

León27 de octubre de 2015, 7:38 p.m.
gracias amigo me sirvio mucho la informacion. Saludos
ResponderBorrar
Respuestas

Agregar un comentario

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.

JavierSam

Páginas