Anteriormente, comenzamos el proceso de creación de un tema de WordPress conociendo la estructura básica de archivos que se deben crear, así como las etiquetas, funciones y ganchos que utilizaremos durante todo el proceso. En esta la segunda entrega, nos enfocaremos en la cabecera de nuestro tema, tanto a nivel metadatos como a nivel de usuario. ¡Manos a la obra!
Tabla de Contenido
Configurando los meta datos de nuestro tema
Para comenzar nuestro tema, necesitamos cargar los metadatos de nuestro blog. Esto se hace al inicio del HTML de nuestro proyecto. Así que, el archivo perfecto para comenzar es header.
Comenzamos declarando el doctype de nuestro documento.
<!doctype html>
Para obtener mucha de la información que necesitamos para nuestro blog, utilizaremos la etiqueta de plantilla bloginfo, ya que nos sirve para obtener información básica como el nombre del blog, el idioma, entre otros datos. En nuestro caso, lo primero que necesitamos declarar es el idioma.
<html lang="<?= bloginfo('language'); ?>">
Como podemos observar, le pasamos como parámetro el valor language, es decir, el idioma. Ahora, comenzamos el encabezado del documento.
<head>
Después, con la etiqueta meta, le pasamos el charset (conjunto de caracteres del idioma) que vamos a utilizar. Para ello, nuevamente usamos bloginfo con el parámetro charset.
<meta charset="<?= bloginfo('charset'); ?>" />
A continuación, colocamos el viewport que necesitaremos mucho más adelante para el responsive design de nuestro tema.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Ahora, colocamos el nombre del autor del blog. Para eso, le enviamos a la función bloginfo, el parámetro name que se refiere al nombre del blog.
<meta name="author" content="<?= bloginfo('name'); ?>" />
Nuestro código debe ir así al momento.
Para añadir lo siguiente, necesitamos trabajar en el archivo functions, ya que crearemos dos funciones que nos evitaran repetir ciertas cosas.
Llamaremos a nuestra primera función getDescription, esta llevará como parámetro el ID del post. Si el ID del post es falso enviaremos la descripción general del sitio usando la función get_bloginfo con el parámetro description. En caso contrario, utilizaremos la función get_the_title que nos regresa el título de un post individual por medio de su ID.
function getDescription($postID){
if(!$postID) $desc = get_bloginfo('description');
else $desc = get_the_title($postID);
return $desc;
}
Crearemos también otra función a la que llamaremos getKeywords, esta llevará como parámetro el ID del post. Si el ID del post es falso, entonces enviaremos un conjunto básicos de keywords acorde a lo que queremos en la página principal. En caso contrario, utilizaremos la función get_the_tags que lleva el ID del post y regresa las etiquetas de cada post individual, mismas que usaremos como keywords.
function getKeywords($postID){
if(!$postID)
$keywords = "Blog de WordPress, Diseño Web, Desarrollo Web, Programación Android";
else $keywords = get_the_tags($postID);
return $keywords;
}
Por el momento, nuestro archivo functions debe quedar así:
De regreso a nuestro archivo header, lo primero será determinar con la función is_home si estamos en la página principal para obtener la descripción con nuestra primera función a la que le pasaremos un false. En caso contrario, utilizaremos la función get_the_ID para obtener el ID del post y enviarlo a nuestra función.
<?php
if(is_home()) $describe = getDescription(false);
else $describe = getDescription(get_the_ID());
?>
Con la descripción obtenida, la colocamos en su etiqueta meta correspondiente.
<meta name="description" content="<?= $describe; ?>" />
Luego hacemos algo similar para obtener los keywords.
<?php
if(is_home()) $keys = getKeywords(false);
else $keys = getKeywords(get_the_ID());
?>
Y los metemos en su etiqueta meta.
<meta name="keywords" content="<?= $keys; ?>" />
Finalmente, para obtener el título del sitio, utilizaremos la función getDescription que creamos en el archivo de funciones. Recordemos que esta función nos regresa la descripción breve del sitio o del post dependiendo de si el ID del post es falso o tiene algún valor. También usaremos un guion como separador y lo uniremos al nombre del sitio que obtendremos con la función get_bloginfo y su atributo name.
<?php
$titulo = get_bloginfo('name') . " - ";
if(is_home()) $titulo .= getDescription(false);
else $titulo .= getDescription(get_the_ID());
?>
Ahora que ya tenemos el título, lo colocamos.
<title><?= $titulo; ?></title>
Con la función get_bloginfo y su parámetro template_url, generamos una ruta hacia el directorio de nuestro tema.
<?php $ruta = get_bloginfo('template_url'); ?>
También, colocamos la llamada a la hoja de estilos principal, utilizando esa ruta
<link href="<?= $ruta; ?>/style.css" rel="stylesheet" type="text/css" />
Y la llamada a nuestro favicon.
<link rel="shortcut icon" href="<?= $ruta; ?>/favicon.png" type="image/x-icon">
<link rel="icon" href="<?= $ruta; ?>/favicon.png" type="image/x-icon">
Mismo que ya debe estar en la carpeta de nuestro tema.
Por último, cerramos el head que abrimos al principio.
</head>
Así debe ir el código escrito.
Con todo eso escrito, es momento de hacer una previsualización del tema.
Aunque se no ve atractivo, podemos comprobar que todo esta funcionando al visualizar el código fuente.
El cual debe lucir, más o menos así.
Planificación del encabezado del tema.
Antes de seguir escribiendo código, es necesario planificar cada parte de nuestro tema. Como en esta ocasión estamos hablando del encabezado. He realizado un sencillo mockup en Adobe Animate, para dar una idea de cómo será el encabezado principal del tema.
También dentro de la carpeta principal del tema, he creado dos carpetas nuevas, una para las imágenes y otra para las hojas de estilo.
Dentro de la carpeta para las imágenes, he colocado todas las imágenes que al momento se van a necesitar. Estas imágenes se utilizaran en el resto del artículo, pero pueden ser reemplazadas si así lo deseas.
Finalmente, dentro de la carpeta para las hojas de estilo, he colocado el archivo principal de la fuente Antonio, que será la que se utilizará para todo el tema.
Preparando las hojas de estilos para el encabezado
Tener una única hoja de estilos para un tema, puede ser una buena idea si estamos creando un tema minimalista, pero es mala idea para algo mucho más complejo. Por esa razón, en el apartado anterior creamos una carpeta llamada CSS, donde colocaremos las diferentes hojas de estilos que utilizaremos. Existen muchos criterios para eso, en mi caso, suelo crear una hoja de estilos por cada sección importante dentro del tema.
Por ejemplo. Las fuentes las cargaremos en una hoja de estilos, haremos un reset CSS muy básico, crearemos los estilos para el encabezado y luego los del menú principal. En otras palabras, comenzaremos creando cuatro hojas de estilos, mismas que llamaremos a través de la sentencia import a la que enviaremos como parámetro la URL de cada una. Este cambio será en la hoja de estilos principal.
@import url(css/fonts.css);
@import url(css/reset.css);
@import url(css/header.css);
@import url(css/menu.css);
Por lo que debe quedar así:
Creando la hoja de estilos para las fuentes
Aunque sólo tenemos una fuente, es importante mantener las fuentes aisladas para evitar problemas. Así que, creamos el archivo fonts.css dentro de la carpeta correspondiente.
Como podemos observar, esta al mismo nivel que el archivo de la fuente. Así que es hora de crear la regla necesaria, para esto usaremos @font-face. Esta regla, contiene dos propiedades: font-family que será el nombre de la fuente dentro de nuestras hojas de estilos y src que contiene la url física del archivo.
@font-face {
font-family: "Antonio";
src: url(Antonio.ttf);
}
Creando el reset para nuestro tema
Un reset CSS, básicamente permite establecer un conjunto mínimo de propiedades CSS para todo el documento, eliminando por completo el resto. La ventaja de esto es que ahora nosotros definimos las propiedades sin depender del navegador. Aunque existen reset muy famosos como el de Meyer, por lo general prefiero crear uno propio muy básico que puedo ir actualizando según lo necesite.
Colocaremos este reset en la misma carpeta.
Para que un reset funcione, se recomiendo colocar únicamente las etiquetas HTML que se van a utilizar. Comúnmente, primero se eliminan los márgenes y los bordes, luego se ajusta el tamaño y el tipo de fuente.
html, body, h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, img, table, tr, td, th, tbody, tfoot, thead, section, div, span, article, aside, nav, header, footer, iframe, form, label, input, textarea, select, pre, code, strong, em, video{
margin: 0;
padding: 0;
border: 0;
font-size: 1.1em;
font-family: "Antonio";
}
Adicionalmente, haremos que el fondo de la página siempre sea blanco.
body{
background-color: #FFF;
}
Y que los enlaces no tengan la línea de subrayado.
a{
text-decoration: none;
}
Creando el encabezado de nuestro tema
Regresamos al archivo header.php, justo donde nos quedamos abrimos el body del documento.
<body>
Debajo de ese body, creamos el encabezado con la etiqueta header a la que asignamos un ID propio.
<header id="hdPrincipal">
Dividiremos ese header inicialmente en dos secciones. La primera sección tendrá el logo (usamos la ruta que creamos con PHP) y como texto alterno el título generado en el bloque PHP de más arriba. Este logo, será un enlace al archivo index.
<section id="hdLogo">
<a href="index.php">
<img src="<?= $ruta; ?>/img/Logo_CableNaranja_2020_Blanco_Sombra.png" alt="<?= $titulo; ?>" /></a>
</section>
En la segunda sección, metemos los botones a las redes sociales con su correspondiente enlace (usando de nuevo la ruta creada con PHP)
<section id="hdSocial">
<a href="https://www.facebook.com/cablenaranja/"><img src="<?= $ruta; ?>/img/Boton_CableNaranja_Facebook.png" alt="Síguenos en Facebook" /></a>
<a href="https://twitter.com/cablenaranja7/"><img src="<?= $ruta; ?>/img/Boton_CableNaranja_Twitter.png" alt="Síguenos en Twitter" /></a>
</section>
Y cerramos el encabezado.
</header>
Debe lucir así:
Por supuesto, si echamos un vistazo a nuestro tema…
Todavía no se ve muy agradable.
Creación de la hoja de estilos para el encabezado
Ahora que ya tenemos nuestro encabezado hecho, es momento de crear su hoja de estilos. En este caso, es un archivo llamado header.css el cual debe estar dentro de la carpeta de hojas de estilos que hicimos.
Lo primero, es definir los estilos para nuestro header llamado hdPrincipal. Lo haremos una caja tipo flex, con 100% de ancho y 400 píxeles de alto. También le pondremos el borde de 5 píxeles que será el separador y la imagen de fondo que ya tenemos preparada. Con respecto a esa imagen, evitaremos que se repita, la pondremos como una portada (cover) y la posicionaremos al centro. Básicamente lo siguiente:
#hdPrincipal{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 400px;
border-bottom: 5px solid #FF4C45;
background-image: url(../img/Background_Header_Blog_CableNaranja.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
La propiedad flex-wrap ha sido establecida a wrap, para obligar a todos los elementos internos a ajustarse a más de una línea. De esta manera, lo elementos que deberían desbordarse, en realidad no lo hacen sino que se pasan hacia abajo.
Lo siguiente es dividir las secciones al 50% de ancho cada una. También serán cajas tipo flex, pero su alto solo serán 320 píxeles ya que estoy guardando 80 píxeles para el menú. Para que todo encaje, centraremos su contenido con las propiedades align-items y justify-content establecidas a center.
#hdLogo, #hdSocial{
display: flex;
width: 50%;
height: 320px;
align-items: center;
justify-content: center;
}
Por último, haremos que el logotipo que esta dentro de la sección llamada hdLogo, sea de 320 píxeles de ancho, ya que considero que es un buen tamaño.
#hdLogo img{
width: 320px;
}
Y si echamos un vistazo…
Por supuesto, el hecho de que sobre espacio en la parte inferior, se debe a los 80 píxeles sin ocupar que estamos destinando para el menú.
¡Hagamos nuestro encabezado responsive!
Ahora que ya tenemos nuestro encabezado casi terminado. Lo siguiente es volverlo responsive. Para hacer eso, observemos cómo se comporta lo que ya hemos hecho al ajustar manualmente el ancho de la ventana.
Muy mal ¿No? Siempre es recomendable revisar manualmente lo que hemos escrito. En este caso, después de estas pruebas, he encontrado 3 momentos en los que el encabezado se rompe: a los 1198 píxeles, 1000 píxeles y 300 píxeles de ancho.
Para corregir esto y hacerlo responsive, utilizaremos media queries. Las media queries son reglas que nos permiten definir, modificar o eliminar propiedades CSS según el tipo de medio o resolución del mismo. En este caso, usaremos una regla para la pantalla (screen) junto con la propiedad max-width que nos permite establecer un ancho máximo.
Iniciamos con el primer caso. Lo que debemos corregir aquí es la distribución de las dos secciones que conforman hasta ahora nuestro encabezado.
@media screen and (max-width: 1198px) {
}
Primero le bajaremos un 10% de ancho a la capa del logo.
#hdLogo{
width: 40%;
}
Luego, añadimos ese 10% sobrante a la capa con los botones de redes sociales.
#hdSocial{
width: 60%;
}
La bajamos unos 40 píxeles al ancho del logo, para que se ajuste mejor al nuevo ancho de su contenedor.
#hdLogo img{
width: 280px;
}
Por último, hacemos que los botones de las redes sociales, queden al 90% de su ancho y los movemos a la derecha para evitar que se acerquen al logo.
#hdSocial img{
width: 90%;
float: right;
}
El primer caso debe quedar así:
En el segundo caso, el ancho de los objetos no se encaja con la imagen de fondo, así que, le haremos algunos ajustes.
@media screen and (max-width: 1000px) {
}
Lo primero será cambiar el color de la sección del logo a negro.
#hdLogo{ background-color: #000; }
Después, cambiaremos el color de fondo de la sección para redes sociales a naranja y con justify-content y text-align, nos aseguraremos de que sigan centrados los botones que hemos puesto ahí.
#hdSocial{
background-color: #FF4C45;
justify-content: center;
text-align: center;
}
A continuación, haremos que ambos objetos estén al 100% de ancho, les bajaremos al alto a la mitad, y con flex-flow evitaremos que se salgan sus elementos hijo al obligarlos a fluir dentro del espacio asignado.
#hdLogo, #hdSocial{
width: 100%;
height: 160px;
flex-flow:wrap;
}
Por último, quitaremos la propiedad float que le colocamos a los botones de redes sociales.
#hdSocial img{
float:none;
}
Debe quedar así:
El último caso, es cuando tenemos 300 píxeles o menos de ancho. Lo que sucede aquí es que las imágenes se desbordan, así que finalmente haremos que todas las imágenes que se incluyan en el contenedor principal sean un bloque de 80% de ancho, y se centren al poner sus márgenes izquierdo y derecho en automático.
@media screen and (max-width: 300px) {
#hdPrincipal img{
display: block;
width: 80%;
margin: 0 auto;
}
}
Observemos el resultado obtenido después de todo esto.
¡Con eso hemos mejorado el encabezado! Por supuesto, el espacio sobrante es para el menú de navegación, pero eso ya lo trabajaremos en la siguiente entrega.
¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
