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:

/*
Theme Name: Remplaza esto con el nombre de tu tema.
Theme URI: La URL donde vas a ofrecer tu tema (si quieres)
Description: Una breve descripción.
Version: 1.0
Author: Tu nombre
Author URI: La URL de tu web personal o la que quieras.
*/

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:

<?php get_header(); ?>

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

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

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):

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
        <div class="date"><?php the_time( 'j M y' ); ?></div>
        <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Enlace permanente a <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <div class="author"><?php the_author(); ?></div>
    </div><!--fin de cabecera de entrada-->
    <div class="entry clear">
        <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
        <?php the_content(); ?>
        <?php edit_post_link(); ?>
        <?php wp_link_pages(); ?>
    </div><!--end entry-->
    <div class="post-footer">
        <div class="comments"><?php comments_popup_link( 'Deje un comentario', '1 comentario', '% comentarios' ); ?></div>
    </div><!--end post footer-->
  </div><!--end post-->
<?php endwhile; /* rebobina o sigue si se han obtenido todas las entradas */ ?>
  <div class="navigation index">
    <div class="alignleft"><?php next_posts_link( 'Entradas anteriores' ); ?></div>
    <div class="alignright"><?php previous_posts_link( 'Entradas siguientes' ); ?></div>
  </div><!--fin navegación-->
<?php else : ?>
<?php endif; ?>

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(17 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 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.

60 comentarios en “Migrar de HTML a WordPress”

      1. Sebastian Prates Garbarino

        Fernando, to tengo una web html estatica, quiero pasarme a una plantilla wp premiun premiun que me gusta mucho, para subir de nivel la web que ya es hora. Todos los archivos html y el index.htm lo tengo en la carpeta directorio. ¿Como hago para no perder todos esos archivos? al Instalr wp se borran todos los archivos html de la carpeta dicrectorio? Espero tus consejos. Muchas gracias

        1. Lo primero que hay que hacer en cualquier migración es una copia de seguridad así que haz una copia de todo en una carpeta nueva o descárgatelos, lo que prefieras.

  1. jose carlos campos

    Una pregunta, pero si te manda un psd y tienes que hacerlo para wordpress, lo mejor que seria seguir por este camino, o utilizar algún programa como Artisteer?

    Gracias por toda la info!!!!!!!!!!

      1. jose carlos campos

        Gracias Fernando si no te importa podría decirme cuales son esas aplicaciones que te hacen el cambio del tirón.
        Un saludo.

        1. Jose Carlos, como te decida Fernando, si te envían un Mockup en PSD el mismo Photoshop puede hacer la conversión a HTML, eso por un lado, por el otro, una vez tengas tu HTML vas a tardar menos convirtiéndolo tu a mano que buscando un programa que lo haga a tu gusto… el proceso completo desde el PSD hasta la plantilla de WordPress lo encuentras aquí:

  2. Pesadilla en la Web

    Alucino con frases ERRÓNEAS de este artículo como «Aún hay muchas webs en HTML, quizás más de las recomendables»…..

  3. Eso, abandonemos ese extraño y malvado «HTML». Aparentemente, las páginas generadas por WordPress deben estar hechas con polvo de hadas y azucar glas.

  4. Pero, ¿tu tienes algo de idea de lo que es HTML? Porque después de leer los dos primeros párrafos me entran ganas de arrancarme los ojos. Me encanta la gente que se cree buena en algo y, ale, a enseñar a los demás sin tener ni pajolera idea. Escribe sobre lo que sepas, yo porque sea programador no me voy a dedicar a dar consejos médicos, y tu deberías hacer lo mismo, si no tienes ni idea de HTML, no hables de ello.

    No es que hoy en día «la mayoría de las webs están hechas en HTML», es que todas y cada una de ellas están hechas en HTML, es el lenguaje que se utiliza para la creación de webs. Tu a lo que te refieres es a webs estáticas, y decir que es algo en desuso es hacernos ver lo equivocado que estás.

    1. Pues si lo has entendido ¿por qué te molestas?. Claramente me refiero a webs estáticas. Por supuesto, cada cual es libre de sacar las cosas de madre lo que quiera.

      Gracias por tu comentario.

      1. Me molesto porque lo que das a entender en este artículo es erróneo, y a la gente que no tiene claro que es HTML le estás dando datos equivocados.

        No creo que a ti te gustara que te enseñaran a freír un huevo con agua, se cocinaría bien, pero no sería un huevo frito.

        1. Es un tema fuera de lugar, si vas a comentar en un blog mejor que sea algo constructivo y si tu sabes más de «HTML» has las correcciones y recomendaciones de una manera humilde, todos estamos en proceso de aprendizaje y entrenamiento dia a dia.

          Saludos, espero te sirva de algo este consejo.

        2. Dani, purismos semánticos aparte, que he tratado de aclarar modificando alguna frase, creo que está bastante claro para que sirve el post (la guía que he pretendido hacer)

        3. Xavier Ocampos

          En realidad no es erróneo en absoluto, Fernando quiso decir una cosa que entendiste perfectamente, y al igual que tu lo entendieron todos los que se están quejando, entonces no entiendo a que viene la queja, ninguno de los presentes es tan inculto en la materia como para no darse cuenta y el hecho que venga alguien a insinuar que no debería haber usado esos términos para todos aquellos que pueden caer en la confusión es prácticamente una ofensa al intelecto de todas las personas que formamos parte de esta comunidad.

          Efectivamente, si se va a comentar mejor que sea algo constructivo y no un simple «a ver que digo ahora para dar la impresión que soy mas entendido en la materia que el autor…»

  5. CabreraLuengo

    Me adhiero a comentarios similares. Para cualquier entendido en creación web, leer migrar de HTML a WordPress le chirría. Inadecuado titulo para el post.

  6. No entiendo porque algunos se molestan por el articulo.

    Yo entendi al leer el articulo que html es la base de toda pagina web, pero hacerlo con puro html nuestra pagina no sera amigablemente editable, el usuario o dueño de la pagina va a tener que necesitar saber html y acceso al ftp para poder cambiar algun texto que ya no quiera que este en su web.

    En cambio si usamos el CMS de wordpress o cualquier otro pues la edicion del contenido es mas amigable, mi papa no necesita tener conocimientos de html ni acceso al ftp para poder cambiar el contenido, solo con saber editar un blog cualquiera ya lo puede hacer…

    Tan dificil es entender el articulo??? o es que aquellos que se ofenden no tienen comprension de lectura??? pues que vayan a leer libros antes de comentar.

    Muy buen articulo.

  7. Xavier Ocampos

    Respecto a la conversión de una plantilla HTML a una plantilla WordPress yo animaría a todos a meterse mas en el tema y aprender como se hace ya que cuando yo empece era de los que opinaban que por dividirse en diferentes archivos era confuso, pero una vez aprendí me di cuenta de mi gravísimo error: El hecho que estuviera dividido en diferentes archivos me facilitaba enormemente la tarea de modificar la plantilla ya que todo tenia un orden y sentido, cada cosa estaba en su sitio a diferencia de las clásicas plantillas de «una-sola-pieza».

    Por lo demás, buen articulo, espero que mas gente se vaya animando a pasarse a WordPress.

  8. Bernan J. Zelaya

    Recientemente estuve actualizando mi sitio web y si hay algo que me preocupa es ¿Cómo hacer más adelante cuando las «entradas tipo blog» que me toca editar manualmente, sean demasiadas?. O por ejemplo si me tocara editar algo en el menú principal, por fuerza tengo que entrar a cada página y editar el código HTML.

    La verdad no soy muy experimentado en WordPress, pero ya leyendo tu artículo pues por lo menos se que tengo esperanzas en hacer que el sitio web pase de HTML estático a dinámico. De paso, échale un vistazo y me dice que tal: http://www.rotaractprogreso.com/ .Gracias por la información.

  9. Pingback: Exportar un sitio WordPress a HTML estático | Ayuda WordPress

  10. Selvin Castellanos

    Gracias por la info Fernando, te quería pedir si pudieras hacer un
    videotutorial explicando esta migración con algún sitio que tengas de
    ejemplo

  11. Carlos Gonzalez

    lo puedo partir con todo y mis scripts…. por ejemplo si en la parte de scripts que tengo aqui …….tengo varios scripts y en tengo varias cosas tengo dos sidebars y carousel.. porfavor responde.. gracias

  12. Muy claro y didactico realmente, pero en lo personal no me quedo claro, si cuando fraccionamos el html unico en 4 por cada fraccion hay que establecerle el encabezado a cada parte deldoctype etc y cierre de la etiqueta eso es lo que a mi al menos no me queda enclaro si por favor podrias respondermelo con tanto gusto lo apreciaria. Muchas graciass

    1. Alejandro Gálvez

      No es necesario establecer el doctype o etiquetas de apertura y cierre, html o body, para cada pieza del puzzle. Porque lo que tienes es, en esencia, un puzzle. Muy sencillito, de cuatro piezas. Una es el header.php que tiene el doctype, la etiqueta HEAD y su contenido y abre el BODY. Otra pieza es index.php que llamará a header.php al principio del documento, lo que hará que esa pieza del puzzle se acople «allí arriba». Y por último llamará a footer.php que cerrará BODY y cerrará HTML. El puzzle construido no tiene fisuras.

      Lo que tienes que entender es que tu nunca vas a acceder independientemente a footer.php o sidebar.php. Tu vas a acceder a index.php, que llama a las piezas esenciales de cualquier página en WordPress.

      1. Muchisimas gracias por tu respuesta !
        Solo dime si no es molestia como activarlo.
        Y si los cuatro archivos van juntos enuna sola carpeta
        Gracias !!

        1. Alejandro Gálvez

          Efectivamente los 4 archivos deberán estar en una carpeta dentro de wp-content/themes/tu-carpeta-con-tu-tema/.

          Para activarlo ve a la administración de tu WordPress, Apariencia -> Temas. Allí saldrá listado tu tema, si todo está en orden, y podrás activarlo.

          Un saludo.

          1. Que tal amigo, todo salio bien pero no perfecto puesto que veo perfectamente muy bien mi template pero no me aparece el blog de wordpress integrado al template que instale, habria que hacer algo mas que desconozco ?Mi diseño del blog perfecto lo unico que no tengo es el wordpress es como que se hubiese sustituido y no integrado. Muchas gracias

          2. Hola amogi, como te explicaba en comentario anterior, daria toda la impresion que el blog de wordpress hubiera quedado arriba de mi template y no integrado dentro del mismo como seria la idea, a ver si me puedes dar una mano mas desde ya muy agradecido. Néstor

          3. Alejandro Gálvez

            Te recomiendo leer la parte 2.4 El Loop del artículo otra vez. Realmente lo que ha explicado Fernando aquí es como crear un tema muy básico, tan básico que solo mostraría las entradas de WordPress y ya. Si quieres seguir aprendiendo métete en los enlaces que el ha recomendado para lograr un tema decente, aunque te llevará tiempo y exigirá conocimientos básicos de PHP y HTML.

            Siempre te queda la posibilidad de utilizar un tema ya creado e importar simplemente el contenido de tu antigua web.

          4. Que tal y eso es lo que yo quiero que muestre las entradas entendiendose como tales los capos esenciales que hacen al blog, pero esa es mi pregunta como logro insertarlo en mi tema.

          5. Dicho de otro modo siguiento vuestra indicacion pude lograr insertar en wordpress un template de un blog propio que se ve perfecto ahora el detalle es de alguna manera tratar que aparezca en el content del mismo los campos que son del blog wordpress para asi, utilizarlo como blog propiamente dicho como se hace ? muchas gracias. Néstor

          6. Creo intuir donde esta el problema mio, el header.php del wp de la carpetra twenty ten tiene un encabezamiento html o sea hay php enbuido en html, debo copiar alli debajo la cabecera de mi html, entonce me encuentro con que la cabecera esta dada entere etiquetas head, entonces que hacer, que debo ajustar puesto no puedo poner dos doctype cabeceras una del header por defecto del wp y otro de mi html. Gracias

          7. En sintesisi lo que pretendo es que en mi theme instalado segun los pasos de aca, me muestre dentro de mi blog nuevo las entradas esenciales que hacen al funcionamiento de un blog y hasta ahora nada. Por favor si pudieras guiarme asi concluyo algo que ya gracias a uds estoy logrando. Gracias

          8. Yo no pido mas que eso, q se vea en mi blog las entradas del WordPress pero mi theme recientemente ingresado al sitio wp solo se ve en su diseño completo pero las entradas noaparecen como llamarlas esa es mi pregunta.

  13. Tengo una duda con respecto al header.php del twenty ten. Hay que xopiarlo todo o solo una parte ?, pues en el qeu yo tengo al menso ya comieza conun doctype, o sea un php embuido en html. Se copia todo o solo que parte, mil gracias.

  14. Beatriz Rodriguez

    Hola a todos: quisera saber en lo posible como llamar las entradas de un blog wordpress al themes que instlae siguiendo los lineamientos que aqui se expresa, puesto que me aparece a mi tambien el diseño pero las entradas basicas que hacen al funcionamiento de un blog no me aparecen. Me podrian dar una ida ?, habra que hacer alguna funcion ? Beatriz

  15. Ufff la verdad es que estoy complicado, entiendo lo que pusiste, pero estoy creando una pagina para empresa y le hice una cantidad de div impresionantes, y cad auno de ellos tiene que ser modificable a prueba de tontos, es por eso que le eh puesto mucho empeño a todo esto, pero a la vez me sirve para la universidad ya que estudio lo mismo, pero no nos pasan el tema de wordpress o joomla. De antemano Muchas gracias

  16. Jorge Fernández

    Primero que nada, agradezco la información acá expuesta. Segundo, para personas como yo, que de programación no sabe mucho pero que se desarrolla haciendo creatividad y estrategias y web en WP, esta info está perfecta. El título es bastante apropiad, porque yo he llegado acá buscando «de estáticas a dinámicas con WP»… Buenazo.

  17. Muy bueno! Me sirvio un monton para entender el funcionamiento interno de WordPress.

    Mi idea era ir creando un sitio estatico que sea el tema y pasarlo a WordPress para cargar el contenido desde ahi.

  18. Luis Zambrano

    Mi problema es que la hoja de estilos no hace efecto ninguno, por qué podría ser? ya he subido header.php, index-php, sibebar.php, footer.php. Y las imagenes que tengo en mi carpeta «imageenes» tampoco salen en el diseño: http://pinkweb.comze.com/

  19. Hola Fernando he llegado hasta este post en busca de algo parecido a lo que comentas y quería saber si me puedes ayudar. He leído que hay algún plugin que me permite escribir los post en htlm o por lo menos parte, lo conoces o me puedes indicar por donde buscar. Gracias.
    Un saludo.
    Antonino.

  20. He hecho todo lo que comentas pero no me muestras los estilos css de mi página. He creado un «style.css» y pegado ahí mi hoja de estilo pero he tenido que variar evidentemente la llamada desde mi header.php a esa hoja de estilo, renombrandola como «style.css». Aún así no la enlaza. No se si es que tengo que hacer algo especial o no lo entiendo. La tengo enlazada ahora así desde el heder.php: Podrías decirme que puede estar pasando

  21. Larry Martinez

    Ok. amigo mi pregunta es otra: Puedo utilizar la cuenta del hosting C-Panel, abrir el programa word press e iniciar mi construcción de pagina web desde cero. Es decir no quiero nada de lo que existía anteriormente. ES POSIBLE HACER ESO O ES LO MEJOR.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido