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.
Índice de contenidos
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:
- 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.
- URL cloner sería otra opción, pues es un increíble plugin permite importar contenido de cualquier URL a WordPress.
- 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.
¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Muchas gracias por esta info!
Gracias a ti, espero que te sea útil.
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
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.
Gracias!!!
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!!!!!!!!!!
Hay herramientas para todo. El mismo Photoshop permite convertir a HTML, y luego hay aplicaciones para hacer el cambio del tirón.
Gracias Fernando si no te importa podría decirme cuales son esas aplicaciones que te hacen el cambio del tirón.
Un saludo.
Sabes de alguna?
Sabes de alguna? Podrias contestar si sabes o no.
Fernado podrías contestarme por lo menos si puedes o no decirmelas?
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í:
Alucino con frases ERRÓNEAS de este artículo como «Aún hay muchas webs en HTML, quizás más de las recomendables»…..
Ya sabes a lo que me refiero, pero vale. Gracias por tu comentario
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.
Nadie haya dicho que haya que abandonar HTML.
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.
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.
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.
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.
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)
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…»
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.
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.
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.
Muchas gracias Xavier, has sido muy amable.
Un saludo.
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.
No te preocupes, se editan como si fuera un documento de Word, por ejemplo, igual que las nuevas que crees.
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
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
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
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.
Muchisimas gracias por tu respuesta !
Solo dime si no es molestia como activarlo.
Y si los cuatro archivos van juntos enuna sola carpeta
Gracias !!
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.
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
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
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.
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.
campos debi escribir
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
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
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
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.
me refiero a los cierres de cada html
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.
Creo que está contestado por un compañero aquí:
https://ayudawp.com/migrar-de-html-a-wordpress/#comment-1125774518
no considero que eso sea una respuesta pero gracias igual
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
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
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.
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.
amigo tengo html pero no se donde cortar los cuatro puntos como puedo averiguarlo?
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/
Gracias por la info, ahora que estoy entrado a wordpress me servirá como base
mediante el primer método me aparece el espacio que debería ocupar la imagen pero la imagen no se ve
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.
tengo una duda, ¿hay algún problema si en el index hay también algunos scripts incluidos?
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
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.