Inicio/conocimiento/WordPress/Detalles del contenido

Introducción sencilla al desarrollo de temas para WordPress: Cómo crear sitios web personalizados desde cero.

Lectura en 3 minutos
2026-03-19
2026-06-04
2,610
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 es, en esencia, una carpeta que contiene una serie de archivos con formatos específicos, los cuales juntos determinan el aspecto y las funcionalidades de un sitio web. Los temas más básicos solo necesitan dos archivos:style.cssYindex.php。

Archivo de la hoja de estilo principal

style.cssLos archivos no son solo el lugar donde se almacenan los estilos CSS, sino que también representan el “dossier de identidad” de un tema. La parte superior de este archivo debe contener un bloque de comentarios específico, conocido como “cabecera del archivo de estilo” (style sheet header), que sirve para informar al sistema WordPress sobre el nombre del tema, el autor, la descripción, la versión y otros datos metadatos. Sin esta cabecera, WordPress no podrá reconocer que esta carpeta constituye un tema válido.

Uno básicostyle.cssAquí está un ejemplo del encabezado del archivo:

Lecturas recomendadas Desarrollo de temas para WordPress: ¡Construya su primer tema personalizado desde cero!。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Archivo de plantilla principal

index.phpEs el archivo de plantilla predeterminado del tema y, al mismo tiempo, el más importante. Cuando WordPress no puede encontrar un archivo de plantilla más específico para la página solicitada, recurre a usar este archivo por defecto.index.phpSe encarga de obtener contenido del banco de datos y mostrarlo en el navegador en formato HTML. La versión más simple de este sistema…index.phpEl archivo probablemente solo contenga el esqueleto básico de HTML y código PHP que llama a las funciones centrales 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

Además de estos dos archivos centrales, un tema completo y funcional suele incluir también:
* header.phpLa parte superior de la página del sitio web.
* footer.phpLa parte inferior de la página del sitio web.
* functions.phpSe utiliza para mejorar las funciones temáticas, el menú de registro, la barra lateral, etc.
* page.phpSe utiliza para mostrar una única página.
* single.php: Se usa para mostrar una sola publicación de blog.

Configurar un entorno de desarrollo local y crear el primer tema

Desarrollar temas directamente en un servidor real es peligroso e ineficiente. La mejor práctica es crear un entorno de desarrollo en la computadora local que se asemeje al entorno en línea. Puedes utilizar herramientas como XAMPP, MAMP, Local by Flywheel o DevKinsta, las cuales permiten instalar PHP, MySQL y el servidor web con un solo clic.

Crear carpetas y archivos de temas

Primero, en el directorio de instalación local de WordPress, encuentra…wp-content/themes/Ruta: Cree una nueva carpeta aquí; el nombre de la carpeta debe ser el identificador de su tema. Se recomienda utilizar letras minúsculas y guiones, por ejemplo…my-first-theme。

Luego, dentro de esa carpeta, cree los dos archivos principales mencionados anteriormente:style.cssYindex.phpCopie el código de la cabecera del estilo de arriba a…style.cssReemplaza el contenido con la información que corresponda a tus necesidades.

Lecturas recomendadas Introducción al desarrollo de temas para WordPress: Crea tu primer tema para sitio web desde cero。

Escribir un archivo de plantilla básica

A continuación,index.phpEscribe el siguiente código básico, que contiene las etiquetas de plantilla necesarias para WordPress.

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1008>
    ¿php_body_open();?&gt;

<header>
        <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
        <p>¿¿php bloginfo( 'description' );?&gt;</p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

<footer>
        <p>© ¿¿¿  ¿¿¿</p>
    </footer>

¿php_footer();?&gt;
</body>
</html>

Después de completar los pasos anteriores, acceda a la página “Apariencia” -> “Temas” en el panel de administración de WordPress local. Deberías ver que el tema llamado “Mi primer tema” ya está disponible. Actívalo y, a continuación, visita la página principal del sitio web; verás que los títulos y contenidos de los artículos se muestran correctamente.

Utilizar los niveles de los templates y las funciones principales.

WordPress utiliza un sistema inteligente de “niveles de plantillas” para determinar qué archivo de plantilla utilizar para diferentes solicitudes de página (como la página principal, las páginas de artículos o las páginas de categorías). Comprender este sistema es clave para el desarrollo de temas (temas personalizados para el sitio web).

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

Comprender el orden de carga de las plantillas

Por ejemplo, al acceder a un artículo de un blog, WordPress busca los archivos de plantilla en el siguiente orden:single-post.php -> single.php -> singular.php -> index.phpUsará el primer archivo que encuentre. Este diseño te permite crear layouts altamente personalizados para diferentes tipos de páginas, manteniendo al mismo tiempo una estructura organizada y consistente.index.phpComo opción de último recurso.

Usar bucles y etiquetas de plantillas

Enindex.phpEl fragmento de código PHP que viste es el famoso “The Loop” de WordPress. Es el núcleo de todos los archivos de plantilla y se utiliza para iterar y mostrar los artículos o contenidos que deben aparecer en la página actual.

En el ciclothe_title()、the_content()、the_excerpt()Las funciones como estas se denominan “etiquetas de plantilla”. Su función es generar de manera segura los datos correspondientes al artículo que se desea mostrar. Otra función importante es…the_post()Se llama en cada iteración del ciclo y se utiliza para acceder al valor global.$postEl objeto se configura con los datos del artículo actual y luego se avanza al siguiente artículo.

Lecturas recomendadas Domina las habilidades clave: crea tu primer tema para WordPress desde cero.。

Modularizar la estructura de una página es una buena forma de mejorar la mantenibilidad del código. Eso es exactamente lo que se pretende con este enfoque.header.phpYfooter.phpEl lugar donde se puede poner en práctica ese conocimiento o habilidad.

Separar la cabecera del pie de página

Se va a convertir en un problema si no hacemos algo al respecto.index.php¿Qué es esto?<head>Parte y<header>Se corta la zona deseada y se pega en un archivo nuevo.header.phpEn el archivo. De la misma manera, también…<footer>Parte de lo cortado se ha guardado.footer.phpMedio.

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

Luego, en el original…index.phpEn chino, se usaget_header()Yget_footer()Estos dos etiquetas de plantilla se utilizan para introducirlos.

¿¿php get_header();??

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    ¿¿php endif; ?&gt;
</main>

¿¿¿php get_footer();???

De esta manera, todos los templates de páginas pueden compartir el mismo encabezado y pie de página; para realizar modificaciones, basta con cambiar un solo archivo.

Mejorar las funciones de un tema a través de Functions.php

functions.phpEl archivo es el “centro de control” de tu tema. No se trata de un archivo de plantilla, sino de una biblioteca de funciones que se carga automáticamente al iniciar el tema. Puedes agregar funcionalidades o modificar el comportamiento predeterminado desde aquí, sin necesidad de modificar los archivos centrales de WordPress.

Funciones soportadas por el registro de temas:

Enfunctions.phpEn esto, puedes utilizar…add_theme_support()Las funciones se utilizan para indicar qué funciones de WordPress tu tema soporta. Por ejemplo, habilitar las miniaturas de los artículos (imágenes destacadas) y los menús personalizados son operaciones comunes.

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Añadir estilos y scripts

La forma correcta de agregar CSS y JavaScript es a través de…wp_enqueue_style()Ywp_enqueue_script()Funciones, y montarlas enwp_enqueue_scriptsEn este gancho… Esto asegura que las relaciones de dependencia estén correctas y que no se produzca una carga repetida de los recursos necesarios.

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Una vez que hayas completado todo esto, podrás…header.phpEn el uso chinowp_nav_menu()Se utiliza una función para mostrar el menú que has registrado, y esta función se ejecuta dentro del ciclo de los artículos.the_post_thumbnail()Ahora se muestran las imágenes destacadas.

resúmenes

El desarrollo de temas para WordPress es un proceso gradual que abarca desde la estructura general hasta los detalles más específicos. Lo primero que necesitas hacer es comprender los componentes y la arquitectura básica que conforman un tema de WordPress.style.cssYindex.phpEl núcleo de la estructura es establecer un entorno de desarrollo local adecuado. A continuación, es importante comprender el sistema de niveles de plantillas y el concepto de “bucles”, lo que te permitirá crear diseños precisos para diferentes páginas. Esto se logra al…header.phpYfooter.phpLa modularización hará que tu código sea más claro y fácil de mantener. Finalmente…functions.phpLos archivos te abren las puertas a la posibilidad de expandir las funcionalidades de tu sitio web: desde el menú de registro hasta el cargamiento seguro de recursos, te permiten transformar tus temas de plantillas estáticas en skins dinámicos y potentes para tu sitio web. Sigue este camino, practica constantemente y explora archivos de plantillas más específicos (como…).single.php、page.php、archive.phpAsí, podrás ir construyendo gradualmente un sitio web personalizado de WordPress con funciones completas y un diseño único.

FAQ Preguntas más frecuentes

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

Es necesario dominar los conceptos básicos de HTML y CSS para construir la estructura y el estilo de las páginas web. Además, se debe tener un conocimiento básico de PHP, ya que los archivos de plantillas de WordPress están compuestos principalmente por código PHP, el cual se utiliza para generar contenido de manera dinámica. Aprender JavaScript te permitirá agregar funciones interactivas a tus temas; aunque no es esencial en las fases iniciales, su uso se vuelve muy importante más adelante.

¿Por qué mi tema no se muestra en el backend?

La causa más común es…style.cssEl formato de la cabecera de la información temática en el archivo no es correcto o está faltando. Por favor, asegúrese de que haya un bloque de comentarios completo y que cumpla con los requisitos de formato en la parte superior del archivo. Además, verifique si la carpeta de temas está ubicada en el lugar correcto.wp-content/themes/El archivo se encuentra dentro de la carpeta, y el nombre de la carpeta no contiene caracteres especiales.

¿Cómo puedo agregar una zona de herramientas (barra lateral) a mi tema?

Debes hacerlo primero.functions.phpEn el uso chinoregister_sidebar()La función registra una o más áreas para herramientas adicionales. Luego, en los archivos de plantilla correspondientes (como…)sidebar.phpEn ese texto, se utiliza…dynamic_sidebar()Se utiliza una función para llamarla y mostrar su resultado. Finalmente, en la plantilla de la página, se muestra el resultado obtenido a través de dicha función.get_sidebar()Introduce este archivo.

¿Qué hacer si modificar el archivo functions.php hace que el sitio web muestre una pantalla en blanco?

Esto suele ocurrir porque…functions.phpExiste un error de sintaxis PHP en el archivo. Dado que este archivo se ejecuta al inicio de la carga del tema, el error puede causar la interrupción de todo el sitio web. La solución es utilizar FTP o el administrador de archivos del panel de control del servidor para eliminar el archivo con el error.functions.phpRenombrar (por ejemplo, cambiar a…)functions.php.bakDe esta manera, WordPress lo ignorará, el sitio web volverá a estar accesible y luego podrás subir la versión corregida.

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

Tienes que hacer dos cosas. Primero, en todos los lugares donde se genere texto relacionado con el tema, debes utilizar la función de traducción de WordPress.__()、_e()Y especifique dónde deben ubicarse.style.cssEl “Text Domain” definido en la cabecera. En segundo lugar, se utiliza una herramienta como Poedit para escanear los archivos del tema y generar lo necesario..potEl archivo de plantilla, y a partir de él, se crea el contenido correspondiente en el idioma deseado (por ejemplo…).zh_CN.poY.moLos archivos de traducción deben colocarse dentro del tema correspondiente./languages/En el directorio.

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