Tutorial de temas de WordPress para principiantes – Parte 2: Plantillas
Esta lección del tutorial de temas de WordPress para principiantes le enseñará cómo estructurar los principales componentes básicos de un tema y comenzar a crear plantillas. Comenzaremos a crear algunos resultados HTML y cómo incluir los componentes básicos en las plantillas de nuestro tema. En el paso anterior configuramos lo mínimo de un tema de WordPress y lo activamos. Pero a partir de ahora no está haciendo mucho y ni siquiera contiene HTML válido para una página web. Arreglemos eso.
Bloques de creación de encabezado y pie de página (y barra lateral)
En nuestros archivos de plantilla necesitamos HTML válido. Podríamos escribir la estructura HTML completa (comenzando con <html>, <head>y full <body>) en index.php, pero esto se vuelve poco práctico cuando se mantienen varios archivos de plantilla en su tema. Imagine haber creado un montón de plantillas y luego darse cuenta de que necesita un pequeño cambio en la parte del encabezado; luego necesitaría editar todas las plantillas para que se mantengan consistentes. Esto no es inteligente.
La solución es dividir la estructura HTML completa en partes sensibles; bloques de construcción. Cada bloque reside en su propio archivo, y siempre que los necesitamos en una plantilla, los incluimos. Los bloques más comunes y sensibles son uno para el encabezado, uno para el pie de página y otro para el contenido, pero si su tema tiene una barra lateral, la barra lateral también debe ser un edificio separado.
Aquellos de ustedes que están más familiarizados con PHP probablemente estén familiarizados con los métodos include()o require(). Esto es precisamente lo que haremos, sin embargo usaremos las funciones de WordPress para incluir otros archivos ya que vienen con beneficios adicionales.
En esta lección, crearemos el encabezado, el pie de página y la barra lateral como bloques de construcción. Sin embargo, las barras laterales se han vuelto cada vez menos comunes en las páginas web, pero seguiremos implementando una barra lateral derecha en nuestro tema. Estos tres bloques de construcción son una práctica común en todos los temas de WordPress, y en realidad es muy común que WordPress ofrezca automatización para esas tres cosas.
Crear las plantillas de encabezado, pie de página y barra lateral
Vamos a crear un nuevo archivo vacío llamado header.phpen nuestra carpeta de temas. Agregaremos algo de HTML muy básico por ahora (no se preocupe, agregaremos más HTML adecuado más adelante).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Cree un nuevo archivo con el nombre footer.phpen su directorio de temas. Todo lo que necesitamos (por ahora) en este archivo es el cierre de nuestra estructura HTML.
</body>
</html>Y finalmente, cree un nuevo archivo vacío llamado sidebar.php. Agregamos solo la etiqueta HTML <aside>dentro.
<aside class="sidebar">
</aside>Incluyendo los bloques de construcción
Volvamos a nuestro index.phparchivo. Todo lo que tenemos que hacer ahora es decirle a WordPress dónde queremos incluir el archivo de encabezado y pie de página. Obviamente, queremos cargar el encabezado al principio y el pie de página al final de este archivo.
WordPress ofrece funciones simples para incluir estos bloques de construcción; get_header()y get_footer()para el archivo de encabezado y pie de página, respectivamente. Bastante intuitivo, ¿verdad? Agreguemos esos en nuestro index.php y veamos qué sucede.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Actualice su interfaz e inspeccione o vea la fuente HTML para ver que hemos combinado varios bloques de construcción para crear una estructura HTML completa.
¡Ahora puede editar el contenido index.phpindependientemente del encabezado y el pie de página!
Incluyamos también la barra lateral. Tenga en cuenta que en su tema es posible que desee considerar casos y plantillas donde no desea la barra lateral, por ejemplo, la página principal.
Incluir la barra lateral es tan fácil como el encabezado y el pie de página; para esto usamos get_sidebar(). Agreguemos eso a index.php, justo antes de obtener el pie de página.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Actualice y debería ver la fuente HTML, incluido nuestro <aside>. No se preocupe, en un paso posterior aprenderemos cómo convertirlo en un área real de la barra lateral donde puede colocar widgets.
Nuestro tema es bastante estático en este momento. En la próxima lección de esta serie de tutoriales de temas de WordPress, finalmente comenzaremos a sumergirnos correctamente en las funciones de WordPress para cargar contenido e información de WordPress dinámicamente en nuestras plantillas.