Conversión de plantillas HTML a temas de WordPress

Aunque la tecnología web ha recorrido un largo camino, todavía hay sitios web creados únicamente con HTML. Si tiene uno de ellos, es posible que se pregunte cómo puede convertir una plantilla HTML en un tema de WordPress.

Afortunadamente, tiene varias opciones a su disposición si desea convertir esos archivos HTML a WordPress. Las técnicas que están disponibles van desde conversiones manuales prácticas hasta asociarse con expertos que pueden manejar todo el trabajo pesado.

En este artículo, cubriremos cuatro enfoques diferentes para la conversión de plantillas HTML. Para cada uno, proporcionaremos instrucciones y recursos que pueden ayudarlo a incorporar un sitio web basado en HTML en WordPress. Hay mucho que cubrir, ¡así que comencemos!

Convertir HTML manualmente

La primera opción cuando se trata de conversión es el enfoque manual. Dado que este es un proceso bastante práctico, deberá asegurarse de tener acceso a los archivos tanto de su sitio web original como del nuevo.

Por lo general, utilizará una aplicación de Protocolo seguro de transferencia de archivos (SFTP) para este propósito. Una vez que haya accedido a su sitio web, puede continuar con los siguientes pasos.

Paso 1: crea una carpeta de temas

Primero, deberá crear una carpeta para guardar sus nuevos archivos de tema y etiquetarla con el nombre de su nuevo tema. Usando su editor de código, puede crear cinco archivos específicos:

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

Por ahora, puede dejar estos archivos en blanco y guardarlos en la carpeta que acaba de crear.

Paso 2: Copie y pegue su CSS existente

Su próxima prioridad es personalizar el archivo de hoja de estilo en cascada (CSS). Aquí es donde describirá todos los diferentes elementos de estilo para su sitio.

En la parte superior, es una buena práctica agregar información sobre el archivo. De hecho, cuando se trata de WordPress, hay algunos elementos necesarios para que el tema aparezca en el Directorio de temas.

Debajo de esa información, querrá pegar cualquier estilo CSS existente de su sitio web original que desee transferir a su nuevo tema.

Paso 3: Separar el HTML existente

En su sitio web original, es probable que el código HTML que designa su encabezado, pie de página, barra lateral y áreas de contenido principal estén en su archivo index.html . Ahora, deberá dividir cada uno de esos elementos en los nuevos archivos que ha creado para su tema de WordPress.

Por ejemplo, en el archivo index.html de su sitio web original, puede ubicar la primera etiqueta <div> con la clase 'main'. Todo lo que precede a esta etiqueta se puede copiar y pegar en su nuevo archivo header.php .

A continuación, repetirá este proceso para las etiquetas de "barra lateral" y "pie de página". Copie el código contenido en cada uno de esos elementos y péguelo en los respectivos archivos PHP.

Ahora, lo que le quedará es la parte principal de su archivo index.html . Esto es lo que conforma el diseño del contenido principal de su sitio web basado en HTML. Deberá copiar este código restante y pegarlo en su nuevo archivo index.php .

Paso 4: Configure su archivo Index.php

Su próximo paso es asegurarse de que su nuevo archivo de índice pueda ubicar los archivos necesarios para permitir que su tema muestre la estructura y el estilo de su sitio. Para lograr esto, utilizará etiquetas de plantilla de WordPress. Estos se utilizan para decirle al tema que recupere los archivos de encabezado, pie de página y barra lateral.

Por ejemplo, puede hacer que su plantilla muestre el archivo de encabezado que creó usando la siguiente etiqueta:

get_header();

Colocarás esto en tu archivo de plantilla index.php , o en las páginas subsiguientes donde quieras que aparezca el encabezado. Lo mismo se aplica a su pie de página.

Hay otra parte importante de su nueva plantilla que también deberá comprender. Esto se llama el bucle de WordPress: un fragmento de código PHP que le dice a la plantilla que obtenga publicaciones. También se puede personalizar para controlar cuántas publicaciones se muestran.

Paso 5: sube tu nuevo tema

Ahora que su nuevo tema está listo para la acción, deberá colocar su carpeta en el directorio wp-themes/content/ de su sitio web:

Una vez que haya cargado los archivos, puede iniciar sesión en su panel de WordPress y navegar a Apariencia > Temas. Aquí, debería ver su nuevo tema en la lista y poder hacer clic en Activar y comenzar a usarlo.

Importación de contenido HTML con un complemento

Otra forma de manejar este proceso es usar un complemento para transferir contenido desde su antiguo sitio basado en HTML. Desafortunadamente, hay muy pocas herramientas disponibles que sean compatibles con las versiones recientes de WordPress. Sin embargo, puede consultar una versión de prueba gratuita de WP Site Importer:

Este complemento puede escanear todo su sitio web y catalogar el contenido que se puede mover. Funciona mejor si su HTML está bien organizado y "limpio" para empezar. También podrá importar contenido como menús y enlaces.

Usar un tema hijo

Otra forma de mover su sitio HTML a WordPress es con un tema secundario. Tiene la misma funcionalidad básica y el mismo estilo que su tema principal, pero podrá conservar los ajustes y las personalizaciones que realice, incluso si actualiza el tema principal.

Paso 1: elige un tema

Hay muchos temas gratuitos bien construidos para elegir en el directorio de temas de WordPress. Una vez que seleccione uno que le guste, deberá instalarlo para que sus archivos estén disponibles en el directorio de archivos de su sitio web:

Sin embargo, no necesita activar este tema principal.

Paso 2: crea una carpeta para el tema de tu hijo

A continuación, deberá acceder a sus archivos con una aplicación FTP y crear una nueva carpeta en su directorio wp-content/themes . Este archivo debe tener el mismo nombre que su tema principal, con "-child" agregado al final.

Por ejemplo, si va a crear un tema secundario para Twenty Nineteen, puede crear una carpeta llamada twentynineteen-child:

Esta configuración significa que su tema secundario podrá extraer funciones y estilos del tema principal automáticamente, una vez que configure el resto de los archivos de tema necesarios.

Paso 3: configurar una hoja de estilo

Su próximo paso será configurar su archivo style.css . WordPress requiere cierta información específica en la hoja de estilo para que la relación del tema padre-hijo funcione. También puede pegar información de estilo adicional de sus archivos HTML originales si es necesario.

Paso 4: configurar un archivo Function.php

Ahora que básicamente tiene dos temas con los que está trabajando, deberá decirle a WordPress que su tema secundario depende del CSS de los padres. Para eso, puede usar la llamada PHP wp_enqueue_style() .

Primero creará un archivo function.php y lo colocará en la carpeta del tema de su hijo. Este es el archivo donde ejecutará la función de puesta en cola que explica las dependencias y la jerarquía del tema.

Paso 5: activa el tema de tu hijo

Una vez que haya cargado estos nuevos archivos en el servidor de su sitio web, puede regresar a su panel de control de WordPress y navegar a Apariencia > Temas . Allí, ahora debería ver el tema de su hijo listo para funcionar.

Haga clic en Activar en el tema de su hijo para configurarlo como el tema de su sitio web. Entonces estará listo para comenzar a copiar el contenido de su sitio web HTML en su nuevo sitio de WordPress.

Compre un servicio de conversión de sitios

Si no tiene el tiempo o los recursos para realizar una conversión usted mismo, también puede consultar un servicio de conversión. Además, si necesita más recursos o asistencia para migrar otro contenido de WordPress, aquí en WP Engine ofrecemos muchas soluciones y recursos para la migración y la conversión.

1. Contratar WPGeeks

HireWPGeeks es una opción de conversión de servicio completo. Manejará todo el trabajo pesado y terminará con un sitio web de WordPress basado en temas, flexible y con capacidad de respuesta que está completo con todo su contenido. Tendrá que ponerse en contacto con la empresa para obtener un presupuesto, pero puede planificar sus servicios a partir de $89.

2. Soluciones FantasTech

FantasTech Solutions es otro servicio de conversión de HTML a WordPress. Anuncia conversiones altamente profesionales de HTML a plantillas de temas de WordPress de alta gama y bien codificadas. Deberá tener en cuenta que los costos comienzan en $ 297 por página. Las páginas adicionales comienzan en $147 cada una, con precios exactos según la complejidad.

Personalice la experiencia de su sitio con WP Engine

Puede parecer una gran empresa, pero convertir su sitio web HTML a WordPress puede abrir muchas otras oportunidades. Con esta plataforma altamente flexible y extensible, se volverá más ágil y podrá implementar contenido nuevo rápidamente.

Aquí en WP Engine, creemos que los recursos adecuados para desarrolladores pueden tener un gran impacto en sus proyectos. ¡Además de soluciones innovadoras, ofrecemos planes y niveles de precios para cualquier presupuesto!