Inicio/conocimiento/WordPress/Detalles del contenido

Guía de inicio para el desarrollo de temas para WordPress: Cómo crear su propio tema desde cero

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

Guía de inicio para el desarrollo de temas para WordPress: Cómo crear su propio tema desde cero

¿Qué es un tema para WordPress y cuál es su estructura central?

Los temas de WordPress no son solo la apariencia de un sitio web; se trata de una colección de archivos que trabajan juntos para proporcionar una presentación visual y funcionalidades interactivas al contenido de su sitio. Un tema define el diseño general del sitio, los colores, las fuentes y los estilos, y también controla la forma en que se muestran los diferentes tipos de contenido a través de archivos de plantillas. Comprender la composición de un tema es el primer paso en el proceso de desarrollo.

Un tema estándar de WordPress contiene al menos dos archivos fundamentales:style.cssYindex.php。style.cssEl archivo no solo contiene la hoja de estilo del tema, sino que, lo que es más importante, también incluye un bloque de comentarios en la parte superior, que es clave para que WordPress reconozca el tema. Este bloque de comentarios debe contener información metadatos como el nombre del tema, el autor, una descripción y la versión.index.phpEs el archivo de plantilla predeterminado para el tema; cuando no se encuentra ninguna otra plantilla más específica que se ajuste a las necesidades, WordPress la utiliza para renderizar la página.

Lecturas recomendadas Desde cero: dominar los procesos centrales y las mejores prácticas en el desarrollo de temas para WordPress moderno。

Además de estos dos archivos esenciales, un tema completo y funcional suele incluir otros archivos de plantilla, como los utilizados para mostrar un artículo individual.single.phpSe utiliza para mostrar una lista de artículos.archive.php, así como los utilizados para mostrar la páginapage.phpEl tema también puede incluir un…functions.phpLos archivos se utilizan para agregar funciones específicas de un tema, registrar menús, barras laterales, etc.header.phpYfooter.phpSe utiliza para modularizar los códigos del encabezado y del pie de página del sitio web, lo que facilita su mantenimiento y reutilizació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).
LOGO de UltaHost página de acceso

Crea tu primer tema básico.

Crear un directorio temático y los archivos principales.

Primero, en el directorio de instalación de WordPress…wp-content/themes/Crea una nueva carpeta en la ruta seleccionada para usarla como directorio de tus temas. El nombre de la carpeta debe estar compuesto por letras minúsculas, números y guiones, y no debe contener espacios. Por ejemplo, podríamos crear una carpeta llamada…my-first-themeLa carpeta correspondiente.

A continuación, cree un archivo nuevo en esa carpeta.style.cssSe trata de un archivo, y al comienzo de este se deben agregar las notas de información temática necesarias. Esta información constituye, en esencia, el “dossier de identidad” del tema en cuestión.

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Crear un archivo de plantilla básica

A continuación, se procede a la creación.index.phpArchivo. Este es el modelo más básico; comenzaremos con la estructura HTML más simple e incorporaremos funciones clave de WordPress para cargar contenido de manera dinámica. Un diseño muy minimalista.index.phpPuede ser presentado de la siguiente manera:

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

    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

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

Este archivo utiliza varias funciones esenciales de WordPress:wp_head()Ywp_footer()Se utiliza para que el núcleo de WordPress, los plugins, etc. inyecten código (como estilos y scripts) en la parte superior e inferior de la página.the_post()Ythe_content()Se utiliza para mostrar los datos de los artículos en un ciclo de iteración. Ahora, simplemente sube esta carpeta de temas al servidor y podrás verla y activarla en la sección “Apariencia” -> “Temas” del panel de administración de WordPress.

Lecturas recomendadas Guía completa del proceso de creación de sitios web: Análisis detallado de los pasos para construir un sitio web profesional desde cero。

Utilizar niveles de plantillas y etiquetas de plantillas

Comprender el sistema de jerarquía de plantillas.

WordPress utiliza un sistema de jerarquía de plantillas (Template Hierarchy) muy sofisticado para determinar qué archivo de plantilla debe utilizarse para renderizar una página en particular. Este sistema realiza la búsqueda de acuerdo con principios que van desde lo más específico hasta lo más general. Por ejemplo, cuando se accede a un artículo con el ID 123, WordPress busca en el siguiente orden:single-post-123.php -> single-post.php -> single.php -> singular.php -> index.phpLos desarrolladores pueden aprovechar esta característica para controlar de manera precisa la visualización de diferentes contenidos al crear archivos de plantillas más específicos.

Dominar los etiquetas de plantillas más comunes

Las etiquetas de plantilla (Template Tags) son funciones PHP integradas en WordPress que se utilizan para generar dinámicamente diversos datos dentro de las plantillas de temas. Son herramientas esenciales para el desarrollo de temas. Además de las utilizadas en el ejemplo anterior…the_title()Ythe_content()Además, hay una gran cantidad de otras etiquetas.

Por ejemplo.the_permalink()Se utiliza para generar un enlace fijo que apunta al artículo actual.the_post_thumbnail()Se utiliza para mostrar las imágenes destacadas de un artículo.the_category()Se utiliza para generar una lista de las categorías a las que pertenece un artículo. Las etiquetas de condición también son de vital importancia, por ejemplo…is_home()、is_single()、is_page()、is_category()Espera, te permiten ejecutar diferentes lógicas de código según el tipo de la página actual.

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 
<?php if ( is_single() ) : ?>
    <div class="post-meta">
        发布于： | 分类：
    </div>
¿¿php endif; ?&gt;

Este código solo muestra la fecha de publicación y la información de categoría del artículo en la página de cada artículo individual.

Mejorar las funciones temáticas y la personalización.

Añadir el archivo de función para la función de temas.

functions.phpEl archivo es el “cajón de herramientas” para tu tema. El código que se añade aquí se activará cuando el tema se utilice. Uno de sus usos más comunes es para registrar funciones de soporte del tema, como imágenes destacadas para los artículos, la ubicación de menús personalizados y fondos personalizados.

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

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

    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

    // 为文章摘要添加更多标签支持
    add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_excerpt_more( $more ) {
    return '...';
}
?>

Introducir hojas de estilo y scripts.

Para mantener el código organizado y seguir las mejores prácticas, es recomendable separar los archivos de estilo (CSS) de los archivos de JavaScript.functions.phpLos archivos se cargan de forma secuencial (en cola), en lugar de ser utilizados directamente en los archivos de plantilla o a través de etiquetas. Esto garantiza que las relaciones de dependencia se gestionen de manera correcta y evita cargas repetidas.

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Un tutorial práctico para crear temas personalizados desde cero。

utilizarwp_enqueue_style()La función se utiliza para cargar tu tabla de estilo principal; normalmente, la almacenamos en un archivo específico.style.cssComo dependencia, para los scripts, se utiliza…wp_enqueue_script()Función.

function my_first_theme_scripts() {
    // 加载主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );

    // 加载一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

resúmenes

El desarrollo de temas para WordPress es un proceso que combina creatividad, diseño y tecnología. Al comprender la estructura básica de los archivos de un tema, en particular…style.cssYindex.phpYa has dado el primer paso con gran determinación. Dominar el sistema de niveles de plantillas te permite crear una lógica de visualización precisa para las diferentes partes del sitio web, mientras que el uso flexible de las etiquetas de plantillas permite generar todo el contenido de manera dinámica.functions.phpCon los archivos, puedes agregar de manera segura diversas funciones y características a un tema, así como gestionar los recursos de manera estandarizada. Partiendo de esta base simple, puedes ir explorando temas más avanzados: crear subtemas, personalizar los menús de navegación utilizando la clase Walker, integrar la API del Customizer para obtener previsualizaciones en tiempo real, e incluso utilizar el editor de bloques (Gutenberg) para desarrollar temas que permitan la edición completa del sitio web (FSE, Full Site Editing). La práctica constante, junto con la consulta de los documentos oficiales y el código de temas de calidad, es la mejor forma de mejorar tus habilidades de desarrollo.

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

FAQ Preguntas más frecuentes

¿Qué conocimientos técnicos se necesitan para desarrollar temas para WordPress?

Para desarrollar temas para WordPress, es necesario dominar los conocimientos básicos de HTML, CSS y PHP. HTML se utiliza para construir la estructura de las páginas, CSS para controlar el estilo y el diseño, y PHP es el lenguaje de programación central de WordPress, utilizado para manejar la lógica, acceder a datos y generar contenido dinámico. Tener un conocimiento básico de JavaScript también es de gran ayuda para agregar funciones interactivas.

¿Cómo puedo probar el desarrollo de temas en mi ordenador local?

Se recomienda encarecidamente desarrollar los temas primero en un entorno local. Puedes utilizar paquetes de servidores locales como XAMPP, MAMP, Local by Flywheel o Laragon. Estos herramientas te permiten configurar rápidamente un entorno de ejecución para WordPress que incluye Apache, MySQL y PHP en tu ordenador, lo que te permite desarrollar y depurar sin afectar al sitio web en línea.

¿Cuál es la diferencia entre el archivo functions.php del tema y los plugins?

functions.phpLas funciones contenidas en el archivo solo son efectivas dentro del tema que esté activo en ese momento. Si cambias de tema, estas funciones dejarán de estar disponibles. Por otro lado, las funciones proporcionadas por los plugins son independientes del tema; siempre que el plugin esté activo, sus funciones permanecerán, sin importar el tema que elijas. En general, las funciones que están estrechamente relacionadas con la presentación visual y el diseño del sitio web se encuentran dentro de los temas.functions.phpEl código que proporciona funciones independientes y universales (como formularios de contacto, optimización para SEO, caché) es más adecuado para ser convertido en plugins.

¿Qué son los subtemas y por qué debería usarlos?

Un subtema es un tema que depende de otro tema (denominado tema principal). Te permite modificar o expandir las funciones y estilos del tema principal sin tener que modificar directamente los archivos de este. La mayor ventaja de esto es que, cuando el tema principal se actualiza, tus personalizaciones de estilos y funciones (que se encuentran en el subtema) no se perderán. Para crear un subtema, simplemente necesitas…style.cssEn el archivo, se utiliza la declaración “Template:” para especificar el nombre de la carpeta que contiene los temas padre. A continuación, puedes crear únicamente los archivos de plantilla que necesitas reemplazar o agregar nuevas funcionalidades.

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