Inicio/conocimiento/WordPress/Detalles del contenido

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

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

Comprender la estructura básica y los archivos clave de un tema de WordPress

Un tema personalizado para WordPress es, en esencia, una carpeta que contiene archivos específicos, y esta carpeta se encuentra en una ubicación predeterminada dentro del sistema de WordPress./wp-content/themes/Estos archivos se encuentran dentro del directorio correspondiente. Siguen el sistema de jerarquía de plantillas de WordPress y, juntos, determinan cómo el sitio web presenta el contenido de la base de datos (como artículos y páginas) a los visitantes. Comprender el papel de cada archivo y la forma en que colaboran entre sí es el primer paso en el proceso de desarrollo.

Archivos necesarios para el tema y estructura de directorios

Cada tema de WordPress debe contener dos archivos esenciales:style.css Y index.phpEntre ellos,style.css El papel de este archivo es particularmente crucial: no solo sirve para definir el estilo del tema en términos de código CSS, sino que el bloque de comentarios en la parte superior del archivo constituye, de hecho, el “dato de identificación” que permite a WordPress reconocer el tema en cuestión. Este bloque de comentarios debe seguir estrictamente un formato específico.

/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/

index.php Es el archivo de plantilla principal del tema y también representa la última línea de defensa en la estructura jerárquica de las plantillas. Cuando WordPress no puede encontrar un archivo de plantilla más específico para la solicitud actual…single.phpopage.phpCuando eso sucede, se vuelve a utilizar el método anterior.index.phpPor lo tanto, un tema sólido debe contener este archivo.

Lecturas recomendadas Construir un sitio web profesional: Una guía completa para crear un tema personalizado para WordPress desde cero。

Los niveles de las plantillas y la función de los archivos de plantillas

El sistema de niveles de plantillas de WordPress constituye un conjunto de reglas inteligentes para la selección de plantillas. Este sistema elige automáticamente el archivo de plantilla que mejor se adapte al tipo de página que el usuario está visitando (como la página principal, la página de un artículo o la página de una categoría). Por ejemplo, cuando se accede a un artículo en particular, WordPress realiza la búsqueda en el siguiente orden:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> Y finalmente, viene lo último. index.php。

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

Además de los dos archivos necesarios mencionados anteriormente, un tema completo y funcional suele incluir también:
* header.phpDefinir la cabecera del documento, que incluye…<head>Zonas, logotipos del sitio web y navegación principal.
* footer.phpDefinir el pie de página del documento, que incluirá información sobre los derechos de autor, enlaces de ayuda, etc.
* functions.phpEste es el “cerebro” del tema, utilizado para cargar estilos de scripts, registrar menús y herramientas adicionales, así como para definir las funciones de soporte del mismo.
* single.phpSe utiliza para mostrar un único artículo.
* page.phpSe utiliza para mostrar una única página.

Las funciones principales y los templates para la creación de temas:

Después de establecer la estructura básica de los archivos, el siguiente paso es llenar el contenido de estos archivos de plantilla y utilizar las funciones principales de WordPress, así como el “bucle principal” para generar contenido dinámicamente.

Inicializar las funciones del tema en functions.php.

functions.php Los archivos son el eje de las funciones de un tema. Aquí puedes agregar todo tipo de funcionalidades sin necesidad de modificar los archivos centrales de WordPress. Un proceso de inicialización estándar incluye configurar el soporte del tema, registrar los menús de navegación y las áreas de herramientas, así como cargar de manera segura los scripts y las hojas de estilo.

&lt;?php
// 主题初始化设置
function mytheme_setup() {
    // 让WordPress管理<title>标签
    add_theme_support( 'title-tag' );
    // 启用文章特色图像（缩略图）支持
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主菜单位置
    register_nav_menus( array(
        'menu-1' =&gt; esc_html__( '主菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

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

// 加载主题的样式表和脚本
function mytheme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载导航脚本（如果有的话）
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?&gt;

Usar el bucle principal (The Loop) para mostrar el contenido.

“El ”ciclo principal” es el concepto más central en los templates de WordPress; se trata de un fragmento de código PHP que se utiliza para verificar y recorrer los artículos (o páginas) que deben ser mostrados en la página actual. Casi todos los templates de presentación de contenido dependen de él. A continuación, se muestra un ejemplo de…index.phpUn ejemplo simple del uso de un bucle principal:

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

¿¿php si (tiene publicaciones() ) : ?&gt;
    <div class="posts-container">
        ¿php mientras (tengo publicaciones() ): the_post(); ?&gt;
            <article no numeric noise key 1009>
                <h2 class="entry-title">
                    <a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a>
                </h2>
                <div class="entry-meta">
                    Publicado el:
                </div>
                <div class="entry-summary">
                    ¿¿php the_excerpt(); ??
                </div>
            </article>
        ¿php endwhile;?&gt;
    </div>
    
    <p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
¿¿php endif; ?&gt;

En este código,have_posts()Ythe_post()Las funciones controlan los ciclos.the_title()、the_permalink()、the_excerpt()Las etiquetas de plantilla se utilizan para generar el contenido específico que se va a mostrar.

Implementar un diseño responsive y características temáticas avanzadas.

Un tema moderno no solo debe contar con funciones completas, sino que también debe ofrecer una excelente experiencia de usuario. Esto incluye una buena visualización en diferentes dispositivos, así como la capacidad de satisfacer necesidades personalizadas de manera flexible.

Integración de un diseño responsive (que se adapta a diferentes pantallas) y optimización para dispositivos móviles.

Asegúrate de que tu tema sea responsive (capaz de adaptarse a diferentes dispositivos y resoluciones), y para ello es necesario trabajar tanto en el código HTML como en el CSS. En primer lugar, debes…header.phpLos documentos de<head>Dentro de la región, asegúrese de incluir las etiquetas meta del viewport:

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 
<meta name="viewport" content="width=device-width, initial-scale=1">

En segundo lugar, en tu…style.cssEn este caso, se utilizan las “Consultas de Medio” (Media Queries) para ajustar el diseño y la estética del contenido en función de la anchura de la pantalla. Por ejemplo, se puede ocultar la barra lateral en dispositivos móviles.

@media screen and (max-width: 768px) {
    #secondary-sidebar {
        display: none;
    }
    .site-main {
        width: 100%;
    }
}

Crear plantillas de página personalizadas y subtemas

Para satisfacer las necesidades de diseño únicas de una única página, WordPress te permite crear plantillas de página personalizadas. Por ejemplo, puedes crear una plantilla de página de ancho completo sin barras laterales, y nombrarla…template-fullwidth.phpY añada la siguiente nota al principio del archivo:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的页面模板。
 */

Luego, al editar la página en el backend de WordPress, puedes seleccionar este “template de página de ancho completo” en las “Propiedades de la página”.

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Cómo crear sitios web personalizados desde cero。

Para evitar que tus modificaciones personalizadas se sobrescriban cuando se actualice el tema principal, se recomienda encarecidamente utilizar subtemas para el desarrollo. Un subtema solo necesita contener…style.cssY uno opcional.functions.phpSubtemáticostyle.cssEl encabezado debe declarar el tema padre.

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

Internacionalización, optimización y preparación para la publicación del tema

Cuando el desarrollo está a punto de finalizar, es necesario asegurarse de que el producto sea fácil de utilizar por usuarios de todo el mundo y que cuente con un buen rendimiento. Finalmente, hay que estar listo para su lanzamiento.

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

Implementar la internacionalización (i18n) de un tema.

La internacionalización es el proceso por el cual tus temas pueden ser traducidos a otros idiomas. En WordPress, esto se logra principalmente a través de dos funciones:__()Se utiliza para devolver la cadena de texto traducida._e()Se utiliza para la salida directa de la cadena traducida. Debes aplicarlo en todos los textos que necesiten ser traducidos y especificar dónde hacerlo.style.cssEl campo de texto definido en la cabecera (Text Domain).

<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>

Después, se pueden utilizar herramientas como Poedit para crearlo..potTraduce los archivos de plantillas y los paquetes de idioma específicos (por ejemplo:.zh_CN.poY.mo(Documentación).

Realizar optimizaciones de rendimiento y revisión del código.

Antes de la publicación, es necesario optimizar el rendimiento del sitio web. Esto incluye: comprimir los archivos de CSS y JavaScript, asegurarse de que el tamaño de las imágenes sea adecuado y que estén optimizadas, reducir el número de consultas a la base de datos, y utilizar correctamente el sistema de cola de scripts y estilos de WordPress para evitar incluir recursos directamente en las plantillas. Además, se debe realizar una revisión completa del código para garantizar que se cumplan los estándares de codificación de WordPress, que no queden códigos de depuración y que todas las funciones funcionen como se espera.

resúmenes

Desarrollar un tema personalizado para WordPress desde cero es un proceso de aprendizaje sistemático que abarca desde comprender la estructura de los archivos centrales, el uso de las capas de plantillas y el ciclo principal, hasta...functions.phpCIMC logra funcionalidades avanzadas, implementa un diseño responsive y, finalmente, logra la internacionalización y la optimización del sitio web. Siguiendo el principio de “empezar por lo simple y iterar gradualmente”, primero se construye un tema mínimo y funcional, y luego se van agregando nuevos archivos de plantillas y funciones. Una vez que domines estas habilidades, podrás crear sitios web únicos que se adapten perfectamente a tus necesidades o a las de tus clientes, sin estar restringido por los temas preexistentes. Recuerda que los documentos oficiales y la comunidad de desarrolladores son tus mejores aliados en este proceso de aprendizaje.

FAQ Preguntas más frecuentes

¿Se necesita un profundo conocimiento de PHP para desarrollar temas para WordPress?

Se requiere una base sólida en PHP, aunque no es necesario alcanzar el nivel de experto. Es esencial comprender la sintaxis de PHP, las variables, los arrays, las funciones y las estructuras de bucle, ya que las plantillas de WordPress están compuestas principalmente por código PHP. Lo más importante es aprender a utilizar las numerosas funciones integradas que ofrece WordPress (etiquetas de plantilla) y los ganchos (acciones y filtros), que actúan como un puente entre tu tema y las funciones principales de WordPress.

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

La causa más común es…style.cssEl formato de las notas en el encabezado del archivo no es correcto o falta información. Por favor, asegúrese de que los campos como “Theme Name” y “Author” estén completados y que el formato sea totalmente correcto. Otra posible causa es que la carpeta del tema se ha ubicado en la dirección incorrecta; debe encontrarse en el directorio adecuado.wp-content/themes/Debajo de ello.

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

Para que tu tema se adapte mejor al editor Gutenberg, necesitas…functions.phpSe debe agregar la declaración de soporte para los temas correspondientes. Esto incluye el soporte para el alineamiento amplio y los estilos de la tabla de estilo del editor, entre otros. Por ejemplo:

add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表

Además, es necesario crear estilos frontales para algunos bloques clave (como párrafos, títulos y botones) para garantizar que se vean de manera consistente tanto en la versión pública del sitio web como en el editor de contenido.

¿Cómo debo probar mi tema?

Las pruebas deben realizarse desde múltiples perspectivas. En primer lugar, se debe verificar el aspecto y el funcionamiento del tema en diferentes navegadores (como Chrome, Firefox, Safari, Edge) y en dispositivos de distintos tamaños (teléfonos móviles, tablets, ordenadores de escritorio). A continuación, se debe comprobar la compatibilidad con los plugins más utilizados. Luego, se deben importar grandes cantidades de contenido de diferentes tipos utilizando los datos de las “pruebas unitarias de temas” incluidos en WordPress (archivos XML) para evaluar el rendimiento del tema en diversas situaciones extremas. Finalmente, se debe activar…WP_DEBUGCompruebe si hay alguna advertencia o error de PHP en el código.

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