¿Cómo convertir un sitio web HTML a WordPress gratis? Guía

Publicado: 2015-05-18

Al principio, todos los sitios web se hicieron con texto y HTML estático. No había WordPress y era necesario convertir un sitio web HTML a WordPress o cualquier otro sistema CMS.

Muchas empresas todavía dependen de sitios web HTML simples para su presencia en línea. Estos sitios HTML suelen ser de naturaleza estática. Esto significa que incluso el cambio de un detalle menor en el sitio web se realiza editando el archivo de codificación.

Ahora, más de 20 años después, la web es un lugar muy diferente. Con más del 25% de la web , WordPress se está convirtiendo cada vez más en el sistema de gestión de contenido (CMS) preferido por el usuario medio.

Los sitios web son mucho más complejos. Proporcionan experiencias más ricas y agradables tanto para los creadores de sitios como para los visitantes. ¿Pasar a WordPress significa comenzar de nuevo y perder todo el tiempo, la energía y el dinero invertidos en el sitio web actual?

Tabla de contenido

Sitio web HTML

No importa cómo esté codificado su sitio, una vez que un visitante carga una página en su sitio, el navegador toma todos los bits y piezas (inclusiones del lado del servidor, imágenes de otro directorio, etc.) y los pone todos juntos en un HTML estático final. página.

Incluso si algunos elementos de la página siguen siendo dinámicos, el código en sí está todo junto en un lugar que se puede mover a una página de WordPress que aún funcionaría. Puede haber algunas excepciones a eso, pero para la mayoría de los sitios, eso sería cierto.

Incluso si su sitio consta de somepage.php, que llama a un archivo llamado header.inc, y un archivo llamado footer.php, cuando el usuario ve somepage.php en un navegador, el código fuente resultante está todo en un solo lugar , como si fue codificado a mano como una página HTML estática.

Este es el tipo de código que se necesita para convertir un sitio a WordPress. Cualquiera que tenga una instalación de WordPress y el tema / complementos adecuados puede tener un sitio web moderno con un diseño y una funcionalidad avanzados.

Migrar desde un sitio HTML estático a los pasos previos de WordPress

Si está listo para cambiar a WordPress, a continuación se muestran cuatro pasos a tener en cuenta:

1. Analice su sitio HTML existente

Revise su sitio en busca de contenido irrelevante o desactualizado y, si lo encuentra, límpielo. Examine el sistema de navegación actual y piense cómo se puede mejorar. Hacer el análisis de su sitio HTML lo ayudaría a decidir qué contenido, características y funcionalidades se deben migrar a WordPress.

Esto le dará una idea clara sobre qué complementos necesita instalar para obtener la misma funcionalidad en la plataforma WordPress.

2. Conozca WordPress

La instalación de WordPress es un proceso bastante sencillo. La mayoría de los servidores web ofrecen instalación con un solo clic. Si no está familiarizado, sería bueno leer e informar sobre la nueva plataforma en la que trabajará su sitio.

3. Realice una copia de seguridad de su sitio HTML

Se recomienda encarecidamente realizar una copia de seguridad completa de su sitio estático para evitar cualquier riesgo de pérdida de datos durante la migración.

4. Convertir un sitio web HTML a WordPress

Suponiendo que tenga suficientes conocimientos de codificación y que su sitio sea pequeño, la mejor opción posible frente a usted es dividir su código HTML existente en cuatro secciones (encabezado, pie de página, barra lateral y contenido) y luego copiar el contenido de cada sección en su respectivo archivo PHP.

En caso de que su sitio sea grande, puede aprovechar un complemento de HTML a WordPress, como HTML Import 2 o contratar a alguien para convertir HTML en WordPress.

Cómo convertir un sitio web HTML a un tutorial de WordPress

La forma en que elija convertir su sitio HTML estático en un sitio de WordPress dependerá sin duda de sus preferencias personales, el tiempo deseado / inversión monetaria y el nivel de habilidad con el código.

Método 1

Con este método para convertir un sitio web HTML a WordPress, mantendrá el mismo diseño y apariencia del sitio.

1. Descargue las páginas HTML de su host actual. Utilice WinHTTrack para hacer esto. Es una gran herramienta gratuita que es muy fácil de usar. Asegúrese de tomar la carpeta de imágenes también (o donde tenga sus imágenes en el sitio anterior).

2. Instale WordPress en su nuevo servidor web.

  • Establezca su estructura de enlace permanente en "Nombre de la publicación" (/% postname% /)
  • Marque la casilla "Disuadir a los motores de búsqueda de indexar este sitio" (solo hasta que todo esté listo).
  • Instale algún complemento de modo de mantenimiento (si lo desea) para que nadie más que usted pueda acceder a su nuevo WordPress.
  • Instale el complemento de WordPress gratuito HTML Import 2. Úselo para "cargar" el sitio antiguo en su nuevo sitio. Guía de usuario para importar todo su directorio de páginas HTML.

3. Cargue el contenido que acaba de descargar del paso 1 en su nueva estructura de archivos de alojamiento web. Colóquelos en una carpeta llamada, por ejemplo, "html-files-to-import". Sube todas las imágenes antiguas a tu biblioteca multimedia en WordPress en tu nuevo sitio.

4. Ejecute Importar

5. Prepare su símbolo del sistema de DOS y Excel

  • En el indicador de DOS, navegue hasta donde colocó sus archivos HTML (es más fácil ponerlos en una carpeta llamada "su sitio web" y poner esa carpeta en la unidad C: \). Luego, inicie este comando: i. dir> archivos.txt
  • Abra el archivo files.txt en Excel.
  • Ahora a Excel. Básicamente, utilizará un par de funciones de Excel, incluida la de "concatenar" para representar el código "canónico" que colocará en los archivos HTML.
  • Coloque el código canónico correspondiente en cada archivo HTML. Puede hacer esto, contratarlo a un subcontratista o contratar a alguien para que escriba el código PHP que lo haría automágicamente.

6. Cargue los archivos HTML a su proveedor de alojamiento web . Colóquelos en la carpeta ROOT (es decir, la más alta) de su nuevo sitio web. No olvide cargar la carpeta de imágenes también en ROOT.

7. Asegúrese de que todo funcione en el nuevo sitio.

8. Desmarque la casilla del Paso # 2 - "No anime a los motores de búsqueda a indexar este sitio" y desactive el complemento HTML Import 2.

9. Cambie el DNS en su registrador.

10. Asegúrese de que la URL de su sitio tenga la dirección IP correcta (su nueva IP, no la antigua) y que TODAS las páginas se carguen correctamente. Es posible que deba esperar unas horas para que los servidores de nombres se actualicen.

11. Puede eliminar las páginas HTML antiguas después de un tiempo, pero no es necesario. No recibirá penalizaciones por "contenido duplicado" porque las referencias canónicas se encargan de eso.

Querrá agregar redireccionamientos en su archivo .htaccess que apunten sus antiguas "páginas .html" a sus nuevas páginas de WordPress.

Método 2

Si su objetivo es no solo obtener su contenido de su sitio HTML estático en WordPress, sino también duplicar su diseño actual, esto significa que deberá crear su tema personalizado.

Solo implica crear algunas carpetas y archivos, copiar y pegar un poco y luego cargar el resultado. Necesitará un editor de código como Sublime o Notepad ++ y acceso tanto al directorio de su sitio HTML como al directorio de instalación de su nuevo WordPress.

1. Cree una nueva carpeta de temas y los archivos necesarios. En su escritorio, cree una nueva carpeta para guardar los archivos de su tema. Nómbrelo como quiera que se identifique su tema.

A continuación, cree algunos archivos (que van todos en su nueva carpeta de temas) en su editor de código:

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

2. Copie el CSS existente en una nueva hoja de estilo. Si está buscando duplicar un diseño, esto probablemente significa que tiene al menos algo de CSS que desea guardar. Entonces, el primer archivo que querrá editar es su archivo Style.css.

Para comenzar, agregue lo siguiente al principio de su archivo.

 / *
 Nombre del tema: reemplácelo con el nombre de su tema.
 URI del tema: el URI de su tema
 Descripción: una breve descripción.
 Versión: 1.0
 Autor: usted
 URI del autor: la dirección de su sitio web.
 * /

Después de esta sección, solo pegue su CSS existente a continuación. Guarde y cierre el archivo.

3. Separe su HTML actual

Aquí viene el proceso de cortar y pegar partes de su código existente en los diferentes archivos que creó.

  • Primero, abra el archivo index.html de su sitio actual. Resalte todo, desde la parte superior del archivo hasta la etiqueta de apertura div class = ”main” . Copie y pegue esta sección en su archivo header.php , guárdela y cierre.
  • Regrese a su archivo index.html . Resalte el elemento aparte class = ”sidebar” y todo lo que contiene. Copie y pegue esta sección en su archivo sidebar.php , guárdela y cierre.
  • En su index.html, seleccione todo después de su barra lateral y cópielo y péguelo en su archivo footer.php , guárdelo y ciérrelo.
  • En su archivo index.html , seleccione todo lo que queda (esta debería ser la sección de contenido principal) y péguelo en su archivo index.php . Guardar, pero no cerrar todavía. Sin embargo, puede cerrar su archivo index.html ahora y continuar con los pasos finales. ¡Casi termino!

4. Finalice el archivo Index.php

Para finalizar el archivo index.php de su nuevo tema, debe asegurarse de que pueda acceder a la otra sección (además del contenido principal) que se encuentra en los otros archivos que ha creado.

En la parte superior de su archivo index.php, coloque la siguiente línea de php.

<?php get_header(); ?>

Luego, en la parte inferior de su archivo index.php, coloque estas líneas de php.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ahora tienes "The Loop". Esta es la parte principal de php que usa WordPress para mostrar el contenido de su publicación a los visitantes. Entonces, el paso final para crear el archivo index.php de su nuevo tema es agregar el código a continuación dentro de la sección de contenido.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- post header--> end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!-- entry--> end entry-->
<div class = "post-footer" >
<div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div>
</div><!-- end post footer-->
</div><!-- end post-->
<?php endwhile ; /* rewind or continue if all posts have been fetched */ ?>
<div class = "navigation index" >
<div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

Guarde su index.php y cierre. ¡Tu tema ya está terminado! Todo lo que queda es subirlo a su sitio web de WordPress.

5. Sube tu nuevo tema

Ahora almacenará los archivos de temas creados dentro de su nueva carpeta de temas. Instala WordPress.

Coloque su nueva carpeta de temas dentro de / wp-content / themes / . Vaya a WP Admin> Apariencia> Temas y debería ver el tema recién creado allí. ¡Actívalo! Todo lo que queda por hacer en este punto es completar su nuevo sitio web de WordPress con el contenido de su sitio anterior.

6. Copie el contenido del sitio HTML a WordPress

En WP Admin, vaya a Complementos> Agregar nuevo. Busque un complemento llamado HTML Import 2 de Stephanie Leary. Una vez que este complemento esté instalado y activado, siga su guía de usuario para importar su directorio completo de páginas HTML. Después de esto, su sitio debería verse como antes, simplemente ejecutándose en WordPress.

Uso de un tema de WordPress existente para convertir un sitio HTML (método más fácil)

Si los pasos anteriores parecen demasiado intensivos o lentos, hay otra forma. Esta es la manera más fácil.

En lugar de convertir el diseño HTML existente para que se vea igual en WordPress, puede aprovechar cualquiera de los miles de temas disponibles en el mercado de WordPress.

Hay temas gratuitos y temas premium. Una vez que haya elegido un tema que le guste (y haya descargado su paquete de archivo comprimido), instale / active su nuevo tema de WordPress.

Una vez hecho esto, tendrá un nuevo sitio web y tema de WordPress. Cuando obtenga una vista previa de su sitio, estará vacío. Es hora de importar contenido y finalizar el proceso para convertir un sitio web HTML en un sitio de WordPress.

En WP Admin, vaya a Complementos> Agregar nuevo y busque un complemento llamado HTML Import 2. Siga la guía del usuario para importar todo su directorio de páginas HTML. Después de esto, tendrá todo su contenido anterior pero con un nuevo aspecto.

4 Convierta HTML a WordPress con Theme Matcher

También puede utilizar Theme Matcher. Ofrece conversión automática de HTML a WordPress. Simplemente ingrese a su sitio y seleccione el área apropiada. Theme Matcher toma imágenes, estilos y diseño de su sitio web existente.

Convertir-sitio-HTML-en-sitio-WordPress-con-tema-matcher

5 Servicio de conversión de HTML a WordPress

HTML a WordPress convierte sus diseños HTML en temas de WordPress sin la necesidad de que escriba una sola línea de PHP.

Puede elegir el plan de servicio donde convertirán su sitio web HTML estático a WordPress. Esta opción puede aumentar el precio. También puede elegir la opción Convertidor, que es significativamente más barata.

Servicio de conversión de HTML a WordPress

La conversión es totalmente automatizada y la funcionalidad del tema se puede ampliar simplemente agregando clases de convertidor con el prefijo "wp-" en su HTML.

El convertidor crea plantillas para cada archivo HTML y hace referencia a sus activos y completa todas esas funciones php necesarias. Utilice Bootstrap, Webflow, Dreamweaver o cualquier herramienta / marco con el que se sienta cómodo para crear sitios web. Siempre que el sitio web esté hecho con HTML, puede convertirlo en un tema.

¿Qué hay que hacer después de la migración?

Una vez que se completa la conversión, debe hacer algunas cosas para darle a su sitio de WordPress el toque final.

  • Instale los complementos necesarios: para potenciar su nuevo sitio de WordPress con las mismas funcionalidades que el sitio HTML, instale los complementos que le resultaron útiles.
  • Verifique y repare los enlaces rotos: revise su sitio web en busca de enlaces rotos (errores 404) y, si los encuentra, corríjalos.
  • Configure una página de error 404 personalizada: agregue una página de error 404 personalizada para llevar a sus visitantes a secciones relevantes de su sitio de WordPress, en caso de que intenten acceder a cualquier URL que no exista.
  • Enlaces de redireccionamiento: para informar a los motores de búsqueda que el contenido de su sitio web se ha movido a una nueva dirección web, configure los redireccionamientos 301. Para este propósito, puede utilizar Simple 301 Redirect.
  • Habilite la indexación de motores de búsqueda : vaya a " Configuración -> Lectura " en su panel de WordPress y marque " Permitir que los motores de búsqueda indexen este sitio " para que los motores de búsqueda indexen su sitio.
  • Genere y envíe un mapa del sitio XML : para asegurarse de que su sitio se incluya en los resultados del motor de búsqueda lo más rápido posible, cree un mapa del sitio XML y envíelo a Google.

WordPress vs HTML - PROS Y CONTRAS

Lanzar un sitio web comercial no es un proceso fácil. Uno de los mayores dilemas es si elegir un sitio HTML estático o optar por WordPress.

WordPress: WordPress se percibe como un CMS (sistema de gestión de contenido). Versión HTML simplificada para que los usuarios no técnicos agreguen y modifiquen cosas en sus sitios web.

Los sitios CMS suelen ser dinámicos, lo que significa que no hay restricciones sobre la frecuencia con la que cambia su contenido. Puede cambiar todo, desde imágenes hasta textos completos.

La interfaz es muy simple y fácil de usar, y nadie necesita ninguna formación especial para aprenderla. El mercado de CMS es altamente competitivo, pero WordPress supera a la competencia en todo momento.

Otra cosa que debe recordar antes de comenzar es que existe una diferencia significativa entre WordPress.com y WordPress.org porque este último es un CMS de código abierto. WordPress.com, por otro lado, funciona como un servicio de alojamiento de blogs.

Ventajas de usar WordPress:

  • Le proporciona miles de complementos para agregar al sitio la funcionalidad que le falta.
  • Una modificación es posible en cualquier momento y nadie te está limitando.
  • En comparación con la configuración de HTML, WordPress tarda mucho menos en configurarse.

Desventajas de usar WordPress:

  • No puede simplemente configurarlo y olvidarlo. Requiere atención de tiempo completo y actualización constante de software, complementos y temas.
  • Los piratas informáticos atacarán sitios web mal protegidos y no actualizados. Corre el riesgo de que su sitio web no funcione en absoluto si no se mantiene al día con las actualizaciones.
  • WordPress es fácil, pero no tanto para principiantes. Hay muchos tutoriales en línea y materiales completos que lo ayudarán a superar la curva de aprendizaje.

Sitios web HTML estáticos: antes no existían las plantillas, y la única forma de crear un sitio web era contratar a un profesional en programación para que lo hiciera por usted.

Por lo tanto, todos los sitios web se crearon como HTML estático (lenguajes de marcado de hipertexto). El punto era tener un sitio web. No modificar el contenido ni su diseño, porque tendría que volver a contratar al desarrollador HTML.

En los sitios web HTML, el contenido se almacena en archivos estáticos, lo que hace que sea increíblemente difícil modificarlo.

Ventajas del sitio web HTML:

  • Una vez que el sitio web está en línea, no es necesario que lo actualice ni haga una copia de seguridad. La mayoría de las veces, no es necesario cambiar nada en ese sitio web.
  • Los sitios web HTML son básicos y fáciles de configurar.
  • Su tamaño y el hecho de que utilizan menos recursos que los sitios dinámicos les dan una ventaja de velocidad significativa en comparación con los sitios dinámicos, lo que los hace cargar mucho más rápido.

Desventajas del sitio web HTML:

Debes ser profesional en lenguajes de marcado. De lo contrario, no podrá realizar ninguna actualización significativa en su sitio web. Contratar a un desarrollador web una y otra vez tendrá un costo, incluso si su sitio web es realmente pequeño o muestra solo información trivial.

Otra desventaja importante es que no puede agregar complementos , lo que significa que se enfrenta a una grave falta de funcionalidad.

Cómo convertir HTML a resumen de WordPress

Ya sea que necesite más de su sitio o cree uno nuevo con una plantilla en mente, el proceso de conversión puede parecer bastante complicado para un principiante. La paciencia y el conocimiento te permitirán hacer lo que tienes que hacer con cierto nivel de éxito.

Una vez que su sitio esté activo, puede enorgullecerse de saber que aprendió cómo hacer algo nuevo y pudo aplicar ese conocimiento en su sitio web.

Espero que al menos uno de los métodos anteriores te haya ayudado a convertir un sitio web HTML a WordPress. Si tiene algún otro método o tutorial, hágamelo saber. ¿Alguna vez convirtió HTML en WordPress y cuáles son sus experiencias con él?