Inicio/conocimiento/WordPress/Detalles del contenido

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

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

Preparativos: Configuración de su entorno de desarrollo local

Antes de comenzar a escribir cualquier código, es esencial disponer de un entorno de desarrollo local estable y eficiente. Esto te permitirá realizar pruebas y depuraciones sin afectar al sitio web en línea. En la actualidad, las opciones más populares son los paquetes de software para servidores locales que integran Apache/Nginx, MySQL/MariaDB y PHP, como Local by Flywheel, XAMPP o MAMP. Asegúrate de que tu versión de PHP sea superior a 7.4 y que las extensiones necesarias, como MySQLi o PDO, estén activadas.

A continuación, necesitará instalar una nueva versión de WordPress en su ordenador local. Descargue el paquete de instalación más reciente desde el sitio web oficial de WordPress.org y descomprímalo en la carpeta raíz del sitio web en su servidor local (por ejemplo, la carpeta htdocs o www). Luego, acceda a la dirección local desde su navegador.http://localhost/your-siteSigue el famoso proceso de “instalación en cinco minutos” para completar la configuración. Recuerda el nombre de tu base de datos, tu nombre de usuario y tu contraseña; esta información se almacenará y se utilizará más adelante.wp-config.phpEn el documento.

Finalmente, necesitarás un editor de código o un entorno de desarrollo integrado (IDE) que te sea conveniente utilizar. Visual Studio Code, PhpStorm o Sublime Text son opciones excelentes, ya que ofrecen soporte avanzado para PHP, HTML, CSS y JavaScript, con funciones como resaltado de sintaxis, sugerencias de código y herramientas de depuración. Asegúrate de que el editor tenga instalados los complementos o plugins relacionados con WordPress; esto mejorará significativamente tu eficiencia en el desarrollo.

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

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

Un tema de WordPress básico es, en esencia, un archivo ubicado enwp-content/themes/Los archivos que se encuentran dentro de la carpeta del directorio contienen una serie de documentos con funciones específicas. Estos archivos trabajan juntos para indicar a WordPress cómo debe mostrar el contenido de tu sitio web. Comencemos por dos archivos que son absolutamente necesarios.

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

El primero esstyle.cssEste archivo no solo es tu tabla de estilos para el tema, sino también la “identificación” del mismo. El bloque de comentarios en la cabecera del archivo contiene toda la metainformación necesaria para que WordPress reconozca el tema. Un ejemplo básico…style.cssLa parte superior (cabeza) se muestra de la siguiente manera:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁的入门级WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

El segundo archivo necesario es…index.phpEste es el archivo de plantilla principal del tema; cuando WordPress no encuentra una plantilla más específica, utiliza este por defecto para renderizar la página. Incluso si inicialmente solo contiene la frase sencilla “Hello World”, debe existir.

Además de estos dos archivos, un tema completo y funcional suele incluir también:
* header.phpSe define la zona de cabecera de una página web, que generalmente contiene:<head>Algunos contenidos, títulos de páginas web y el menú de navegación principal.
* footer.phpSe define la zona del pie de página de una página web, que contiene información sobre los derechos de autor, scripts, etc.
* sidebar.phpDefinir el área de la barra lateral.
* functions.phpEste es un archivo extremadamente potente que se utiliza para agregar funcionalidades a los temas, crear menús de registro, barras laterales, así como para incorporar otros scripts y hojas de estilo.
* page.phpSe utiliza para renderizar páginas estáticas.
* single.phpSe utiliza para renderizar un artículo de blog individual.
* archive.phpSe utiliza para renderizar páginas de archivo que contienen información sobre las categorías y etiquetas de los artículos.

Construir desde cero el modelo central de un tema

Ahora, vamos a empezar a crear el esqueleto central del tema. Primero,wp-content/themes/Cree una nueva carpeta en el directorio y llámelamy-first-themeLuego, dentro de ello, se crea lo que se mencionó anteriormente.style.cssYindex.phpDocumentos.

Lecturas recomendadas Guía esencial para la creación de sitios web modernos: el proceso completo desde la planificación hasta la puesta en línea, junto con trucos prácticos。

Crear plantillas para la cabecera y el pie de página

Descomponer la estructura de una página web en componentes reutilizables es clave para un desarrollo eficiente. Hemos creado…header.phpEl archivo es responsable de generar la parte inicial del documento HTML. En este archivo, debes utilizar…wp_head()La función es un hook importante que permite que el núcleo de WordPress, los plugins y tu tema inserten el código necesario en este punto (como enlaces a hojas de estilo o metaetiquetas).

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1003>
<header id="masthead">
    <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
    <p>¿¿php bloginfo( 'description' );?&gt;</p>
</header>

De la misma manera, crear.footer.phpEl archivo se utiliza para cerrar la página. Es esencial que se llame desde aquí.wp_footer()Los “ganchos” (hooks) son esenciales para el correcto funcionamiento de muchos plugins, como los que se utilizan para analizar el código.

<footer id="colophon">
    <p>©  . All Rights Reserved.</p>
</footer>
¿php_footer();?&gt;
</body>
</html>

Montar el archivo de índice principal

Con la cabecera y el pie de página listas, tu…index.phpEl archivo se vuelve más conciso y efectivo en su presentación. Utilízalo.get_header()Yget_footer()Se utilizan funciones de plantilla para introducirlos.

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 
¿¿php get_header();??

<main id="primary">
    ¿php?
    Si hay publicaciones disponibles:
        Mientras haya publicaciones disponibles:
            Muestra la publicación actual.
            &lt;?php
   endif;
            <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>
        &lt;?php
        endwhile;
    else :
        echo &#039;<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Este código constituye un típico “bucle principal” que verifica si existen artículos y, a continuación, recorre cada uno de ellos para mostrar el título (con un enlace al texto completo) y el resumen.

Mejorar el tema a través de archivos de funciones

functions.phpEs el “Centro de Control” relacionado con tu tema. Aquí puedes modificar de manera segura el comportamiento predeterminado de WordPress sin necesidad de alterar los archivos centrales (core files).

Registro del menú de navegación y la barra lateral

Para que tu tema soporte menús personalizados, necesitas utilizar…register_nav_menus()Se trata de una función para registrar la ubicación de los platos. Esto generalmente se hace en…functions.phpSe realiza dentro de una función en el archivo, y dicha función lo logra a través de…after_setup_themeEjecución del gancho (hook).

Lecturas recomendadas Construcción de sitios web: desde los principios hasta la maestría: Una guía completa para crear sitios web de alto rendimiento。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Después de registrarte, podrás…header.phpEn el uso chinowp_nav_menu( array( 'theme_location' => 'primary' ) )Para mostrar este menú…

De la misma manera, también puedes utilizar…register_sidebar()La función está lista para crear la zona de herramientas (barra lateral).

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

Introducir correctamente los scripts y los estilos.

Nunca debes crear enlaces directos (hard links) a archivos CSS o JavaScript dentro de los archivos de plantillas. La forma correcta de hacerlo es a través de…wp_enqueue_scriptsGancho, usar.wp_enqueue_style()Ywp_enqueue_script()Se utiliza una función para organizar la secuencia de introducción de los componentes. Esto garantiza que las relaciones de dependencia se respeten y evita cargas repetidas.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

resúmenes

Crear tu primer tema para WordPress es un proceso paso a paso que comienza con la configuración del entorno, el entendimiento de su estructura básica, la escritura de los archivos de plantilla principales y, finalmente, la incorporación de funcionalidades a través de archivos específicos. Lo esencial es comprender la jerarquía de las plantillas (es decir, cómo WordPress selecciona los archivos de plantilla adecuados para cada página) y saber cómo utilizar estos elementos de manera efectiva.functions.phpSe pueden utilizar diversos tipos de “ganchos” (hookes) para expandir las funcionalidades de un sistema. Aunque el tema introductorio parece sencillo, abarca todos los conceptos fundamentales. Una vez que los hayas comprendido, podrás continuar explorando plantillas más complejas.single.php、page.phpSe pueden utilizar funciones avanzadas como tipos de artículos personalizados, API para la configuración de temas, etc., para crear temas personalizados que sean ricos en funcionalidades y de excelente diseño.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para crear temas para WordPress?

No es necesario alcanzar un nivel de experticia total, pero es esencial tener conocimientos básicos de PHP. Debes comprender el uso de variables, arrays, instrucciones condicionales, bucles y funciones, ya que los etiquetas de plantillas de WordPress en esencia son funciones de PHP. A medida que avances en el desarrollo, naturalmente adquirirás más habilidades en PHP.

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

La causa más común es…style.cssEl formato de la metainformación en las notas del encabezado del archivo no es correcto, o faltan elementos obligatorios (por ejemplo…).Theme NamePor favor, revise cuidadosamente este archivo para asegurarse de que la sintaxis de las notas sea correcta y que la información esté completa. Además, la carpeta de temas debe colocarse directamente en el lugar indicado.wp-content/themes/En el directorio, no se permite la existencia de múltiples niveles de anidación.

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

functions.phpForman parte del tema en cuestión y sus funciones están vinculadas al tema activo en ese momento. Si cambias de tema, estas funciones suelen dejar de funcionar. Por otro lado, las funciones ofrecidas por los plugins son independientes del tema y permanecen activas independientemente del tema que se esté utilizando. Por lo general, las funciones que están estrechamente relacionadas con la apariencia y el diseño del sitio web se encuentran dentro de las opciones del propio tema.functions.phpLas funciones genéricas e independientes (como formularios de contacto, optimización SEO, etc.) son más adecuadas para ser implementadas como plugins.

¿Cómo puedo hacer que mi tema admita múltiples idiomas (internacionalización)?

Debes utilizar las funciones de internacionalización (i18n) de WordPress para encapsular todas las cadenas de texto dirigidas al usuario. En el código, utiliza…__( ‘文本’, ‘my-first-theme’ )o_e( ‘文本’, ‘my-first-theme’ )Por favor, proporciona el texto que deseas traducir.my-first-themeEs tu campo de texto (Text Domain); debe coincidir con…style.cssEstá de acuerdo con lo declarado en el texto. Luego, puedes utilizar herramientas como Poedit para generar lo necesario..potTraducir los archivos de plantilla y….po/.moArchivos de idioma.

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