Inicio/conocimiento/WordPress/Detalles del contenido

Guía de introducción al desarrollo de temas de WordPress: crea tu primer tema desde cero.

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

Comprender la estructura básica de un tema de WordPress

Antes de comenzar a escribir código, es de vital importancia comprender la estructura de un tema de WordPress. Un tema básico requiere, al menos, dos archivos: uno es un archivo de estilo (stylesheet) que define la apariencia del tema y el otro es un archivo de plantilla (template) en PHP que se utiliza para mostrar el contenido del sitio web. Estos archivos juntos constituyen el esqueleto del tema y siguen una estructura de directorios y normas de nombres específicas.

El archivo central es…style.cssNo solo contiene estilos CSS; el bloque de comentarios en la parte superior del archivo es, de hecho, el “dossier de identidad” del tema. Este bloque informa al sistema WordPress sobre el nombre del tema, el autor, la descripción, la versión y otras metadatos. Si no está correctamente formateado…style.cssWordPress no podrá reconocer ni activar tu tema.

Otro archivo esencial es…index.phpEste es el archivo de plantilla principal del tema. Ocurre cuando WordPress no puede encontrar una plantilla más específica (por ejemplo, una plantilla diseñada para una función o una sección concreta del sitio).single.phpopage.phpCuando se utiliza un determinado archivo de plantilla, este se aplicará por defecto para renderizar la página. Es la opción de respaldo para todos los archivos de plantilla.

Lecturas recomendadas Desvelando el misterio del desarrollo de temas de WordPress: las técnicas clave para crear un sitio web personalizado desde cero.。

Documento de declaración de información sobre el tema

Tabla de estilos para el temastyle.cssLa parte superior («cabeza») debe contener comentarios específicos. A continuación se muestra un ejemplo muy básico:

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 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Entre ellos,Text DomainSe utiliza para la internacionalización y sirve como identificador en los procesos de traducción posteriores. Este archivo generalmente también contiene todo tu código de estilo CSS.

Archivo de plantilla principal

index.phpEl archivo es la entrada a un tema. Uno de los ejemplos más simples…index.phpSe puede utilizar un ciclo básico que solo contenga llamadas a las funciones centrales de WordPress para obtener y mostrar la lista de artículos.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

En este código,wp_head()Ywp_footer()Se trata de dos hooks clave que permiten que el núcleo de WordPress, los plugins y otros scripts inserten el código necesario al principio y al final de las páginas, como estilos, scripts y metaetiquetas.

Crear un entorno de desarrollo local

Antes de desplegar un tema en un servidor en línea, crear un entorno de desarrollo local es la forma más eficiente y segura. El entorno local te permite probar el código y depurar errores de manera libre, sin afectar al sitio web en línea.

Lecturas recomendadas Domina por completo el desarrollo de temas de WordPress: una guía completa desde el nivel principiante hasta el avanzado.。

Elegir el software para el servidor local

Para los principiantes, el software de servidores locales integrados es la mejor opción. Estos programas incluyen Apache/Nginx, PHP y la base de datos MySQL, y se pueden instalar con un solo clic para comenzar a usarlos. Algunas opciones populares son XAMPP, Local by Flywheel o DevKinsta. Estos herramientas simulan un entorno de servidor en red real, lo que te permite ejecutar WordPress en tu propio ordenador.

Instalar WordPress y crear el directorio de temas

Después de ejecutarlo en el servidor local, necesitará instalar una nueva versión de WordPress. Descargue el paquete comprimido más reciente de WordPress y descomprímalo en la carpeta raíz del sitio web en su servidor local (por ejemplo, la carpeta htdocs de XAMPP). Luego, acceda a la dirección local (como http://localhost) desde un navegador para completar el famoso proceso de instalación en “cinco minutos”.

Una vez que la instalación esté completa, ingrese a WordPress.wp-content/themesDirectorio. Aquí, crea una nueva carpeta para el tema que vas a desarrollar, por ejemplo, llámala “my-first-theme”. Las carpetas que creaste anteriormente…style.cssYindex.phpEl archivo debe colocarse dentro de esta carpeta. Ahora, inicia sesión en la interfaz administrativa de WordPress y, en “Apariencia” -> “Temas”, deberías poder ver tu tema; aunque por el momento sus funciones son muy sencillas.

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

Construir un sistema de archivos de plantillas básicas

Soloindex.phpEl tema en sí no es suficiente para cumplir con todas las necesidades. Un tema completo debe incluir un conjunto de archivos de plantilla que permitan adaptarse a diferentes escenarios de visualización, como artículos individuales, páginas independientes, archivos de archivado de artículos, etc. El sistema de jerarquía de plantillas de WordPress selecciona automáticamente el archivo de plantilla que mejor se ajuste a la página solicitada para su renderizado.

Artículos y plantillas de páginas

single.phpEl template se utiliza para mostrar un artículo de blog individual. Cuando un usuario hace clic para leer el texto completo de un artículo, WordPress utiliza este template. Por lo general, incluye información más detallada sobre el artículo, como la categoría, las etiquetas, el autor y la sección de comentarios.

page.phpLas plantillas se utilizan para mostrar páginas estáticas independientes (como las de “Acerca de nosotros” o “Contacto”). La diferencia entre ellas y las plantillas de artículos es que, por lo general, no exhiben elementos propios de los artículos de blog, como la hora de publicación o la categoría.

Lecturas recomendadas Explicación detallada del desarrollo de temas de WordPress: una guía completa desde el nivel principiante hasta el avanzado.。

Plantillas para la parte superior e inferior de la página

Para seguir el principio DRY (Don’t Repeat Yourself, no te repitas), los temas de WordPress suelen separar las partes de la cabecera (Header) y el pie de página (Footer) en archivos independientes.

header.phpEl archivo contiene todo el código desde el comienzo hasta la zona principal del contenido de la página, incluyendo las áreas específicas del sitio, el identificador del sitio web y el menú de navegación principal.index.php、single.phpEn otros templates, también se puede utilizar.get_header()Se utiliza una función para introducirlo.

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

De la misma manera,footer.phpEl archivo contiene todo el contenido del pie de página, como la información de derechos de autor y la navegación auxiliar, y lo proporciona a través de…get_footer()Introducción de funciones. Además,sidebar.php(Barra lateral) También se suele separar y utilizar de manera independiente.get_sidebar()Llamada.

Reestructuradoindex.phpSe volverá muy sencillo y conciso.

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

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

Integración de estilos y scripts

Los temas modernos requieren que los archivos de estilo CSS y los scripts de JavaScript se carguen de manera correcta y eficiente. WordPress proporciona funciones específicas para gestionar estos recursos, asegurando que se carguen en el orden adecuado de dependencias y evitando la introducción repetida o conflictos entre ellos.

Usar una cola de funciones para agregar estilos

La forma correcta de hacerlo es a través de…wp_enqueue_style()La función agrega el archivo de estilo a la cola. Necesitas crear un elemento en el tema con el nombre…functions.phpEl archivo en cuestión es el núcleo funcional del tema y se utiliza para agregar diversas características, funciones y modificar el comportamiento predeterminado.

Enfunctions.phpEn este contexto, puedes montar (es decir, asociar) una función a un objeto o componente específico.wp_enqueue_scriptsEn este gancho de acción:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()La función obtendrá automáticamente el tema correspondiente.style.cssRuta del archivo. Al cargar los recursos de esta manera, WordPress puede gestionarlos de manera más eficiente.

Usar una cola de funciones para agregar scripts.

La carga de scripts JavaScript también requiere el uso de una cola; la función correspondiente es…wp_enqueue_script()Puedes agregarlos dentro de la misma función.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Aquí,array( 'jquery' )Se declara que este script depende de la biblioteca principal de jQuery, y WordPress se asegurará de que jQuery se cargue primero. El último parámetro…trueEsto indica que el script se colocará en la parte inferior de la página (antes del resto del contenido), lo cual ayuda a mejorar la velocidad de carga de la misma.

resúmenes

Desarrollar un tema para WordPress desde cero es un proceso de aprendizaje sistemático que abarca varios pasos clave, desde comprender la estructura básica de los archivos, configurar un entorno local, crear un sistema de plantillas hasta integrar correctamente los recursos necesarios. Al crear todo esto por uno mismo…style.css、index.php、header.php、footer.phpdemasiadofunctions.phpAl crear archivos clave como estos, no solo has construido un tema funcional, sino que también has comprendido en profundidad el funcionamiento de la estructura de plantillas y del sistema de ganchos (hooks) de WordPress. Recuerda que el corazón del desarrollo de temas reside en seguir las convenciones y estándares de WordPress, lo que asegura que tu tema sea compatible, eficiente y fácil de mantener. Partiendo de esto, puedes explorar funciones más avanzadas, como tipos de artículos personalizados, herramientas de personalización de temas y áreas de widgets, para crear gradualmente temas personalizados y potentes.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para desarrollar temas (temas web personalizados)?

Sí, dominar PHP es una condición esencial para el desarrollo de temas para WordPress. Esto se debe a que WordPress está escrito en PHP, y todos los archivos de plantilla (como…index.php、single.phpTodos son archivos PHP que, a través de código PHP, llaman a las funciones centrales de WordPress para generar dinámicamente el contenido de las páginas. Además, se utilizan para agregar funcionalidades adicionales.functions.phpEl archivo está compuesto en su totalidad por código PHP. HTML y CSS se utilizan para definir la estructura y el estilo, mientras que PHP es el elemento clave para implementar funciones dinámicas y la interacción con los datos.

¿Qué función tiene el archivo functions.php del tema?

functions.phpEl archivo es el “centro de funcionalidades” de tu tema. No se trata de un archivo de plantilla, ya que no genera directamente ninguna parte de la página. Por el contrario, sirve para almacenar todo el código PHP necesario para modificar y expandir las funcionalidades del tema. Sus usos comunes incluyen: configurar la ubicación de los menús de navegación, definir las áreas para los widgets, etc.wp_enqueue_scriptsEste archivo se utiliza para agregar archivos CSS y JavaScript, así como funcionalidades de soporte para el tema (como miniaturas de artículos y fondos personalizados), además de definir diversas funciones personalizadas. Se carga automáticamente cuando el tema se activa.

¿Cómo puedo hacer que mi tema sea compatible con múltiples idiomas?

Hacer que un tema sea compatible con múltiples idiomas (internacionalización y localización) se divide principalmente en dos pasos. El primer paso consiste en utilizar las funciones de traducción específicas de WordPress en todos los lugares del tema donde el texto necesite ser traducido.__('文本', 'text-domain')o_e('文本', 'text-domain')quetext-domainSe debe hacer constyle.cssDeclarado en el medio…Text DomainCoincidente. El segundo paso es utilizar herramientas como Poedit para escanear el código del tema y generar lo necesario..potArchivo de plantilla: el traductor utiliza este archivo para crear la versión correspondiente en el idioma deseado (por ejemplo, chino)..poY después de la compilación..moEl archivo debe ser colocado dentro del tema correspondiente./languages/En el directorio. WordPress cargará automáticamente la traducción correspondiente según la configuración de idioma del sitio web.

¿Cuál es la diferencia entre temas y plugins?

En WordPress, los temas y los plugins desempeñan funciones muy diferentes. Los temas se encargan principalmente de controlar la apariencia visual del sitio web, es decir, el aspecto que los usuarios ven, el diseño, los estilos y la estructura de los templates. Son los que determinan “cómo se ve” el sitio web. Por su parte, los plugins se utilizan para agregar funcionalidades específicas al sitio, y estas funcionalidades funcionan independientemente del tema que se esté utilizando; por ejemplo, crear formularios de contacto, optimizar el SEO o agregar carritos de compras para comercios electrónicos. Los plugins determinan “qué puede hacer” el sitio web. Un buen principio de práctica es: el código relacionado con la presentación visual y el diseño debe colocarse dentro del tema, mientras que el código relacionado con las funcionalidades esenciales debe crearse en forma de plugin, de modo que, al cambiar de tema, las funciones importantes del sitio no se pierdan.

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