skip to Main Content

Cómo convertimos un sitio estático a WordPress

Muchos de los que comenzamos temprano en la web probablemente tengamos un sitio web personalizado codificado.

¡Es tan 1999! Sobre EasyWP empezamos rápida y limpiamente con un HTML sin procesar página de destino también. Una vez que decide crear contenido con más frecuencia, se convierte en un problema. Actualizar o agregar páginas a un sitio estático es, en el mejor de los casos, una molestia.

En el peor de los casos, esto le impide publicar en absoluto. Además, como marca que se especializa en WordPress, queríamos tener un sitio WP de prueba de concepto que muestre una mejor manera de hacer las cosas.

Principales ventajas de tener un sitio WordPress

¿Ya estás usando WordPress? Entonces sabrá lo fácil que se vuelve la publicación en línea de autosupervisión. Por supuesto, puede haber servicios de terceros que sean incluso más fáciles de usar, pero a cambio, ellos son los dueños de su contenido.

Para aquellos que aún no están usando WordPress como un sistema de administración de contenido para su sitio… Probablemente se esté preguntando, “¿Por qué molestarse? El sitio estático funciona bien. ¿Por qué arreglar algo que no está roto? ”

Estas son algunas de las ventajas sobre los sitios estáticos:

  1. Facilidad de instalación – sin codificación interminable con temas listos para usar. Cambiar el diseño real de un sitio estático suele ser bastante tedioso y requiere mucha codificación. En WordPress, es simple.
  2. Muy fácil de agregar contenido nuevo – agregar contenido nuevo también requiere habilidades HTML cuando se usa un sitio estático. Un CMS como WordPress solo ofrece la vista de código como una opción avanzada. Realmente no lo necesitas.
  3. Cambios rápidos de diseño – para el sitio web general del sitio y los elementos individuales, puede mover fácilmente widgets (como una lista de los últimos comentarios, por ejemplo) a WordPress. Un sitio web estático requiere pasos similares a un rediseño.
  4. Funciones avanzadas con un clic – puede agregar muchas funciones con solo buscarlas en una enorme biblioteca de complementos. Un sitio web estático requiere una programación personalizada para permitir esto.
  5. Carga automática al servidor – no se requiere herramienta FTP. En el pasado, tenía que cargar imágenes y páginas HTML manualmente mediante el protocolo de transferencia de archivos. WordPress hace esto en segundo plano mientras estás en el navegador (Chrome, Firefox, Opera).
  6. Gestión de usuarios y colaboradores – es muy fácil cuando se usa el CMS más popular. Esto es casi imposible en un sitio estático. Debe otorgar derechos de acceso FTP, etc.
  7. Los cambios de casos de uso no son un problema – ¿Quieres transformar tu sitio en una tienda online? No hay problema con WordPress. Un sitio estático debe rehacerse completamente desde cero.
  8. Excelente descripción general de sus activos de contenido – puede ver cuántos artículos tiene en su sitio, cuántos comentarios y cuántas imágenes. También puede buscarlos rápidamente.

En esencia, un sitio estático tiene un alcance muy limitado y es difícil de actualizar o modificar. Incluso como desarrollador web, necesita mucho tiempo para implementar cambios básicos o agregar contenido nuevo.

WordPress simplifica todo el contenido común y la creación de sitios web, así como las tareas de optimización. Puede resolver problemas de forma rápida y gratuita, sin necesidad de que el presupuesto cubra todo un equipo de expertos.

Reciclado de diseño y código existentes

En resumen, era hora de crear un sitio web adecuado con un backend de WordPress y un tema personalizado en el camino. John, nuestro principal desarrollador front-end, abordó la tarea con entusiasmo. Así es como fue. (Alerta de spoiler: ¡funcionó!)

Queríamos mantener nuestro diseño y apariencia existentes en lugar de crear uno nuevo. Tampoco queríamos codificar el sitio desde cero.

Idealmente, podríamos copiar y pegar el sitio en WordPress. Por supuesto, en realidad es un proceso mucho más complejo. Entonces, echemos un vistazo a los conceptos básicos.

Primero, el objetivo era reutilizar HTML actual /MENOS código escrito para Laraveluno de los frameworks PHP más populares. El módulo de interfaz actual que se utiliza para mostrar la página de inicio debe permanecer intacto. En otras palabras, reescribir las cosas era una opción.

Crear un tema de WordPress personalizado: ¿por dónde empezar?

Crear una página HTML es bastante fácil una vez que sabes cómo funciona el lenguaje de marcado básico. Sin embargo, crear un sitio en WordPress requiere algo más que HTML y ciertos estilos. Necesita crear una plantilla o tema en la jerga de WordPress.

El primer paso fue crear el esqueleto de un tema en blanco. Para no empezar de cero, el desarrollador web decidió utilizar el tema subrayado repetitivo. Es un tema en blanco y bastante similar a Veintinueveel tema estándar de WordPress entregado por defecto con WordPress 5+.

Para reutilizar nuestros estilos y scripts, parecía que necesitaríamos algunos componentes adicionales para poder compilar el LESS y el ReactJS archivos. Después de varias pruebas, pudimos utilizar los mismos paquetes que los utilizados para la versión actual de la página de inicio. ¡Hurra!

La siguiente pregunta era cómo hacer que el contenido de la página de inicio actual fuera editable. Naturalmente, el desarrollador quería reutilizar el mismo modelo que ya estaba funcionando en Laravel.

¿Gutenberg está ralentizando o acelerando el proceso?

Esa respuesta es … depende. Para este proyecto, queríamos utilizar la nueva función de bloqueo de Gutenberg para hacerlo compatible con el nuevo editor de WordPress. Así, los objetivos fueron:

  1. hacer que el contenido sea editable usando el nuevo editor de WordPress
  2. reutilizar el llamado espada/ plantilla html escrita en Laravel

Después de estudiar el nuevo editor de Gutenberg: cómo funciona cuando se trata de editar una página, conceptos de bloque, etc., quedó claro que escribir un bloque de Gutenberg personalizado es bastante tedioso.

En su lugar, puede utilizar un complemento llamado Laboratorio de bloques, que proporciona una forma de crear uno o más bloques personalizados conectados a una plantilla PHP.

Fue muy bueno porque pudimos hacer que la página fuera editable (ok, parcialmente editable en realidad) y John pudo reutilizar su plantilla HTML anterior.

Como puede imaginar, no solo buscamos una página de inicio estática. También tuvimos que considerar:

  • imagenes de fondo
  • alineaciones personalizadas
  • Texto “flotante”
  • contenido dinámico
  • la interacción del usuario

¿Podríamos traducir todo esto a WordPress? No es una tarea sencilla, pero aunque no pudimos editar todo desde el backend, aún podríamos editar el contenido. Los elementos cruciales de la página, como encabezados y párrafos, entre otros, ya son editables. John se mostró optimista de que podríamos mejorar la edición como un segundo paso.

El siguiente desafío fue cómo obtener los datos dinámicos relacionados con la lista de productos. Afortunadamente, pudimos obtener algún texto del JSON list directamente desde la versión anterior utilizando una API de solicitud.

De hecho, esto nos permitió obtener la lista de productos del panel de EasyWP. Entonces, John recreó con éxito el toda la página de inicio en WordPress.

Así que, ¿qué hemos aprendido?

Pasar de un sitio estático de una página (o más bien una página de destino) a un tema de WordPress personalizado en toda regla, un tema basado en nuestras propias pautas de marca, ciertamente presentó desafíos.

En general, sin embargo, ha demostrado que puede cambiar fácilmente el comportamiento de WordPress y la estructura del tema. Una vez que sepa cómo se hace, el trabajo real es menos complicado de lo que piensa.

Siempre intentamos tener nuevas experiencias cuando estamos desarrollando algo. Específicamente, siempre buscamos crear algo reutilizable. Idealmente, otras personas también podrán utilizar nuestras herramientas para sus sitios web. De esta manera podemos retribuir a la comunidad de WordPress y la comunidad de código abierto en general.

Retribuir a la comunidad de WordPress

En este caso, John ha creado un proyecto de código abierto, un marco que se puede utilizar para crear un tema de WordPress desde cero. Sigue siendo un boceto aproximado, pero es el mismo que hemos utilizado con éxito en el tema actual de EasyWP.

El marco temático se llama WP Spock y tiene licencia GPL 3. Puede usarlo y modificarlo o contribuir a él de cualquier otra manera. ¡Únete a la diversión! También puede descargar WP Scotty. Es un tema repetitivo listo para usar.

Por tanto, este proyecto fue un doble éxito. No solo para nosotros: lograr nuestro objetivo de pasar de un sitio HTML estático a WordPress. Pero también pudimos hacer que el proceso y las herramientas fueran accesibles al público en general. ¡Parece que podemos estar felices con el resultado final!

Descubra el resultado de nuestro trabajo, principalmente el de John: Sitio web basado en EasyWP WordPress. ¿Has notado la diferencia? Probablemente sí: ¡obviamente es más rápido!

Como Convertimos Un Sitio Estatico A WordPress
Back To Top