Desarrollo Temas en WordPress – Requisitos Iniciales

Uno de los problemas más comunes que enfrentan los desarrolladores que quieren empezar a crear sus propios temas de WordPress es la falta de orientación clara sobre los requisitos iniciales y las mejores prácticas. Muchas veces, la falta de una base sólida puede llevar a errores y retrabajo, lo cual es frustrante y consume tiempo. En este artículo, abordaremos los requisitos básicos y las recomendaciones esenciales para que puedas comenzar a desarrollar temas en WordPress de manera efectiva y profesional.

Requisitos Básicos

Servidor Local: Local Flywheel

Para desarrollar temas en WordPress, necesitarás un servidor local que simule un entorno de servidor web real. Recomiendo usar Local Flywheel debido a su facilidad de uso y configuración. Esta herramienta proporciona un entorno local para WordPress que es rápido y confiable.

Descarga e instalación: Ve al sitio web de Local Flywheel y descarga la aplicación para tu sistema operativo. Sigue las instrucciones de instalación y configuración inicial.
Configuración del sitio: Una vez instalado, crea un nuevo sitio local, asigna un nombre y selecciona la versión de PHP y MySQL que deseas usar.

Aunque también podrias usar laragon, xampp o wampp.

Navegador

Cualquier navegador moderno como Google Chrome, Firefox o Safari será suficiente. Asegúrate de tener las herramientas de desarrollo habilitadas, ya que serán útiles para depuración y pruebas.

Editor de Código

Un buen editor de código es esencial para el desarrollo eficiente. Recomiendo usar Visual Studio Code (VSCode) por sus extensiones y configurabilidad. Aquí hay algunas extensiones recomendadas:

PHP Intelephense: para autocompletar y sugerencias de código PHP.
WordPress Snippets: para fragmentos de código específicos de WordPress.
Prettier: para el formateo de código.
ACF Snippets: para fragmentos de código específicos de Advaced Custom Fields.

Conocimientos Básicos Necesarios

Antes de comenzar a desarrollar temas, es fundamental tener conocimientos de:

PHP: La mayoría de la lógica de WordPress está escrita en PHP, por lo que deberías estar cómodo trabajando con este lenguaje.
HTML y CSS: Estos son esenciales para estructurar y diseñar tu tema.
JavaScript: Para funcionalidades avanzadas y mejoras de experiencia de usuario.
WordPress Codex: Familiarízate con la documentación oficial de WordPress, ya que será una referencia constante.

Usaremos Underscore como Tema Base

Underscore (_s) es un tema de inicio popular para WordPress, desarrollado por Automattic, la empresa detrás de WordPress. Este tema base proporciona una estructura limpia y mínima que puedes personalizar según tus necesidades.

Descarga: Ve al sitio de Underscores y genera tu propio tema.
Instalación: Descarga el archivo zip, descomprímelo y coloca la carpeta en el directorio C:\Users\tu-usuario\Local Sites\wpthemes\app\public\wp-content\themes de tu instalación de WordPress local.
Activación: Ve a la administración de WordPress, navega a Apariencia > Temas y activa tu tema basado en Underscores.

Estructura Básica de un Tema de WordPress

Entender la estructura básica de un tema es crucial. Aquí están los archivos y carpetas principales que encontrarás en un tema típico de WordPress:


        .
        ├── style.css          // Hoja de estilos principal del tema
        ├── index.php          // Archivo de plantilla principal
        ├── functions.php      // Archivo para funciones y hooks personalizados
        ├── header.php         // Plantilla de la cabecera
        ├── footer.php         // Plantilla del pie de página
        ├── sidebar.php        // Plantilla de la barra lateral
        ├── single.php         // Plantilla para entradas individuales
        └── page.php           // Plantilla para páginas

style.css: El archivo principal de CSS que contiene la información del tema y los estilos.
index.php: El archivo principal de plantilla que WordPress usará si no se encuentra una plantilla más específica.
header.php: Contiene la sección de encabezado de tu tema.
footer.php: Contiene la sección de pie de página de tu tema.
functions.php: Aquí puedes agregar funciones personalizadas y enganches (hooks) para modificar el comportamiento predeterminado de WordPress.
sidebar.php: Contiene la estructura de la barra lateral, si tu tema la tiene.

Ejemplo básico de style.css:


        /*
        Theme Name: Mi Tema Personalizado
        Theme URI: http://miweb.com
        Author: Mi Nombre
        Author URI: http://miweb.com
        Description: Un tema de inicio personalizado basado en Underscores
        Version: 1.0
        License: GNU General Public License v2 or later
        License URI: http://www.gnu.org/licenses/gpl-2.0.html
        Text Domain: mi-tema
        */

Ejemplo básico de index.php:


        //Loop wordpress
        get_header(); 
        if ( have_posts() ) :
            while ( have_posts() ) : the_post(); 
                get_template_part( 'template-parts/content', get_post_format() ); 
            endwhile; 
        else : 
            get_template_part( 'template-parts/content', 'none' );
        endif; 
        get_footer();

Este es el conocido “loop” (bucle) de WordPress, es una de las piezas fundamentales en el desarrollo de temas y plugins. Este concepto es esencial para cualquier programador que desee entender cómo WordPress maneja y muestra el contenido de un sitio web.

¿Qué es el Loop de WordPress?

El Loop es un bucle de código PHP utilizado por WordPress para mostrar los posts almacenados en la base de datos. En términos simples, es una manera en que WordPress recupera los posts y los muestra en las páginas web. El Loop puede mostrar una lista de posts en una página de blog, una única entrada, resultados de búsqueda, archivos de categoría, y más.

Explicación del código:


        //Explicación del código:
        if ( have_posts() ) : //Este condicional comprueba si hay posts disponibles.
            while ( have_posts() ) : the_post(); //Este bucle while se ejecuta mientras haya posts disponibles. La función the_post() prepara los datos del siguiente post.
                the_title(); //Muestra el título del post actual.
                the_content(); //Muestra el contenido del post actual.
            endwhile;  //Finaliza el bucle while.
        else : //Si no hay posts, muestra el mensaje alternativo.
            No se encontraron posts. //Mensaje a mostrar si no hay posts.
        endif; //Finaliza el condicional if.

Conclusión

Establecer una base sólida es crucial para el desarrollo exitoso de temas en WordPress. Con los requisitos iniciales y conocimientos básicos en su lugar, estarás bien encaminado para crear temas personalizados y funcionales. En el próximo capítulo, veremos las configuraciones iniciales necesarias para optimizar tu flujo de trabajo con Vite, en la creación de temas de wordpress, incluyendo la configuración de herramientas de desarrollo y la estructuración eficiente de tu tema.

¡Nos vemos en el siguiente tutorial!