Cómo pasar una web de HTML a WordPress

Cómo pasar una web de HTML a WordPress

Cómo pasar una web de HTML a WordPress

Tiempo de lectura: 5 minutos

A día de hoy la gran mayoría de las webs están hechas con HTML como base de programación. Pero, en ocasiones, podemos necesitar pasar una web diseñada en HTML a WordPress.

Los motivos pueden ser muchos, pero principalmente será la facilidad para poder gestionar los contenidos de la web. Además, la publicación de los cambios de una web en HTML requiere una conexión FTP, más líos y menos productivo.

Para modificar los contenidos de una web en HTML necesitamos un programa específico, como puede ser DreamWeaver. Sin embargo, para modificar los contenidos de una web en WordPress nos basta con un navegador de internet como Google Chrome, Safari, Firefox…

Cómo pasar una web de HTML a WordPress

Convertir una web hecha en HTML a WordPress es un proceso no demasiado sencillo y, os avanzo, el resultado no siempre es el esperado en cuanto a diseño se refiere. No obstante, os explicaré cómo hacerlo:

Usando un plugin… ¡cómo no!. Aunque también se podría hacer a mano… sería lo ideal para garantizarnos que todos los contenidos se convierten correctamente en WordPress. La forma de hacerlo manualmente:

  • Instalar WordPress.
  • Instalar un tema que nos guste.
  • Copiar y pegar texto y subir imágenes, ¡casi nah!

Así pues, lo ideal es usar el plugin, nos ahorrará mucho tiempo.

Lo que hará el plugin será:

  • Convertir los archivos HTML en PHP.
  • Convertir los archivos de la web hecha en HTML en un tema de WordPress. Creando un archivo index.php y styile.css.
  • Vincular de forma correcta los archivos CSS y JS.
  • Automatizar todo aquello que permita la web de HTML.
  • Crear Widgets para poder editar los contenidos que así lo requieran y poder hacerlo de forma correcta.
  • Crear los menús.
  • «Reprogramar» todos los contenidos (textos e imágenes) para que puedan ser gestionados en WordPress.
  • Más cosas…

El plugin para convertir una web de HMTL en WordPress es  y puedes descargarlo en:

HTML Import 2

Una vez descargado e instalado nos aparecerán las opciones del plugin en «Ajustes», «HTML Import».

La primera pestaña es la de «Files» y contiene todos los ajustes de los archivos que vamos a importar.

Como ves hay un montón de opciones, la mayoría son muy intuitivas, pero vamos a repasar una a una para que no te pierdas:

  1. Directory to import: En este primer campo escribiremos la ruta a la que queremos importar la web. Por defecto nos pone «html-files-to-import».
  2. Old site URL: En este campo debemos poner la URL de la carpeta a la que queremos importar los archivos. Con este dato se creará un .htaccess que servirá para no perder nuestro posicionamiento web.
  3. Default file: Aquí le indicaremos el archivo que por defecto lee nuestro servidor, lo habitual es que sea index.html o index.php.
  4. File extensions to include: En esta opción debemos indicar el tipo de archivos que queremos convertir en posts y páginas. Los archivos más habituales son html y php.
  5. Directories to exclude: En este campo podemos escribir los directorios que no queremos importar.
  6. Preserve fils names: Este campo es muy interesante para decirle que el archivo de la web en html mantenga su nombre pero sin la raíz html. Por ejemplo, si tenemos un archivo quienes-somos.html se llamará quienes-somos en la nueva web en WordPress.

La importación del contenido

En la pestaña de «Content» le indicaremos al plugin cómo se deberá hacer la conversión y de dónde debe coger el contenido de cada página o de cada post.

Vamos a indicarle de dónde sacar el contenido.

Como podéis ver, hay dos apartados. En el primero seleccionaremos el delimitador del contenido, y en el segundo las opciones.

En el primer apartado llamado «Select content by» se divide en:

  • HTML tag: En esta opción debemos indicarle que todo el contenido  será delimitado por una etiqueta tipo <content>, <post>, <articulo>… Le tenemos que poner la etiqueta, el atributo y el valor.
  • DreamWeaver template region: Si nuestra web HTML está hecha con DreamWeaver, aquí pondremos el nombre de la región.
  • Import entire file:  Si escogemos esta opción se importarán todos los contenidos en bruto.

El segungo apartado se llama «More content options» y encontramos estas opciones:

  1. Import linked images: Para decirle que debe importar  las imágenes.
  2. Import linked documents: Para decirle que debe importar  los documentos enlazados.
  3. Update internal links: Aquí le diremos que importe los enlaces internos de la web. Es muy importante marcar esta opción para los menús y los enlaces funcionen.
  4. Use meta description as excerpt: Si marcamos esta opción, se usará la metadescripción como resumen de la entrada o de la página.
  5. Convert special characters (accents and symbols): Con esta casilla se convierten los caracteres especiales como acentos y símbolos.
  6. Clean up bad HTML: Esta opción eliminará todo el contenido que no es HTML como comentarios, etiquetas generados por otros editores.

La importación de los títulos y metas

Una vez que hemos configurado toda la importación del contenido, toca hacerlo con los títulos de las páginas y sus metadatos.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lo primero que debemos saber es dónde están los títulos de nuestra web en HTML:  si bien es un a Etiqueta HTML, región de DreamWeaver o nombre del archivo.

Y, a continuación tenemos las siguientes opciones:

  • Phrase to remove from page title: Aquí podemos poner una o varias palabras o frase de todos los títulos.
  • Title position: Marcaríamos esta opción en el caso de que la etiqueta del título estuviera dentro del contenido.
  • Import files as: Aquí elegiremos si queremos que se importe el contenido como página o como entrada.
  • Set status to: En esta opción elegiremos si queremos que se publiquen todas las entradas o páginas, o bien que queden como borradores.
  • Set timestamps to: Aquí podemos escoger la fecha de publicación de las páginas o entradas.
  • Set author to: Aquí elegiremos el autor de las entradas o páginas que vamos a importar.
  • Import pages as children of: En esta opción le indicaremos el nivel de las páginas.
  • Template for imported pages: Y, finalmente, si queremos que las páginas importadas utilicen la plantilla predeterminada u otra.

Importando los campos personalizados

La opción de «Custom Fields»  solo la usaremos si nuestra web en HTML tiene campos personalizados. Como pueden ser referencias, tallas, precios, etc.

Como en las pestañas anteriores, debemos decirle de dónde importaremos los contenidos, en este caso, los campos personalizados. Si es desde una etiqueta HTML o desde una región de nuestra plantilla de DreamWeaver.

Primero debemos escribir el nombre del campo personalizado y luego en «Select date by:» escogeremos bien una etiqueta HTML o b una región de DreamWeaver para usar como fecha. Y, en la opción de «Custom fields:» haremos lo mismo. Para acabar le diremos el nombre del campo, la etiqueta, el atributo y el valor que queremos asignar a cada campo.

Importando categorías y etiquetas

Si nuestra web en HTML tenía páginas creadas con noticias lo ideal es que las categoricemos. Previamente debemos crear las categorías en nuestro WordPress. En Entradas – Categorías.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Una vez configurado todo le daremos a «Save setting» para guardarlo todo.

Finalizando la importación de nuestra web en HTML a WordPress

Ya casi estamos terminando, y ahora nos iremos a Herramientas, Importar, HTML (y aquí pulsamos en ejecutar importador).

Para probar la configuración que hemos hecho previamente, seleccionaremos la casilla de «a single file» de tal forma que probemos que funciona todo importando un solo archivo html de nuestra antigua web. Seleccionamos el archivo HTML que queramos y le damos a SUBMIT. Si todo ha salido bien nos iremos a Entradas o Páginas y ahí veremos  la página HTML importada. Si está bien sería volver a Herramientas, Importar, HTML (y aquí pulsamos en ejecutar importador) y escogeremos la opción «a directory of files».

Opinión sobre el plugin y este tipo de importación

He probado a importar a WordPress dos antiguas webs que tenía guardadas en HTML y la importación no ha sido del todo satisfactoria. Al menos no lo que esperaba. Me ha importado todos los títulos, metadatos, textos, enlaces e imágenes, pero el diseño se ha movido. No está exactamente igual. Ahora me tocaría enredar con los CSS y trabajar bien los estilos.

 

 

 

 

 

Compártelo con tus contactos y ayúdame a mejorar

Sobre el Autor

Escribir un comentario