Inicio/conocimiento/WordPress/Detalles del contenido

Guía para el desarrollo de temas para WordPress: Desde los principios hasta la maestría para crear sitios web personalizados

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

Fundamentos del desarrollo de temas para WordPress

Para comenzar a desarrollar temas para WordPress, es necesario primero comprender su estructura básica. Un tema básico contiene al menos dos archivos:index.php Y style.cssEntre ellos,style.css No solo contienen las hojas de estilo, sino también la metainformación del tema, la cual se declara a través de bloques de comentarios específicos. Esta información es clave para que WordPress pueda reconocer el tema correspondiente.

Redacción de archivos de encabezado de información de tema

Enstyle.cssEn la parte superior del archivo, debe contener un bloque de comentarios que cumpla con un estándar de formato. Este bloque define metadatos como el nombre del tema, el autor, la descripción y la versión. Por ejemplo:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

De entre ellosText DomainSe utiliza para la internacionalización (i18n) y sirve como base para el uso posterior de funciones de traducción.__()o_e()Es un campo de texto que debe especificarse al crear un tema. completar estos datos de manera correcta es una condición previa para que el tema sea reconocido por el backend de WordPress y se active con éxito.

Lecturas recomendadas Desarrollo de temas para WordPress: Una guía completa para crear temas de sitios web de nivel profesional desde cero。

Comprender la estructura jerárquica de los archivos temáticos

WordPress utiliza un sistema de niveles de plantillas para determinar qué archivo de plantilla se debe cargar para diferentes tipos de páginas. Por ejemplo, cuando se accede a un artículo en particular, WordPress busca primero el archivo de plantilla correspondiente a ese tipo de página.single.phpSi no existe, entonces retroceder a…singular.phpFinalmente, se vuelve a la versión anterior.index.phpComprender este nivel (por ejemplo…)front-page.php > home.php > index.phpEs de vital importancia para crear temas con funcionalidades completas. Los desarrolladores deben dar prioridad a la creación de los archivos de plantilla más específicos y asegurarse de que exista un…index.phpComo medida de respaldo final.

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

Función del archivo de plantilla principal

Además del archivo de entrada, un tema completo y funcional suele incluir los siguientes archivos de plantilla esenciales:
* header.phpSe define la cabecera del documento, que generalmente contiene:<head>Cabezadas de áreas y páginas web.
* footer.phpDefinir el pie de página del documento.
* sidebar.phpDefinir el área de la barra lateral.
* functions.phpEste es el “Centro de Funcionalidades” del tema, utilizado para agregar nuevas funcionalidades, registrar menús, y gestionar imágenes destacadas, entre otros.
En el archivo de plantilla, se utiliza…get_header()、get_footer()、get_sidebar()Utiliza funciones como `import` para incorporar estas partes, manteniendo así la modularidad del código.

Desarrollar las funciones esenciales de un tema

Temáticofunctions.phpLos archivos son esenciales para mejorar las funcionalidades de un tema. No se trata de archivos de plantilla, sino de archivos PHP que se cargan automáticamente al iniciar el tema, y que sirven para conectarse a la API central de WordPress.

Operación de inicialización del archivo de funciones temáticas

Enfunctions.phpEn este contexto, todas las operaciones deben realizarse a través de los canales o procedimientos establecidos.add_action()Se conecta a una acción específica, o se realiza a través de ella.add_filter()Para modificar los datos, un punto de partida estándar es…after_setup_themeSe admite la configuración de un tema durante la ejecución de una acción. Por ejemplo:

function mytheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Este código activa las etiquetas de título automáticas, las miniaturas de los artículos y registra dos ubicaciones para menús personalizados. Tenga en cuenta que todas las cadenas de texto han sido procesadas mediante la función de traducción.__()Y se especificó lo que se relaciona con…style.cssCampo de texto consistentemy-custom-theme。

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

La correcta incorporación de archivos de estilo (CSS) y de scripts

Nunca debes crear enlaces directos (hard links) a archivos CSS o JavaScript dentro de los archivos de plantillas. En su lugar, se debe utilizar otro método de inclusión adecuado.wp_enqueue_style()Ywp_enqueue_script()Funciones, y enlazarlas con…wp_enqueue_scriptsEn términos de acciones, esto asegura el manejo correcto de las dependencias y evita la carga repetida de datos.

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

utilizarget_stylesheet_uri()Yget_template_directory_uri()Es posible obtener dinámicamente la URL del directorio del tema, asegurando que la ruta sea correcta.

Registro y administración de herramientas adicionales

Los widgets son clave para la dinamización del contenido en WordPress. Para activarlos, primero es necesario…functions.phpEn la sección de registro de herramientas adicionales (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 mytheme_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>'funciona bien. Lo que necesito es una traducción al español de la siguiente oración: \n',
    ) );
adi_action( 'widgets_init', 'my_theme_widgets_init' );

Después de registrarse, podrá ver la zona de la “barra lateral” en la sección “Apariencia” -> “Accesorios” del panel de administración. Luego, en el archivo de plantilla (por ejemplo…sidebar.phpEn ese texto, se utiliza…dynamic_sidebar( 'sidebar-1' )Se utiliza una función para llamar y mostrar el contenido de esa área.

Implementar plantillas temáticas y bucles

El núcleo de la presentación de contenido en WordPress es el “Bucle” (The Loop). Este es un fragmento de código PHP que se utiliza para verificar si existen artículos y, en caso de haberlos, para mostrar cada uno de ellos de forma iterativa.

Escribir de manera estándar un ciclo para artículos

Enindex.php、single.phpoarchive.phpEn plantillas como estas, la estructura básica de un ciclo es la siguiente:

Lecturas recomendadas Guía definitiva para el desarrollo de temas para WordPress: desde los principios hasta la práctica real。

¿  
    ¿
        <!-- 针对每一篇文章的HTML和模板标签 -->
        <article>
            <h2>¿¿¿php the_title();???</h2>
            <div class="entry-content">
                ¿¿php the_content(); ??
            </div>
        </article>
    
    <p>¿Desculpe, no se encontró ningún contenido?</p>
¿¿php endif; ?&gt;

Dentro del ciclo, se pueden utilizar una serie de etiquetas de plantilla que comienzan con “the_”.the_title()、the_content()、the_permalink()Espera… Voy a generar la información correspondiente al artículo actual.

Consulta y bucle de artículos personalizados

A veces es necesario mostrar artículos que cumplen con ciertas condiciones (por ejemplo, los 5 últimos artículos de una determinada categoría). En estos casos, no se debe modificar el ciclo principal, sino que se debe crear uno nuevo.WP_QueryEjemplo.

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

Es de suma importancia: después de utilizar una consulta personalizada, es necesario realizar una llamada (es decir, ejecutar una acción correspondiente).wp_reset_postdata()Para recuperar los datos de los artículos a nivel global del ciclo principal, se debe evitar que el código posterior genere errores.

Introducción y reutilización de la parte de plantillas

Para seguir el principio DRY (Don’t Repeat Yourself, no te repitas), los fragmentos de código que se utilizan repetidamente (como los resúmenes de artículos o las listas de comentarios) deben dividirse en archivos separados (denominados “Partes”) y luego ser reutilizados en otros lugares del código.get_template_part()Introducción.

// 在循环中引入内容模板
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Este código buscará en orden los siguientes elementos:template-parts/content-{post-type}.php、template-parts/content.phpCarga el archivo y lo procesa. Por ejemplo, en el caso de un artículo estándar, procederá a cargarlo.content-post.php。

Técnicas avanzadas de desarrollo de temas

Una vez que las funciones básicas estén completas, se pueden explorar características más avanzadas para mejorar la profesionalidad y la flexibilidad del tema.

Integración de la API de personalizadores

El Personalizador de WordPress (Customizer) permite a los usuarios previsualizar y modificar las configuraciones de los temas en tiempo real. A través de la API del Personalizador, es posible agregar opciones de configuración como selecciones de colores, controles para cargar archivos, menús desplegables, entre otras.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'mytheme_options', array(
        'title' => __( '主题选项', 'my-custom-theme' ),
    ) );
    // 在板块中添加一个“页脚文本”设置
    $wp_customize->add_setting( 'footer_text', array(
        'default' => __( '版权所有', 'my-custom-theme' ),
        'transport' => 'refresh', // 或 'postMessage' 用于实时JS预览
    ) );
    // 为该设置添加一个文本输入控件
    $wp_customize->add_control( 'footer_text', array(
        'label' => __( '页脚文本', 'my-custom-theme' ),
        'section' => 'mytheme_options',
        'type' => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Enfooter.phpEn ese caso, se puede utilizar.get_theme_mod( 'footer_text', '默认文本' )Para mostrar el valor establecido por el usuario.

Normas para la creación y uso de subtemas

Crear subtemas es la mejor práctica para modificar de manera segura un tema padre existente. Un subtema solo necesita… (El texto se interrumpe aquí; no se proporciona la información completa).style.cssY uno opcional.functions.php。
subtemáticostyle.cssLa cabeza debe pasar a través deTemplateNombre del directorio del tema padre de la declaración del campo:

/*
Theme Name: My Child Theme
Template: my-custom-theme // 父主题目录名
...
*/

subtemáticofunctions.phpNo se sobrescribirá el tema padre, sino que ambos se cargarán simultáneamente. Los archivos de plantilla del tema hijo reemplazarán por completo a los archivos con el mismo nombre del tema padre. Esto te permite modificar solo las partes que necesitas y mantener tus personalizaciones cuando se actualice el tema padre.

Preparación para la internacionalización y localización de temas

Para que el tema pueda ser utilizado por usuarios de todo el mundo, todas las cadenas de texto dirigidas a los usuarios deben ser internacionalizadas. Esto significa que, en el código, todo el texto debe estar rodeado por funciones de traducción.
* __('文本', 'text-domain')Volver a la cadena de texto traducida.
* _e('文本', 'text-domain')Muestre directamente la cadena de texto traducida.
* 对于带占位符的字符串，使用printf( __( '搜索 %s 的结果', 'my-custom-theme' ), $search_term )。
Una vez que haya completado el proceso, utilice herramientas como Poedit para extraer todas las cadenas de texto traducidas y generar el resultado final..potEl archivo puede servir de base para que el traductor cree el contenido correspondiente.zh_CN.poY.moLos archivos de paquetes de idiomas deben colocarse en la carpeta correspondiente al tema./languages/En el directorio.

resúmenes

El desarrollo de temas para WordPress es un proceso sistemático que comienza con la comprensión de la estructura básica de los archivos, avanza hacia el conocimiento de las funciones esenciales, el sistema de plantillas y los mecanismos de repetición (ciclos), y finalmente conlleva al dominio de las opciones de personalización avanzada y de internacionalización. La clave radica en seguir los estándares de codificación y las mejores prácticas de WordPress: utilizar correctamente los ganchos de acción (action hooks), encapsular las funciones para manejar las etiquetas de las plantillas, proporcionar opciones de configuración a través de la API del Personalizador (Customizer), y asegurarse de que todo el texto esté preparado para la internacionalización. Todo esto se inicia con la creación del tema más simple posible.style.cssYindex.phpComenzar por agregar gradualmente los archivos de plantilla y enriquecer el contenido.functions.phpLas funciones de WordPress, junto con el mecanismo de subtemas para personalizaciones de seguridad, permiten a los desarrolladores crear temas de nivel profesional que son a la vez potentes y flexibles. Continuar aprendiendo y aplicando estos conceptos fundamentales es la base para crear sitios web personalizados de WordPress de alta calidad, fáciles de mantener y con buena compatibilidad.

FAQ Preguntas más frecuentes

¿Qué conocimientos previos se necesitan para desarrollar un tema para WordPress con el nombre ###?
Para desarrollar temas para WordPress es necesario tener conocimientos básicos de HTML y CSS, que se utilizan para construir la estructura y el estilo de las páginas web. Asimismo, es esencial tener un conocimiento básico de PHP, ya que el núcleo de WordPress y sus plantillas de temas están escritos en este lenguaje de programación. Además, un conocimiento preliminar de JavaScript es útil para agregar funciones interactivas a los temas. También es fundamental comprender los conceptos básicos de WordPress, como artículos, páginas, categorías, etiquetas y widgets, como punto de partida para comenzar en el desarrollo de temas.

¿Por qué mi tema personalizado no se muestra en segundo plano?

Esto generalmente se debe a que…style.cssEl problema se debe a que el bloque de comentarios con la información del tema en la parte superior del archivo no tiene el formato correcto o falta información. Por favor, asegúrese de que el bloque de comentarios cumpla completamente con los requisitos de WordPress.Theme Name:Los campos han sido rellenados correctamente. Además, verifique si la carpeta de temas ha sido colocada en el lugar adecuado./wp-content/themes/El archivo se encuentra dentro de la carpeta, y el nombre de la carpeta no contiene caracteres especiales ni caracteres chinos.

¿Cómo puedo hacer que mi tema sea compatible con el chino u otros idiomas?

En primer lugar, durante el proceso de desarrollo, asegúrate de que todas las cadenas de texto dirigidas al usuario se procesen utilizando funciones de traducción (como…).__()o_e()Se debe realizar el empaquetamiento y especificar el dominio de texto (Text Domain) correcto; este dominio debe coincidir con…style.cssLa declaración del dominio de texto (Text Domain) es consistente con lo especificado. A continuación, se utiliza una herramienta (como Poedit) para analizar los archivos del tema y generar el contenido necesario..potArchivo de plantilla de traducción. Los traductores pueden crear el idioma correspondiente basándose en esta plantilla (por ejemplozh_CN.po) y compílalo en.moArchivos. Finalmente, coloque estos archivos de idioma en la carpeta correspondiente al tema./languages/En el directorio, los contenidos se cargan automáticamente cada vez que el usuario cambia el idioma de su sitio web.

¿Se perderán los cambios que he realizado en mi subtema después de que se actualice el tema principal?

No. El propósito inicial del diseño de los subtemas es permitir personalizaciones de manera segura. Cuando se actualiza un tema principal, solo se sobrescriben los archivos correspondientes a ese tema principal. Los archivos de tu subtema (incluidos todos sus componentes) no se verán afectados por la actualización del tema principal.style.css、functions.phpAsí mismo, todos los archivos de plantilla que hayas copiado a los subtemas y que hayas modificado se conservarán intactos. Esta es la razón por la que se recomienda encarecidamente modificar los temas existentes creando subtemas en lugar de modificar directamente los archivos del tema principal.

¿Cómo elegir entre usar un generador de páginas y desarrollar uno propio para tus temas (temas visuales o estilos de presentación)?

Depende de tus objetivos, habilidades y el tiempo disponible. Utilizar herramientas de construcción de páginas (como Elementor o WPBakery) te permite crear sitios web de manera rápida y sin necesidad de programación, lo que las hace ideales para principiantes, freelancers o proyectos que requieren una entrega urgente. No obstante, estas herramientas pueden generar código redundante, lo que afecta el rendimiento del sitio web, y existe un cierto riesgo de quedarse atado a un proveedor específico. Desarrollar tus propios temas te ofrece un control total sobre el código, lo que resulta en un código más limpio y eficiente, mejor adaptado a tus necesidades específicas y que también ayuda a mejorar tus habilidades de desarrollo. Pero esto implica invertir tiempo en el aprendizaje y el ciclo de desarrollo es más largo. Para aquellos que buscan el máximo rendimiento, un diseño único o desean comprender en profundidad WordPress, desarrollar sus propios temas es la mejor opción.

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