Para crear un tema de WordPress completo y funcional, es necesario preparar una serie de archivos esenciales. Estos archivos constituyen el esqueleto del tema, y cada uno de ellos tiene una función específica.
Los archivos más básicos incluyen:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
Comencemos por crear el archivo `style.css`. En la parte superior del archivo, es necesario agregar una nota de cabecera que contenga información sobre el tema del diseño.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/A continuación, cree el archivo `index.php`. En su versión más básica, este archivo deberá incluir las partes de encabezado (`header`) y pie de página (`footer`), y generar un contenido que muestre los artículos de manera iterativa (es decir, uno por uno).
¿¿php get_header();??
<main id="main-content">
¿
¿
<article id="post-<?php the_ID(); ?>">
<h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
<div class="entry-content">
¿¿php the_content(); ??
</div>
</article>
<p>No hay artículos disponibles.</p>
¿¿php endif; ?>
</main>
¿¿¿php get_footer();???Los archivos `header.php` y `footer.php` contienen, respectivamente, la estructura HTML de la parte superior y la parte inferior del sitio web, que es común a todo el sitio. El archivo `functions.php` se utiliza para mejorar las funcionalidades del tema (tema visual del sitio).
Comprender los niveles de los templates y los ciclos
WordPress utiliza un sistema inteligente de jerarquía de plantillas para determinar cómo se mostrará el contenido de las diferentes páginas. Por ejemplo, al acceder a un artículo individual, WordPress busca primero el archivo `single.php`; al acceder a una página de categoría, busca el archivo `category.php`; si estos archivos no existen, recurre al archivo `archive.php`; y, en último caso, al archivo `index.php`.
¿Qué es el bucle principal?
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
Lecturas recomendadas Guía completa para el desarrollo de temas de WordPress: de principiante a experto。
Crear otros archivos de plantillas
Para que el tema sea más profesional, deberías crear algunos archivos de plantilla que se utilicen con frecuencia. Por ejemplo, crea el archivo `single.php` para mostrar los artículos de manera independiente.
¿¿php get_header();??
<main>
¿php mientras (tengo publicaciones() ): the_post(); ?>
<article>
<h1>¿¿¿php the_title();???</h1>
<div class="post-meta">
Publicado el: | Por:
</div>
<div class="post-content">
¿¿php the_content(); ??
</div>
</article>
</main>
¿¿¿php get_footer();???De la misma manera, puedes crear el archivo `page.php` para definir el diseño de la página principal, y el archivo `archive.php` para definir el diseño de las páginas de archivo que contienen categorías, etiquetas, etc.
Menú integrado con barra lateral
Un tema moderno suele incluir un menú de navegación personalizable y una zona de herramientas en el margen lateral. Estas funcionalidades deben ser registradas y activadas a través del archivo `functions.php`.
Menú de navegación para registro
Al agregar el siguiente código a `functions.php`, se puede registrar una posición para un menú en el tema, por ejemplo, “Menú Principal”.
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Después de registrarse, los usuarios podrán asignar el menú a la posición deseada en la sección “Apariencia” -> “Menús” del panel de administración de WordPress. Luego, en el archivo `header.php`, en el lugar donde se debe mostrar el menú, añada el siguiente código para incorporarlo:
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>Añadir una barra lateral con herramientas adicionales
Los widgets son una función muy flexible de WordPress. Para agregar una barra lateral, también es necesario registrar una “zona de widgets” en el archivo `functions.php`.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Barra lateral principal', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Añada gadgets aquí.', 'my-first-theme' ),
'before_widget' => ' function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Main sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Add gadgets here.', 'my-first-theme' ),
'before_widget' => ' <'<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Luego, en el archivo de plantilla donde deseas mostrar la barra lateral (por ejemplo, `sidebar.php`), utiliza la función `dynamic_sidebar()` para generar y mostrar el contenido de la barra lateral.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Finalmente, no olvide incluir este archivo de barra lateral en `index.php` o `single.php` utilizando la función `get_sidebar()`.
Lecturas recomendadas Guía de desarrollo de temas de WordPress: cómo crear un tema personalizado desde cero。
Añadir estilos y scripts
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
Introducir un archivo de estilo (stylesheet)
Aunque `style.css` es esencial, WordPress no lo carga automáticamente; es necesario agregarlo de forma explícita al proceso de carga de los archivos de estilo. Por lo general, también se separa el archivo de estilo principal del archivo de estilo que realiza el reseteo de las configuraciones por defecto.
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Utilizar prácticas modernas de desarrollo con CSS
En el desarrollo front-end del año 2026, es de suma importancia prestar atención al diseño responsive y a la accesibilidad. En tu archivo `style.css` o en un archivo `main.css` independiente, deberías utilizar consultas de medios (media queries) para garantizar que el sitio web se muestre correctamente en diferentes dispositivos.
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}Pruebas y depuración
Una vez que el desarrollo del tema esté completo, las pruebas son un paso esencial. Es necesario realizar pruebas exhaustivas en diferentes entornos, navegadores y dispositivos.
Activar el modo de depuración.
Durante el proceso de desarrollo, asegúrate de activar el modo de depuración de WordPress. Esto te ayudará a detectar rápidamente errores, advertencias y notificaciones de PHP. Abre el archivo `wp-config.php` y busca o añade el siguiente código:
Lecturas recomendadas Guía avanzada para el desarrollo de temas de WordPress en 2026: desde cero hasta la creación de un sitio web empresarial responsivo.。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全Unit testing for the theme
Se recomienda utilizar los datos de pruebas unitarias oficiales de temas de WordPress para realizar una prueba exhaustiva de tu tema. Estos datos incluyen todo tipo de artículos, páginas, medios y comentarios, lo que asegura que tu tema se muestre correctamente en diversas situaciones y que no haya problemas de estilo o diseño que queden sin resolver.
resúmenes
Desde la creación de los archivos básicos `style.css` e `index.php`, hasta la comprensión de la estructura de los templates y los mecanismos de iteración, pasando por el registro de menús y barras laterales, así como la incorporación segura de scripts de estilo, has completado todo el proceso para desarrollar un tema personalizado para WordPress que, aunque básico, es funcional y completo. Recuerda que el desarrollo de temas es un proceso iterativo: comenzar con la versión más simple y agregar funcionalidades y perfeccionar los detalles poco a poco es la mejor práctica. Continuar aprendiendo sobre etiquetas de templates, ganchos de acción (action hooks) y filtros te permitirá crear temas más potentes y flexibles.
FAQ Preguntas más frecuentes
¿Qué conocimientos básicos se necesitan para desarrollar temas para WordPress?
Es necesario dominar los conceptos básicos de HTML, CSS y PHP. Tener un conocimiento previo de JavaScript también será de gran ayuda, ya que te permitirá agregar funciones interactivas a tus proyectos. Además, es esencial estar familiarizado con los conceptos fundamentales de WordPress, como artículos, páginas, categorías, etiquetas, widgets y menús.
¿Por qué los cambios en mi tema no surten efecto en el panel de administración?
Esto generalmente se debe al caché del navegador o al caché de WordPress. Por favor, intente actualizar el navegador forzadamente (Ctrl + F5 o Cmd + Shift + R). Si el problema persiste, verifique si ha añadido los estilos y scripts correctamente a la cola de procesamiento, y asegúrese de que el archivo `functions.php` no contenga errores de sintaxis. En casos muy raros, podría ser necesario borrar el caché del servidor o de los plugins.
¿Cómo puedo hacer que mi tema admita múltiples idiomas?
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
¿Cuál es la diferencia entre un tema personalizado y un subtema?
Un tema personalizado es un tema completamente nuevo que se desarrolla desde cero de manera independiente. Por otro lado, un subtema se basa en un “tema padre” existente y hereda todas las funciones, estilos y archivos de plantillas de este. Los subtemas te permiten modificar o agregar únicamente las partes que necesitas (generalmente los estilos y algunos archivos de plantillas), sin tener que alterar el tema padre. Esto es especialmente útil al personalizar o actualizar temas populares, ya que asegura que tus cambios no se sobrescriban, lo que representa un enfoque más seguro y eficiente.
¿Qué sigue, qué sigue?
Lectura ampliada y conocimientos prácticos
Los siguientes están relacionados con el tema de este artículo y son adecuados para una lectura más profunda. A menudo es mejor priorizar empezando por el artículo que más se acerque a su problema actual y ampliando gradualmente a los temas circundantes.
- La guía definitiva para elegir el tema perfecto para WordPress: un análisis completo desde los frameworks hasta las opciones de personalización.
- Desarrollo de temas para WordPress: Desde los principios hasta la maestría: Guía completa para crear sitios web personalizados
- Desarrollo de temas para WordPress desde cero: Crea una interfaz web única y diferenciada
- Guía para el desarrollo de temas para WordPress: Cómo crear sitios web personalizados desde cero
- Guía completa para el desarrollo de temas para WordPress: Un tutorial práctico para dominar el tema desde cero
Español