Al principio (de la web) todos los sitios web se hacían con nada más que texto y HTML estático. Sin embargo, ahora, más de 20 años después, la web es un lugar muy diferente. Los sitios web son mucho más complejos. Brindan experiencias más ricas y placenteras tanto para los creadores de sitios como para los visitantes.
Esto se debe en gran parte a proyectos de código abierto como WordPress. Que, durante los últimos diez años más o menos, 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 cualquier persona con una instalación de WordPress y el tema/complementos adecuados pueda tener un sitio web moderno con un diseño avanzado. y funcionalidad. No se requiere codificación, ¡ni siquiera HTML!
Esta es la razón por la que, para los ávidos usuarios de WordPress como yo, es casi difícil creer que en 2018 alguien todavía esté operando un sitio web HTML estático en lugar de un sitio web de WordPress con un tema y complementos. Pero el hecho es que todavía hay una cantidad significativa de sitios HTML activos por ahí. (O HTML con un poco de CSS).
Por supuesto, estos propietarios de sitios pueden tener buenas razones para no actualizar o convertir. ¿Quizás el contenido de su sitio nunca cambia y el formato y el diseño simples que ya existen son útiles? ¿O tal vez es menos complicado que preocuparse por mantener actualizado un sitio de WordPress? Ambas son razones válidas (entre otras). Principales ejemplos de «No arregles lo que no está roto».
Sin embargo, tengo la sensación de que esta podría no ser la razón principal por la que algunos (quizás muchos) no han dado el salto. La más obvia es que simplemente no saben cómo convertir su sitio HTML en un sitio de WordPress. Especialmente sin perder contenido o tener que formatear demasiado página por página.
Afortunadamente, como suele ser el caso con WordPress, hay varias formas de resolver este problema. He compilado algunas opciones a continuación.
Suscríbete a nuestro canal de Youtube
La forma en que elija convertir su sitio HTML estático en un sitio de WordPress sin duda dependerá de su preferencia personal, la inversión deseada de tiempo/dinero y el nivel de habilidad con el código. Tendrá que ser usted quien decida cuál es mejor para usted, pero con los resúmenes a continuación debería poder decidir rápidamente y pasar directamente a la información más relevante en esta publicación para su situación específica.
Hay tres opciones principales:
1. Cree manualmente un tema de WordPress basado en su sitio HTML estático actual.
Esto requerirá que ingrese su código. Deberá acceder al directorio de su sitio actual a través de FTP y usar su código existente como punto de partida. A partir de ahí, deberá crear los archivos necesarios para un tema de WordPress y copiar fragmentos de código del códice de WordPress . Esto es bastante simple y sencillo si tienes algo de experiencia con HTML, CSS y un poco de PHP.
2. Instale un tema prefabricado y simplemente migre su contenido.
Esta es probablemente la mejor opción en la intersección de simplicidad y valor. Suponiendo que ya tiene alojamiento para su sitio web actual, solo necesitará gastar dinero si elige comprar un tema premium. El complemento que usaremos para importar contenido está disponible gratuitamente en el repositorio oficial de complementos 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 hagas mucho. Sin embargo, no servirá de mucho para familiarizarlo con WordPress y el costo variará dependiendo de a quién elija contratar. No cubriré esta opción en las secciones a continuación porque si esta es la ruta que le interesa, simplemente puede hacer una búsqueda rápida de proveedores de servicios y ellos se encargarán del resto.
Preparación para la conversión de HTML a WordPress
Independientemente de la ruta que decida tomar a continuación, hay algunas cosas que querrá hacer antes de sumergirse.
El primero es elegir un plan de hosting . Querrá revisar las opciones disponibles y elegir el paquete que mejor se adapte a sus necesidades. ¿ O tal vez le gustaría crear una instalación local de WordPress en su lugar? Siempre puede migrarlo a un servicio de alojamiento más tarde.
Una vez que haya elegido, deberá instalar WordPress e iniciar sesión en WP Admin. Este es el punto en el que se dividen nuestros dos caminos posibles.
Conversión manual de su sitio HTML estático a WordPress
Si su objetivo es no solo obtener su contenido de su sitio HTML estático en WordPress, sino también duplicar su diseño actual, esto significa que deberá crear su propio tema personalizado. Afortunadamente, eso no es tan aterrador como podría parecer al principio. Solo implica crear algunas carpetas y archivos, copiar y pegar un poco y luego cargar el resultado.
Necesitará un editor de código como Sublime o Notepad ++ y acceso tanto al directorio de su sitio HTML como al directorio de su nueva instalación de WordPress.
Paso 1: cree una nueva carpeta de temas y los archivos necesarios
En su escritorio, cree una nueva carpeta para guardar sus archivos de temas. Nómbralo como quieras que se llame tu tema.
Luego, cree algunos archivos (que van todos en su nueva carpeta de temas) en su editor de código. No les hagas nada todavía. Simplemente déjelos abiertos para su posterior edición.
- Estilo.css
- Índice.php
- encabezado.php
- barra lateral.php
- pie de página.php
Paso 2: copie el CSS existente en una nueva hoja de estilo
Si está buscando duplicar un diseño, esto probablemente significa que tiene al menos algo de CSS que desea guardar. Entonces, el primer archivo que querrá editar es su archivo Style.css.
Para comenzar, agregue lo siguiente en la parte superior de su archivo.
|
01
02
03
04
05
06
07
08
|
/*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: separa tu HTML actual
Antes de pasar al paso tres, déjame darte una nota rápida sobre cómo funciona WordPress. WordPress usa PHP para llamar y recuperar 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 se debe mostrar y dónde.
Entonces, cuando digo que vamos a «cortar» su HTML existente, lo que en realidad 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 mostrar a ellos.
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 side class=”sidebar” y todo lo que contiene. Copie y pegue esta sección en su archivo sidebar.php , guarde y cierre.
En tercer lugar, en su index.html, seleccione todo después de su barra lateral y cópielo y péguelo en su archivo footer.php , guárdelo y ciérrelo.
Finalmente, en su archivo index.html , seleccione todo lo que queda (esta debería ser la sección de contenido principal) y péguelo en su archivo index.php . Guardar, pero no cerrar todavía.
Sin embargo , puede cerrar su archivo index.html ahora y pasar a los pasos finales. ¡Casi termino!
Paso 4: finalice su archivo Index.php
Para finalizar el archivo index.php de su nuevo tema , debe asegurarse de que pueda llamar a la otra sección (además del contenido principal) que se encuentran en los otros archivos que ha creado. O dicho de otro modo, volver a juntar los elementos que acabamos de “trocear”.
En la parte superior de su archivo index.php , coloque la siguiente línea de php.
|
01
|
<?php get_header(); ?> |
Luego, en la parte inferior de su archivo index.php , coloque estas líneas de php.
|
01
02
|
<?php get_sidebar(); ?><?php get_footer(); ?> |
Y finalmente, tenemos que agregar lo que se llama The Loop. Este es el bit principal de php que utiliza WordPress para mostrar el contenido de su publicación a los visitantes. Entonces, el paso final para crear el archivo index.php de su nuevo tema es agregar el código a continuación dentro de la sección de contenido.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
|
<?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( '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; ?> |
Guarde su index.php y cierre. ¡Tu tema ya está terminado! Todo lo que queda es subirlo a su sitio web de WordPress.
Paso 5: sube tu nuevo tema
Ahora que ha creado sus archivos de temas y los tiene todos almacenados en su nueva carpeta de temas, necesitará acceder al directorio de instalación de su nuevo WordPress.
Coloque su nueva carpeta de temas dentro de /wp-content/themes/ . Luego navegue de regreso a WP Admin > Apariencia > Temas y su tema recién creado debería aparecer allí. ¡Anímate y actívalo!
Todo lo que queda por hacer en este punto es llenar su nuevo sitio web de WordPress con el contenido de su sitio anterior. Es posible que también desee instalar un complemento en construcción mientras limpia el contenido de su sitio anterior y prepara su nuevo sitio web de WordPress. Continúe con la sección a continuación (saltándose la parte sobre el uso de un tema prefabricado) para ver cómo se hace.
Uso de un tema de WordPress prefabricado e importación de contenido HTML
Si los pasos anteriores le parecen demasiado intensos o lentos, tenga la seguridad de que hay otra manera. En lugar de convertir cualquier diseño con el que esté trabajando en este momento en un tema de WordPress, puede aprovechar cualquiera de los miles de temas disponibles en el mercado más amplio de WordPress.
Hay temas gratuitos de WordPress y hay temas premium de WordPress , como Divi . Antes de decidir cuál es mejor para usted, es posible que desee leer qué temas están diseñados para satisfacer sus necesidades y buscar por categoría de tema aquí en Elegant Themes y en otros lugares.
Una vez que haya elegido un tema que le guste (y haya descargado su paquete de archivos comprimidos), querrá regresar a WP Admin> Apariencia> Temas> Agregar nuevo e instalar/activar su nuevo tema de WordPress.
Una vez hecho esto, tendrá un nuevo sitio web y tema de WordPress, pero poco más. Cuando obtenga una vista previa de su sitio, estará vacío de contenido y probablemente se verá un poco aburrido. Eso está bien, porque a continuación vamos a importar el contenido de su antiguo sitio.
En WP Admin, vaya a Complementos > Agregar nuevo y busque un complemento llamado HTML Import 2 de Stephanie Leary. Una vez que este complemento esté instalado y activado, siga su práctica guía de usuario para importar todo su directorio de páginas HTML. ¡Completa con imágenes!
Después de esto, tendrá todo su contenido antiguo viviendo en WordPress y formateado por su nuevo tema. O, si creó su propio tema arriba, su sitio debería verse como antes, simplemente ejecutándose en WordPress.
En conclusión
Si usó esta publicación como guía para migrar su sitio web a WordPress, entonces acaba de unirse a una de las comunidades de código abierto más grandes del mundo. ¡Bienvenido! Es un lugar divertido con muchos desarrolladores, diseñadores, blogueros, aficionados al bricolaje y más, todos construyen, juegan y crean con WordPress y temas/complementos de WordPress.
Si ha «atrapado el error de WordPress», el sitio web oficial de WordPress.org está repleto de temas, complementos y otros recursos útiles. Si desea modificar aún más sus archivos de temas, explore el Codex para obtener sugerencias, trucos y variaciones aparentemente interminables.
Y, por supuesto, esperamos que se quede para chatear en los comentarios a continuación y se suscriba para más publicaciones de blog en el futuro.
Miniatura del artículo a través de Max Griboedov / shutterstock.com