O
OscarAlderete
Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, esta vez vine a compartir 1 forma para usar AlpineJS con WordPress, dado ke hay mucha gente en este foro ke hace cosas con WP y Laravel (recordar ke Alpine viene by default con Laravel) esto podría serles d utilidad. Comencemos:
1. Tenemos 1 caso real: https://africurls.oscaralderete.com/por-que-comprar-en-africurls/ puro contenido estático así ke podría haberse puesto ahí usando el editor html d WP pero la operativa de Alpine se define en el markup así ke al grabar la página el 'sanitizer' de WP lo invalidaría.
2. Teníamos hecho ya 1 código en Alpine para ajustar el estado d los tabs ke verán en la url antes indicada, hagan scroll down/up para ver como el glider d color verde se desliza hacia el tab activo dependiendo del viewport. Si no conoces Alpine, es el micro-framework JS ke viene by default con Laravel y no concibes cuán poderoso puede ser hasta ke programas apps con Livewire.
3. Resulta ke teníamos ke ajustar el código d Alpine a 1 página d WP (ya estaba hecho no íbamos a re-escribirlo/ajustarlo/convertirlo), hay varias formas d hacerlo pero la + simple -en nuestro caso- fue:
3.1 Edita el archivo theme.json de tu theme activo para -en la propiedad- "customTemplates" agregar la referencia a tu nuevo template. Por flexibilidad recomendamos definir la sub-propiedad "postTypes" como: "postTypes": ["page","post"] para ke el theme sea aplicable tanto a custom posts como pages.
3.2 Crear y definir 1 nuevo template HTML a nuestro theme (los themes + nuevos d WP desde hace 1 tiempo usan solo templates d extensión .html haciendo + complicado inyectar PHP directamente en el theme) como WP renderiza el contenido dinámicamente sobre el theme el sanitizer no eliminará las directivas Alpine del markup. Eso sí, cuida d no definir la directiva x-data directamente en el template pues ahí si el sanitizer lo invalidará al tratarse d 1 objeto JS. Tienes ke usar el modo 're-usable data': https://alpinejs.dev/directives/data#re-usable-data
3.3 Traslada tu código Alpine (básicamente todo lo definido en la directiva x-data) a un archivo JS. Ten en cuenta ke en este 'modo' algunas referencias directas a los elementos d x-data tienen ke cambiar y usar 'this' o 'Alpine' como prefijo. Lo recomendable es crear 1 carpeta 'js' en tu theme y colocar ahí tu código JS aunque en teoría podría estar en cualkier ubicación accesible por el browser d tu site.
3.3 En el archivo functions.php d tu theme crea 1 función para inyectar Alpine usando wp_enqueue_script() y como se trata d Alpine ke se instancia cuando todo el DOM está cargado, recuerda usar la opción: array('strategy' => 'defer'); usa la misma función para agregar la referencia a tu archivo JS. Una buena práctica es cargar condicionalmente Alpine y tu JS code sólo en la página/post ke lo utilizará d ese modo tu WP cargará los recursos con + eficiencia. Ya t habrás dado cuenta ke si tu app necesita custom CSSs files, los deberás cargar usando esta función.
Eso es todo, releo este post y parece mucha chamba/trabajo pero si estás familiarizado o programas para WP y tienes experiencia con Laravel Alpine seguramente entenderás todo lo antes dicho. Yo soy programador, no soy el + didáctico y no vivo d hacer tuts/blogs/vlogs pero compartir el conocimiento es el mantra d nuestros tiempos así ke ahí tienen algo con ké jugar. Recuerden ke programar solo se aprende haciendo. 👋
PS: Se habrán dado cuenta ke para contenidos estáticos esto funciona bien, y ké si necesitan agregar contendio dinámico, pues podrían hacerlo a través d 1 custom shortcode ke añaden no directamente al template sino desde el mismo editor d post/page d WP.
1. Tenemos 1 caso real: https://africurls.oscaralderete.com/por-que-comprar-en-africurls/ puro contenido estático así ke podría haberse puesto ahí usando el editor html d WP pero la operativa de Alpine se define en el markup así ke al grabar la página el 'sanitizer' de WP lo invalidaría.
2. Teníamos hecho ya 1 código en Alpine para ajustar el estado d los tabs ke verán en la url antes indicada, hagan scroll down/up para ver como el glider d color verde se desliza hacia el tab activo dependiendo del viewport. Si no conoces Alpine, es el micro-framework JS ke viene by default con Laravel y no concibes cuán poderoso puede ser hasta ke programas apps con Livewire.
3. Resulta ke teníamos ke ajustar el código d Alpine a 1 página d WP (ya estaba hecho no íbamos a re-escribirlo/ajustarlo/convertirlo), hay varias formas d hacerlo pero la + simple -en nuestro caso- fue:
3.1 Edita el archivo theme.json de tu theme activo para -en la propiedad- "customTemplates" agregar la referencia a tu nuevo template. Por flexibilidad recomendamos definir la sub-propiedad "postTypes" como: "postTypes": ["page","post"] para ke el theme sea aplicable tanto a custom posts como pages.
3.2 Crear y definir 1 nuevo template HTML a nuestro theme (los themes + nuevos d WP desde hace 1 tiempo usan solo templates d extensión .html haciendo + complicado inyectar PHP directamente en el theme) como WP renderiza el contenido dinámicamente sobre el theme el sanitizer no eliminará las directivas Alpine del markup. Eso sí, cuida d no definir la directiva x-data directamente en el template pues ahí si el sanitizer lo invalidará al tratarse d 1 objeto JS. Tienes ke usar el modo 're-usable data': https://alpinejs.dev/directives/data#re-usable-data
3.3 Traslada tu código Alpine (básicamente todo lo definido en la directiva x-data) a un archivo JS. Ten en cuenta ke en este 'modo' algunas referencias directas a los elementos d x-data tienen ke cambiar y usar 'this' o 'Alpine' como prefijo. Lo recomendable es crear 1 carpeta 'js' en tu theme y colocar ahí tu código JS aunque en teoría podría estar en cualkier ubicación accesible por el browser d tu site.
3.3 En el archivo functions.php d tu theme crea 1 función para inyectar Alpine usando wp_enqueue_script() y como se trata d Alpine ke se instancia cuando todo el DOM está cargado, recuerda usar la opción: array('strategy' => 'defer'); usa la misma función para agregar la referencia a tu archivo JS. Una buena práctica es cargar condicionalmente Alpine y tu JS code sólo en la página/post ke lo utilizará d ese modo tu WP cargará los recursos con + eficiencia. Ya t habrás dado cuenta ke si tu app necesita custom CSSs files, los deberás cargar usando esta función.
Eso es todo, releo este post y parece mucha chamba/trabajo pero si estás familiarizado o programas para WP y tienes experiencia con Laravel Alpine seguramente entenderás todo lo antes dicho. Yo soy programador, no soy el + didáctico y no vivo d hacer tuts/blogs/vlogs pero compartir el conocimiento es el mantra d nuestros tiempos así ke ahí tienen algo con ké jugar. Recuerden ke programar solo se aprende haciendo. 👋
PS: Se habrán dado cuenta ke para contenidos estáticos esto funciona bien, y ké si necesitan agregar contendio dinámico, pues podrían hacerlo a través d 1 custom shortcode ke añaden no directamente al template sino desde el mismo editor d post/page d WP.
