Guía de inicio para el desarrollo de temas para WordPress: Crea tu primer tema para sitio web desde cero

Fundamentos del desarrollo de temas para WordPress y configuración del entorno de desarrollo

Antes de comenzar a escribir código, es necesario comprender la estructura básica de un tema para WordPress. Un tema es, en esencia, una carpeta que contiene una serie de archivos escritos en PHP, CSS, JavaScript y imágenes, entre otros. Estos archivos juntos definen la apariencia y algunas de las funciones del sitio web. Esta carpeta debe encontrarse en la carpeta de instalación de WordPress.wp-content/themesEn el directorio, cada tema requiere un archivo de estilo principal.style.cssY un archivo de plantilla básica.index.phpEstos son los requisitos mínimos para iniciar cualquier proyecto de desarrollo temático.

Para desarrollar de manera eficiente, se recomienda encarecidamente establecer un entorno de desarrollo local. Esto te permitirá probar tus funciones sin afectar al sitio web en línea. Puedes utilizar paquetes integrados como XAMPP, MAMP, Local by Flywheel o DevKinsta, que instalan automáticamente Apache/Nginx, PHP y MySQL con un solo clic. En el entorno local, también necesitarás un editor de código, como VS Code, PhpStorm o Sublime Text; las funciones de resaltado de sintaxis y sugerencias para PHP, HTML y CSS mejorarán significativamente tu eficiencia al programar.

Una vez que se hayan completado los preparativos, necesitarás…wp-content/themesCree una nueva carpeta dentro del directorio, por ejemplo…my-first-themeA continuación, crearemos el primer archivo necesario.

Lecturas recomendadas Dominar el desarrollo de temas para WordPress desde cero: Las mejores prácticas y guías para crear sitios web personalizados。

Crear un archivo de estilos principales

Dentro de la carpeta de temas, cree un nuevo archivo con el nombre destyle.cssEste archivo no solo es responsable del diseño estético del sitio web, sino que su cabecera de comentarios (Header) es la única forma en que WordPress puede reconocer el tema utilizado. La cabecera de comentarios contiene metadatos del tema, como su nombre, autor y descripción.

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

página de acceso

A continuación…style.cssEjemplo estándar del encabezado de un archivo:

/*
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
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/

Después del encabezado del archivo, puedes comenzar a agregar reglas de estilo para los elementos de tu sitio web, de la misma manera que lo harías con CSS tradicional. Campo de texto (Text Domain)my-first-themeEs un identificador reservado para la internacionalización del tema y debe mantenerse coherente con el nombre de la carpeta del tema.

Crear un archivo de plantilla central para el tema

Los archivos de plantilla son el esqueleto de los temas de WordPress y determinan cómo se organizan y muestran los diferentes tipos de contenido. Estos archivos están compuestos principalmente por código PHP, mezclado con etiquetas HTML. El archivo de plantilla más básico es…index.phpEs el plantilla alternativa para todas las páginas; se utiliza cuando no existe una plantilla más específica (por ejemplo,...).single.phpopage.phpCuando se utiliza ese método, WordPress lo aplicará automáticamente.

Crear un archivo de índice básico

Crea en la carpeta de temas.index.phpUno de los más simples, pero al mismo tiempo completamente funcionales…index.phpPuede contener el bucle de WordPress (The Loop), que es el mecanismo central utilizado para obtener y mostrar el contenido de los artículos de la base de datos.

Lecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestría: Te enseñamos paso a paso a crear sitios web personalizados。

Un minimizadoindex.phpEl ejemplo es el siguiente:

<!DOCTYPE html>
<html no numeric noise key 1017>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1014>
    <header>
        <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
        <p>¿¿php bloginfo( 'description' );?&gt;</p>
    </header>

<main>
        
                <article>
                    <h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
                    <div>¿¿php the_content(); ??</div>
                </article>
            
            <p>No hay artículos disponibles.</p>
        ¿¿php endif; ?&gt;
    </main>

<footer>
        <p>© ¿¿¿  ¿¿¿</p>
    </footer>
    ¿php_footer();?&gt;
</body>
</html>

Este archivo contiene varias partes clave:wp_head()Ywp_footer()Los “ganchos” (hooks) permiten que el núcleo de WordPress, los plugins y otros scripts inserten el código necesario antes y después de que se muestre la página (como CSS y JS).the_post()La función se utiliza dentro de un ciclo para configurar los datos del artículo actual, y luego…the_title()Ythe_content()Al usar etiquetas de plantilla, se puede generar el contenido correspondiente.

Introducir estilos y scripts

Solo hay…style.cssLos archivos aún no son suficientes; necesitas indicar a WordPress cuándo debe cargarlos mediante una función. Para ello, es necesario crear otro archivo de suma importancia en la carpeta del tema:functions.phpNo se trata de un archivo de plantilla, sino de una “biblioteca de funciones” para el tema, utilizada para mejorar las funcionalidades del mismo, configurar el menú de registro, el sidebar, así como para incorporar de manera segura hojas de estilo y scripts.

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

página de acceso

Ampliación de las funciones temáticas y carga de estilos

functions.phpEl archivo es el “motor” del tema; todo el código PHP que no esté relacionado directamente con la salida de las páginas debe colocarse aquí. En este archivo, deberías utilizar…add_action()La función monta tu código en un gancho de acción específico de WordPress para garantizar que se ejecute en el momento adecuado.

Cargar las hojas de estilo de manera segura

La forma correcta no es introducir los elementos directamente en el archivo de plantilla utilizando etiquetas.style.cssNo es así, sino que se hace a través de…wp_enqueue_style()Se utiliza una función para cargar los elementos en orden. Esto sigue el mecanismo de gestión de dependencias de WordPress y evita la carga repetida de los mismos elementos.

Enfunctions.phpAñada el siguiente código:

Lecturas recomendadas Guía popular para principiantes en 2026: Cómo crear su primer tema para WordPress desde cero。

<?php
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 可以在此加载其他样式或脚本，例如：
    // wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Aquí,get_stylesheet_uri()La función obtendrá automáticamente el tema correspondiente.style.cssRuta del archivo.add_action( 'wp_enqueue_scripts', ... )Asegúrate de que nuestra función de carga se llame cuando WordPress esté preparando los scripts y estilos frontales.

Activar las funciones del tema básico.

Enfunctions.phpAdemás, podemos activar algunas funciones que son esenciales para los sitios web modernos. Por ejemplo, podemos habilitar el soporte para imágenes destacadas (miniaturas de artículos) para los artículos y las páginas, así como agregar posiciones personalizadas para los menús del sitio web.

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.

página de acceso

// 启用文章特色图像
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-first-theme' ),
) );

// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );

add_theme_support()Las funciones se utilizan para declarar las diversas funcionalidades que un tema soporta.register_nav_menus()Esto define los lugares en los que se pueden asignar los menús en la parte posterior de WordPress, en la sección “Apariencia” -> “Menús”.

Creación de plantillas y temas específicos para pruebas.

A medida que las funciones básicas del tema se perfeccionan, lo que era simplemente una opción individual…index.phpEl archivo ya no es capaz de satisfacer las necesidades de visualización de todos los tipos de páginas. La estructura jerárquica de las plantillas de WordPress te permite crear archivos de plantillas específicos para la página principal, los artículos individuales, las páginas en general y las páginas de archivo, lo que te ofrece un control más preciso sobre la presentación del contenido.

Crear una plantilla para la página de un artículo

Cuando un usuario hace clic para leer el texto completo de un artículo, se accede a la página correspondiente al artículo. Crea una página llamada…single.phpSe utiliza un archivo específico para controlar la forma en que se muestra el contenido. Este archivo suele contener información más completa sobre el artículo, como la categoría, las etiquetas, el autor y los comentarios.

¿¿php get_header();??

<main>
    ¿php si (tiene publicaciones()): mientras (tiene publicaciones()): the_post();?&gt;
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <h1>¿¿¿php the_title();???</h1>
            <div class="meta">
                Publicado el:  | Por:
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            ¿¿php endif; ?&gt;
            <div class="content">
                ¿¿php the_content(); ??
            </div>
            <div class="taxonomies">
                分类：
                <br>
                标签：
            </div>
        </article>
        
</main>

¿¿¿¿php get_sidebar();???  
¿¿¿php get_footer();???

Este template introduce nuevas funciones de plantilla:get_header(), get_sidebar()Yget_footer()Se cargarán por separado los archivos denominados…header.php、sidebar.phpYfooter.phpLos archivos de componentes de plantilla. Este enfoque modulariza la estructura de la página, evitando la repetición de código. Necesitas crear estos archivos correspondientes y agregar el contenido necesario en ellos.index.phpEl código correspondiente para las partes superior, inferior y las barras laterales.

Probar y verificar tu tema.

Después de crear la plantilla principal, inicie sesión en la interfaz administrativa de WordPress y vaya a “Apariencia” -> “Temas”. Debería ver que “Mi primer tema” aparece en la lista de temas. Actívelo, y luego visite la página principal del sitio web así como la página de un artículo individual para comprobar si todos los elementos (título, contenido, menú, pie de página) se muestran como se esperaba.

Utiliza las herramientas de desarrollo del navegador para verificar si la estructura HTML es correcta y si el CSS se está aplicando correctamente. Intenta crear varios artículos de prueba que contengan imágenes destacadas, categorías y etiquetas, asegurándote de que todos estos elementos se llamen y se muestren de manera adecuada dentro del template. Esta es la mejor forma de detectar y corregir posibles problemas.

resúmenes

¡Felicitaciones por haber completado la construcción básica de tu primer tema para WordPress! Gracias a esta guía, has aprendido cómo crear la carpeta del tema desde cero y cómo escribir los archivos necesarios para su funcionamiento.style.cssYindex.phpArchivos, para su utilización.functions.phpEl proceso completo incluye mejorar las funciones del sistema, cargar recursos necesarios, crear archivos de plantillas específicas y desarrollar de manera modular. Esto es solo el comienzo en el mundo del desarrollo de temas; a continuación, puedes explorar aún más tipos de archivos de plantillas.page.php、archive.phpAdemás, puedes incorporar temas avanzados como áreas para herramientas adicionales, tipos de artículos personalizados, etc., y seguir optimizando la estructura y el diseño de tu código.

FAQ Preguntas más frecuentes

¿Por qué mi tema no se muestra en el backend?
Esto generalmente se debe a que…style.cssEl problema se debe a que el formato de los encabezados de las notas de tema en el archivo no es correcto o a que faltan. Por favor, asegúrese de que el archivo se encuentre en la carpeta raíz de los temas y que la información de los encabezados de las notas esté completa y tenga el formato adecuado. Otra posible causa son los problemas de permisos del archivo; asegúrese de que WordPress tenga los permisos necesarios para leer la carpeta de temas.

¿Es obligatorio tener el archivo functions.php?

Técnicamente hablando, algo que solo tenga…style.cssYindex.phpEl tema también podría funcionar. Pero…functions.phpEs esencial para implementar cualquier funcionalidad que vaya más allá de la simple salida de HTML básico (como menús de registro, barras laterales o la carga segura de scripts y estilos). Representa el método estándar para expandir y personalizar las características de un tema, por lo que es indispensable para cualquier tema práctico.

¿Cómo puedo agregar una barra lateral a mi tema?

En primer lugar, enfunctions.phpEn el uso chinoregister_sidebar()La función registra una o más áreas para herramientas adicionales (barras laterales). Luego, en el archivo de plantilla donde deseas mostrar la barra lateral (por ejemplo…index.phposingle.phpEn ese texto, se utiliza…dynamic_sidebar()Se utiliza una función para llamarlo. Finalmente, el usuario podrá arrastrar y colocar los widgets en esa área desde la página “Apariencia” -> “Widgets” en el backend de WordPress.

¿Cuáles son las consideraciones de seguridad a tener en cuenta al desarrollar temas?

Nunca confíes directamente en los datos ingresados por los usuarios o en los datos provenientes de la base de datos. Al mostrar cualquier contenido dinámico en la página, asegúrate de utilizar las funciones de escape proporcionadas por WordPress.esc_html()、esc_url()Ywp_kses_post()Al incorporar funciones personalizadas o formularios en un tema, es necesario seguir los mecanismos de verificación de seguridad (nonce) y de control de permisos de WordPress.wp_enqueue_style()Ywp_enqueue_script()Se utilizan para cargar recursos, en lugar de codificarlos de forma fija o utilizar etiquetas.