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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <!-- Definir el viewport para dispositivos móviles --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php wp_head(); ?> </head> <body> <div class="wrapper"> <header> <h1><a href="<?php echo get_option( 'home' ); ?>"><?php bloginfo( 'name' ); ?></a></h1> </header> |
Antes que nada, veamos cuál es la estructura básica de una página web:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> Aquí las etiquetas necesarias para la correcta configuración de la página web </head> <body> Aquí el contenido de nuestra página que aparecerá por pantalla </body> </html> |
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:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="UTF-8"> <!-- Definir el viewport para dispositivos móviles --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" /> <link rel="stylesheet" media="all" href="http://localhost/wordpress/wp-content/themes/minority/style.css" /> |
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:
|
1 2 |
<title><?php bloginfo( 'name' ); ?></title> <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" /> |
Más adelante, bajo el título de la cabecera que se visualizará por pantalla, añadimos la descripción:
|
1 |
<h2><?php bloginfo( 'description' ); ?></h2> |
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:
|
1 2 3 4 5 6 7 |
<?php wp_nav_menu( array( 'menu' => 'Principal', 'container_class' => 'menu', 'menu_class' => 'horizontal', )); ?> |
Y, paralelamente, al final del archivo functions.php, añadimos:
|
1 2 3 4 5 6 7 |
// Menú superior add_theme_support( 'nav-menus' ); if(function_exists('register_nav_menus')) { register_nav_menus(array( 'main' => 'Principal' )); } |
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í:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <!-- Definir el viewport para dispositivos móviles --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?php bloginfo( 'name' ); ?></title> <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php wp_head(); ?> </head> <body> <div class="wrapper"> <header> <h1><a href="<?php echo get_option( 'home' ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h2><?php bloginfo( 'description' ); ?></h2> <?php wp_nav_menu( array( 'menu' => 'Principal', 'container_class' => 'menu', 'menu_class' => 'horizontal', )); ?> </header> |
Formateando la cabecera
Vamos a añadir en el fichero style.css las siguientes líneas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/* Formateo de la cabecera */ /* Fuente de letra para los títulos */ @font-face { font-family:'Orbitron'; src: url('fonts/Orbitron-Black.ttf'); } h1, h2, h3 { font-family: 'Orbitron', sans-serif; color: rgba(28,255,255,0.4); } /* Quitamos el subrayado y color de los enlaces por defecto del navegador */ h1 a, h2 a { text-decoration: none; color: rgba(28,255,255,0.4); } /* Añadimos el efecto sombra cuando estemos encima, para saber que son vínculos */ h1 a:hover, h2 a:hover { text-shadow: 0px 0px 10px rgba(28,255,255,0.4), 0px 0px 20px rgba(28,187,187,0.4), 0px 0px 30px rgba(28,102,102,0.4), 0px 0px 70px rgba(28,34,34,0.4); } /* El título y la descripción más juntitos */ header h1 { margin-bottom: 0px; } header h2 { margin-top: 0px; } /* El menú */ .menu { background: rgba(28,255,255,0.4); } .horizontal { list-style-type: none; display: inline-flex; padding-left: 0px; } .horizontal li { padding: 0px 20px 0px 20px; } .horizontal li a { font-family: 'Orbitron', sans-serif; text-decoration: none; color: #000; } .horizontal li a:hover { text-shadow: 0px 0px 10px rgba(28,187,187,0.4), 0px 0px 20px rgba(28,102,102,0.4), 0px 0px 30px rgba(28,34,34,0.4); font-size: larger; } |
Por partes: Primero la cabecera:
- 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).
- Los vínculos que son cabeceras (h1 a, h2 a), les eliminamos la decoración subrayada por defecto y le ponemos el mismo color.
- Cuando pasamos el ratón por encima de los vínculos (a:hover) aparece una sombra difuminada (text-shadow).
Y el menú:
- 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.
- 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;
- Para diferenciar los elementos de la lista (.horizontal li), los separamos 20 píxeles por cada lado, con padding: 0px 20px 0px 20px.
- 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).
- 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.
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.
