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.
¿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:
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.
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 Laravel–uno 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 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 Veintinueve – el 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.
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:
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:
¿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.
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.
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!
