Cómo convertir HTML en WordPress
Si buscas gestionar tu contenido de una manera más eficiente y aprovechar al máximo la versatilidad de WordPress, convertir tu sitio HTML es la mejor jugada.
Existen tres maneras de pasar de HTML a WordPress: puedes crear un tema de WordPress a partir de tu sitio HTML, usar un tema hijo basado en una plantilla existente o puedes importar solo el contenido y conservar el diseño original.
Cada uno de estos métodos se ajusta a diferentes necesidades, desde tener el control total del diseño hasta una configuración rápida que da prioridad a la migración del contenido.
Tabla de Contenidos
3 maneras distintas de convertir HTML a WordPress
Puedes convertir tu sitio HTML a WordPress de varias maneras, dependiendo de lo que busques:
- Crea un tema de WordPress a partir de un sitio HTML estático. Si quieres mantener intacto el diseño de tu antiguo sitio HTML esta es la opción ideal, aunque la más complicada, ya que necesitas ciertos conocimientos de programación. Lo bueno es que solo tienes que copiar y pegar el HTML antiguo en varios archivos PHP.
- Usa un tema hijo basado en un tema existente. Esta es la manera más sencilla si quieres conservar el diseño anterior. La clave está en elegir un tema de WordPress como punto de partida y trabajar sobre esa base. Además, como extra, tienes acceso a todas las funciones potentes de WordPress desde el primer momento.
- Renuncia al diseño y conserva solo el contenido. Esta es una excelente opción si no te importa dejar atrás el diseño de tu sitio anterior y elegir un tema de WordPress para empezar de cero. Lo único que tienes que hacer es mover tu contenido a su nuevo hogar.
1. Crea un tema de WordPress a partir de un sitio HTML estático
Con este método, puedes conservar el diseño de tu sitio HTML actual y, además, disfrutar de todas las funciones del CMS de WordPress. Para ello, tienes que convertir tus archivos HTML en un tema de WordPress.
Para mostrarte cómo se hace, vamos a usar una plantilla HTML estática de Rachel McCollin.
1. Crea una carpeta para el tema y los archivos básicos
Crea una nueva carpeta para el tema en tu escritorio y ponle un nombre. En nuestro ejemplo, la llamamos mi-tema. A continuación, abre tu editor de código y crea estos archivos:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Ten en cuenta que algunos de estos archivos pueden ser opcionales, dependiendo de las funciones y el diseño de tu tema. Si quieres entender para qué sirve cada uno, echa un vistazo a nuestro artículo sobre cómo crear un tema de WordPress usando HTML5.
Después de crear los archivos, deja el editor abierto porque volveremos a él más tarde.
2. Cambia el CSS del sitio antiguo por la hoja de estilos de WordPress
Ahora vamos a crear una hoja de estilo de WordPress copiando tu CSS antiguo. Ve al archivo style.css y pega este código:
/* Theme Name: Mi Tema Author: LakiGarang Author URI: https://hostinger.com/tutorials/author/luqman Description: Un tema de desarrollo, de HTML estático a WordPress Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Este código le indica a WordPress que se trata de la cabecera de la hoja de estilos del tema. Puedes editar los detalles como el nombre del tema, el autor, la URL, la descripción, etc.
Copia y pega tu antiguo código CSS en el archivo justo después de la cabecera. Luego, guárdalo y ciérralo.
3. Divide tu HTML antiguo
WordPress usa PHP para obtener el contenido de su base de datos de forma dinámica. Para que tu HTML anterior sea compatible, tienes que dividirlo en archivos de plantilla separados para que WordPress pueda ensamblar las páginas correctamente.
Así está estructurado nuestro sitio web estático y su código:
<!DOCTYPE html> <!--[si lt IE 7]><html lang="en-US" class="ie6"><![endif]--> <!--[si IE 7]><html lang="en-US" class="ie7"><![endif]--> <!--[si IE 8]><html lang="en-US" class="ie8"><![endif]--> <!--[si IE 9]><html lang="en-US" class="ie9"><![endif]--> <!--[si gt IE 9]><html lang="en-US"><![endif]--> <!--[si !IE]><html lang="en-US"><![endif]--> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Escritora e Instructora de WordPress | RACHEL McCOLLIN</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet"> </head> <body> <div class="header-bg"> <header role="banner"> <hgroup class="site-name three-quarters left"> <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element --> <h1 id="site-title" class="one-half-left"> <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a> </h1> <h2 id="site-description">Escritora de Ficción y Técnica</h2> </hgroup> <div class="right quarter"> <a class="toggle-nav" href="#">☰</a> </div> <!-- .right quarter --> </header><!-- header --> </div><!-- header-bg--> <!-- full width navigation menu --> <nav class="menu main"> <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> <div class="main-nav"> <ul class="menu"> <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/books/">Libros</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Club de lectura</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contacto</a></li> </ul> </div> </nav><!-- .main --> <div class="main"> <div id="content" class="two-thirds left"> <article class="post"> <h2 class="entry-title">Welcome to This Website</h2> <section class="entry-content"> <p>Este sitio se compone de un archivo HTML estático.</p> <p>Podrás añadir más contenido más adelante a través de las pantallas de administración de WordPress.</p>. <h3>Aquí tienes un encabezado para que puedas comprobar el estilo</h3> <p>Y otro párrafo debajo.</p> <p>Y una lista:</p> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Y así sucesivamente...</li> </ul> </section><!-- .entry-content --> </article><!-- #post-## --> </div><!-- #content --> <aside class="sidebar one-third right"> <aside class="widget-area"> <div class="widget-container"> <h3 class="widget-title">Compra mi libro</h3> <img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" /> <p><em>WordPress: Pushing the Limits</em> te ayudará a convertirte en un desarrollador profesional de WordPress.</p> </div> </aside> </aside> </div><!-- .main --> <footer> <div class="fatfooter"> <p>Añade contenido de pie de página aquí con <a href="#">áreas de widgets</a> - los tutoriales te mostrarán cómo hacerlo.</p> </div> </footer> </body> </html>
Ahora, abre el index.html de tu antiguo sitio estático. Vamos a dividirlo en los archivos de WordPress que acabas de crear. A continuación te mostramos cómo estructuramos nuestro código.
header.php
Todo lo que hay desde el principio del HTML hasta el área de contenido principal va en este archivo. El área de contenido principal suele expresarse con <main> o <div class=”main”>.
Además, justo antes del elemento </head>, copia y pega <?php wp_head();?> para garantizar que los plugins de WordPress funcionen bien. Cuando hayas terminado, guarda el archivo.
<!DOCTYPE html> <!--[si lt IE 7]><html lang="en-US" class="ie6"><![endif]--> <!--[si IE 7]><html lang="en-US" class="ie7"><![endif]--> <!--[si IE 8]><html lang="en-US" class="ie8"><![endif]--> <!--[si IE 9]><html lang="en-US" class="ie9"><![endif]--> <!--[si gt IE 9]><html lang="en-US"><![endif]--> <!--[si !IE]><html lang="en-US"><![endif]--> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Escritora e Instructora de WordPress | RACHEL McCOLLIN</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet"> <?php wp_head();?> </head> <body> <div class="header-bg"> <header role="banner"> <hgroup class="site-name three-quarters left"> <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element --> <h1 id="site-title" class="one-half-left"> <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a> </h1> <h2 id="site-description">Escritora técnica y de ficción</h2> </hgroup> <div class="right quarter"> <a class="toggle-nav" href="#">☰</a> </div> <!-- .right quarter --> </header><!-- header --> </div><!-- header-bg--> <!-- full width navigation menu --> <nav class="menu main"> <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> <div class="main-nav"> <ul class="menu"> <li class="menu-item"><a href="https://rachelmccollin.com/">Inicio</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">Sobre mí</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/books/">Libros</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Club de Lectura</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contacto</a></li> </ul> </div> </nav><!-- .main -->
sidebar.php
Aquí va todo lo que pertenece a la sección `<aside … </aside>` de tu HTML antiguo. Cuando lo tengas, guárdalo.
<aside class="sidebar one-third right"> <aside class="widget-area"> <div class="widget-container"> <h3 class="widget-title">Compra Mi Libro</h3> <img width="242" height="300" src="https://premium.wpmudev.org/wp-content/temas/wpmudev-2015-1/assets/img/projects/Snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits por Rachel McCollin" style="max-width: 100%; height: auto;" /> <p><em>WordPress: Pushing the Limits</em> te ayudará a convertirte en un desarrollador profesional de WordPress.</p> </div> </aside> </aside>
footer.php
Ahora todo lo que esté hasta el final del archivo es la información del pie de página y debe ir aquí. Justo antes del corchete de cierre </body>, añade este código <?php wp_footer();?> por la misma razón que en header.php. Cuando termines, guárdalo.
</div><!-- .main --> <footer> <div class="fatfooter"> <p>Añade contenido del pie de página aquí con <a href="#">áreas de widgets</a> - los tutoriales te mostrarán cómo.</p> </div> </footer> <?php wp_footer();?> </body> </html>
¡Listo! Ya has terminado con el antiguo index.html. Puedes cerrarlo, junto con otros archivos de la carpeta de tu tema, excepto header.php e index.php, ya que aún los vas a necesitar.
4. Cambia el estilo al formato de WordPress
En la cabecera, todo lo que necesitas hacer es cambiar la hoja de estilo del formato HTML al de WordPress. Busca un enlace en la sección <head>. En nuestro caso, es algo así:
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
Reemplázalo con esta línea:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
Ahora, puedes guardar y cerrar el archivo header.php.
Vamos a pasar al archivo index.php. Por el momento debe estar en blanco, así que copia y pega estas líneas de código:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Este código sirve para llamar al resto de tus archivos de WordPress. Verás que queda un espacio entre el encabezado y la barra lateral, ahí es donde añadirás el Loop.
El Loop procesa y da formato a cada entrada para mostrarla según los criterios configurados dentro de sus etiquetas. Es un aspecto clave a la hora de añadir contenido dinámico a tu sitio de WordPress.
Para hacerlo tienes que pegar el siguiente código justo después de <?php get_header(); ?>:
<?php while ( have_posts() ) : the_post(); ?> <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>"> <h2 class="entry-title"><?php the_title(); ?></h2> <?php si ( !is_page() ):?> <section class="entry-meta"> <p>Posted on <?php the_date();?> by <?php the_author();?></p> </section> <?php endif; ?> <section class="entry-content"> <?php the_content(); ?> </section> <section class="entry-meta"><?php si ( count( get_the_category() ) ) : ?> <span class="category-links"> Posted under: <?php echo get_the_category_list( ', ' ); ?> </span> <?php endif; ?></section> </article> <?php endwhile; ?>
Cuando termines, guarda el archivo index.php y ciérralo. Ya has creado un tema de WordPress con éxito y puedes añadirlo a tu sitio.
5. Sube tu tema a WordPress
Una vez que tu tema esté listo, puedes subirlo a WordPress. Asegúrate de tener todos los archivos del tema en la misma carpeta y comprímela en .zip para facilitar la instalación.
Ve a tu Panel de administración de WordPress. Dirígete a Apariencia → Temas. Haz clic en Añadir nuevo → Subir tema.
En el menú, busca el archivo zip, súbelo, haz clic en Instalar ahora y activa el tema.
Llegados a este punto, tu front end debería parecerse bastante a tu antiguo sitio. Aunque el diseño básico se conserva, hay pasos adicionales que puedes seguir para integrarlo completamente con WordPress.
Por ejemplo, las funciones de WordPress como las áreas de widgets no funcionarán automáticamente, y puede que tengas que ajustar tu CSS para que se ajuste a la estructura del tema y las convenciones de estilo.
2. Usa un tema hijo basado en un tema existente
Si quieres conservar elementos de tu sitio anterior, pero crear un tema desde cero te parece demasiado complicado, usar un tema hijo es una alternativa muy sencilla.
Los temas hijo te permiten crear sobre la base de un tema principal existente (el tema padre) sin modificar su estructura original. Todas las modificaciones que hagas en un tema hijo se conservan al actualizar el tema principal.
Paso 1: elige un tema padre adecuado
Elige un tema principal con una estructura similar a la de tu sitio anterior para minimizar los ajustes del diseño. Elige un tema gratuito del directorio de WordPress que se ajuste a tus necesidades. Por ejemplo, podrías empezar con un tema clásico como Twenty Twenty-Five.
Paso 2: crea un tema hijo
Puedes configurar tu tema hijo manualmente o usar un plugin como Childify Me para automatizar el proceso. Ambas opciones te dan un entorno seguro para que puedas personalizar tu sitio sin afectar el tema padre.
No modifiques el tema padre directamente. Mejor crea una nueva carpeta para tu tema hijo dentro del directorio /wp-content/themes/.
En esta nueva carpeta, vas a necesitar dos archivos fundamentales:
- style.css: este archivo contiene tus reglas CSS personalizadas y es el único archivo necesario para que tu tema hijo sea reconocido por WordPress. La parte de arriba debe incluir un bloque de comentarios de cabecera para identificar el tema padre.
- functions.php: este archivo indica a WordPress que cargue la hoja de estilos del tema principal, para que el tema hijo mantenga el mismo diseño.
Paso 3: añade a la cola la hoja de estilo del tema padre
Abre el archivo functions.php de tu tema hijo y añade este código:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Paso 4: personaliza tu tema hijo
Ya puedes empezar a modificar el tema. Para añadir estilos tienes que escribir tus reglas CSS directamente en el archivo style.css del tema hijo, justo después del bloque de comentarios de cabecera.
Para modificar el diseño o la funcionalidad de un tema padre, copia el archivo de la carpeta de ese tema (por ejemplo, header.php o page.php) y pégalo en la carpeta de tu tema hijo. Luego, edita el archivo en tu tema hijo. WordPress usará automáticamente tu versión modificada en lugar de la del tema padre.
Paso 5. Empieza a importar tu contenido
Puedes usar WordPress Importer para importar entradas, páginas y archivos multimedia al nuevo sitio, o puedes añadir tu contenido manualmente creando nuevas entradas y páginas desde el panel de WordPress.
3. Renuncia al diseño y conserva solo el contenido
Si ya no te convence el diseño de tu web y prefieres empezar de cero, puedes migrar tu contenido a un nuevo tema de WordPress utilizando el bloque de HTML personalizado de Gutenberg. Este método separa tu contenido del diseño antiguo para que puedas aprovechar al máximo las funciones modernas de WordPress.
Esta opción funciona mejor con sitios de pocas páginas o si tu prioridad es tener un diseño nuevo y moderno.
La forma más fácil de mover tu contenido es con el bloque HTML personalizado nativo de WordPress. Este método no requiere plugins, pero es un proceso manual que conviene usar solo en sitios pequeños o páginas individuales.
- Abre tus archivos HTML antiguos en un navegador.
- Crea nuevas páginas o publicaciones en tu panel de WordPress, ve a Páginas → Añadir nueva o Entradas → Añadir nueva.
- Añade un bloque HTML personalizado en el editor de WordPress, haz clic en el icono + para añadir un nuevo bloque. Busca y selecciona el bloque HTML personalizado.
- Copia y pega el contenido de la sección que quieres migrar (por ejemplo, desde <body> hasta </body>, o solo el área de contenido principal). Pega el código directamente en el bloque de HTML personalizado de WordPress.
- Publica y revisa la nueva página o entrada y comprueba cómo se ve con tu nuevo tema de WordPress.
Nota importante: Aunque este método conserva la estructura HTML original, tiene limitaciones importantes. El contenido de un bloque de HTML personalizado funciona como una unidad estática por lo que no podrás editarlo usando otras funciones o bloques de Gutenberg. Si quieres que tu sitio de WordPress sea realmente dinámico y editable, tendrás que volver a crear el contenido manualmente utilizando bloques nativos.
Cómo sacar el máximo provecho de tu sitio de WordPress
Una vez que hayas convertido tu sitio HTML a WordPress, se abre un mundo de posibilidades. WordPress ofrece un sinfín de opciones, desde plugins que amplían funciones hasta temas que transforman tu diseño.
Aquí tienes algunas formas de llevar tu nuevo sitio de WordPress un paso más allá:
- Explora funciones avanzadas como el caché, plugins de SEO y tipos de contenido personalizado.
- Actualiza los temas y plugins con regularidad para mantener tu sitio seguro.
- Prueba creadores de páginas modernos para tener más control del diseño.
- Controla el rendimiento con herramientas integradas y plugins de análisis.
Trabaja en comunicación y marketing digital, y se especializa en traducción y localización de contenidos. Disfruta de los proyectos que le permiten estar en contacto con diferentes culturas y contextos.
