Estructura de archivos para Temas de WordPress

17/04/2022 | WordPress | 1 comentarios

Aprende desde cero la estructura de archivos y el uso de cada archivo en la creación de temas para WordPress.


Crear o modificar temas para WordPress es una tarea común para cualquier desarrollador web, por ello entender la estructura y la función de los archivos facilitará el trabajo con temas de WordPress.

WordPress Theme

Un Tema de WordPress (WordPress Theme) permite dar apariencia y agregar funcionalidades específicas a un sitio de WordPress, esta compuesto por: archivos CSS para modificar la apariencia, archivos Javascript para agregar interacciones y archivos PHP para generar el contenido usando métodos de WordPress.

Anatomía de un Tema

Los archivos de un tema se ubican en una carpeta, ubicada en wp-content/themes/, esta carpeta puede tener cualquier nombre que identifique nuestro tema.

Archivos base:

style.cssContiene el nombre, la descripción y los estilos del tema.
screenshot.pngImagen de 1200×900 pixels con el diseño del tema.
index.phpTemplate principal que contiene el listado de últimos artículos.
functions.phpArchivo para configurar y agregar funcionalidades al tema.

Archivos globales:

header.phpContiene el encabezado y la navegación del tema.
footer.phpContiene el footer o la parte inferior del tema.
sidebar.phpContiene el contenido lateral o adicional del tema.
comments.phpContiene el formulario y la lista de comentarios.
404.phpPantalla de error cuando no existe el contenido solicitado.

Archivos para lista de contenido:

category.phpMuestra el listado de artículos de una categoría.
tag.phpMuestra el listado de artículos de una etiqueta
taxonomy.phpMuestra el listado de artículos de una taxonomía.
author.phpLista de artículos de un mismo autor.
date.phpLista de artículos para un determinada fecha.
archive.phpLista de artículos de una categoría, etiqueta, autor, etc.
search.phpLista con los resultados de una búsqueda.

Archivos para detalle de contenido:

single.phpContiene el detalle de un artículo o un post-type.
single-{post-type}.phpContiene el detalle de un post-type.
page.phpTemplate para el detalle de una página.
image.phpSe usa para mostrar el contenido de una imagen.

Estructura de ejemplo

Ahora que conocemos cuales son los archivos necesarios, podemos crear nuestro primer tema, para ellos necesitaremos los siguientes archivos:

  • style.css: define el nombre, la descripción los estilos.
  • screenshot.png: es la imagen del diseño del tema.
  • functions.php: contiene los métodos propios del tema.
  • header.php: contiene el header con el menú de navegación.
  • footer.php: contiene el footer del tema.
  • index.php: pantalla inicial con el listados de los últimos artículos.
  • archive.php: contiene el listado de artículos por categoría.
  • single.php: muestra el contenido completo del artículo.
  • images/: carpeta para almacenar las imágenes.
  • scripts/: carpeta para almacenar los archivos javascript.
  • styles/: carpeta para almacenar los archivos css.

Todos estos archivos los ubicaremos en una carpeta nombrada a nuestro gusto (ejemplo: kodetop) y ubicada en la ruta /wp-content/themes/.

Recomendaciones

Con esta información en mente no es complicado crear un tema, pero es importante algunas recomendaciones.

  • Se recomienda tener el diseño completo en HTML, CSS y Javascript con todas las interacciones y validaciones antes de integrarlo con WordPress.
  • Todos los métodos, constantes y configuración se deben realizar en el archivo functions.php, evitar agregar funciones en los archivos de template.
  • Se pueden organizar los archivos estáticos en carpetas, de esta forma se facilita el entendimiento y orden del proyecto.
  • Se recomienda implementar un tema desde cero, esto para evitar tener archivos y métodos sin utilizar.

Referencias

Comentarios

Framber Ereu 27/02/2023 6:22 am

Muchas gracias por la información. Soy desarrollador de temas y me encanta tu contenido.

Espero que sigas publicado más posts sobre WordPress. Son realmente de utilidad.

Feliz día. 😉

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>