1. Crea un tema de WordPress a partir de un sitio HTML estático<\/h3>
Con este método, puedes conservar el diseño de tu sitio HTML actual y, además, aprovechar todas las funciones del CMS de WordPress. Para ello, tienes que convertir tus archivos HTML en un tema de WordPress.<\/p>
Para mostrarte cómo se hace, vamos a usar una plantilla HTML estática<\/u><\/strong><\/a> de Rachel McCollin.<\/p> 1. Crea una carpeta para el tema y los archivos básicos<\/strong><\/p> Empieza creando una carpeta en tu escritorio y ponle un nombre. En nuestro ejemplo, la llamamos mi-tema.<\/strong> A continuación, abre tu editor de código y crea estos archivos:<\/p> 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 <\/u><\/strong><\/a>usando<\/a><\/u><\/strong> HTML5<\/u><\/strong><\/a>.<\/p> Después de crear los archivos, deja el editor abierto porque volveremos a él más tarde.<\/p> 2. Cambia el CSS del sitio antiguo por la hoja de estilos de WordPress<\/strong> 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.<\/p> Copia y pega tu antiguo código CSS en el archivo justo después de la cabecera. Luego, guárdalo y ciérralo. Así está estructurado nuestro sitio web estático<\/u><\/a> y su código:<\/p> <\/p> Ahora, abre el index.html<\/strong> 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><\/strong> o <div class=”main”><\/strong>. sidebar.php<\/strong> footer.php<\/strong><\/p> 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();?><\/strong> por la misma razón que en header.php. Cuando termines, guárdalo.<\/p> ¡Listo! Ya has terminado con el antiguo index.html.<\/strong> 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. 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><\/strong>. En nuestro caso, es algo así:<\/p> Reemplázalo con esta línea:<\/p> Ahora, puedes guardar y cerrar el archivo header.php<\/strong>. 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<\/u><\/a>.<\/p> 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. 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.<\/p> 5. Sube tu tema a WordPress<\/strong> Ve a tu Panel de administración<\/u><\/strong><\/a> de WordPress. Dirígete a Apariencia<\/strong> → Temas<\/strong>. Haz clic en Añadir nuevo<\/strong> → Subir tema<\/strong>.<\/p> En el menú, busca el archivo zip, súbelo, haz clic en Instalar ahora<\/strong> y activa el tema.<\/p> Llegados a este punto, tu interfaz debería parecerse bastante a la de tu antiguo sitio. Aunque el diseño básico se conserva, hay pasos adicionales que puedes seguir para integrarlo completamente con WordPress. Si quieres conservar elementos de tu sitio anterior, pero crear un tema desde cero te parece demasiado complicado, usar un tema hijo<\/u><\/a> es una alternativa muy sencilla. Puedes configurar tu tema hijo manualmente o usar un plugin como Childify Me<\/u><\/a> para automatizar el proceso. Ambas opciones te dan un entorno seguro para que puedas personalizar tu sitio sin afectar el tema padre.<\/p> No modifiques el tema padre directamente. Mejor crea una nueva carpeta para tu tema hijo dentro del directorio \/wp-content\/themes\/<\/strong>. Paso 3: añade a la cola la hoja de estilo del tema padre<\/strong><\/p> Abre el archivo functions.php de tu tema hijo y añade este código:<\/p> Paso 4: personaliza tu tema hijo<\/strong><\/p> Ya puedes empezar a modificar el tema. Para añadir estilos, tienes que escribir tus reglas CSS directamente en el archivo style.css<\/strong> del tema hijo, justo después del bloque de comentarios de cabecera.<\/p> 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<\/strong> o page.php<\/strong>) 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.<\/p> Paso 5. Empieza a importar tu contenido<\/strong><\/p> Puedes usar WordPress Importer<\/u><\/a> 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.<\/p> 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.<\/p> Esta opción funciona mejor con sitios de pocas páginas o si tu prioridad es tener un diseño nuevo y moderno.<\/p> 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.<\/p> Nota importante:<\/strong> 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<\/strong>. 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.<\/p> Una vez que hayas convertido tu sitio HTML a WordPress, se abrirá un mundo de posibilidades. WordPress ofrece un sinfín de opciones, desde plugins que amplían funciones hasta temas que transforman tu diseño.<\/p> Aquí tienes algunas formas de llevar tu nuevo sitio de WordPress un paso más allá:<\/p>\n
<\/strong>Ahora vamos a crear una hoja de estilo de WordPress copiando tu CSS antiguo. Ve al archivo style.css<\/strong> y pega este código:<\/p>\/*\nTheme Name: Mi Tema\nAuthor: LakiGarang\nAuthor URI: https:\/\/hostinger.com\/tutorials\/author\/luqman\nDescription: Un tema de desarrollo, de HTML estático a WordPress\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>
3. Divide tu HTML antiguo<\/strong>
<\/strong>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.
<\/p>![\"Ejemplo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/10\/Ejemplo-de-como-convertir-html-a-wordpress.jpg\")
<\/figure><!DOCTYPE html>\n\n<!--[si lt IE 7]><html lang=\"en-US\" class=\"ie6\"><![endif]-->\n<!--[si IE 7]><html lang=\"en-US\" class=\"ie7\"><![endif]-->\n<!--[si IE 8]><html lang=\"en-US\" class=\"ie8\"><![endif]-->\n<!--[si IE 9]><html lang=\"en-US\" class=\"ie9\"><![endif]-->\n<!--[si gt IE 9]><html lang=\"en-US\"><![endif]-->\n<!--[si !IE]><html lang=\"en-US\"><![endif]-->\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width\" \/>\n<title>Escritora e Instructora de WordPress | RACHEL McCOLLIN<\/title>\n\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\">\n\n<\/head>\n\n<body>\n\n <div class=\"header-bg\">\n\n <header role=\"banner\">\n\n <hgroup class=\"site-name three-quarters left\">\n\n <!-- 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 -->\n <h1 id=\"site-title\" class=\"one-half-left\">\n <a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\">RACHEL McCOLLIN<\/a>\n <\/h1>\n\n <h2 id=\"site-description\">Escritora de Ficción y Técnica<\/h2>\n\n <\/hgroup>\n\n <div class=\"right quarter\">\n\n <a class=\"toggle-nav\" href=\"#\">☰<\/a>\n\n <\/div> <!-- .right quarter -->\n\n <\/header><!-- header -->\n\n <\/div><!-- header-bg-->\n\n <!-- full width navigation menu -->\n <nav class=\"menu main\">\n\n <div class=\"skip-link screen-reader-text\"><a href=\"#content\" title=\"Skip to content\">Skip to content<\/a><\/div>\n\n <div class=\"main-nav\">\n <ul class=\"menu\">\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/\">Home<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/about-me\/\">About Me<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/books\/\">Libros<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/bookclub\/\">Club de lectura<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/blog\/\">Blog<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/contact\/\">Contacto<\/a><\/li>\n <\/ul>\n <\/div> \n\n <\/nav><!-- .main -->\n\n <div class=\"main\">\n\n <div id=\"content\" class=\"two-thirds left\">\n\n <article class=\"post\">\n\n <h2 class=\"entry-title\">Welcome to This Website<\/h2>\n\n <section class=\"entry-content\">\n\n <p>Este sitio se compone de un archivo HTML estático.<\/p>\n\n <p>Podrás añadir más contenido más adelante a través de las pantallas de administración de WordPress.<\/p>.\n\n <h3>Aquí tienes un encabezado para que puedas comprobar el estilo<\/h3>\n <p>Y otro párrafo debajo.<\/p>\n <p>Y una lista:<\/p>\n\n <ul>\n\n <li>Elemento 1<\/li>\n <li>Elemento 2<\/li>\n <li>Y así sucesivamente...<\/li>\n\n <\/ul>\n\n <\/section><!-- .entry-content -->\n\n <\/article><!-- #post-## -->\n\n <\/div><!-- #content -->\n\n <aside class=\"sidebar one-third right\">\n\n <aside class=\"widget-area\">\n\n <div class=\"widget-container\">\n\n <h3 class=\"widget-title\">Compra mi libro<\/h3>\n\n <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;\" \/>\n\n <p><em>WordPress: Pushing the Limits<\/em> te ayudará a convertirte en un desarrollador profesional de WordPress.<\/p>\n\n <\/div>\n\n <\/aside>\n\n <\/aside>\n\n <\/div><!-- .main -->\n\n <footer>\n\n <div class=\"fatfooter\">\n\n <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>\n\n <\/div>\n\n <\/footer>\n\n<\/body>\n<\/html><\/pre>
<\/p>
<\/strong><\/p>
Además, justo antes del elemento <\/head>,<\/strong> copia y pega <?php wp_head();?><\/strong> para garantizar que los plugins de WordPress funcionen bien. Cuando hayas terminado, guarda el archivo.<\/p><!DOCTYPE html>\n<!--[si lt IE 7]><html lang=\"en-US\" class=\"ie6\"><![endif]-->\n<!--[si IE 7]><html lang=\"en-US\" class=\"ie7\"><![endif]-->\n<!--[si IE 8]><html lang=\"en-US\" class=\"ie8\"><![endif]-->\n<!--[si IE 9]><html lang=\"en-US\" class=\"ie9\"><![endif]-->\n<!--[si gt IE 9]><html lang=\"en-US\"><![endif]-->\n<!--[si !IE]><html lang=\"en-US\"><![endif]-->\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width\" \/>\n<title>Escritora e Instructora de WordPress | RACHEL McCOLLIN<\/title>\n\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\">\n<?php wp_head();?>\n<\/head>\n\n<body>\n\n <div class=\"header-bg\">\n\n <header role=\"banner\">\n\n <hgroup class=\"site-name three-quarters left\">\n\n <!-- 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 -->\n <h1 id=\"site-title\" class=\"one-half-left\">\n <a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\">RACHEL McCOLLIN<\/a>\n <\/h1>\n\n <h2 id=\"site-description\">Escritora técnica y de ficción<\/h2>\n\n <\/hgroup>\n\n <div class=\"right quarter\">\n\n <a class=\"toggle-nav\" href=\"#\">☰<\/a>\n\n <\/div> <!-- .right quarter -->\n\n <\/header><!-- header -->\n\n <\/div><!-- header-bg-->\n\n <!-- full width navigation menu -->\n <nav class=\"menu main\">\n\n <div class=\"skip-link screen-reader-text\"><a href=\"#content\" title=\"Skip to content\">Skip to content<\/a><\/div>\n\n <div class=\"main-nav\">\n <ul class=\"menu\">\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/\">Inicio<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/about-me\/\">Sobre mí<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/books\/\">Libros<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/bookclub\/\">Club de Lectura<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/blog\/\">Blog<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/contact\/\">Contacto<\/a><\/li>\n <\/ul>\n <\/div> \n\n <\/nav><!-- .main --><\/pre>
<\/strong>Aquí va todo lo que pertenece a la sección `<aside … <\/aside><\/strong>` de tu HTML antiguo. Cuando lo tengas, guárdalo.<\/p><aside class=\"sidebar one-third right\">\n\n <aside class=\"widget-area\">\n\n <div class=\"widget-container\">\n\n <h3 class=\"widget-title\">Compra Mi Libro<\/h3>\n\n <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;\" \/>\n\n <p><em>WordPress: Pushing the Limits<\/em> te ayudará a convertirte en un desarrollador profesional de WordPress.<\/p>\n\n <\/div>\n\n <\/aside>\n\n <\/aside><\/pre>
<\/div><!-- .main -->\n\n <footer>\n\n <div class=\"fatfooter\">\n\n <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>\n\n <\/div>\n\n <\/footer>\n\n <?php wp_footer();?>\n\n<\/body>\n\n<\/html><\/pre>
4. Cambia el estilo al formato de WordPress<\/strong><\/p><link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/><\/pre>
<link rel=\"stylesheet\" href=\"<?php echo get_template_directory_uri(); ?>\/style.css\" type=\"text\/css\" media=\"all\" \/><\/pre>
Vamos a pasar al archivo index.php<\/strong>. Por el momento debe estar en blanco, así que copia y pega estas líneas de código:<\/p><?php get_header(); ?>\n\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/pre>
Para hacerlo tienes que pegar el siguiente código justo después de <?php get_header(); ?><\/strong>:<\/p><?php while ( have_posts() ) : the_post(); ?>\n<article class=\"<?php post_class(); ?>\" id=\"post-<?php the_ID(); ?>\">\n <h2 class=\"entry-title\"><?php the_title(); ?><\/h2>\n <?php si ( !is_page() ):?>\n <section class=\"entry-meta\">\n <p>Posted on <?php the_date();?> by <?php the_author();?><\/p>\n <\/section>\n <?php endif; ?>\n <section class=\"entry-content\">\n <?php the_content(); ?>\n <\/section>\n <section class=\"entry-meta\"><?php si ( count( get_the_category() ) ) : ?>\n <span class=\"category-links\">\n Posted under: <?php echo get_the_category_list( ', ' ); ?>\n <\/span>\n <?php endif; ?><\/section>\n <\/article>\n\n<?php endwhile; ?><\/pre>
<\/strong>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<\/strong> para facilitar la instalación.<\/p>![\"Sube](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/10\/Sube-tu-tema-a-WP.jpg\")
<\/figure>![\"Tema](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/10\/Tema-subido-a-WP.jpg\")
<\/figure>
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.<\/p>2. Usa un tema hijo basado en un tema existente<\/h3>
Los temas hijo te permiten crear sobre la base de un tema principal existente (el tema padre<\/strong>) 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
<\/strong>Selecciona un tema principal con una estructura similar a la de tu sitio anterior para minimizar los ajustes del diseño. Puedes optar por un tema gratuito<\/u><\/a> del directorio de WordPress que se ajuste a tus necesidades. Por ejemplo, podrías empezar con un tema clásico como Twenty Twenty-Five<\/strong>.
Paso 2: crea un tema hijo<\/strong><\/p>
En esta nueva carpeta, vas a necesitar dos archivos fundamentales:<\/p>\n
<?php\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n\nfunction my_theme_enqueue_styles() {\n\n wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n\n}\n\n?><\/pre>3. Renuncia al diseño y conserva solo el contenido<\/h3>
\n
Cómo sacar el máximo provecho de tu sitio de WordPress<\/h2>
\n
![\"\"](\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\")
<\/a><\/figure><\/div>