Inicio/conocimiento/WordPress/Detalles del contenido

Domina las habilidades clave: crea tu primer tema para WordPress desde cero.

Lectura en 3 minutos
2026-03-19
2026-06-04
2,822
Gano comisiones cuando compras a través de los enlaces de abajo, sin coste adicional para ti.

Preparación del entorno de desarrollo y los archivos básicos

Antes de comenzar a escribir código, es de vital importancia establecer un entorno de desarrollo local estable. Esto te permitirá realizar pruebas sin afectar al sitio web en línea. Se recomienda utilizar herramientas como Local by Flywheel, XAMPP o MAMP para crear rápidamente un entorno de servidor local que incluya PHP y MySQL.

A continuación, necesitará acceder al directorio de instalación de WordPress. wp-content/themes Dentro de la carpeta, crea una nueva carpeta para tu tema; por ejemplo, nómbrala como «tema_mío». my-first-themeEsta carpeta es el directorio raíz de tu tema. Luego, debes crear dos archivos básicos y esenciales:style.css Y index.php。

style.css El archivo no solo contiene tus estilos de tema, sino que, lo que es más importante, incluye un encabezado de información del tema escrito en comentarios CSS (Theme Header). Este encabezado es la única información que permite a WordPress reconocer tu tema.

Lecturas recomendadas De cero a uno: Guía completa y consejos prácticos para el desarrollo de temas para WordPress。

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个从零开始创建的 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: my-first-theme
*/

index.php Es el archivo de plantilla principal de tu tema y también el archivo de respaldo final que utiliza WordPress al buscar plantillas. Debe contener, al menos, las llamadas al código central de WordPress para generar la cabecera de la página, el ciclo de contenido y el pie de página.

Servidor de WordPress de UltaHost
Garantía de reembolso en 30 días, ancho de banda ilimitado y bases de datos, protección gratuita contra ataques DDoS; descuento del 50% al comprar por 3 años (versiones de 4 TB y 5 TB).
LOGO de UltaHost página de acceso 
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1002>
    
</body>
</html>

Comprender los niveles de estructura de un modelo temático

Antes de crear otros archivos de plantilla, es esencial comprender la jerarquía de plantillas de WordPress (Template Hierarchy). Esta jerarquía determina qué archivo de plantilla utiliza WordPress para renderizar los diferentes tipos de páginas (como la página principal, las páginas de artículos, las páginas individuales y las páginas de categorías). Por ejemplo, cuando se accede a un artículo en particular, WordPress busca en el siguiente orden:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.phpAl dominar esta regla, podrás crear archivos específicos (como…). single.php o page.php) para controlar con precisión el aspecto de las diferentes páginas.

Construir la plantilla central de un tema

Un tema completo no debería constar de solo una parte. index.phpPara lograr una mejor organización y reutilización del código, necesitamos dividir la página en varias partes y luego incorporarlas a través de funciones.

Separar la cabecera y el pie de página

Crear header.php El archivo se utiliza para almacenar la parte superior del documento HTML (DOCTYPE, …)., <head> Algunas partes, así como la sección inicial del cuerpo de la página (como el título del sitio web y la navegación principal). En consecuencia, se debe crear lo correspondiente. footer.php Archivo utilizado para almacenar el contenido de la parte inferior de la página (como la información sobre derechos de autor) y las etiquetas de cierre.

Después de eso, index.php En ese caso, puedes usarlo. get_header() Y get_footer() Se utilizan funciones para introducirlos, lo que hace que la estructura sea más clara.

Lecturas recomendadas Guía completa para principiantes en el desarrollo de temas para WordPress: Crea tu primer tema desde cero。

Crear una plantilla para el sidebar

Si el tema requiere una barra lateral, se puede crear. sidebar.php El archivo contiene información que se utiliza en… dynamic_sidebar() Se utiliza una función para invocar los barras laterales registradas en la zona de los widgets. Esto se hace en el template principal. get_sidebar() Se utiliza una función para introducirlo.

Implementar un ciclo de artículos y un modelo de contenido

El ciclo de artículos es el corazón de un tema de WordPress; se utiliza para obtener y mostrar los artículos de la base de datos. index.php o single.php En este caso, utilizamos estructuras de bucle estándar. Para controlar de manera más modular la visualización de los artículos en listas (como la página principal o las páginas de archivo) y en las páginas individuales de cada artículo, es posible crear… content.php O crearlos por separado. content-single.php Y content-excerpt.php。

Dentro del ciclo, utiliza… get_template_part() Se utiliza una función para llamar a estos archivos de plantillas de contenido, por ejemplo:get_template_part( 'content', get_post_format() );。

hosting.com Alojamiento compartido
Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al día, 7 días a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protección contra malware y DDoS, ahorro de hasta 73%.
LOGO hosting.com página de acceso

La integración de las funciones y estilos del tema

Un tema excelente no solo debe tener una buena apariencia, sino que también debe potenciar sus funcionalidades a través de los archivos de configuración correspondientes.

Introducir el archivo de funciones para el tema.

Crear functions.php Este archivo no es un archivo de plantilla, pero representa el “núcleo” de un tema; se utiliza para agregar funcionalidades específicas del tema, menús de registro, barras laterales, así como para incorporar scripts y estilos. WordPress lo carga automáticamente al iniciar el tema.

En este archivo, puedes utilizar… add_theme_support() Funciones para habilitar las funcionalidades temáticas, como las miniaturas de los artículos (Featured Image), el logotipo personalizado (Custom Logo) y el soporte para etiquetas HTML5.

Lecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestría: La guía esencial para crear sitios web personalizados。

function my_first_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Área de registro de herramientas auxiliares

En functions.php En chino, se usa register_sidebar() Las funciones pueden definir una o más áreas de widgets (Widget Areas), lo que permite a los usuarios arrastrar y colocar componentes en la interfaz de “widgets” que se encuentra en segundo plano.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Barra lateral principal', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Añada gadgets aquí.', 'my-first-theme' ),
        'before_widget' =&gt; '  function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Main sidebar', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Add gadgets here.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Cargar correctamente los estilos y los scripts.

Nunca uses directamente el código en los archivos de plantillas. <link> o <script> Las etiquetas introducen archivos CSS y JavaScript codificados de forma rígida. El método correcto es usar functions.php En el uso chino wp_enqueue_style() Y wp_enqueue_script() Función, y luego montarla. wp_enqueue_scripts En el gancho. Esto asegura que las dependencias estén configuradas correctamente y evita la carga repetida de recursos.

Alojamiento compartido InterServer
Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD código promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalación en un clic.
LOGOTIPO DE INTERSERVER página de acceso 
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载导航脚本，依赖 jQuery
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Internacionalización del tema y preparación para su publicación

Implementar la traducción de temas.

Para que tu tema pueda ser utilizado por usuarios de todo el mundo, la internacionalización (i18n) es un paso esencial. Esto significa que debes envolver todas las cadenas de texto dirigidas al usuario utilizando funciones de traducción. La función más comúnmente utilizada es… __()(Se utiliza para mostrar la traducción en PHP) y _e()(Se utiliza para generar la salida traducida en PHP). Además, style.css La cabeza y functions.php En la función de carga, es necesario configurar correctamente el dominio de texto (Text Domain); por ejemplo, el que establecimos anteriormente. my-first-theme。

Realizar las pruebas finales y la compresión.

Antes de la publicación, es necesario realizar pruebas exhaustivas en diferentes entornos (versiones diferentes de PHP, versiones diferentes de WordPress) y en diferentes dispositivos (ordenadores de escritorio, tablets, teléfonos móviles). Comprobar que todos los archivos de plantilla funcionen correctamente, que las funciones se implementen según lo esperado y que cumplan con los estándares oficiales de revisión de temas de WordPress.

Finalmente, elimina todo el código de depuración y las notas (a menos que sean de utilidad para los usuarios), y utiliza herramientas como CodeKit o compresores en línea para comprimir tus archivos CSS y JavaScript con el fin de reducir su tamaño. Empaca todo el contenido de la carpeta del tema en un archivo ZIP, y estarás listo para enviarlo al directorio de temas de WordPress.org o distribuirlo entre los usuarios.

resúmenes

Crear un tema para WordPress desde cero es un proceso de aprendizaje sistemático que abarca desde la configuración del entorno, la comprensión de la estructura de los templates, la creación de los archivos de plantilla principales, hasta el desarrollo de funciones adicionales para personalizar el aspecto y el funcionamiento del tema. functions.php Un proceso integral que integra funciones avanzadas. La clave radica en seguir los estándares de codificación y las mejores prácticas de WordPress, como el uso de funciones incorporadas, la introducción correcta de recursos y la implementación de la internacionalización. Al poner en práctica los pasos descritos en este artículo, no solo obtendrás un tema funcional, sino que también comprenderás a fondo los mecanismos fundamentales que rigen el funcionamiento de los temas de WordPress, lo que te proporcionará una base sólida para desarrollar temas más complejos y profesionales.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para crear temas?

Sí, dominar a fondo PHP es una condición esencial para desarrollar temas personalizados para WordPress. Dado que WordPress está escrito en PHP, todos los archivos de plantilla (como… index.php, single.php）y los archivos de funciones (functions.phpTodo se genera dinámicamente utilizando código PHP para crear contenido, acceder a la base de datos y manejar la lógica de funcionamiento. Sin conocimientos de PHP, no será posible comprender ni trabajar con las partes esenciales del tema.

¿Es necesario escribir todo el código desde cero para el desarrollo de un tema?

No necesariamente. Para los principiantes, comenzar desde cero es una excelente opción de aprendizaje. Sin embargo, en el trabajo práctico, los desarrolladores a menudo utilizan “temas de inicio” (Starter Themes) o “temas padre” (Parent Themes) como base. Por ejemplo, el tema oficial _Underscores (_s) es un punto de partida de alta calidad y minimalista que cumple con las normas de codificación; ya cuenta con una estructura de archivos básica y funciones comunes, lo que permite personalizar y desarrollar el código de manera más eficiente, asegurando así su calidad.

¿Qué consecuencias puede tener un error en el archivo functions.php?

functions.php Los errores de sintaxis o errores fatales en un archivo pueden provocar que el sitio web de WordPress muestre una “Pantalla Blanca de la Muerte” (White Screen of Death), lo que impide el acceso tanto a la interfaz frontal como a la de administración. Esto ocurre porque dicho archivo se ejecuta en la fase inicial de carga del tema. En este caso, es necesario utilizar FTP o un administrador de archivos del servidor para renombrar o reemplazar la carpeta del tema defectuoso por uno que funcione correctamente (por ejemplo, Twenty Twenty-Six), a fin de recuperar el acceso al sitio. Posteriormente, se puede proceder a corregir el código erróneo.

¿Cómo puedo hacer que mi tema sea compatible con el editor Gutenberg?

Para que el tema brinde mejor soporte al editor de bloques Gutenberg, primero se debe… functions.php En el uso chino add_theme_support( ‘editor-styles’ ) para habilitar la compatibilidad con los estilos del editor. Luego, utiliza add_editor_style() La función incorpora tu tabla de estilos para temas o un archivo CSS diseñado específicamente para el editor en el editor de backend, lo que asegura que los estilos que ven los usuarios durante la edición sean lo más consistentes posible con la visualización en la parte frontal del sitio web. Además, también es posible agregar soporte para funciones como el alineamiento de contenidos en anchura y la personalización de colores.

¿Qué sigue, qué sigue?

Si estás creando o optimizando un sitio web de WordPress, te recomendamos que continúes leyendo sobre optimización de rendimiento, configuración de complementos y personalización de temas.

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.

Etiquetas.