Inicio/conocimiento/WordPress/Detalles del contenido

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

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

Estructura básica de un tema para WordPress

Un tema de WordPress es, en esencia, un conjunto de archivos que se encuentran enwp-content/themes/Los archivos que se encuentran en las carpetas del directorio contienen una serie de herramientas utilizadas para controlar el aspecto y las funciones del sitio web. Comprender el papel de estos archivos es esencial para el proceso de desarrollo.

El archivo de plantilla es necesario para el tema.

Cada tema debe contener dos archivos básicos:style.cssYindex.phpEntre ellos,style.cssNo solo se utiliza para almacenar los estilos CSS, sino que el bloque de comentarios en la parte superior del archivo también contiene metadatos sobre el tema. WordPress depende de esta información para reconocer el tema.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpEs el archivo de plantilla predeterminado para los temas; cuando WordPress no encuentra una plantilla más específica, utiliza este para renderizar la página. Funciona como una “red de seguridad” que asegura que todas las páginas se muestren de manera consistente y correcta.

Lecturas recomendadas Creación de sitios web de calidad: Guía práctica sobre la personalización y optimización de temas para WordPress。

Otros archivos de plantillas comúnmente utilizados:

Para controlar de manera más precisa la visualización de las diferentes páginas, necesitas crear más archivos de plantilla. Por ejemplo,header.phpPor lo general, incluye la declaración del tipo de documento.<head>La parte superior de las páginas de las regiones y sitios web.footer.phpEntonces, incluye el contenido del pie de página y las etiquetas de cierre.sidebar.phpPara usar en el sidebar. A través de funciones integradas en WordPress, como…get_header()、get_footer()Yget_sidebar()Puedes introducir estas partes fácilmente en otros templates.

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, también puedes crear…single.phpSe utiliza para un solo artículo.page.phpPara uso en páginas independientes.archive.phpSe utiliza para listas de archivo, así como…functions.phpEste archivo especial permite agregar funciones y características relacionadas con la personalización de los temas (temas visuales o estilos de presentación).

Crear una plantilla para la página principal de un tema.

La página principal es la cara visible del sitio web y, por lo general, requiere un diseño único. Comenzaremos por construirla…index.phpComencemos y exploremos cómo introducir bucles para mostrar el contenido.

Integrar el encabezado y el pie de página

Una buena práctica es modularizar las partes comunes del código. Para comenzar, crea un nuevo archivo en la carpeta de tu tema (theme folder).header.phpYfooter.php. Enheader.phpEn esto, necesitas incluir…<!DOCTYPE html>Declaración,<html>El comienzo de una etiqueta…<head>Región (uso)wp_head()Los “ganchos” (hooks) permiten que los plugins y temas inserten código en estos lugares, así como que se muestren el logotipo del sitio web y el menú principal, entre otros elementos de inicio.

Luego, enindex.phpAl comienzo de..., utiliza...<?php get_header(); ?>Para introducir este encabezado, simplemente colócalo en la parte superior de la página.index.phpAl final, utiliza…<?php get_footer(); ?>Para introducir…footer.phpDonde debería incluirse…wp_footer()Llamadas de ganchos y cierre</body></html>Etiquetas.

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

Usar un ciclo para imprimir el artículo.

El núcleo de WordPress es “The Loop”, que es un fragmento de código PHP utilizado para verificar si existen artículos y, en caso afirmativo, mostrarlos uno por uno.index.php¿Dónde está el baño?get_header()Después, puedes insertar el siguiente código de bucle básico:

¿  
    ¿
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
            <div class="entry-content">
                ¿¿php the_excerpt(); ??
            </div>
        </article>
    
    <p>Lo siento, no se encontró ningún artículo.</p>
¿¿php endif; ?&gt;

En este código,have_posts()Ythe_post()Bucle accionado por funciones.the_title()、the_permalink()Ythe_excerpt()Las etiquetas de plantilla se utilizan para mostrar el contenido específico de los artículos. De esta manera, se completa una página básica de lista de artículos.

Aplicar estilo y código de script al tema.

Un tema que no cuenta con ningún estilo carece de atractivo. Es necesario agregar los archivos CSS y JavaScript de manera correcta a la cola de procesamiento, tal y como recomienda WordPress. Esto asegura que las dependencias se establezcan adecuadamente y se evitan posibles conflictos.

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

Introducir correctamente la hoja de estilo

aunquestyle.cssEs necesario, pero no deberías enlazarlo directamente en el HTML. El método correcto es…functions.phpSe utiliza en el archivo.wp_enqueue_style()Función. Primero, cree una nueva función en el directorio raíz del tema.functions.phpHaz clic en el archivo y luego agrega el siguiente código:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Este código define una función que indica a WordPress que use el archivo de estilo principal del tema.get_stylesheet_uri()El camino obtenido se añade a la cola utilizando “my-theme-style” como identificador (o “handle”).add_action()El “gancho” (hook) monta esta función en el sistema correspondiente.wp_enqueue_scriptsEn esta acción, asegúrate de que se ejecute al cargar la página.

Introducir JavaScript personalizado

El método para introducir un archivo de JavaScript es similar, pero se utiliza…wp_enqueue_script()Función. Supongamos que tienes una función que se encuentra en…js/script.jsPara agregar un archivo, puedes hacerlo de la siguiente manera:

Lecturas recomendadas De principiantes a expertos: Guía completa y tutorial práctico para el desarrollo de temas para WordPress。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Los parámetros aquí representan, respectivamente: el identificador del script, la URL del script y el array de dependencias (por ejemplo…).array('jquery')), el número de versión y si se carga en el pie de página (trueIndica que en</body>(Carga previa).

Funcionalidad de ampliación de temas

functions.phpSe trata del “cajón de herramientas” del tema; aquí puedes agregar diversas funcionalidades para mejorar el aspecto del mismo, sin necesidad de modificar los archivos de plantilla principales.

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

Añadir la función de soporte para temas.

WordPress ofrece muchas funciones integradas, pero estas solo se pueden activar si el tema con el que se está trabajando declara explícitamente su soporte para ellas. Esto se logra a través de…add_theme_support()Implementación de funciones. Por ejemplo, para soportar las miniaturas de artículos (imágenes destacadas), logotipos personalizados y marcas HTML5, se puede hacer lo siguiente:functions.phpAñadir en el medio:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Asegúrese de que estos ajustes se ejecuten lo antes posible durante la inicialización del tema.

Menú de navegación para registro

Para que los usuarios puedan configurar la navegación en la sección “Apariencia > Menú” del backend, es necesario registrar previamente las ubicaciones de los menús. Utiliza este procedimiento.register_nav_menus()Función:

function my_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_register_menus' );

Después de registrarte, podrás trabajar con los archivos de plantillas (como…)header.php) se utiliza enwp_nav_menu( array( 'theme_location' => 'primary' ) )Ahora se muestra este menú.

resúmenes

Desde la creación de…style.cssYindex.phpComenzando por la carpeta base, has ido construyendo gradualmente un tema completo para WordPress. Al comprender la estructura jerárquica de los templates, has aprendido a crear archivos de plantilla específicos para controlar con precisión los diferentes tipos de páginas.wp_enqueue_style()Ywp_enqueue_script()Gestionar los recursos es la mejor práctica para garantizar la compatibilidad y el rendimiento de los temas. Finalmente, aprovecha…functions.phpPuedes acceder a los archivos de la siguiente manera:add_theme_support()Yregister_nav_menus()Funciones como estas añaden de manera segura funcionalidades avanzadas a un tema. Al dominar estos pasos clave, contarás con una base sólida para desarrollar temas personalizados para WordPress de forma independiente.

FAQ Preguntas más frecuentes

¿Qué conocimientos previos se necesitan para desarrollar un tema de WordPress?

Es esencial que tengas una base sólida en HTML y CSS para construir la estructura y el estilo de las páginas web. Además, debes conocer los conceptos básicos de PHP, ya que las plantillas de temas de WordPress están impulsadas principalmente por este lenguaje de programación. Tener un conocimiento preliminar de JavaScript te ayudará a agregar funciones interactivas a tus proyectos. Por otra parte, familiarizarte con los conceptos básicos de WordPress (como artículos, páginas, categorías y etiquetas) te facilitará el proceso de desarrollo.

¿Por qué se debe utilizar `wp_enqueue_style` para cargar los archivos de estilo en lugar de simplemente usar el comando `link`?

Usarlo directamente.<link>Hay varios problemas con el código que incorpora de forma fija la ruta a la hoja de estilo en los etiquetas. En primer lugar, no gestiona adecuadamente las dependencias; por ejemplo, es posible que tu estilo requiera el uso de estilos provenientes de un framework determinado. En segundo lugar…wp_enqueue_stylePermite que los plugins u otros temas sobrescriban o modifiquen tus estilos de forma segura. Lo más importante es que colabora mejor con los plugins de caché y optimización de rendimiento, asegurando el orden y la eficiencia en el carga de recursos. Es una práctica estándar en la comunidad de WordPress.

¿Cuál es la diferencia entre functions.php y los plugins?

functions.phpEl código definido dentro de un tema está estrechamente vinculado a ese tema en particular; por lo tanto, cuando el usuario cambia de tema, esas funciones dejan de estar disponibles. Este tipo de código es adecuado para almacenar elementos que se relacionan directamente con la presentación visual y el diseño del tema, como el menú de registro, la capacidad de utilizar imágenes especiales o la configuración de las barras laterales. Por otro lado, las funciones ofrecidas por los plugins suelen ser independientes del tema y su objetivo es agregar características comunes al sitio web (como formularios de contacto o optimización para motores de búsqueda, SEO). Estas funciones permanecen activas incluso si el usuario cambia de tema. Si una función no tiene relación alguna con la apariencia del tema, considerar convertirla en un plugin suele ser la opción más flexible.

¿Cómo hacer que mi tema admita traducciones en varios idiomas?

Hacer que los temas sean compatibles con la internacionalización es clave para acceder a los mercados globales. En primer lugar, en todos los lugares donde se genere texto en los temas, utiliza las funciones de traducción de WordPress.__('文本', 'my-custom-theme')o_e('文本', 'my-custom-theme')quemy-custom-themeEs en…style.cssEl texto definido en el archivo correspondiente. Luego, se utiliza una herramienta como Poedit para analizar los archivos de temas y generar lo necesario..potLos archivos de plantilla, a partir de los cuales los traductores pueden crear versiones en diferentes idiomas..poY.moArchivo. Finalmente,functions.phpA través de Chinaload_theme_textdomain()La función carga el archivo de traducció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.