Migrar de HTML a WordPress

html a wordpress

Aún hay muchas webs estáticas en HTML, quizás más de las recomendables, pues hasta no hace muchos años era el estándar que te ofrecían desarrolladores a lo largo y ancho del mundo.

Nota: esta entrada contiene enlaces de afiliado por los que el autor puede cobrar comisiones por cada venta.

La principal desventaja de tener una web estática en HTML es que el contenido es, eso mismo, estático, requiriendo la creación o modificación expresa del HTML para tener contenido nuevo, algo ya caduco y en desuso con la introducción de los sistemas de gestión de contenidos (CMS).

Si es tu caso, y tienes una web estática en HTML con un buen montón de páginas creadas no te apures pues es bastante fácil pasar contenido y diseño de HTML a WordPress. Vamos a ver los dos asuntos que tienes que abordar.

1. Convertir páginas HTML estático a WordPress

Hay un paso previo, y es instalar un WordPress donde acomodar tus páginas en HTML. Una vez lo tengas hay varias maneras de pasar de páginas HTML a entradas (o páginas) WordPress:

  1. Hacerlo a mano. Si no tienes muchas páginas no te compliques, simplemente copia y pega el texto de la página HTML en el editor de entradas de WordPress y publica.
  2. URL cloner sería otra opción, pues es un increíble plugin permite importar contenido de cualquier URL a WordPress.
  3. HTML Import, un sencillo plugin que, una vez activo, te ofrece una amplia página de ajustes para importar cualquier web HTML a WordPress. Es muy preciso y efectivo.

2. Convertir el diseño HTML a WordPress

Mi consejo sería que no te compliques e instales uno de los miles de maravillosos temas WordPress que existen, pero si tienes algún cariño especial por un diseño HTML previo hay algunas cosas que debes saber.

2.1 Crea el tema WordPress

Lo primero es crear una carpeta y nombrarla con el nombre del tema que quieras. Luego hay que crear dos nuevos archivos, style.css e index.php, y colocarlos en esa carpeta. Son los únicos archivos que WordPress necesita, lo creas o no. Ahora copia y pega el código de tu archivo CSS original en el fichero style.css recién creado. Al principio añade lo siguiente:

Estos comentarios identifican el tema cómo hecho para WordPress. Tu hoja de estilos ya estaría lista.

2.2 Descuartiza el HTML

Lo podría decir más finamente pero la realidad es que un tema WordPress es una especie de HTML descuartizado, o dicho más finamente, “deconstruido“. De paso, hay que incorporar las llamadas PHP que harán que el HTML se comunique con la base de datos, imprescindible en cualquier CMS para archivar la información dinámica del contenido.

Los temas WordPress son varios archivos PHP donde hay llamadas que reclaman el código del resto de archivos para mostrarlos en un orden determinado. La estructura básica de un tema WordPress sería: cabecera (header.php) que llama al bloque de contenido (index.php) y este a su vez a la barra lateral de recursos de navegación (sidebar.php) para, al final, cerrar con un pié de página informativo (footer.php).

WordPress, en vez de tener todo este código HTML en un solo archivo lo “descuartiza” en varios que se “llaman” entre ellos mediante PHP.

Así que, para empezar, debes ir a tu código HTML y añadir unas marcas en los 4 lugares principales donde planees hacer los cortes del código para estas 4 secciones principales. Por supuesto, esto asumiendo que tu diseño previo contiene esos elementos (cabecera, cuerpo, barra lateral y pié), sino adáptalo a lo que tengas.

Así que, siguiendo el ejemplo, crea 3 nuevos archivos: header.php, sidebar.php y footer.php, y sitúalos en la carpeta del tema que creaste antes.

Antes de ponernos revisa el código del fichero header.php del tema Twenty Ten que viene por defecto en toda instalación de WordPress. Observa el PHP utilizado entre las etiquetas . Copia este código en tu nuevo archivo header.php. Ahora abre el HTML original y copia el código marcado previamente para la cabecera (primera sección) en este archivo header.php, justo debajo de la sección . Guarda y cierra.

Ahora abre el archivo index.php que creaste al principio y copia la segunda sección de tu código HTML original que marcaste como tal antes. Guarda y cierra también.

Haremos lo mismo con las siguientes secciones en los nuevos ficheros sidebar.php y footer.php que crearemos.

2.3 Ajusta la maquinaria

Una vez hecho lo anterior tu código HTML original debería estar ya descuartizado en 4 archivos distintos (header.php, index.php, sidebar.php, footer.php). Así que ahora toca ponerlos a funcionar juntos usando unas líneas de PHP.

Abre el archivo index.php, que debería contener el HTML de la segunda sección de tu código original. Añade esta línea al principio de todo:

Ahora vamos al final de este mismo archivo y añadimos lo siguiente:

Con estas tres líneas de código PHP estamos diciendo a WordPress que recupere y muestre tus archivos header.php, sidebar.php y footer.php dentro de tu archivo index.php.

Con esto tu código ya está en marcha y reconocido por WordPress, listo para mostrarlo adecuadamente. A partir de este momento si quieres cambiar algo en la barra lateral no hay que modificar el fichero index.php sino solo las pocas líneas de sidebar.php, por ejemplo. Tu diseño ya está “deconstruido“.

2.4 El Loop

El index.php ya está casi terminado. El paso final es insertar el contenido dinámico en el código. Para eso existe WordPress, y mediante PHP es muy fácil recuperarlo.

El Loop es la parte de un tema WordPress utilizada para llamar y mostrar las publicaciones dinámicas desde la base de datos donde están almacenadas.

Copia este código y pégalo en tu nuevo archivo index.php (dentro del div que estés usando para la parte del contenido):

Esta es una versión básica del Loop. WordPress lo usará para mostrar tus publicaciones y comentarios.

2.5 Para finalizar

Sube la carpeta de tu tema por FTP dentro de la carpeta /wp-content/themes/ donde esté instalado WordPress, o desde el instalador de temas de WordPress.

Actívalo y ya tienes tu tema WordPress con el diseño previo. Debes tener en cuenta, eso si, que es una versión muy básica de un tema WordPress, que puedes ampliar hasta el infinito revisando las tags de plantilla en el Codex, la biblia de WordPress.

Y sino, pues lo que te decía antes, que te olvides de lo viejo e instales algún maravilloso tema. Estos son los que más me gustan a mi.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (12 votos, promedio: 4,50 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.

Autor del libro WordPress – La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar