Un sitio HTML terminado no tiene por qué desecharse al migrar a WordPress. Usted puede tomar su marcado, index.html y style.css, y convertirlo en un tema completamente funcional en aproximadamente una hora. Esto no es magia: WordPress está construido sobre plantillas PHP, las cuales a su vez se ensamblan a partir de HTML común dividido en partes lógicas.

El problema es que la mayoría de los tutoriales o bien lo abruman con terminología desde los primeros párrafos o asumen tácitamente que usted ya sabe PHP. Adoptaremos un enfoque diferente: comenzaremos con una maqueta HTML específica (cabecera, contenido, barra lateral, pie de página) y metódicamente, archivo por archivo, construiremos un tema funcional a partir de ella. Sin magia, solo código y lógica.

Al final de esta guía, usted tendrá un tema listo para usar que podrá subir al panel de administración de WordPress, activar y ver su HTML dentro de una plataforma dinámica. Esta es la primera parte, los cimientos. En la segunda parte, cubriremos las plantillas de página individuales, los campos personalizados y el personalizador.

💡 Resumen rápido:

• Asigne al tema un nombre único y complete la cabecera de style.css; WordPress reconoce los temas por estos metadatos.
• Divida el index.html original en cuatro archivos PHP: header.php, index.php, sidebar.php y footer.php.
• Implemente los hooks estándar de WordPress (get_header, get_sidebar, get_footer, wp_head y wp_footer) para que la plataforma «vea» e integre su marcado.
• Añada el Loop de WordPress a index.php, el fragmento de código que muestra las entradas del blog dentro de su estructura HTML.
• Cree un archivo ZIP, suba el tema al panel de administración y actívelo; su sitio cobra vida en WordPress.

1. Nombrar el tema y el archivo style.css

Lo primero que debe hacer es dar a su tema un nombre único. Incluso si está creando el tema exclusivamente para su propio sitio, WordPress necesita identificarlo de alguna manera en el panel «Apariencia → Temas».

Condiciones de partida:

• Usted tiene un index.html y una hoja de estilos style.css (o cualquier otro archivo CSS).
• Usted tiene una instalación de WordPress funcionando con al menos un tema estándar, por ejemplo, Twenty Twenty-Five.
• Usted ya ha creado una carpeta para su futuro tema dentro de /wp-content/themes/.

Abra su editor de código (recomendamos Sublime Text o VS Code), copie el contenido de su hoja de estilos en un archivo nuevo y guárdelo como style.css en la carpeta del tema. Al principio del archivo, antes de todo el código CSS, añada el bloque de metadatos:

1
/*
2
Theme Name: My HTML-to-WordPress Theme
3
Theme URI: https://example.com
4
Description: Theme assembled from a static HTML layout.
5
Version: 1.0
6
Author: Your Name
7
Author URI: https://example.com
8
Tags: custom-theme, html-to-wordpress, beginner
9
*/

No elimine los símbolos de comentario /* y */, WordPress lee exactamente estos. El campo Theme Name es clave aquí: este es el nombre bajo el cual aparecerá el tema en el panel de administración. Los demás campos son opcionales, pero recomendamos completarlos todos, es una buena práctica.

Guarde el archivo. En esta etapa, WordPress ya puede reconocer su tema, aunque todavía está vacío y no hace nada útil.

2. Dividir el HTML en plantillas PHP

Un tema de WordPress clásico se ensambla a partir de varios archivos PHP, cada uno responsable de su propia sección de la página. La disposición más común es cabecera, contenido, barra lateral, pie de página. Si su HTML está estructurado de manera diferente (por ejemplo, barra lateral a la izquierda o dos barras laterales), el principio sigue siendo el mismo, solo adapte la división a su estructura.

Cree cuatro archivos vacíos en la carpeta del tema:

• header.php, cabecera del sitio
• index.php, plantilla principal, punto de ensamblaje
• sidebar.php, panel de la barra lateral
• footer.php, pie de página

Por ahora están vacíos, no espere milagros. Vayamos en orden.

2.1 Header.php, cabecera del sitio

Vaya al panel de administración de WordPress, abra «Apariencia → Editor de temas» y seleccione el tema estándar (por ejemplo, Twenty Twenty-Five). Localice su header.php y copie todo el bloque <head>, este es el conjunto mínimo de metaetiquetas y hooks sin los cuales WordPress no funcionará correctamente. Esto es lo que necesita transferir a su header.php:

1
<head>
2
    <meta charset="<?php bloginfo( 'charset' ); ?>">
3
    <meta name="viewport" content="width=device-width">
4
    <title>&lt;?php wp_title( '|', true, 'right' ); ?&gt;</title>
5
    <link rel="profile" href="https://gmpg.org/xfn/11">
6
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
7
    <?php wp_head(); ?>
8
</head>

La función bloginfo() sustituye dinámicamente la configuración del sitio (codificación, URL de pingback). El hook wp_head() es crítico: los plugins y el núcleo de WordPress insertan sus scripts, estilos y metaetiquetas a través de él. Sin él, el tema estará medio muerto.

Ahora abra su index.html original y copie el código de la cabecera, todo lo que esté dentro de <header> o un bloque similar, y péguelo en header.php **justo después de la etiqueta de cierre </head> y la etiqueta de apertura **<body>. En nuestro marcado de demostración, se ve así:

1
<body>
2
    <header class="header">
3
        <p>This is header section. Put your logo and other details here.</p>
4
    </header>
5

Añada la conexión a su hoja de estilos entre las etiquetas <head>:

1
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />

La función get_template_directory_uri() devuelve la URL de la carpeta de su tema, la ruta al CSS funcionará en cualquier servidor sin necesidad de codificarla manualmente. Guarde header.php.

2.2 Index.php, punto de ensamblaje

index.php en WordPress es un archivo obligatorio. No almacena marcado como tal, sino que ensambla la página a partir de partes. Abra su index.php vacío y añada tres líneas:

1
<?php get_header(); ?>
2
 
3
<?php get_sidebar(); ?>
4
<?php get_footer(); ?>

La primera línea incluye header.php. Las dos últimas, sidebar.php y footer.php, van al final. El contenido principal (área de contenido y Loop, más sobre esto en la siguiente sección) se colocará entre ellas.

Copie el bloque con la clase .content (área de contenido principal) de su index.html original y péguelo entre get_header() y get_sidebar():

1
<?php get_header(); ?>
2
 
3
    <div class="content">
4
        <p>This is the main content area.</p>
5
    </div><!-- .content -->
6
 
7
<?php get_sidebar(); ?>
8
<?php get_footer(); ?>
9

El esquema es simple: WordPress ensambla secuencialmente la página de arriba abajo, cabecera, contenido, barra lateral, pie de página. Cada get_*() incorpora el archivo PHP correspondiente.

2.3 Sidebar.php y footer.php

La barra lateral y el pie de página son muy directos. Copie el contenido de los bloques .sidebar y .footer de su index.html a los archivos PHP correspondientes.

sidebar.php:

1
<aside class="sidebar">
2
    <p>This is the side bar</p>
3
</aside>
4
 
5
<?php dynamic_sidebar( 'sidebar' ); ?>
6

La función dynamic_sidebar() muestra los widgets asignados en el panel de administración («Apariencia → Widgets»). Si no necesita la barra lateral, elimine esta línea.

footer.php:

1
<footer class="footer">
2
    <p>And this is the footer.</p>
3
</footer>
4
 
5
<?php wp_footer(); ?>
6
</body>
7
</html>
8

Nota: </body> y </html> se trasladan a footer.php. En su HTML original, probablemente también están al final, y así debe ser. El hook wp_footer() es tan obligatorio como wp_head(): sin él, muchos plugins y el propio WordPress no funcionarán (por ejemplo, la barra de administración no aparecerá).

3. El Loop de WordPress: mostrar las entradas

El tema está ensamblado, la estructura funciona. Pero el área de contenido sigue siendo estática, con texto fijo del HTML original. Para que WordPress comience a mostrar entradas reales del blog, necesita El Loop, una construcción PHP especial que itera a través de las entradas publicadas y las muestra una por una dentro de su marcado.

Este es el fragmento de código más importante del tema. Va en index.php, dentro del bloque <div class="content">, reemplazando el texto estático de marcador de posición:

1
<?php if ( have_posts() ) : ?>
2
    <?php while ( have_posts() ) : the_post(); ?>
3
        <article <?php post_class(); ?>>
4
            <header class="post-header">
5
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
6
                    <?php echo get_the_date(); ?>
7
                </time>
8
                <h2>
9
                    <a href="<?php the_permalink(); ?>" rel="bookmark">
10
                        <?php the_title(); ?>
11
                    </a>
12
                </h2>
13
                <span class="post-author"><?php the_author(); ?></span>
14
            </header>
15
 
16
            <div class="entry">
17
                <?php if ( has_post_thumbnail() ) : ?>
18
                    <?php the_post_thumbnail( 'medium' ); ?>
19
                <?php endif; ?>
20
                <?php the_content(); ?>
21
                <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
22
                <?php wp_link_pages(); ?>
23
            </div>
24
 
25
            <footer class="post-footer">
26
                <?php comments_popup_link(
27
                    'Leave a comment',
28
                    '1 comment',
29
                    '% comments'
30
                ); ?>
31
            </footer>
32
        </article>
33
    <?php endwhile; ?>
34
 
35
    <nav class="navigation">
36
        <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37
        <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38
    </nav>
39
<?php else : ?>
40
    <p>No posts found.</p>
41
<?php endif; ?>
42

Cómo funciona:

• have_posts() verifica si hay entradas para mostrar. Si las hay, entra en el Loop.
• the_post() prepara los datos para la siguiente entrada.
• post_class() añade clases CSS estándar a <article>, útil para dar estilo a diferentes tipos de entrada.
• the_permalink() y the_title() muestran la URL y el título de la entrada.
• the_content() es el cuerpo real de la entrada.
• the_post_thumbnail() es la imagen destacada de la entrada, si se ha establecido una.
• comments_popup_link() es el enlace a los comentarios.
• next_posts_link() y previous_posts_link() gestionan la paginación.

El bloque else se ejecuta cuando no hay ninguna entrada, mostrando un mensaje de marcador de posición.

Después de insertar el Loop, su index.php completo se ve así:

1
<?php get_header(); ?>
2
 
3
    <div class="content">
4
        <?php if ( have_posts() ) : ?>
5
            <?php while ( have_posts() ) : the_post(); ?>
6
                <article <?php post_class(); ?>>
7
                    <header class="post-header">
8
                        <time datetime="<?php echo get_the_date( 'c' ); ?>">
9
                            <?php echo get_the_date(); ?>
10
                        </time>
11
                        <h2>
12
                            <a href="<?php the_permalink(); ?>" rel="bookmark">
13
                                <?php the_title(); ?>
14
                            </a>
15
                        </h2>
16
                        <span class="post-author"><?php the_author(); ?></span>
17
                    </header>
18
                    <div class="entry">
19
                        <?php if ( has_post_thumbnail() ) : ?>
20
                            <?php the_post_thumbnail( 'medium' ); ?>
21
                        <?php endif; ?>
22
                        <?php the_content(); ?>
23
                        <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
24
                        <?php wp_link_pages(); ?>
25
                    </div>
26
                    <footer class="post-footer">
27
                        <?php comments_popup_link(
28
                            'Leave a comment',
29
                            '1 comment',
30
                            '% comments'
31
                        ); ?>
32
                    </footer>
33
                </article>
34
            <?php endwhile; ?>
35
            <nav class="navigation">
36
                <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37
                <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38
            </nav>
39
        <?php else : ?>
40
            <p>No posts found.</p>
41
        <?php endif; ?>
42
    </div><!-- .content -->
43
 
44
<?php get_sidebar(); ?>
45
<?php get_footer(); ?>
46

4. Construir e instalar el tema

Los cinco archivos (style.css, header.php, index.php, sidebar.php y footer.php) deben estar en la carpeta de su tema (nómbrela, por ejemplo, mi-tema-html). Empaquete la carpeta en un archivo ZIP.

A continuación, el escenario estándar: administración de WordPress → «Apariencia» → «Temas» → «Añadir tema» → «Subir tema». Seleccione el archivo ZIP, haga clic en «Instalar» y luego en «Activar». Visite el sitio, su maqueta HTML ha cobrado vida dentro de WordPress y las entradas del blog se muestran en el área de contenido.

Con esto concluye la primera parte. Ahora tiene una estructura de tema funcional: WordPress la reconoce, integra los hooks y muestra contenido dinámico a través del Loop. En la próxima parte, cubriremos las plantillas de página individuales (single.php, page.php), la jerarquía de plantillas y la inclusión de scripts mediante functions.php.

⁉️🤔 Preguntas frecuentes

¿Necesito saber PHP para construir un tema a partir de HTML?

No. Lo mínimo que escribirá son unas pocas llamadas a funciones como get_header() y un Loop de 15 líneas. Todo lo demás es copiar código HTML que ya tiene. PHP aquí actúa como «pegamento», no como el lenguaje principal. Si entiende dónde abre y cierra <?php ?>, es suficiente para empezar.

¿Qué pasa si mi maqueta HTML no se parece a «cabecera-contenido-barra lateral-pie de página»?

El principio no cambia. WordPress ensambla la página llamando secuencialmente a los archivos PHP, su orden en index.php determina la disposición. Si su barra lateral está a la izquierda, simplemente llame a get_sidebar() antes del bloque de contenido. ¿Dos barras laterales? Cree sidebar-left.php y sidebar-right.php con llamadas separadas. El esquema es flexible.

¿Puedo crear un tema sin barra lateral?

Sí, e incluso simplifica la tarea. Simplemente elimine la llamada <?php get_sidebar(); ?> de index.php y no cree el archivo sidebar.php. Muchos temas modernos, incluidos los temas de bloques de WordPress, funcionan sin barra lateral alguna.

¿Es obligatorio usar exactamente header.php, index.php, sidebar.php y footer.php?

index.php y style.css son obligatorios, sin ellos WordPress no verá el tema. Los otros archivos son opcionales. Pero header.php, sidebar.php y footer.php son el estándar de facto para temas clásicos: todos los desarrolladores los entienden, y las funciones get_header(), get_sidebar() y get_footer() están diseñadas para ellos. Para su primer tema, aténgase a este conjunto de cuatro.

¿Funciona este enfoque con temas de bloques (FSE)?

No, esta guía es para temas PHP clásicos, que siguen vigentes y con soporte (WordPress no los ha abandonado ni tiene planes de hacerlo). Los temas de bloques (Full Site Editing) utilizan plantillas HTML y un archivo theme.json. Si su objetivo es convertir rápidamente HTML existente en un tema funcional, el enfoque clásico es significativamente más simple: menos abstracciones, el familiar modelo «cabecera-contenido-barra lateral-pie de página».

¿Qué sigue? Su primer paso en el desarrollo de temas

Ha ensamblado una estructura de tema básica a partir de marcado HTML, con un Loop funcional, hooks incluidos y contenido dinámico. El tema ya se instala en el panel de administración y muestra entradas. Ahora hay dos direcciones para crecer:

• Si mostrar entradas en su marcado es suficiente, llene el sitio con contenido y refine el CSS para que coincida con su marca.

Comience con algo pequeño: construya el tema siguiendo esta guía, actívelo y añada un par de entradas de prueba. Una vez que vea su HTML con entradas reales dentro, todo lo demás resultará más fácil.