Cuando se trata de desarrollar un theme para WordPress, comprender la estructura básica es fundamental. Un theme de WordPress está compuesto por una serie de archivos que trabajan juntos para definir el diseño, la funcionalidad y la experiencia del usuario en un sitio web. En este post, exploraremos la estructura básica de un theme de WordPress, explicando los archivos esenciales y su función, además de mostrarte cómo se organiza esta estructura a nivel de carpetas.
1. ¿Qué es un Theme en WordPress?
Un theme de WordPress es un conjunto de archivos que determina la apariencia y el diseño de tu sitio web. Estos archivos incluyen plantillas de páginas, hojas de estilo, scripts, y funciones de PHP que controlan cómo se muestra el contenido y cómo los usuarios interactúan con el sitio.
2. Estructura Básica de un Theme de WordPress
Un theme de WordPress generalmente sigue una estructura estándar de carpetas y archivos. A continuación, te mostramos el árbol de carpetas básico que se encuentra en la mayoría de los themes:
mi-tema/
│
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── page.php
├── single.php
├── archive.php
├── 404.php
├── sidebar.php
├── screenshot.png
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
└── templates/
├── template-custom.php
└── template-fullwidth.php3. Archivos Principales de un Theme de WordPress
Vamos a desglosar algunos de los archivos principales que forman parte de un theme básico de WordPress:
style.css
- Este archivo es la hoja de estilo principal del theme. Define el diseño visual del sitio, incluyendo colores, tipografías, y otros estilos CSS.
- Además, contiene información importante sobre el theme, como su nombre, autor, versión, y más, dentro de un bloque de comentarios al principio del archivo.
/*
Theme Name: Mi Tema Básico
Theme URI: http://tusitio.com/mi-tema-basico
Author: Tu Nombre
Author URI: http://tusitio.com
Description: Un tema básico para WordPress.
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-basico
*/index.php
- Este es el archivo de plantilla principal que WordPress utiliza para mostrar las páginas si no hay una plantilla específica disponible. Es el archivo central que puede incluir otros archivos de plantilla como
header.php,footer.php, etc.
<?php get_header(); ?>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>No hay contenido disponible.</p>';
endif;
?>
</main>
<?php get_footer(); ?>functions.php
- Este archivo funciona como un plugin en el tema. Es donde puedes agregar funciones personalizadas, registrar menús de navegación, agregar scripts y estilos adicionales, y más.
<?php
function mi_tema_basico_setup() {
add_theme_support('title-tag');
register_nav_menus(array(
'menu-principal' => __('Menú Principal', 'mi-tema-basico'),
));
}
add_action('after_setup_theme', 'mi_tema_basico_setup');header.php y footer.php
- header.php: Contiene el encabezado del sitio, que generalmente incluye el logotipo, el menú de navegación, y otros elementos que aparecen en la parte superior de cada página.
- footer.php: Contiene el pie de página del sitio, que a menudo incluye enlaces de contacto, derechos de autor, y otros elementos que aparecen en la parte inferior de cada página.
page.php
- Este archivo se utiliza para mostrar páginas estáticas en WordPress. Puedes personalizar esta plantilla para controlar cómo se presentan las páginas individuales en tu sitio.
single.php
- Esta plantilla se utiliza para mostrar entradas individuales del blog o artículos. Puedes personalizar cómo se presentan las publicaciones en tu sitio, incluyendo el diseño de las imágenes destacadas, los títulos, y el contenido.
archive.php
- Se utiliza para mostrar páginas de archivo, como la página de categorías, etiquetas, o autor. Esta plantilla controla cómo se listan las publicaciones en estas páginas de archivo.
404.php
- Esta plantilla se utiliza cuando un usuario intenta acceder a una página que no existe en tu sitio. Puedes personalizar este archivo para mostrar un mensaje de error personalizado o enlaces a contenido útil.
sidebar.php
- Contiene el diseño y los widgets de la barra lateral del sitio. Puede incluir elementos como un buscador, listas de categorías, enlaces a publicaciones recientes, etc.
4. Carpetas Adicionales
Además de los archivos básicos, los themes de WordPress suelen incluir carpetas adicionales para organizar mejor los recursos:
assets/
- Esta carpeta contiene subcarpetas para organizar archivos estáticos como CSS, JavaScript, y imágenes.
- css/: Archivos CSS adicionales o específicos.
- js/: Archivos JavaScript para agregar interactividad o personalizaciones.
- images/: Imágenes utilizadas en el diseño del theme.
templates/
- En esta carpeta puedes almacenar plantillas personalizadas que se utilizan para crear páginas específicas en tu sitio. Por ejemplo, una plantilla de ancho completo sin barra lateral.
<?php
/* Template Name: Plantilla de Ancho Completo */
get_header(); ?>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</main>
<?php get_footer(); ?>5. Archivo opcional: screenshot.png
- screenshot.png es una captura de pantalla de 1200×900 píxeles de tu theme que aparecerá en el panel de administración de WordPress. Es útil para identificar visualmente el theme en el administrador de temas.
Conclusión
Comprender la estructura básica de un theme de WordPress es el primer paso para desarrollar tus propios themes personalizados. Con esta guía, ahora tienes una visión clara de cómo se organiza un theme y qué función tiene cada archivo. A partir de esta base, puedes comenzar a experimentar y agregar complejidad a tu theme, creando diseños únicos y funcionales que se adapten a las necesidades de tus proyectos o clientes.
