Este proyecto es una contribución para comunidad de Wordpress y la conferencia WordCamp 2018 en San José, Costa Rica. Abordamos los fundamentos sobre cómo crear un Theme usando el Plugin WP Rest API y la librería Vue.JS para consumir la información desde el frontend.

2. Bienvenida al
Wordcamp 2018
#WCSJ
Conocimiento moderno de la industria web
una oportunidad al alcance de muchos
profesionales - emprendedores - estudiantes - compañías

3. The Iceman
27 récords Guinness
Optimización Humana
3 * 30 (respiraciones)
inhalación 100% cap.
exhalación 80% cap.

4. Creando un Theme con WP Rest API
Autor -> Bryan Rojas

5. Sobre Mi
Bryan Rojas es Full-stack Developer con 6 años de experiencia
trabajando en ambientes LAMP y MEAN.
Miembro de la comunidad Wordpress.
Sigan mi trabajo. -> LinkedIn - jeweldev.com - github

6. Construir un Theme usando el potencial del concepto
‘Headless CMS’ para articular nuestros equipos de trabajo
eficientemente.
var Armony_Team = JS_Devs + PHP_Devs;
Separar el front-end del CMS
{ Monolithic CMS vs Headless CMS }
Proyecto

7. ● Headless CMS - usado solamente para capturar, almacenar y
entregar datos, el back-end controla y el front-end renderiza.
● API (Application Program Interface) - serie de protocolos que permiten
interactuar a los componentes de software.
● REST (Representational State Transfer) - un estilo de arquitectura que
accede a los recursos de un API a través de estados(verbos)
dentro de las llamadas HTTP.
● JSON (JavaScript Object Notation) - formato para estructurar datos.
Wordpress Rest API

8. (src. Talking to 25% of the web, Human Made, 2016)

9. Wordpress?
31-36%
CMS más populares
src. Build With & W3Tech
Por qué es una ventaja usar...
JavaScript?
69.8%
Tecnologías más populares
src. StackOverflow Survery 2018
revisión junio 2018

10. PROYECTO - A-side
● Requerimientos
back-end
○ WP Plugins - Junior
○ WP Code - Mid
● Requerimientos
front-end
○ wp_enqueue_scripts CDNs -
Junior
○ Vue.JS Code - Mid
PROYECTO - B-side
● Construcción de SPA
○ Endpoints
○ Endpoints y el front-end
○ Componentes del front-end
● Posts List
○ Single Post
● Posts Pagination
● Page menu
○ Single Page

12. 1. if (WP >= 4.7) { disponible }
2. else { instalar WP Rest API }
3. ACF Advanced Custom Fields
Requerimientos
back-end
osea, vas súper anticuada
k fea vas toda anticuada boff

13. Instalar Plugin Advanced Custom Fields

14. ACF - GUI para agregar y editar campos

15. Estructura del Theme

16. theme/functions.php

17. theme/functions.php

18. theme/functions.php

19. theme/functions.php

20. 1. Endpoints
2. Single File Component no Webpack
3. Vue.JS Core
a. Loader
b. Resources
c. Routes
Requerimientos
front-end
Back-end
Front-end
from ego to we go!

21. Endpoints
src. developers.wp.org /wp-json/wp/v2/posts/

22. theme/index.php

23. theme/js/app.js

25. theme/js/postsList.vue

26. theme/js/postsList.vue

27. theme/js/postsList.vue

28. theme/js/postsList.vue

30. theme/js/singlePost.vue

31. theme/js/singlePost.vue

33. theme/js/pageMenu.vue

34. theme/js/pageMenu.vue

36. theme/js/singlePage.vue

37. theme/js/singlePage.vue

39. Próximas Charlas
Costa Rica Wordpress MeetUp
Webpack & Wordpress Integration
CRUD Restful with CPT - Series
JWT Auth Persistence

40. ● Theme
○ https://github.com/bryanrojasq/wordcamp-2018-wp-rest-api-theme
● Rest API Handbook
○ https://developer.wordpress.org/rest-api/
● Vue.js by Example
○ https://coursetro.com/courses/23/Vue-Tutorial-in-2018---Learn-Vue.js-by-Example
● Wordpress Code Reference
○ https://developer.wordpress.org/reference
● Advanced Custom Fields
○ https://www.advancedcustomfields.com/resources/getting-started-with-acf/
● Talking to 25% of the web
○ https://humanmade.com/wordpress-rest-api-white-paper/
Recursos