Cuando comenzó la Web, los sitios web eran bastante tontos. Es decir, no eran más que texto y código HTML estático, sin efectos especiales y con muy poca interactividad.

Veinte años después, los sitios web se basan en una programación compleja y pueden tardar semanas y semanas en construirse. Están repletos de funciones, son altamente interactivos, responden mejor, se ven mejor, etc.

Hoy en día, en lugar de escribir código por su cuenta, puede usar sistemas de administración de contenido que se ocupan del código detrás de su sitio web por sí mismos. Todo lo que tienes que hacer es elegir un tema y comenzar a publicar.

WordPress es uno de esos CMS, ahora utilizado por millones en todo el mundo. La mejor parte de WordPress es que es una plataforma muy flexible. No requiere ningún conocimiento de codificación para usarlo y puede crear los sitios web más receptivos y sorprendentes con él.

Si posee un sitio web que no ha visto una actualización desde la década de 1990, este artículo creado por nuestro equipo en wpDataTables lo ayudará a convertir HTML a WordPress para que usted también pueda aprovechar los beneficios de la tecnología web moderna.

Sigue leyendo para saber más.

¿Por qué debería convertir HTML a WordPress?

Las razones por las que una persona debería convertir HTML a WordPress son bastante diversas. He aquí una selección de los más importantes:

La conversión a WordPress le da control total sobre cada detalle de su sitio web. Siempre que no le guste una parte de su sitio, puede modificarla fácilmente a su gusto.
Los sitios de WordPress son mucho más fáciles de acceder, administrar y mantener en comparación con los sitios HTML estáticos. Esta es una razón muy importante para hacer una migración de HTML a WordPress.
Al convertir su estilo de plantilla HTML a WordPress, obtendrá un tema único que ninguna otra persona que use el CMS tendrá.
WordPress ayuda con la optimización de motores de búsqueda y garantizará que más personas descubran su sitio web.
Como desarrollador de sitios web, su trabajo se reducirá a la mitad porque WordPress se encargará de la mayoría de las actividades que antes requerían mucho tiempo.

Pasar de HTML estático a WordPress: los métodos

Ahora que tiene todas las razones para convertir HTML a WordPress, puede proceder a aprender cómo hacerlo.

Hay dos métodos entre los que puede elegir: el método manual, que consiste en hacer todo usted mismo, desde cero; y el método child-theme, que consiste en utilizar un tema básico de WordPress y ajustarlo según tus necesidades.

La elección de un método depende de su experiencia con la codificación, cuánto tiempo desea invertir en esta tarea, así como de sus propias preferencias. Cada uno de estos métodos se presentará en las siguientes secciones, donde aprenderá cómo convertir HTML a WordPress.

El método manual

1 Crear una nueva carpeta de temas

Cree una nueva carpeta en su escritorio donde se almacenarán los archivos de su tema. Nombra esta carpeta como quieras (representará el nombre del tema). Cree estos archivos en su editor de código preferido y déjelos abiertos:

estilo.css
índice.php
encabezado.php
barra lateral.php
pie de página.php

2 Copie el código CSS existente en su nueva hoja de estilo

Una vez que haya creado los archivos, puede pasar a copiar su código CSS. Aquellos que quieran duplicar sus sitios y trasladarlos a WordPress deberán exportar e importar el código CSS de su sitio anterior. CSS es responsable de la apariencia del sitio, así que edite el archivo style.css agregando las siguientes líneas de código:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Reemplaza la información requerida con la tuya, agrega las líneas CSS restantes y listo. No olvides guardar el archivo. Ahora puede cerrar style.css.

3 Obtenga su código HTML actual

Vaya al archivo index.html de su sitio y resalte todo el contenido desde el principio del documento hasta la etiqueta div class="main". Esta sección debe pegarse en el archivo header.php que creó en el paso 1.

Regrese al archivo index.html y resalte todo lo que está dentro del elemento class="sidebar". Copie el contenido y péguelo en el archivo sidebar.php que creó. Haz lo mismo para el pie de página, con todo el contenido después del elemento de la barra lateral.

Para el archivo index.php, seleccione todo el contenido que queda después de resaltarlo y péguelo en el nuevo archivo, guárdelo y déjelo abierto para el siguiente paso.

4 Edite el archivo index.php

Para finalizar su archivo index.php, copie estas líneas de código y péguelas en la parte superior del documento:

Luego, en la parte inferior de su archivo index.php, coloque estas líneas de PHP.

El archivo aún no está terminado porque necesita crear un bucle de publicación, que representa un código PHP que WordPress necesita para mostrar correctamente las publicaciones o artículos del blog de su sitio web. Agregue las siguientes líneas de código dentro de la sección de contenido del archivo:

Una vez hecho esto, guarde el archivo, ciérrelo y continúe con el siguiente paso.

5 Sube tu nuevo tema

Una vez que su carpeta de temas esté lista, debe cargarla en su sitio y completar la conversión de HTML a WordPress. Para hacer eso, navegue a la carpeta donde instaló WordPress y coloque la carpeta que acaba de crear en /wp-content/themes/.

Vaya a su página de administración de WP, Apariencia y luego Temas para ver si el nombre del tema aparece en la lista o no. Si lo hace, has hecho todo correctamente y puedes activarlo. Si no es así, lea atentamente todos los pasos sobre cómo convertir HTML a WordPress nuevamente.

También hay esta útil guía en video de Traversy Media que deberías consultar:

Usar un tema hijo de WordPress

Si los pasos mencionados en el paso anterior te parecen demasiado complicados para tu nivel, este es un método que requiere menos conocimientos en el campo de la codificación. Es más fácil de administrar y también llevará menos tiempo.

Para convertir HTML a WordPress más rápido, puede usar un tema secundario de un tema existente. Los temas secundarios se denominan así porque se basan en un segundo tema, que es el principal.

1 Elige el tema

En primer lugar, elija un tema que sea adecuado para su diseño HTML. Busque un tema secundario que sea similar a su sitio web existente. Busque la estructura que tiene, para que no tenga que profundizar demasiado en la codificación.

Debe optar por un tema de inicio porque se basan en líneas de código muy básicas.

2 Crear una nueva carpeta de temas

Al igual que en el caso anterior, tendrás que crear una nueva carpeta de temas. La única diferencia es que nombrará la carpeta de la misma manera que el tema principal en el que se basa el tema secundario y le agregará el sufijo "-child".

Por ejemplo, si su tema se llama Veintinueve, llamará a la carpeta "veintinueve niños". Asegúrese de no agregar espacios dentro del nombre.

3 Configurar una nueva hoja de estilo

A continuación, cree el archivo style.css dentro de la carpeta y agregue estas líneas de código:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Tenga en cuenta que este es un ejemplo. Tendrá que reemplazar la información con la suya propia. Guarde el archivo después de terminar.

4 Crea el archivo functions.php

Una vez que tenga el archivo style.css, puede activar el tema tal como está. Sin embargo, para que el sitio web se vea y funcione mejor, deberá usar las funciones y estilos del tema principal. Para esto, necesitas crear el archivo functions.php.

Utilice estas líneas de código y guarde el archivo:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Activar el tema hijo

Finalmente, necesitas activar el tema. Comprima la carpeta y agréguela a WordPress navegando al menú Apariencia, Temas y luego haga clic en "Agregar nuevo". Sube el archivo comprimido allí. Otra opción sería arrastrar la carpeta en wp-content/themes.

Para concluir

Necesitará algo de paciencia para convertir HTML a WordPress, pero seguramente vale la pena. Aunque el proceso requiere algo de su atención, terminará con un sitio verdaderamente único que es mucho más conveniente de administrar desde todos los puntos de vista.

Si sigue cuidadosamente los pasos presentados en este artículo, nada puede salir mal, ¡así que no se preocupe! Sin embargo, si tiene algún problema, no dude en consultar los foros de soporte de la comunidad de WordPress. Hay muchos usuarios allí que estarán encantados de ayudarte.

Si disfrutó leyendo este artículo sobre cómo convertir HTML a WordPress, debe consultar este sobre el salario de desarrollador de WordPress.

También escribimos sobre algunos temas relacionados, como el mejor editor de código, la capacitación de WordPress, las bibliotecas de JavaScript y las extensiones de Brackets.

Fuente de grabación: wpdatatables.com