Cuando se trata de desarrollar un theme para WordPress, una de las primeras cosas que debes entender es su estructura de archivos y carpetas. La estructura del theme es esencial para asegurar que WordPress pueda encontrar los archivos necesarios y mostrar su contenido correctamente. En este artículo, vamos a profundizar en la estructura de carpetas y archivos de los themes, especialmente aquellos que son compatibles con Full Site Editing de Gutenberg.
Antes de empezar, es importante señalar que cada theme puede tener una estructura ligeramente diferente, y algunos themes pueden tener carpetas y archivos adicionales que otros no tienen. Esta es la estructura de archivos y carpetas recomendada para un theme de WordPress:
Carpeta raíz del theme
La carpeta raíz del theme contiene todos los archivos y subcarpetas necesarios para que el theme funcione. Es importante señalar que el nombre de esta carpeta debe ser el mismo que el nombre del theme. Por ejemplo, si tu theme se llama “Awesome Theme”, la carpeta raíz debe llamarse “awesome-theme”. Los archivos básicos que suelen encontrarse en la carpeta raiz del theme son:
style.css:
Este archivo es el archivo principal del theme y contiene la información del autor, versión, descripción y otras características del theme. También se utiliza para dar estilo al theme.
functions.php: Este archivo es el archivo principal de funciones del theme. Aquí es donde se definen las funciones del theme y se pueden agregar o eliminar características específicas del theme.
index.php: Este archivo es la plantilla predeterminada para el contenido del sitio web.
Carpeta “css”
La carpeta “css” contiene archivos CSS adicionales utilizados para dar estilo al theme. A menudo, los archivos CSS se separan en diferentes archivos para facilitar la lectura y el mantenimiento. Estos archivos se pueden llamar desde el archivo “style.css” principal utilizando la función “wp_enqueue_style”.
Carpeta “js”
La carpeta “js” contiene archivos JavaScript utilizados para agregar interactividad al theme. Al igual que con la carpeta “css”, los archivos JavaScript se pueden separar en diferentes archivos para facilitar la lectura y el mantenimiento. Estos archivos se pueden llamar desde el archivo “functions.php” principal utilizando la función “wp_enqueue_script”.
Carpeta “images”
La carpeta “images” contiene todas las imágenes utilizadas en el theme. Estas imágenes se pueden llamar desde cualquier archivo PHP o CSS utilizando la función “get_template_directory_uri”.
Carpeta “templates”
La carpeta “templates” contiene las plantillas PHP utilizadas para mostrar diferentes tipos de contenido. Por ejemplo, puede haber una plantilla para mostrar una página de inicio, una plantilla para mostrar una página de archivo y una plantilla para mostrar una sola entrada de blog. Es importante que el nombre de la plantilla tenga una estructura específica, para que WordPress pueda encontrarla y utilizarla. Por ejemplo, una plantilla para mostrar una página de inicio debe llamarse “front-page.php”, mientras que una plantilla para mostrar una sola entrada de blog debe llamarse “single.php”.
Carpeta “parts”
La carpeta “parts” contiene las partes reutilizables de código que se utilizan en varias plantillas. Esto puede incluir encabezados, pies de página, barras laterales y otras partes comunes del sitio web.
Carpeta “blocks”
La carpeta “blocks” contiene los archivos necesarios para crear bloques personalizados para Gutenberg.
No nos olvidemos de los Child Themes para WordPress
Continuando con la estructura de archivos y carpetas de un theme para WordPress, bien sea “clásico” o compatible con Full Site Editing de Gutenberg, es importante mencionar la opción de crear un child theme o tema hijo.
¿Qué es un Child Theme?
Un child theme es una opción importante para personalizar un tema sin modificar directamente los archivos originales del mismo. De esta manera, se evita perder las modificaciones realizadas en futuras actualizaciones del tema. En resumen, un child theme es un tema que hereda todas las características del tema padre, pero que permite hacer cambios sin afectar al tema original.
Estructura de un Child Theme
La estructura de un child theme es similar a la de un theme normal, pero solo se incluyen los archivos que se desean modificar. Al crear un child theme, es importante incluir los archivos necesarios para que WordPress pueda reconocer y activar el theme correctamente. La principal ventaja de usar un child theme es que no se perderá información si se actualiza el theme padre.
La carpeta raíz del Child Theme
La estructura de archivos y carpetas para un child theme sería similar a la del theme padre, pero se agregaría una carpeta adicional con el nombre del child theme. Por ejemplo, si el theme padre se llama “Twenty Twenty-One”, el child theme podría llamarse “Twenty Twenty-One Child”.
Archivos del Child Theme
Dentro de la carpeta del child theme, se deberían incluir los archivos que se deseen modificar. Por ejemplo, si se desea modificar el archivo de cabecera del tema, se debería crear un archivo llamado “header.php” dentro de la carpeta del child theme. De esta manera, cuando WordPress cargue el tema, utilizará el archivo modificado del child theme en lugar del archivo original del tema padre.
Para añadir modificaciones en estilos usaremos el archivo “styles.css“, estos se añadirán a los estilos del tema padre, sobreescribiendo en caso necesario.
Otro archivo muy común a editar y/o añadir es “functions.php“, aquí se suelen añadir funciones personalizadas. Como recomendación, en los archivos del theme es preferible añadir sólo modificaciones que afecten a este, y no a funcionalidades relativas a plugins, de esta manera si en un futuro se cambia de theme, no se perderán.
En conclusión, la estructura de archivos y carpetas de un theme para WordPress compatible con Full Site Editing de Gutenberg es fundamental para el correcto funcionamiento y personalización del sitio web. Además, la opción de crear un child theme es una herramienta muy útil para hacer cambios en un theme sin afectar al tema original. Al conocer la jerarquía y función de cada carpeta y archivo del theme, se pueden hacer cambios y personalizaciones de manera eficiente y efectiva.
