Complementar los archivos de plantilla Wordpress con el Encabezado y el Pié de Página
Agregar los archivos de planilla de Wordpress de Encabezado y Pie de Página a trvés de los archivos header.php y footer.php respectivamente.
En este punto Worpress tomó el archivo index.php para mostrar los contenidos, ya sea una página, una entrada, todas las entradas, etc. Pero en el sentido estricto del documento HTML, no se ha definido la estructura general del documento HTML; que son la declaración <!Doctype html>, el marcado de las etiquetas <html>, <head>, <body> y sus respectivos cierres. Así como las respectivas etiquetas informativas anidadadas en <head> como son <title> o <meta> entre otras más. Tampoco se agregó la etiqueta <header> para el encabezado ni la etiqeta <footer> para el pie de página del Sitio.
Pero wordpress al no encontrar los archivos header.php ni footer.php en el Tema que estamos desarrollando: Wordpress agregó las etiquetas html faltantes, de acuerdo a los archivos predeterminados de la aplicación. En donde tambien se agregarón las etiquetas de plantilla y los ganchos de acción también requeridos para el funcionamiento del Tema de Wordpress.
Esto no nos sirve de mucho porque seguramente vamos a querer que nuestro Tema tenga una visualización más Profesional; mostrando por ejemplo en el Encabezado: un Logotipo en sintonia con el Título del Sitio y talvez también la descripción del Sitio, y un menú de Navegación Horizontalmente. Así como también quisieramos mostrar un Pié de Página con: enlaces y/o notas importantes del Sitio Web.
Con estas necesidades vamos a agregar los archivos header.php y footer.php en la carpeta del Tema que estamos desarrolando.
El archivo header.php
header.php definirá la parte superior de nuestro documento, comenzando con la declaración DOCTYPE.
Todos los documentos HTML deben comenzar con una declaración DOCTYPE, que te indican a tu navegador web cómo interpretar el documento de acuerdo a la versión del HTML.
La etiqueta <html> de apertura necesita un atributo de idioma y WordPress proporciona una función para introducir el código de idioma correcto para el idioma que escogió durante la instalación y que es: language_attributes().
En el campo de título, utiliza una línea de código que muestra el nombre de tu sitio, seguido de una instrucción abreviada if… then… para mostrar el lema de tu sitio web O el título de la página o publicación actual que estás viendo.
Los ? character es un operador condicional de PHP llamado operador ternario. En esta línea de código, is_front_page() es una función de WordPress que devuelve TRUE si se visualiza la portada, o FALSE si se está viendo cualquier post o página. La función antes de los dos puntos se utiliza si TRUE se devolvió, y la función después de los dos puntos se utiliza si se devuelve FALSE.
Como veremos a continuación, la función bloginfo() se utiliza repetidamente con diferentes parámetros para obtener diferentes partes de información de la base de datos de WordPress. Antes de que la etiqueta <head> se cierre con </head>, debe incluir el gancho de acción wp_head() para asegurarse de que se ejecutan las funciones asociadas a él.
La función body_class() le da a su cuerpo las clases CSS predeterminadas establecidas por WordPress. La última línea permite visualizar el menú de navegación si se ha creado uno en el panel de control del administrador. El header.php final se parece a esto:
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>
Si deseas utilizar un logotipo como encabezado, reemplaza <?php bloginfo (‘name’); ?> con su código de imagen dentro de las etiqueta <header>.
Guarda header.php y subelo a la carpeta de tu tema.
El archivo footer.php
footer.php define el pie de cada página y debe cerrar cualquier etiqueta HTML abierta en otros archivos de plantilla. En este caso, <body> y <html> siguen abiertos desde header.php.
También debe incluir el gancho de acción wp_footer() para garantizar que cualquier código final de WordPress y JavaScript se añada a la página. Si ha iniciado sesión como administrador cuando visitó su página principal, publicaciones o páginas, notará que falta la barra de administración. El código que muestra la barra de administración se engancha al gancho de acción wp_footer().
También agregaremos el elemento semántico HTML5 <footer> </ footer> para definir explícitamente nuestro pie de página.
<footer>
<p>Copyright © 2022</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>