Inicio/conocimiento/WordPress/Detalles del contenido

Guía para principiantes sobre el desarrollo de temas para WordPress: Cómo crear su primer tema personalizado desde cero

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

Comenzar a desarrollar temas para WordPress implica que ya no estás limitado al uso de temas preexistentes, sino que puedes crear un aspecto y funcionalidades únicos para tu sitio web según tus necesidades específicas. Esta guía te guiará a través de los pasos esenciales para construir un tema personalizado que sea básico pero completamente funcional, abarcando todo el proceso, desde la preparación del entorno hasta la organización de los archivos de plantilla.

Estructura básica y archivos de un tema para WordPress

Un tema de WordPress muy simple que solo requiere dos archivos para ser reconocido en el backend. Comprender la función de estos archivos esel primer paso en el proceso de desarrollo.

Archivo de definición de estilo e información del tema

El primer archivo necesario es…style.cssNo se trata solo de una hoja de estilo para el tema, sino también de un “archivo de cabecera de información” (header file), cuyo bloque de comentarios en la parte superior define los metadatos del mismo. Sin esta información, WordPress no podrá reconocer tu tema.

Lecturas recomendadas De principiantes a expertos: Una guía completa para el desarrollo de temas WordPress de nivel profesional。

/*
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
*/

Debajo del bloque de comentarios, puedes agregar reglas de estilo de la misma manera que escribirías CSS normal.

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

Plantilla de índice central del tema

El segundo archivo necesario es…index.phpEs el archivo de plantilla predeterminado para el tema. Se utiliza cuando WordPress no encuentra una plantilla más específica.single.phpopage.phpCuando se utiliza, se emplea para renderizar la página. Uno de los ejemplos más simples…index.phpPuede contener únicamente un ciclo que llama a los artículos del blog.

Además de estos dos archivos, un tema completo y funcional suele incluir también:header.php(Cabeza de página)footer.php(Pie de página)functions.php(Funciones de funcionalidad)single.php(Página del artículo) Ypage.php(Página) etc.

Crear un entorno de desarrollo local

Antes de comenzar a codificar, es de vital importancia establecer un entorno de desarrollo local. Esto te permite realizar pruebas y depuraciones sin afectar al sitio web en línea.

Utilizar software de servidor local

Se recomienda utilizar paquetes de software para servidores locales integrados, como Local by Flywheel, XAMPP o MAMP. Estos herramientas permiten instalar Apache/Nginx, PHP y MySQL con un solo clic, y ofrecen una interfaz de administración intuitiva. Por ejemplo, Local by Flywheel está optimizado específicamente para WordPress, lo que facilita la creación de sitios web y la configuración de certificados SSL.

Lecturas recomendadas Guía completa para el desarrollo de plugins de WordPress: crea extensiones profesionales desde cero。

Instalar WordPress y un editor de código

En el entorno del servidor local, descargue el paquete de instalación más reciente de WordPress y complete la instalación siguiendo las instrucciones. Además, necesitará un editor de código eficiente. Visual Studio Code es una excelente opción, ya que cuenta con numerosas extensiones que pueden mejorar significativamente la eficiencia del desarrollo, como PHP Intelephense (sugerencias inteligentes de código), WordPress Snippet (fragmentos de código predefinidos) y Live Server (previsualización en tiempo real).

Coloque su carpeta de temas (por ejemplo, llamada “my-first-theme”) en el directorio de instalación de WordPress./wp-content/themes/En el medio, y colócalo allí.style.cssYindex.phpPuede verlo y activarlo en la sección “Apariencia” -> “Temas” del panel de administración de WordPress.

Crear el archivo de plantilla central para el tema

El tema organiza la lógica de visualización de las diferentes páginas a través de una serie de archivos de plantillas. Comprender la estructura jerárquica de las plantillas es clave para construir un tema de manera efectiva.

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

Crear plantillas para el encabezado y el pie de página

Por lo general, separamos el contenido de la parte superior y la parte inferior de un sitio web en archivos independientes para facilitar su reutilización.header.phpEl archivo debe contener el encabezado del documento HTML.Distrito (llamada)wp_head()Las funciones, así como las partes comunes en la parte superior del sitio web (como el Logotipo y el menú de navegación).

<!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>
    <header id="masthead">
        <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
    </header>

De la misma manera, crear.footer.phpIncluye el contenido del pie de página y realiza la llamada correspondiente.wp_footer()Función. Luego…index.phpEn chino, se usaget_header()Yget_footer()Se utilizan funciones para introducirlos.

Implementar la reproducción cíclica de artículos y la visualización de su contenido.

El núcleo de WordPress es lo que se conoce como “The Loop” (El Bucle), que se utiliza para verificar si existen artículos y, en caso de haberlos, procesar cada uno de ellos de forma secuencial.index.phpEn este contexto, una estructura de bucle básica se presenta de la siguiente manera:

Lecturas recomendadas Cómo desarrollar un tema personalizado para WordPress: Guía desde los principios hasta la maestría。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
            <div class="entry-content">
                ¿¿php the_excerpt(); ??
            </div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Aquí se ha utilizado…the_title()、the_permalink()Ythe_excerpt()Utiliza etiquetas de plantilla para mostrar la información del artículo.

Mejorar el tema a través de archivos de funciones

functions.phpEl archivo es el “centro de control” de tu tema, utilizado para agregar funciones, registrar menús, barras laterales, así como incorporar hojas de estilo y scripts.

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

Registro del menú de navegación y la barra lateral

Para que el tema soporte la gestión de menús visuales en el backend, necesitas…functions.phpRegistre la ubicación de la unidad de cocina. Utilícelo.register_nav_menus()Se utiliza una función para completar la tarea.

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 eso, podrás trabajar con los archivos de plantilla (como…).header.php) se utiliza enwp_nav_menu( array( 'theme_location' => 'primary' ) )Para mostrar este menú…

Introducir correctamente los estilos y scripts.

Nunca intentes hacerlo de manera directa.<link>o<script>Los recursos deben ser codificados de forma fija (hardcoded) en las etiquetas. Es recomendable utilizar este método.wp_enqueue_style()Ywp_enqueue_script()Función, y luego montarla.wp_enqueue_scriptsEn este gancho… Esto asegura que las relaciones de dependencia estén correctas y evita la carga repetida de recursos.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

resúmenes

Desde la creación de un documento que contiene los encabezados de información básica…style.cssY los ciclos básicos…index.phpComencemos: ya has dado el primer paso en el desarrollo de temas para WordPress. Al descomponer la parte superior e inferior de la página, crear los archivos de plantillas básicas y…functions.phpAl agregar funciones y recursos de manera sistemática, puedes ir construyendo un tema personalizado con una estructura clara y fácil de mantener. Recuerda que el desarrollo de temas es un proceso iterativo: comienza satisfaciendo las funciones básicas y luego continúas expandiéndolo y perfeccionándolo según sea necesario.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para crear temas para WordPress?

Sí, PHP es el lenguaje de programación principal de WordPress. Para desarrollar temas de manera avanzada, es esencial comprender la sintaxis básica de PHP, las funciones centrales de WordPress (etiquetas de plantillas), así como sus mecanismos de enlaces (Hooks) y bucles (Loop). Aunque puedes comenzar modificando el CSS y las plantillas existentes de un tema, las funcionalidades personalizadas no son posibles sin el uso de PHP.

¿Puedo probar el tema sin tener que modificar el código?

Se recomienda encarecidamente desarrollar y probar temas en el entorno de desarrollo local o en el entorno temporal/de prueba de un sitio web en línea. Nunca desarrolle nuevos temas o realice modificaciones significativas directamente en un sitio web que ya está en operación oficialmente, ya que esto puede causar problemas temporales en el funcionamiento del sitio o errores en su apariencia.

¿Por qué no se ve el efecto de mi tema activado en el backend?

Por favor, primero verifica si la carpeta de temas ha sido colocada en el lugar correcto./wp-content/themes/En el directorio. Luego, confirma.style.css¿Es correcto el formato del bloque de comentarios con información sobre el tema en la parte superior del archivo? Cualquier error de ortografía o la falta de un punto y coma puede provocar un fallo en el proceso de reconocimiento. Por último, asegúrese de que…index.phpEl archivo existe.

¿Cómo crear diferentes layouts para diferentes tipos de páginas?

WordPress sigue un conjunto de reglas de jerarquía de plantillas. Por ejemplo, para crear un diseño único para la página de un artículo de blog en particular, puedes crear…single.phpArchivo: Para crear un diseño (layout) para páginas estáticas, se debe generar el archivo correspondiente.page.phpCuando se accede a la página correspondiente, WordPress utiliza automáticamente estos archivos de plantillas más específicos en lugar de los predeterminados.index.php。

¿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.