Inicio/conocimiento/WordPress/Detalles del contenido

Desarrollo práctico de temas para WordPress: Una guía completa para crear temas personalizados desde cero

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

Entorno de desarrollo e inicialización del proyecto

Antes de comenzar a crear un tema personalizado para WordPress, establecer un entorno de desarrollo eficiente es el primer paso crucial. Esto no solo asegura la normalización del código, sino que también mejora significativamente la eficiencia del desarrollo y la experiencia de depuración.

Configuración del entorno de desarrollo local

Se recomienda utilizar software de servidores locales, como Local by Flywheel, MAMP o XAMPP, ya que permiten establecer rápidamente un entorno de desarrollo en su ordenador que incluya PHP, MySQL y Apache/Nginx. Una vez que haya instalado el servidor local, descargue e instale la versión más reciente de WordPress. A continuación, en el directorio de instalación de WordPress… wp-content/themes Dentro de la carpeta, cree una nueva carpeta, por ejemplo… my-custom-themeEste será el directorio raíz de su tema.

Creación del archivo central del tema

Un tema básico de WordPress solo necesita dos archivos:style.css Y index.phpPrimero, crea… style.css El archivo no solo sirve para definir los estilos, sino que, lo que es más importante, permite comunicar a WordPress cuál es su tema a través de las informaciónes contenidas en las notas del encabezado del archivo.

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

/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Se utiliza para la internacionalización; actuará como un identificador para el texto que será traducido posteriormente. A continuación, se crea lo más básico. index.php El archivo puede contener, inicialmente, solo una estructura HTML simple. Una vez que haya completado la creación de estos dos archivos, podrá ver y activar este tema vacío en la sección “Apariencia” -> “Temas” del panel de administración de WordPress.

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

Estructura temática y niveles de los templates

Comprender la estructura jerárquica de las plantillas en WordPress es esencial para desarrollar temas personalizados. Esta estructura determina cómo WordPress elige automáticamente los archivos de plantilla correspondientes en función de las diferentes solicitudes del usuario (como páginas de artículos, páginas generales o archivos de archivos de categorías) para su renderizado.

El archivo de plantilla principal y su función

WordPress busca los archivos de plantillas en un orden específico. El proceso más básico consiste en recurrir primero a las plantillas más específicas y, si no encuentra lo que busca, a las plantillas más generales. Por ejemplo, cuando se accede a un artículo individual, WordPress busca en el siguiente orden:single-post-{id}.php, single-post.php, single.phpY, por último, singular.phpSi no se encuentra nada, entonces se utiliza… index.phpDe la misma manera, la página principal buscará primero… front-page.phpY luego viene… home.phpDominar esta relación de jerarquía le permitirá controlar con precisión el diseño de las diferentes páginas al crear archivos de plantillas específicos.

Crear archivos de plantillas comunes

Además de… index.phpDebería crear gradualmente los siguientes archivos de plantillas clave para construir la estructura completa del tema:
- header.phpCabeza del sitio web, que contiene: <head> Zona y navegación superior.
- footer.phpEn la parte inferior del sitio web.
- sidebar.phpBarra lateral.
- functions.phpEl archivo funcional del tema se utiliza para agregar funciones, registrar menús, áreas de herramientas, etc.
- page.phpSe utiliza para renderizar una página individual.
- single.phpSe utiliza para renderizar un artículo individual.
- archive.phpSe utiliza para renderizar páginas de archivo que contienen información sobre categorías, etiquetas, autores, etc.

En index.php En esto, puedes utilizar… get_header(), get_footer(), get_sidebar() Se utilizan etiquetas de plantilla para incorporar estas partes modulares, lo que permite el reutilizamiento del código.

Lecturas recomendadas Análisis en profundidad del desarrollo de temas de WordPress: una guía de técnicas básicas desde el nivel principiante hasta el avanzado.。

Funciones principales y opciones de temas

functions.php El archivo es el “cerebro” de tu tema; toda la lógica posterior y las mejoras en funcionalidades se realizan aquí. Se carga automáticamente al iniciar el tema.

Añadir soporte para temas y funcionalidades de registro.

A través de add_theme_support() En las funciones, puede declarar las diversas funcionalidades que su tema soporta. Por ejemplo, habilitar las miniaturas de los artículos (imágenes destacadas) es una característica estándar en los temas modernos.

function my_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义菜单功能
    add_theme_support( 'menus' );
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用对古腾堡编辑器的宽对齐和颜色支持
    add_theme_support( 'align-wide' );
    add_theme_support( 'editor-color-palette', array( /* ... */ ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

También necesitas registrar la ubicación de los menús de navegación y la zona de los widgets (barra lateral).

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 
function my_theme_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
        'footer'  =&gt; __( '底部菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_menus' );

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-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_theme_widgets_init' );

Introducir archivos de hojas de estilo y scripts

La forma correcta de incorporar recursos es a través de… wp_enqueue_style() Y wp_enqueue_script() La función, que los monta en wp_enqueue_scripts En el gancho.

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );

// 如果评论功能开启且是单篇文章/页面，加载评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Ciclos y etiquetas de plantillas

“El ”bucle” es el mecanismo predeterminado de WordPress para recuperar contenido de la base de datos y mostrarlo en las páginas. Comprender y utilizar los bucles de manera correcta es esencial para la exhibición de contenido dinámico.

Estructura del ciclo estándar

En los archivos de plantilla, a menudo se encuentra una estructura de código similar a la siguiente; esta es la bucle principal de WordPress.

Lecturas recomendadas Introducción al desarrollo de temas para WordPress: Cómo crear temas personalizados desde cero。

¿  
    ¿
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
            </header>
            <div class="entry-content">
                ¿¿php the_content(); ??
            </div>
        </article>
    
    <p>¿Desculpe, no se encontró ningún contenido?</p>
¿¿php endif; ?&gt;

have_posts() Y the_post() Las funciones controlan el desarrollo de los ciclos.the_title(), the_content(), the_permalink() Las etiquetas de plantilla como `%s` y `%1$s` se utilizan para mostrar información específica sobre el artículo actual. Fuera del bucle, puede utilizarlas según sea necesario. is_home(), is_single(), is_page() Se utilizan etiquetas condicionales para determinar el tipo de página actual y, en función de ello, ejecutar diferentes lógicas.

Consultas personalizadas y bucles

A veces es necesario mostrar contenido que no forma parte del ciclo principal, por ejemplo, publicar artículos de una categoría específica en la página de inicio. Para ello, se puede utilizar… WP_Query Se pueden crear clases para generar consultas personalizadas.

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 
<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 输出文章内容...
    endwhile;
    wp_reset_postdata(); // 重置全局 $post 数据
endif;
?>

resúmenes

Desarrollar un tema para WordPress desde cero es un proceso sistemático que abarca todo el proceso, desde la configuración del entorno, la planificación de la estructura, la implementación de funciones hasta la exhibición de contenido dinámico. Lo esencial es comprender el mecanismo de jerarquía de las plantillas, ya que este determina la lógica de renderizado de las páginas; además, es crucial utilizar estas plantillas de manera experta. functions.php Vamos a expandir las funcionalidades de su tema y a dominar el concepto de “bucles” para generar y mostrar datos de manera eficiente. Al seguir los estándares de codificación y las mejores prácticas de WordPress (como la correcta incorporación de recursos, el uso de funciones de traducción y la adición de un soporte adecuado para temas), asegurará que su tema sea robusto, eficiente y fácil de mantener. Al seguir los pasos de esta guía, podrá crear un tema personalizado con una estructura clara y funciones completas, lo que le sentará una base sólida para desarrollos más avanzados.

FAQ Preguntas más frecuentes

¿Qué tecnologías fundamentales se deben dominar para desarrollar temas para WordPress?

Es necesario que domines los conceptos básicos de PHP (para la lógica y las plantillas del lado del servidor), HTML/CSS (para la estructura y el estilo) y JavaScript (para la interacción con el usuario). Lo más importante es comprender los conceptos fundamentales de WordPress, como la jerarquía de las plantillas, los ganchos (Hooks), las acciones y los filtros (Actions & Filters), el ciclo de ejecución (The Loop), así como las diversas funciones y clases que ofrece WordPress.

¿Cómo puedo hacer que mi tema sea compatible con el editor Gutenberg?

En primer lugar, en functions.php En el uso chino add_theme_support() Activa las funciones relevantes, por ejemplo… editor-styles、align-wide Y un panel de colores personalizables. En segundo lugar, crea una hoja de estilo dedicada para el editor y utilízala para… add_editor_style() Se introduce una función para garantizar que la experiencia visual del editor en el backend sea consistente con la del frontend. También es posible crear Estilos de Bloque (Block Styles) o Bloques Personalizados (Custom Blocks) a fin de ofrecer funcionalidades de edición más avanzadas.

¿Cómo se puede implementar soporte para múltiples idiomas en el desarrollo de temas?

WordPress utiliza el framework GNU gettext para la internacionalización (i18n). En el código, todo el texto que necesite ser traducido debe estar envuelto en funciones específicas. () Se utiliza para realizar traducciones en PHP._e() Se utiliza para traducir y mostrar el resultado directamente.esc_html() Se utiliza para traducir y escapar el código HTML. En JavaScript, se emplea de la misma manera. wp.i18n.__()Luego, utiliza herramientas como Poedit para extraer estos textos y generar archivos .pot, y luego tradúcelos a archivos .po y .mo. Finalmente, style.css La configuración de la cabecera está correcta. Text Domain Y también… functions.php En el uso chino load_theme_textdomain() Cargando el archivo de traducción.

¿Cómo puedo agregar una página de configuraciones personalizadas a mi tema?

Para opciones sencillas, se puede utilizar la API del “Customizer” incorporada en WordPress, la cual ofrece una interfaz de previsualización en tiempo real y muy intuitiva. Para necesidades más complejas, se pueden crear interfaces de configuración basadas en las “Páginas de Opciones” (Options Pages). Se recomienda utilizar la API de Configuraciones de WordPress (WordPress Settings API) para registrar, verificar y guardar las configuraciones de manera segura. También se pueden utilizar bibliotecas de terceros como ACF (Advanced Custom Fields) o Carbon Fields, las cuales simplifican en gran medida el proceso de creación de campos personalizados y páginas de opciones.

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