Inicio/conocimiento/WordPress/Detalles del contenido

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

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

Preparación y configuración del entorno.

Antes de comenzar a escribir código, necesitas un entorno de desarrollo adecuado. Esto incluye un servidor local (como XAMPP, MAMP o Local by Flywheel), un editor de código (como VS Code o PhpStorm), así como una instalación nueva de WordPress. Asegúrate de que tu WordPress esté en la versión más reciente para poder utilizar las funciones y API más actualizadas.

A continuación, necesitarás hacerlo en WordPress.wp-content/themesCree una nueva carpeta dentro del directorio. El nombre de esta carpeta deberá ser el “slug” de tu tema, por ejemplo…my-first-themeEsta carpeta será el lugar donde se almacenarán todos tus archivos de temas. Los archivos más básicos de un tema para WordPress son solo dos:index.phpYstyle.cssEntre ellos,style.cssNo se trata solo de un archivo de estilo (stylesheet), sino también de un “archivo de cabecera” (header file) que contiene metadatos sobre el tema. La información de los comentarios contenidos en este archivo es de vital importancia para que WordPress pueda reconocer tu tema.

Crear uno básico…style.cssEl archivo debe contener las siguientes informaciones en las notas de su cabecera:

Lecturas recomendadas Creando un tema perfecto para WordPress: Una guía completa de desarrollo desde cero hasta la maestría。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.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
*/

Text DomainSe utiliza para la internacionalización y debe mantenerse en línea con el nombre de la carpeta de temas. Además, crea el diseño más simple posible.index.phpEl archivo debe contener solo una frase.<?php get_header(); ?>Y uno<h1>¡Hola, Mundo!</h1>En este momento, en la parte posterior de WordPress, en “Apariencia” -> “Temas”, deberías poder ver tu tema y activarlo. Aunque por el momento no muestra nada (ya que aún no lo hemos creado).header.phpEsto puede no parecer mucho, pero representa que has dado el primer paso con éxito.

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

Comprender los archivos de plantillas principales y la estructura jerárquica de las plantillas

WordPress utiliza un sistema inteligente llamado “estructura de plantillas” para determinar qué archivo de plantilla debe utilizarse para mostrar el contenido en una solicitud de página específica. Comprender esta estructura es esencial para el desarrollo de temas. El sistema comienza buscando en el archivo de plantilla más específico; si no se encuentra, recurre a uno más general.

Los archivos de plantilla más básicos incluyen:
* index.phpEste es el modelo de respaldo final; se utilizará para todas las solicitudes para las que no se encuentre un modelo más específico.
* header.phpQue contiene el documento.<head>Parte de la página y la zona del encabezado del sitio web. A través de…get_header()Introducción a las funciones.
* footer.phpIncluye la zona del pie de página del sitio web. A través de…get_footer()Introducción a las funciones.
* sidebar.phpIncluye componentes de barra lateral. A través de…get_sidebar()Introducción a las funciones.
* functions.phpEste no es un archivo de plantilla, sino la “biblioteca de funciones” de tu tema, utilizada para agregar nuevas funcionalidades, registrar menús, herramientas adicionales, etc.

Para diferentes tipos de páginas, existen plantillas más específicas:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Plantilla personalizada) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Usado en la página de lista de artículos de blog) -> front-page.php(Usado para establecer una página estática como la página principal) -> index.php。

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

Primero, crea…header.phpDebe comenzar con…<!DOCTYPE html>Comience y incluya las llamadas a las funciones clave de WordPress, como…wp_head()。

Lecturas recomendadas Personalización de temas premium de WordPress: guía práctica de diseño, desarrollo y optimización。

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

De igual manera, crearfooter.phpY asegúrate de realizar la llamada.wp_footer()Función.

    <footer>
        <p>©  . Todos los derechos reservados.</p>
    </footer>
    ¿php_footer();?&gt;
</body>
</html>

Ahora, puedes actualizar el tuyo.index.phpUtiliza estos componentes de plantilla.

¿¿php get_header();??

<main>
    <h1>¡Hola, Mundo! Desde Main…</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

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

Mejorar las funcionalidades de un tema a través de functions.php

functions.phpEl archivo es el “cerebro” de tu tema. Aquí añades funcionalidades, registras componentes básicos de WordPress (como menús y áreas para herramientas), así como incluyes archivos 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%.
LOGO hosting.com página de acceso

Añadir soporte para temas y un menú de navegación para el registro.

Primero, activemos algunas funciones temáticas básicas. Utiliza…add_theme_support()Funciones para declarar las funcionalidades soportadas por un tema.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

A continuación, regístrese para configurar una posición en el menú de navegación. Esto le permitirá a los usuarios configurar el menú en la sección “Apariencia” -> “Menú” del panel de administración, y luego utilizarlo en los templates.wp_nav_menu()La función la llama.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Incluir en el archivo de estilo y en los scripts.

La forma correcta de cargar los estilos y los scripts es a través de…wp_enqueue_style()Ywp_enqueue_script()La función, que los monta enwp_enqueue_scriptsEn el gancho.

Lecturas recomendadas Análisis completo del desarrollo de temas para WordPress: Una guía práctica desde los principios hasta la maestría。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Crear bucles y plantillas de contenido

“Ciclo” (o “loop”) es una estructura de código PHP en WordPress que se utiliza para recuperar y mostrar artículos de la base de datos. Es esencial en casi todos los archivos de plantilla (templates).

Comprender la estructura del ciclo principal

En lo anterior…index.phpEn el ejemplo, ya hemos visto un ciclo básico. Veámoslo desglosado:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                ¿¿php the_excerpt(); ??
            </div>
        </article>
    ¿php endwhile;?&gt;
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
¿¿php endif; ?&gt;

Crear una plantilla para un artículo individual

Ahora, creemos una plantilla diseñada específicamente para mostrar un único artículo.single.phpEs más detallado que el ciclo de la página de lista.

¿¿php get_header();??

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1>¿¿¿php the_title();???</h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

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

resúmenes

A través de esta guía, has completado el proceso fundamental para crear un tema básico para WordPress desde cero. Comenzamos estableciendo el entorno de desarrollo y creando los archivos necesarios, y luego profundizamos en el sistema de capas de plantillas de WordPress, que es la piedra angular para desarrollar temas flexibles. Has aprendido cómo crear componentes reutilizables que puedan ser incorporados en diferentes temas.header.phpYfooter.phpComponentes de plantilla, y gracias a su potente funcionalidad…functions.phpEl archivo ha añadido soporte para funciones clave a tu tema, como el menú de navegación y la carga de estilos. Finalmente, exploramos el mecanismo de “bucle” (loop) de WordPress y creamos plantillas para mostrar listas de artículos y artículos individuales.

Esto es solo un punto de partida. A continuación, puedes explorar la creación de más plantillas específicas (como…).page.php, archive.phpEn la sección de registro de herramientas, se deben agregar tipos de artículos y sistemas de clasificación personalizados, así como implementar un diseño responsive de mayor calidad e interacciones mediante JavaScript. Recuerda que consultar la documentación oficial para desarrolladores y practicar constantemente son las mejores formas de mejorar tus habilidades.

FAQ Preguntas más frecuentes

¿Qué debo hacer si, después de activar mi tema, la página web muestra una pantalla en blanco?

Esto generalmente es causado por un error fatal en PHP. Por favor, verifica primero tu código.functions.php¿Hay errores gramaticales en el archivo, como la falta de puntos y comas o paréntesis? Abre WordPress para verificarlo.WP_DEBUGEl modo de visualización puede ayudarte a ver información detallada sobre los errores que ocurren.wp-config.phpEn el documento, se indicará que...define('WP_DEBUG', false);cambiar adefine('WP_DEBUG', true);。

¿Cómo puedo agregar la función de Logo personalizado a mi tema?

En tu…functions.phpLos documentos deadd_theme_support“Algunas partes…”; añada una línea: “…requieren una modificación adicional.”add_theme_support('custom-logo');También es posible pasar un parámetro de tipo array para definir el tamaño del Logo, así como si su altura debe ser flexible o no. Posteriormente, el usuario podrá cargar el Logo en la sección “Apariencia” -> “Personalizado” -> “Identidad del sitio” y utilizarlo en el diseño del sitio.the_custom_logo();La función la llama.

¿Por qué el menú de navegación que registré no se muestra en el backend?

Por favor, revisa los siguientes puntos: En primer lugar, asegúrate de que tu código de registro sea válido.functions.phpY ya ha sido montado correctamente.initGancho o…after_setup_themeEn el gancho. En segundo lugar, asegúrate de que lo que has definido esté correcto.theme_location(por ejemplo'primary') Al realizar la llamadawp_nav_menu()En tercer lugar, después de crear el menú, es necesario asignarlo a la ubicación que has registrado en la parte posterior del sistema, en la pestaña “Apariencia” -> “Menú” -> “Gestión de ubicaciones”.

¿Cómo crear una zona para herramientas pequeñas (barra lateral)?

En primer lugar, enfunctions.phpEn el uso chinoregister_sidebar()La función registra una pequeña área de herramientas. Necesitas proporcionar un parámetro de tipo array para definir su ID, nombre, descripción, etc. Luego, en el archivo de plantilla donde deseas mostrar la barra lateral…sidebar.phpEn ese texto, se utiliza…dynamic_sidebar()Llamas a la función y le pasas el ID del complemento (o herramienta auxiliar) para ejecutarlo. Finalmente, en…index.phposingle.phpEn plantillas como estas, se utiliza…<?php get_sidebar(); ?>Introducir el modelo de barra lateral.

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