Pasar una web de HTML a WordPress

En el tutorial de hoy vemos un clásico: Cómo pasar una web de HTML puro y duro a WordPress, importando todo el contenido automáticamente.

Webs estáticas

Actualmente, 1 de cada 4 webs está hecha en WordPress. De hecho, es el CMS más usado a nivel mundial, sin ningún tipo de duda. Su principal competidor está a sólo un 2,8% del mercado. Pero hay "algo" que le gana. ¿Sabéis qué? Efectivamente. Las webs estáticas. Las que están hechas en HTML.

Como podéis ver, un 57,2% de webs están hechas a mano, sin ningún tipo de gestor de contenidos. Pero si os fijáis en la tendencia de los últimos 4 años, veréis como cada vez hay menos. En poco tiempo han caído 20 puntos que se anotan los CMS, especialmente WordPress.

Si sois implementadores WordPress, habréis notado que cada vez hay más demanda para pasar "webs estáticas" a WordPress. De hecho, os recomendaría ofrecer este servicio si no lo tenéis en vuestro catálogo, pues a mi me llegan cada semana 2 o 3 peticiones de este estilo.

Así pues, la pregunta es... ¿Cómo convertir una web HTML a WordPress? O sea, ¿Cómo convertir una web con varias páginas y entradas "hechas a mano" a páginas y entradas de WordPress?

Evidentemente, una posible forma sería hacerlo a mano, a base de "Copiar y pegar" contenido de la web al editor de WordPress. Y esa es la mejor solución (y la que yo recomiendo) para pequeñas webs corporativas. ¿Pero qué ocurre si se trata de una web con 300 páginas? ¿O un blog con 3.000 artículos? Evidentemente, no sale a cuenta hacerlo uno a uno. ¿Cómo automatizar el proceso?

De HTML a WordPress

Bien, gracias a Stephanie Leary tenemos un fantástico plugin que nos permitirá acelerar y automatizar el proceso sin problemas. Se trata de HTML Import 2. Así que lo instalaremos, lo activaremos, y nos pondremos manos a la obra.

Lo primero será visitas la página de opciones, que tenemos en "Ajustes/Import HTML".

Como podéis ver, por defecto vamos a la pestaña "Files", donde nos va a pedir 6 ajustes para configurar:

1. Directory to import: Aquí tenéis que indicarle el directorio del servidor donde tenéis la web "antigua". Podéis moverla a un directorio llamado "antigua", por ejemplo. O directamente crear el directorio "html-files-to-import" que os propone por defecto.
2. Old site URL: Aquí tenéis que indicar la URL de la ubicación de la web antigua. Normalmente será la raíz de la web, o sea algo del estilo https://boluda.com. Esto se usará para colocar ahí un archivo .htaccess con las redirecciones de las URLs antiguas. Este paso ES MUY IMPORTANTE para el SEO.
3. Default file: Indicar si el servidor usa por defecto el archivo index.html o default.html.
4. File extensions to include: Indicar las extensiones de los archivos que queréis transformar a posts y páginas. Lo normal será "html, php, htm, asp" entre otros.
5. Directories to exclude: En el caso que haya algún directorio que no queráis importar, simplemente lo indicáis aquí, separándolos por comas.
6. Preserve fils names: Si queréis que el slug (permalink, URL) sea el mismo nombre del archivo, seleccionad esta casilla. Así el archivo hola.html pasará a ser un slug en la URL del tipo /hola/.

Importar el contenido

A continuación vamos a la pestaña "Content". Aquí es donde le vamos a decir "cómo" hacer la conversión. Es decir, de dónde debe sacar el contenido del post o página. Tenemos que pensar de en el archivo habrá mucho texto, pero sólo nos interesa el contenido del artículo o página. Pero no el resto.

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

1. Select content by:
   • HTML tag: Le indicaremos el contenido que estará delimitado por una etiqueta como por ejemplo <content> o <entrada> o <article>. Le indicaremos la etiqueta, el atributo y el valor.
   • Dreamweaver template region: Si la web antigua estaba en Dreamweaver, le indicaremos el nombre de la región.
   • Import entire file: Esto simplemente importará todo el contenido, sin limitaciones. Mejor no usar este método a no ser que estemos importando archivos de texto con sólo el cuerpo del artículo.
2. More content options:
   1. Import linked images: Importaremos también las imágenes que aparezcan en el documento.
   2. Import linked documents: Importaremos también los documentos que estemos enlazando (PDFs, audios, vídeos, etc.).
   3. Update internal links: Los enlaces que vayan a la propia página también se importarán.
   4. Use meta description as excerpt: Si la web antigua tiene la meta etiqueta "description", usarla de extracto. Más información en la clase Curso de WordPress SEO #2: Títulos y metaetiquetas.
   5. Convert special characters (accents and symbols): Convertir los caracteres especiales como acentos, la "ñ", etc. Le diremos que sí.
   6. Clean up bad HTML: Quitará todo el HTML que sobra, creado por ciertas aplicaciones estilo FrontPage, Word, etc.

Importante: Esto es para importar archivos HTML a WordPress. Si lo que queréis es migrar de un WordPress a otro, miraros la clase Curso de WordPress Intermedio #6. Duplicar WordPress, que es sólo para eso.

Importar los títulos y metas

Ahora que ya le hemos dicho de dónde sacará el contenido, vamos a por el título de cada página, así como ciertas etiquetas "meta". Lo tenemos en la pestaña "Title & Metadata".

Como veréis, la información que nos pide es muy parecida a la anterior. Primero seleccionaremos de dónde saca el título (Etiqueta HTML, región de Dreamweaver o nombre del archivo). Pero además, tenemos las siguientes opciones:

• Phrase to remove from page title: Si queremos quitar alguna palabra o frase de todos los títulos.
• Title position: Si el título está dentro del contenido, eliminarlo, para que no se repita en el contenido.
• Import files as: Podemos elegir si importar como páginas o entradas.
• Set status to: Si queremos que ya aparezcan como publicados, borradores, o pendientes de revisión.
• Set timestamps to: Si queremos que la fecha establecida sea la del momento de importar, la del momento que se modificó por última vez el archivo, o si queremos sacarla de un campo personalizado.
• Set author to: Seleccionar el usuario que será el autor de estos posts o páginas que vamos a importar.
• Import pages as children of: Si queremos que sean páginas hijas de otra página, la seleccionamos del listado.
• Template for imported pages: Si queremos que sean páginas, podemos seleccionar la plantilla de página que queramos que se les establezca.

Campos personalizados

En el caso que el contenido que estemos importando tenga campos personalizados, tales como precios, fechas, referencias, o lo que sea, también los podremos importar, estableciéndolos en la pestaña "Custom Fields".

Como ya es costumbre en este plugin, ya véis que primero nos pide de dónde sacar la información, y luego los ajustes.

• Select date by: Elegimos entre una etiqueta HTML o una región de Dreamweaver para usar como fecha.
• Custom fields: Lo mismo. Indicamos el nombre del campo, la etiqueta, el atributo, y el valor para cada campo.

Categorías y etiquetas

En el caso que estemos importando entradas (posts, noticias...), quizás los queremos categorizar y etiquetar. Si ese es el caso, simplemente le indicaremos la categoría que le corresponde, la etiqueta, e incluso (si nuestro theme lo permite), el formato.

A diferencia de los otros apartados, aquí no podemos importar esa información de la página antigua, sino que sólo podemos asignar las taxonomías (categorías y etiquetas) a todos los que importemos. Aún no hay forma de asignarlas dinámicamente pillando un valor del archivo de origen.

Importando un archivo de muestra

Para ilustrar éste tutorial, vamos a ver un ejemplo con un archivo que he creado para la ocasión, simulando un archivo (muy simplificado) HTML:

Como veis, es un archivo muy simple con las etiquetas HTML, TITLE, ARTICLE y un DIV con un campo personalizado en una class llamada "campo". Así pues, rellenaré las pestañas anteriores con la información correspondiente:

• Para el título, la etiqueta "title"
• Para el artículo, la etiqueta "article"
• Para el campo personalizado, la etiqueta "div" con el atributo "campo"
• Importar como páginas

Una vez hecho esto, guardamos las preferencias y le damos a "Importar". Nos aparecerá la siguiente pantalla:

Como veis, hay dos opciones: Importar todos los archivos de un directorio entero, o elegir un solo archivo. En este caso, vamos a seleccionar un directorio, en el que tengo un único archivo que he creado. Le damos a "Submit", y vemos como el plugin empieza un proceso automático de importación:

Este proceso puede tardar segundos, minutos u horas, en función del número de archivos que queráis importar. En todo caso, veremos en todo momento como va el proceso, así como el archivo que se está importando, el ID que se le otorga, la URL antigua, la URL nueva, y el título, que a su vez es un enlace hacia su pagina de edición.

En este caso, si le echamos un vistazo, tiene esta pinta:

Y aquí vemos como se ha importado correctamente el título y el contenido:

Evidentemente, esto ha sido sólo un archivo, y hubiéramos acabado antes copiando y pegando en el editor. Pero si se tratara de 300, o de 3.000, es un método definitivamente mucho más rápido.

Resumen y conclusión

Cada vez hay más demanda para pasar webs estáticas de HTML a WordPress. Si sois implementadores, ya estáis tardando a ofrecer el servicio, y si lo necesitáis para un proyecto vuestro, lo tenéis muy simple.

Gracias al plugin HTML Import 2 podéis importar archivos HTML a WordPress, delimitando tanto título, como contenido e incluso campos personalizados, en un periquete. ¡Incluso se encarga de las redirecciones 301!

Y como siempre, ya lo sabéis: Si queréis aprender mucho más sobre WordPress, marketing Online y desarrollo web, echad un vistazo a los cursos: Más de 6732 vídeos a vuestra disposición. ¡Tarifa plana con acceso inmediato a todos! :)