Inicio/conocimiento/WordPress/Detalles del contenido

Introducción al desarrollo de temas para WordPress: Crea tu primer tema personalizado desde cero

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

Preparativos: Crear un entorno temático completo.

Antes de escribir cualquier código, establecer un entorno de desarrollo claro y organizado es clave para el éxito. En primer lugar, necesitas instalar WordPress en tu ordenador local o en un servidor remoto. Crea una carpeta para almacenar los temas, ubicada dentro de la carpeta de instalación de WordPress. /wp-content/themes/ Sí. Crearemos uno llamado… my-first-theme Este es el nuevo folder que hemos creado; representa el directorio central de nuestro tema personalizado.

Un tema básico de WordPress puede ser reconocido por el sistema con solo dos archivos. El primero de ellos es el archivo de estilo (stylesheet). style.cssNo solo define la apariencia del sitio, sino que la información contenida en las notas del encabezado también actúa como el “dossier de identidad” del tema, incluyendo su nombre, autor, descripción y otros metadatos. El segundo elemento es el archivo de plantilla principal. index.phpEs el archivo de plantilla de entrada predeterminado por WordPress.

Primero, creemos lo siguiente: style.css El archivo, en el cual se escriben las informaciones de cabecera necesarias.

Lecturas recomendadas Desarrollo de temas para WordPress: Una guía completa para crear temas personalizados desde cero。

/*
Theme Name: My First Theme
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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

A continuación, crearemos lo más básico. index.php El archivo puede ser muy simple y su único propósito es comprobar si el tema se ha reconocido correctamente.

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 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1001>
    <h1>¡Hola, mundo! Este es mi primer tema.</h1>
    ¿php_footer();?&gt;
</body>
</html>

Una vez que hayas completado estos dos archivos, inicia sesión en el panel de administración de WordPress y ve a la página “Apariencia” -> “Temas”. Allí deberías poder ver el tema que acabamos de crear, llamado “My First Theme”. Actívalo y luego visita la página principal del sitio web para ver el resultado más básico que ofrece. Esto indica que el marco de tu tema ha sido configurado con éxito.

Comprender el archivo de plantilla principal y su estructura jerárquica.

WordPress utiliza una jerarquía de plantillas (Template Hierarchy) para determinar qué archivo de plantilla debe utilizarse para renderizar y mostrar la página solicitada. Comprender estas reglas es esencial para el desarrollo de temas. En resumen, cuando un usuario accede a una página específica, WordPress busca el archivo de plantilla que se corresponda siguiendo un orden de prioridad establecido. El nivel más básico de esta jerarquía… index.phpEs la opción de retroceso final para todas las páginas.

Por ejemplo, cuando se accede al contenido de un artículo en particular de un blog, WordPress busca primero… single-post.phpSi no lo hay, entonces busque. single.phpSolo se utilizará si aún no existe. index.phpPara la página que muestra la lista de artículos, se realizará una búsqueda en orden. home.php、front-page.php、index.php。

Para implementar un tema de blog con funcionalidades completas, necesitamos crear al menos los siguientes archivos de plantilla clave:header.php(Cabeza de página del sitio web)footer.php(Pie de página del sitio web)sidebar.php(Side bar, opcional)index.php(Índice del contenido principal)single.php(Un artículo en particular)page.php(Single page) Y style.css(Tabla de estilos).

Lecturas recomendadas ¿Cómo desarrollar un tema personalizado para WordPress desde cero?。

A través de get_header()、get_footer() Y get_sidebar() Con estas funciones de plantilla, podemos modularizar el código común y lograr su reutilización. El archivo de plantilla principal es, por ejemplo… index.php La estructura se volverá mucho más clara gracias a esto.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Este enfoque modular no solo hace que el código sea más fácil de mantener, sino que también te permite crear encabezados y pies de página específicos para diferentes tipos de páginas de manera sencilla.

Desarrollo práctico: Creación de un bucle principal y llamada al contenido del artículo

El núcleo de cualquier tema de blog es el “The Loop” (El Bucle). Se trata de la estructura de código PHP que utiliza WordPress para obtener el contenido de los artículos de la base de datos y mostrarlo en la página. Dentro de este bucle, es posible utilizar una serie de etiquetas de plantilla (Template Tags) para mostrar el título del artículo, el contenido, el autor, la fecha, entre otras informaciones.

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

Vamos a construir uno de los modelos más básicos.index.phpLos archivos muestran la lista de artículos en el ciclo principal.

¿¿php get_header();??

<div class="content-area">
    <main class="site-main">
        ¿¿php si (tiene publicaciones() ) : ?&gt;
            <header class="page-header">
                <h1 class="page-title">Artículos más recientes</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/es/</?php the_permalink(); ?>">
                            ¿¿¿php the_title();???
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Publicado en:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Lo siento, no se encontró ningún artículo.</p>
        ¿¿php endif; ?&gt;
    </main>
    <?php get_sidebar(); ?>
</div>

¿¿¿php get_footer();???

En el código anterior, utilizamos… have_posts() Y the_post() Para construir un ciclo, se utilizan las etiquetas de plantilla correspondientes. the_title()、the_permalink()、the_excerpt() Las palabras “etc.” se utilizan para indicar que hay más elementos o detalles que no se han mencionado explícitamente, pero que se incluirán en el contenido final.post_class() La función generará automáticamente una serie de clases CSS muy útiles para el contenedor del artículo, lo que nos facilitará el diseño de su estilo.

Para un artículo individual, necesitamos crear… single.phpSu estructura es similar a la de una página de índice, pero generalmente muestra únicamente un artículo en cada ciclo y presenta todo su contenido completo.the_content())。

Lecturas recomendadas Guía de iniciación para el desarrollo de temas para WordPress: Cómo crear un tema personalizado desde cero。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Aquí se introduce una función más potente. get_template_part()Se utiliza para cargar otro archivo de fragmento de plantilla que se encuentra en el directorio del tema. Por ejemplo,get_template_part( 'template-parts/content', 'single' ); Se cargará con prioridad. template-parts/content-single.php El archivo se carga si no existe. template-parts/content.phpEsto mejora aún más la organización y la reutilizabilidad del código.

Mejoras en las funciones temáticas y prácticas recomendadas

Una vez que un tema básico está definido, podemos hacerlo más potente y robusto agregando archivos de funciones relacionadas con ese tema y siguiendo las mejores prácticas. Uno de los archivos más importantes en este proceso es… functions.php。

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

Temáticofunctions.phpEl archivo no es obligatorio, pero te permite agregar funcionalidades a tu tema, registrar características específicas y interactuar con la API central de WordPress. Es similar a un “plugin” para tu tema, aunque está vinculado directamente a él. Lo que debes hacer aquí es “registrar” y “declarar” los elementos relevantes, en lugar de simplemente mostrar el contenido.

Un estándarfunctions.phpDebería incluir los siguientes componentes:

1. 注册菜单：使用 register_nav_menus() Función.
2. 注册侧边栏：使用 register_sidebar() Función.
3. 添加主题支持：使用 add_theme_support() Existen funciones para activar funcionalidades clave, como las imágenes destacadas de los artículos o el logotipo personalizado.
4. 加载样式和脚本：使用 wp_enqueue_style() Y wp_enqueue_script() Función, y utilizarla de manera correcta. wp_enqueue_scripts Gancho.

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 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' );

// 注册一个右侧边栏
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<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' );
?&gt;

Sigue estas buenas prácticas: por ejemplo, añade funcionalidades mediante ganchos (hooks), organiza la carga de recursos de manera adecuada y utiliza funciones de traducción. __() Y _e() Esto permite internacionalizar tus temas, lo que garantiza que sean seguros, eficientes y cumplan con los estándares de desarrollo oficiales de WordPress.

resúmenes

Desde la creación de… style.css Y index.php Comenzando por las carpetas básicas del tema, ya has completado el proceso principal para crear un tema personalizado para WordPress. Hemos analizado en profundidad el sistema de jerarquía de plantillas y hemos comprendido cómo WordPress elige automáticamente los archivos de plantilla adecuados para renderizar las diferentes páginas. Hemos practicado la creación del ciclo principal del tema y hemos aprendido a utilizar diversas etiquetas de plantilla para generar contenido dinámicamente. Finalmente, hemos… functions.php Se han incorporado funciones más potentes y un mayor nivel de normatividad al tema en cuestión. Aunque esto es solo un comienzo, te abre las puertas para seguir explorando: puedes agregar más archivos de plantilla, estilos más variados y funciones interactivas, con el fin de crear un sitio web único que se ajuste perfectamente a tus necesidades o a las de tus clientes.

FAQ Preguntas más frecuentes

¿Es necesario entender PHP para desarrollar temas (temas web)?

Sí, para desarrollar temas para WordPress de manera avanzada es necesario tener ciertos conocimientos de PHP. Dado que WordPress está construido en PHP, todos los archivos de plantillas, las llamadas a funciones y la lógica de procesamiento de datos dependen de este lenguaje. Para los principiantes, es esencial dominar la sintaxis básica de PHP, así como conceptos como variables, arrays, bucles, condicionales y funciones.

¿Cómo puedo adaptar mi tema para que funcione correctamente en dispositivos móviles?

Hacer que un tema cuente con un diseño responsive es un requisito básico en los sitios web modernos. Es necesario utilizar las consultas de medios (Media Queries) de CSS para ajustar el layout y los estilos según la anchura de la pantalla. Durante el desarrollo, siempre se debe seguir la estrategia de “priorizar a los dispositivos móviles”: primero se escriben los estilos adecuados para las pantallas pequeñas y, posteriormente, se añaden o se sobrescriben estos estilos para pantallas de mayor tamaño mediante las consultas de medios.

¿Cuál es la mejor manera de desarrollar y probar temas (temas relacionados con la creación de contenido o interfaces)?

Se recomienda encarecidamente desarrollar temas en un entorno local. Utilizar herramientas como Local by Flywheel, XAMPP, MAMP o Docker para configurar un entorno de servidor local te permitirá iterar y probar rápidamente sin afectar el sitio web en línea. Además, activa las funciones correspondientes en WordPress para mejorar la eficiencia del proceso de desarrollo. WP_DEBUG El modo es de vital importancia, ya que permite mostrar los errores y advertencias de PHP en la pantalla, lo que te ayuda a detectar y corregir problemas en el código de manera oportuna.

¿Qué tecnologías front-end necesito dominar?

Además de PHP, es esencial dominar con soltura HTML y CSS, que son las bases para construir la estructura y el estilo de las páginas web. Para interacciones más complejas y efectos dinámicos, el conocimiento de JavaScript también es de gran importancia. En particular, es crucial aprender cómo incorporar y utilizar archivos JavaScript de manera segura y correcta en WordPress. wp_enqueue_script), así como aprender a utilizar la biblioteca de JavaScript que viene incluida con WordPress.

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