En los inicios (de la web) todos los sitios web se hacían con nada más que texto y HTML estático. Ahora, sin embargo, más de 20 años después, la web es un lugar muy diferente. Los sitios web son mucho más complejos. Proporcionan experiencias más ricas y agradables tanto para los creadores de sitios como para los visitantes.
Esto es en gran parte gracias a proyectos de código abierto como WordPress. El cual, durante los últimos diez años aproximadamente, ha tenido éxito en su misión principal de democratizar la publicación en línea (y mucho más en el proceso) para que cualquiera con una instalación de WordPress y el tema/plugins adecuados pueda tener un sitio web moderno con diseño y funcionalidad avanzados. Sin necesidad de codificación, ni siquiera de HTML.
Por eso, para los ávidos usuarios de WordPress como yo, es casi difícil de creer que en 2018 alguien pueda seguir operando un sitio web HTML estático en lugar de un sitio web de WordPress con un tema y plugins. Pero el hecho es que todavía hay una cantidad significativa de sitios activos sólo en HTML por ahí. (O HTML con un poco de CSS.)
Concedido, estos propietarios de sitios pueden tener buenas razones para no actualizar o convertir. ¿Quizás el contenido de su sitio no cambia nunca y el formato y el diseño sencillos ya existentes son útiles? ¿O tal vez sea menos molesto que preocuparse por mantener un sitio de WordPress actualizado? Ambas son razones válidas (entre otras). Ejemplos de «no arreglar lo que no está roto»
Sin embargo, tengo la sensación de que estos podrían no ser la razón principal de algunos (tal vez muchos) no han dado el salto. La más obvia es que simplemente no saben cómo convertir su sitio HTML en un sitio WordPress. Especialmente sin perder el contenido o la necesidad de hacer el formato excesivo en una página de base.
Afortunadamente, como es a menudo el caso con WordPress, hay un número de maneras de ir sobre la solución de este problema. He recopilado algunas opciones a continuación.
Suscríbete a nuestro canal de Youtube
Tus opciones para convertir un sitio HTML estático en un sitio de WordPress
La forma en que elijas convertir tu sitio HTML estático en un sitio de WordPress dependerá, sin duda, de tu preferencia personal, de la inversión de tiempo/monetaria deseada y del nivel de habilidad con el código. Usted tendrá que ser el que decida qué es lo mejor para usted, pero con los resúmenes a continuación debe ser capaz de decidir rápidamente y saltar directamente a la información más relevante en este post para su situación específica.
Hay tres opciones principales:
1. Crear manualmente un tema de WordPress basado en su sitio HTML estático actual.
Esto requerirá que usted consiga en su código. Tendrá que acceder al directorio de su sitio actual a través de FTP y utilizar su código existente como punto de partida. A partir de ahí tendrá que crear los archivos necesarios para un tema de WordPress y copiar trozos de código del códice de WordPress. Esto es bastante simple y directo si usted tiene alguna experiencia con HTML, CSS, y un poco de PHP.
2. Instalar un tema pre-hecho y simplemente migrar su contenido.
Esta es probablemente la mejor opción en la intersección de la simplicidad y el valor. Suponiendo que ya tienes alojamiento para tu sitio web actual, sólo tendrás que gastar dinero si decides comprar un tema premium. El plugin que utilizaremos para importar el contenido está disponible de forma gratuita en el repositorio oficial de plugins de WordPress.
3. Pagar para que un servicio de conversión de HTML a WordPress vuelva a crear su sitio.
Esta es la solución más fácil, ya que no requiere que usted haga mucho de nada. Sin embargo, no le servirá de mucho para familiarizarse con WordPress y el costo variará dependiendo de quién elija contratar. No voy a cubrir esta opción en las secciones siguientes, porque si esta es la ruta que le interesa, puede simplemente hacer una búsqueda rápida de los proveedores de servicios y ellos se encargarán del resto.
Preparación para la conversión de HTML a WordPress
No importa qué ruta decida tomar a continuación, hay algunas cosas que querrá hacer antes de sumergirse.
La primera es elegir un plan de alojamiento. Usted querrá mirar sobre las opciones que están ahí fuera y decidir sobre un paquete que mejor se adapte a sus necesidades. ¿O tal vez te gustaría crear una instalación local de WordPress en su lugar? Siempre se puede migrar a un servicio de alojamiento más tarde.
Una vez que haya elegido, tendrá que instalar WordPress y entrar en WP Admin. Este es el punto en el que nuestros dos caminos posibles se dividen.
Convertir manualmente su sitio HTML estático a WordPress
Si su objetivo es no sólo obtener el contenido de su sitio HTML estático en WordPress, sino también duplicar su diseño actual, esto significa que tendrá que crear su propio tema personalizado. Afortunadamente, eso no es tan aterrador como podría sonar al principio. Sólo implica la creación de algunas carpetas y archivos, un poco de copiar y pegar, y luego subir el resultado.
Necesitarás un editor de código como Sublime o Notepad++ y acceso tanto al directorio de tu sitio HTML como al de tu nueva instalación de WordPress.
Paso 1: Crear una nueva carpeta de temas y los archivos necesarios
En tu escritorio, crea una nueva carpeta para guardar tus archivos de temas. Nómbrala como quieras que se llame tu tema.
A continuación, crea unos cuantos archivos (que irán todos en tu nueva carpeta de temas) en tu editor de código. No hagas nada con ellos todavía. Sólo déjalos abiertos para su posterior edición.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Paso 2: Copiar el CSS existente en la nueva hoja de estilos
Si estás buscando duplicar un diseño, esto probablemente significa que tienes al menos algo de CSS que quieres guardar. Así que el primer archivo que va a querer editar es su archivo Style.css.
Para empezar, añada lo siguiente a la parte superior de su archivo.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Después de esta sección simplemente pegue su CSS existente a continuación. Guarde y cierre el archivo.
Paso 3: Separe su HTML actual
Antes de entrar en el tercer paso, permítame darle una nota rápida sobre cómo funciona WordPress. WordPress utiliza PHP para llamar y recuperar piezas de datos de su base de datos subyacente. Cada archivo que estamos usando en este pequeño tutorial está diseñado para decirle a WordPress qué parte del contenido de su sitio debe mostrarse y dónde.
Así que cuando digo que vamos a «cortar» su HTML existente, lo que realmente estamos haciendo es simplemente cortar y pegar partes de su código existente en los diferentes archivos que acabamos de crear, para que WordPress sepa dónde mostrarlos.
Aquí vamos.
Primero, abra el archivo index.html de su sitio actual. Resalte todo desde la parte superior del archivo hasta la etiqueta de apertura div class=»main». Copie y pegue esta sección en su archivo header.php, guarde y cierre.
En segundo lugar, vuelva a su archivo index.html. Resalte el elemento aside class=»sidebar» y todo lo que hay dentro de él. Copie y pegue esta sección en su archivo sidebar.php, guarde y cierre.
Tercero, en su index.html seleccione todo lo que está después de su barra lateral y copie y pegue en su archivo footer.php, guarde y cierre.
Por último, en su archivo index.html, seleccione todo lo que queda (esto debería ser la sección de contenido principal) y péguelo en su archivo index.php. Guarda, pero no cierres todavía.
Sin embargo, ahora puedes cerrar tu archivo index.html y pasar a los últimos pasos. Paso 4: Finalizar tu archivo index.php
Para finalizar el archivo index.php de tu nuevo tema necesitas asegurarte de que puede llamar a las otras secciones (además del contenido principal) que están alojadas en los otros archivos que has creado. O, en otras palabras, vuelve a unir los elementos que acabamos de «trocear».
En la parte superior de tu archivo index.php, coloca la siguiente línea de php.
<?php get_header(); ?>
Después, en la parte inferior de tu archivo index.php, coloca estas líneas de php.
<?php get_sidebar(); ?><?php get_footer(); ?>
Y, por último, tenemos que añadir lo que se llama El Bucle. Este es el bit primario de php que WordPress utiliza para mostrar el contenido de tu post a los visitantes. Así que el paso final para crear el archivo index.php de tu nuevo tema es añadir el código de abajo dentro de la sección de contenido.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <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( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--><?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--><?php else : ?><?php endif; ?>
Guarda tu index.php y cierra. Su tema ya está terminado. Todo lo que queda es subirlo a su sitio web de WordPress.
Paso 5: Subir su nuevo tema
Ahora que ha creado sus archivos de tema y los tiene todos almacenados dentro de su nueva carpeta de tema, va a necesitar acceder al directorio de su nueva instalación de WordPress.
Coloque su nueva carpeta de tema dentro de /wp-content/themes/. A continuación, navegar de nuevo a WP Admin > Apariencia > Temas y su tema recién creado debe aparecer allí. Todo lo que queda por hacer en este punto es poblar su nuevo sitio web de WordPress con el contenido de su antiguo sitio. Siga la sección de abajo (omitiendo la parte sobre el uso de un tema pre-hecho) para ver cómo se hace.
Usando un tema pre-hecho de WordPress e importando contenido HTML
Si los pasos anteriores le parecen demasiado intensivos o que consumen mucho tiempo, entonces tenga la seguridad de que hay otra manera. En lugar de convertir cualquier diseño con el que esté trabajando ahora mismo en un tema de WordPress, puede aprovechar cualquiera de los miles de temas disponibles en el amplio mercado de WordPress.
Hay temas gratuitos y hay temas premium. Antes de decidir cuál es el mejor para usted, es posible que desee leer sobre qué temas están diseñados para atender a sus necesidades y navegar por categoría de temas aquí en Elegant Themes y en otros lugares.
Una vez que haya elegido un tema que le guste (y tenga su paquete de archivos comprimido descargado) querrá dirigirse de nuevo a WP Admin > Apariencia > Temas > Añadir nuevo e instalar/activar su nuevo tema de WordPress.
Una vez hecho esto, tendrá un nuevo sitio web de WordPress y un tema-pero poco más. Cuando previsualices tu sitio, estará vacío de contenido y probablemente tenga un aspecto algo aburrido. Eso está bien, porque a continuación vamos a importar el contenido de su antiguo sitio.
En WP Admin vaya a Plugins > Añadir nuevo y busque un plugin llamado HTML Import 2 por Stephanie Leary. Una vez que este plugin está instalado y activado, siga su práctica guía de usuario para importar todo su directorio de páginas HTML. Después de esto usted tendrá todo su antiguo contenido viviendo en WordPress y formateado por su nuevo tema. O, si has creado tu propio tema, tu sitio debería tener el mismo aspecto que antes, sólo que funcionando en WordPress.
En conclusión
Si has utilizado este post como guía para migrar tu sitio web a WordPress, acabas de unirte a una de las mayores comunidades de código abierto del mundo. ¡Bienvenido! Es un lugar divertido con muchos desarrolladores, diseñadores, blogueros, aficionados al bricolaje y mucho más, todos ellos construyendo, jugando y creando con WordPress y sus temas/plugins.
Si te ha picado el gusanillo de WordPress, el sitio web oficial de WordPress.org está repleto de temas, plugins y otros recursos útiles. Si quieres ajustar aún más los archivos de tu tema, explora el Códice para encontrar un sinfín de consejos, trucos y variaciones.