Cómo convertir HTML a WordPress (Todos los métodos incluidos)

Imagina que has dedicado incontables horas a crear el diseño perfecto para tu sitio web. Los colores, las fuentes y el diseño son perfectos. Pero entonces te das cuenta: es estático. Cada cambio, por pequeño que sea, requiere volver a sumergirse en el código.

¿No sería estupendo que tu sitio web fuera tan dinámico como tu negocio?

Ahí es donde entra en juego WordPress. Al convertir tu diseño HTML en un tema de WordPress, puedes disfrutar de la flexibilidad, personalización y facilidad de uso que ofrece WordPress.

En este tutorial, te guiaremos paso a paso por el proceso, asegurándonos de que tu sitio web no sólo tenga un aspecto estupendo, sino que también funcione a la perfección. Si eres un novato, intenta hacer esto con un sitio web ficticio en tu host local, como XAMPP.

Preparar el diseño HTML para la conversión

Antes de sumergirte en el proceso de conversión, es esencial preparar tu diseño HTML. He aquí algunos pasos clave para garantizar una transición sin problemas:

1. Optimiza tu código HTML

Asegúrate de que tu código HTML es limpio, está bien estructurado y cumple las normas HTML. Utiliza un validador para comprobar si hay errores y eliminar elementos innecesarios. Comprime las imágenes para mejorar los tiempos de carga.

2. Estructura tu contenido

Organiza tu contenido utilizando elementos HTML adecuados como

,

,

y

. Divide tu contenido en secciones claras con encabezamientos para mejorar la legibilidad y el SEO.

3. Considera el diseño responsivo

Si tu diseño HTML aún no es responsive, haz los ajustes necesarios para asegurarte de que se ve y funciona bien en diferentes dispositivos. Considera la posibilidad de utilizar un marco adaptable, como Bootstrap, para agilizar el proceso.

4. Haz una copia de seguridad de tu diseño

Crea siempre una copia de seguridad de tus archivos HTML originales antes de hacer cualquier cambio para tener una red de seguridad en caso de que algo vaya mal.

Alojamiento WordPress Gestionado Desde $11/Mes

Paga sólo por los recursos que utilices con los planes de pago por uso, y obtén excelentes servicios de alojamiento en la nube con ventajas añadidas. Sin cargos ocultos.

Prueba gratis

Métodos para convertir HTML a WordPress

Existen múltiples formas de convertir tu sitio web HTML a WordPress. La elección correcta para ti dependerá de factores como el tiempo de que dispongas, tu presupuesto, tus conocimientos de programación y tus preferencias personales.

Método 1: Usar un framework de temas de WordPress

La primera opción es la más técnica. Implica utilizar tu código existente como base para crear los archivos del tema de WordPress desde cero.

1. Crear una carpeta de temas y archivos básicos

Para crear tu tema, crea primero una carpeta nueva y ponle el nombre que quieras a tu tema. A continuación, dentro de esta carpeta, crea cinco archivos: style.css, index.php, header.php, sidebar.php y footer.php.

Mantén estos archivos abiertos en tu editor de código porque pronto los editarás. Si te sientes más cómodo, puedes empezar creando estos archivos como archivos .txt y luego cambiar sus extensiones a .php o .css. Esto los convertirá automáticamente a los tipos de archivo correctos.

2. Copia el CSS existente a la hoja de estilo de WordPress

Céntrate en el archivo CSS para empezar a diseñar tu tema. Si pasas de otro sitio web a WordPress, copia el código CSS de tu antiguo sitio y pégalo en el archivo style.css que has creado. El CSS es crucial para el aspecto de tu sitio.

Añade el código CSS al archivo style.css para aplicar tu diseño. Esto hará que tu sitio de WordPress aparezca exactamente como quieres.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Para completar tu tema, añade la información necesaria sobre el tema que estás utilizando e incluye las líneas CSS restantes. A continuación, guarda y cierra el archivo.

3. Separa tu HTML existente

Ahora, tienes que dividir tu documento HTML en diferentes secciones, convirtiendo cada una de esas partes en archivos PHP.

Aunque esto pueda parecer complejo, sólo consiste en copiar secciones de tu documento HTML y pegarlas en diferentes archivos PHP.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2024 My Test Site</p>
</footer>
</div>
</body>
</html>

Como puedes ver, se trata de una plantilla HTML estándar que incluye una cabecera, una barra lateral y un pie de página. El código que la acompaña es éste

Si tu diseño es diferente, puede que tengas que modificar los pasos. Sin embargo, el proceso básico seguirá siendo el mismo.

Para seguir trabajando en tu tema, abre el archivo index.html, que es el archivo principal de tu sitio web HTML. A continuación, mira los archivos de WordPress que acabas de crear y copia en ellos el siguiente código.

3.1. Cabecera.php

Todo dentro de tu archivo HTML desde el área de contenido principal

o

entra en este archivo.

Termina el código cerrando copiar y pegar . Esto es importante para que muchos plugins de WordPress funcionen correctamente.

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Website Title</title>
      <meta name="description" content="Website description">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css">
      <?php wp_head();?>
    </head>
  <body>
    <div class="header-container">
      <header class="wrapper clearfix">
        <h1 class="title">Website Title</h1>      
        <nav>
          <ul>
            <li><a href="#">nav item #1</a></li>
            <li><a href="#">nav item #2</a></li>
            <li><a href="#">nav item #3</a></li>
          </ul>
        </nav>
      </header>
    </div>
  <div class="main-container">
    <main class="main wrapper clearfix">

3.2. Barra lateral.php

Todo el contenido de

en este archivo de WordPress.

<aside>
  <h3>Sidebar</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
</aside>

3.3. Pie de página.php

El último paso es añadir la información del pie de página desde el final de la barra lateral hasta el final del archivo. Después, inserta justo antes de la etiqueta , de forma similar a como se añadió wp_head en la cabecera.

      </main> <!-- #main -->
    </div> <!-- #main-container -->
  <div class="footer-container">
    <footer class="wrapper">
      <p class="footer-credits">© 2019 My Imaginary Website</p>
    </footer>
  </div>
    <?php wp_footer();?>
  </body>
</html>

4. Enlaza tus archivos header.php e index.php

Ya has añadido el archivo header.php, pero aún tienes que hacer algunas cosas más. Básicamente, tienes que modificar la llamada en la hoja de estilos del HTML para que coincida con el formato estándar PHP de WordPress.

En el archivo header.php, busca la sección y llama a la hoja de estilos. Es algo parecido a esto

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

Abre el archivo index.php recién creado, y lo encontrarás vacío. Ahora, copia y pega el siguiente código en este archivo index. php:

<?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 if ( !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 if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Una vez que hayas completado estos pasos, tendrás un tema de WordPress basado en tu sitio web HTML original, listo para subirlo a tu sitio de WordPress.

5. Crea una captura de pantalla y sube el tema

Crea una captura de pantalla que represente la apariencia de tu tema. Esto, junto con la información de la cabecera de tu hoja de estilos, ofrecerá una vista previa de tu sitio web en el panel de control de WordPress.

Para crear una captura de pantalla para tu tema, abre tu sitio web en un navegador y haz una captura de pantalla. Recorta la imagen a 880×660 píxeles y guárdala como screenshot.png. A continuación, coloca esta captura de pantalla en la carpeta de tu tema. Ahora puedes subir tu nuevo tema de WordPress de dos formas.

El primer método consiste en utilizar FTP para arrastrar los archivos del tema directamente al directorio wp-content/themes. Para ello no es necesario comprimir los archivos en formato zip. Simplemente utiliza un cliente FTP como FileZilla para mover la carpeta al directorio wp-content/themes.

Para subir tu tema, primero comprime toda la carpeta del tema en un archivo .zip. A continuación, ve a Apariencia → Temas en tu panel de control de WordPress.

Pulsa el botón Añadir nuevo.

Haz clic en el botón Subir tema.

Haz clic en Elegir archivo y busca el archivo .zip que has creado. Selecciona el archivo para que aparezca en tu panel de WordPress.

Elige el archivo del tema y haz clic en Instalar ahora. Esto instalará el tema en tu sitio web WordPress.

Haz clic en Instalar ahora después de subir el tema. WordPress confirmará la instalación y mostrará un mensaje de éxito. A continuación, haz clic en el botón Activar para que tu nuevo tema se active en tu sitio web.

Haz clic en el botón Activar después de la instalación. Tu nuevo tema aparecerá ahora como tema Activo en la lista de Temas.

Método 2: Conversión manual mediante tema hijo

Como se ha hecho anteriormente, en lugar de empezar con tu sitio existente, puedes utilizar un tema prediseñado de WordPress como base. He aquí cómo hacerlo:

1. Elige un tema adecuado

Elige un tema que se ajuste a tu diseño HTML. Busca un tema hijo con un diseño y una estructura similares a los de tu sitio web actual.

2. Crear una nueva carpeta

Tendrás que crear una nueva carpeta de temas. Esta vez, nombra la carpeta con el nombre del tema padre en el que se basa tu tema hijo, añadiendo -child como sufijo.

Por ejemplo, si tu tema se llama inshal-wordpress-theme, la carpeta debe llamarse inshal-wordpress-theme-child. Asegúrate de que no haya espacios en el nombre de la carpeta.

3. Crea la Hoja de Estilo

A continuación, crea el archivo style.css dentro de la carpeta y añade estas líneas de código:

/*
Theme Name: inshal-wordpress-theme-child
Theme URI: http://example.com/inshal-wordpress-theme-child/
Description: inshal-wordpress-theme Child Theme
Author: WPZOOM
Author URI: http://example.com
Template: inshal-wordpress-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

4. Crea Functions.php y hereda los estilos de los padres

Para utilizar un tema hijo con la hoja de estilos y evitar una página HTML sin estilos, tendrás que crear un archivo functions. php para heredar los estilos del tema padre.

Crea un nuevo archivo llamado functions.php en la carpeta de tu tema hijo.

/*
Theme Name: inshal-wordpress-theme-child
Theme URI: http://example.com/inshal-wordpress-theme-child/
Description: inshal-wordpress-theme Child Theme
Author: WPZOOM
Author URI: http://example.com
Template: inshal-wordpress-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

5. Activa el Tema Hijo

Para activar tu tema hijo, comprime primero la carpeta del tema en un archivo .zip. A continuación, ve al panel de control de WordPress, ve a Apariencia → Temas y haz clic en Añadir nuevo.

Haz clic en el botón Elegir archivo y sube el archivo .zip.

Después de subir el archivo .zip, haz clic en el botón Activar.

💡 Nota: Puedes arrastrar manualmente la carpeta al directorio wp-content/themes.

6. Ajusta el diseño

Para crear un sitio WordPress que se parezca a tu sitio web HTML original, el último paso es transferir manualmente tu contenido HTML a WordPress. Aunque hay plugins que pueden automatizar esto, es posible que no funcionen con las últimas versiones de WordPress. Por tanto, es más seguro hacerlo manualmente.

Método 3: Utilizar un plugin para la conversión de temas

Para importar tu sitio web HTML a WordPress, éste es el método más sencillo:

1. Instala el Plugin de Importación

• El primer paso es instalar el HTML Import 2 de Stephanie Leary.
• La forma más sencilla de hacerlo es ir a Plugins → Añadir nuevo en el panel de control de WordPress y buscar el plugin por su nombre.
• Haz clic en Instalar ahora.
• Una vez completada la instalación, activa el plugin.

💡 Descargo de responsabilidad: El plugin puede no ser compatible con las últimas versiones de WordPress. Hace tiempo que no se actualiza. Lo he probado con WordPress 6.x y funcionaba correctamente.

Archivos

• Introduce la ruta donde copiaste los archivos existentes.
• Para las redirecciones, introduce tu antigua URL.
• Especifica el archivo predeterminado para los directorios del sitio antiguo, normalmente index.html.
• Introduce las extensiones de archivo del contenido que quieres importar.
• Si hay directorios del sitio antiguo que no deseas importar, enuméralos aquí.
• Para que el plugin utilice automáticamente los nombres de tus archivos como nuevas URL, marca la casilla correspondiente.
• Esto es útil si tus títulos son largos, ya que el importador suele utilizarlos para crear el slug.

Contenido

• Para configurarlo, selecciona la opción Etiqueta HTML en la parte superior. A continuación, configura la etiqueta en los tres campos siguientes:
• Si tu contenido está dentro de una etiqueta como

  introduce div en el primer campo, id en el segundo y main en el tercero.

Título y metadatos

Esta parte es similar a la anterior de contenido. Sin embargo, se ocupa de los títulos de las páginas.

• Empieza por especificar cómo se marcan los títulos en tu plantilla HTML para que el plugin pueda importarlos correctamente.
• También puedes filtrar elementos innecesarios, como el título del sitio, que a menudo se incluye por defecto en los temas de WordPress.
• En caso de que los títulos estén dentro del contenido, puedes indicar al importador que los elimine para evitar duplicidades.
• Los ajustes restantes te permiten configurar las opciones de WordPress para las nuevas páginas.

Campos personalizados

Si tienes algún dato que añadir a los campos personalizados, puedes configurarlo aquí.

Categorías y etiquetas

Aquí puedes elegir categorías, etiquetas y tipos para el contenido que has importado. El complemento mostrará las taxonomías existentes en tu sitio para simplificar este proceso.

Herramientas

Esta pantalla enumera una serie de herramientas útiles para importar con éxito de HTML a WordPress.

3. Iniciar importación

• Cuando hayas terminado con la configuración, guárdala.
• Haz clic en el botón«Importar archivos«.
• A continuación, elige si quieres importar un directorio de archivos o un único archivo que necesites para navegar hasta él,
• Luego pulsa Enviar.

¡Y ya está!

Una vez que todo esté configurado, tu sitio WordPress debería mostrar todo el contenido existente formateado por el nuevo tema.

Solución de problemas comunes

Durante el proceso de conversión de HTML a WordPress, puedes encontrarte con algunos problemas comunes. Aquí tienes algunos problemas potenciales y sus soluciones:

1. Problemas con la ruta de la imagen

Si tus imágenes no se muestran correctamente, comprueba dos veces las rutas de las imágenes en los archivos de tu tema de WordPress. Asegúrate de que son relativas al directorio del tema.

2. Problemas de estilo CSS

Si tus estilos CSS no se aplican correctamente, inspecciona los archivos CSS del tema para identificar cualquier conflicto o error. Puede que tengas que modificar o anular los estilos existentes.

3. Conflictos de plugins

Algunos plugins pueden interferir con la funcionalidad de tu tema. Intenta desactivar los plugins uno a uno para identificar al culpable y resolver el conflicto.

4. Cuestiones de jerarquía de plantillas

Si la jerarquía de plantillas de tu tema no funciona como se espera, revisa la documentación sobre la jerarquía de plantillas de WordPress y asegúrate de que los archivos de plantilla se nombran y colocan correctamente.

Resumen

Convertir tu sitio web HTML en un tema de WordPress ofrece muchas ventajas. Puedes personalizarlo fácilmente y gestionarlo de forma más eficiente.

Sigue los pasos de este tutorial para convertir tu diseño HTML estático en un sitio web WordPress dinámico. Antes de empezar, optimiza tu código HTML, estructura bien tu contenido, diséñalo para diferentes tamaños de pantalla y haz una copia de seguridad de tu diseño.

Si tienes problemas, consulta nuestra sección de solución de problemas. Con un poco de trabajo, puedes crear un sitio web WordPress bonito y funcional que muestre tu negocio.