This document discusses headless content management systems (CMS) using WordPress as an example. It defines a headless CMS as one where the content management (backend) is separated from the presentation frontend. WordPress can function as a headless CMS by using its REST API to access content independently of themes. Benefits of a headless WordPress include multi-language and multi-platform development. The document demonstrates building a Vue.js frontend for a headless WordPress site, retrieving posts and categories through the REST API.

1. HEADLESS CMS
WORDPRESS SEBAGAI
RIO ASTAMAL
Founder BelajarAWS.com

2. RIO ASTAMAL
2020 AWS Community Builder (ID)
2020 Writer TeknoCerdas.com (ID)
2017 Lead Backend @ClearView.team (US)
2016 Founder BelajarAWS.com (ID)
2015 Lead Dev @DominoPOS (SG)
2014 System Engineer @WowRack (US/ID)
2004 Freelance Web Developer
■ Masih aktif hingga sekarang

3. APA YANG DIPELAJARI?
+ Konsep Headless CMS
+ Headless CMS pada WordPress
+ Demo VueJS + Headless WordPress
beginner - intermediate

4. APA ITU
HEADLESS CMS?

5. HEADLESS CMS
SEBUAH CMS YANG TIDAK MEMILIKI KOMPONEN SISTEM TAMPILAN
DEPAN (FRONTEND) ATAU TERPISAH DENGAN MANAJEMEN KONTEN
(BACKEND).
FRONTEND BACKEND
KONTEN
READ
REST/GRAPHQL
WRITE

6. HEADLESS CMS POPULER
DIMANA WORDPRESS?
*) Sumber https://jamstack.org/headless-cms/

7. WORDPRESS “BUKANLAH” HEADLESS CMS
WORDPRESS MEMILIKI KOMPONEN FRONTEND YANG DISEBUT THEME
YANG MENYATU DENGAN BACKEND.
TAPI…

8. REST API SEJAK WORDPRESS 4.7 (DES 2016)
KONTEN DARI WORDPRESS SEPERTI POSTS, COMMENTS, USERS,
META DAN SETTINGS DAPAT DIAKSES LEWAT REST API.
SECARA TIDAK LANGSUNG MENJADIKAN WORDPRESS SEBAGAI
HEADLESS CMS.
/wp-json/wp/v2/
https://developer.wordpress.org/rest-api/

9. CONTOH REST API UNTUK DAFTAR POST
GET /wp-json/wp/v2/posts
[
{
"id": 2130950,
"date": "2021-03-26T21:24:06",
"date_gmt": "2021-03-27T04:24:06",
"guid": {
"rendered": "https://example.com/?p=2130950"
},
"modified": "2021-03-26T23:16:18",
"modified_gmt": "2021-03-27T06:16:18",
"slug": "demo-content",
"status": "publish",
"type": "post",
"link": “https://example.com/2021/03/26/demo-content/“,
"title": {
"rendered": "…"
},
"content": {
"rendered": "...",
"protected": false
},
"excerpt": {
"rendered": "...",
"protected": false
},
...
}
}
]

10. NORMAL WORDPRESS
VS
HEADLESS WORDPRESS

11. PHP
MYSQL
THEME PLUGIN
1. Request
2. Response
HTML/CSS/JS
PHP
MYSQL
PLUGIN
1. Request
4. Response FRONTEND
WORDPRESS
WORDPRESS
2. REST API
3. Response
JSON {…}
NORMAL WORDPRESS
HEADLESS WORDPRESS
HTML/CLI/Mobile/Desktop
FRONTEND
_
>_
THEME

12. APA KEKURANGAN DARI
HEADLESS WORDPRESS?

13. WORDPRESS THEME
TIDAK BISA DIGUNAKAN
TIDAK SEMUA PLUGIN
DAPAT DIGUNAKAN
PERLU PENANGANAN
KHUSUS UNTUK SEO
PILIHAN THEME YANG SANGAT
BANYAK & VARIATIF
PLUGIN UNTUK BERBAGAI
KEBUTUHAN
SEO BEKERJA TANPA PERLU
KERJA EKSTRA
HEADLESS NORMAL
WORDPRESS

14. KELEBIHAN UTAMA
HEADLESS WORDPRESS
MULTI-LANGUAGE DEVELOPMENT
MULTI-PLATFORM DEPLOYMENT
WORDPRESS SUDAH
SANGAT POPULER
_
>_
WP digunakan oleh 40.7% seluruh website*
*) https://w3techs.com/technologies/overview/content_management

15. DEMO
HEADLESS WORDPRESS
+ VUEJS SEBAGAI FRONTEND
+ VIEW POSTS LIST (HOMEPAGE)
+ VIEW SINGLE POST
+ DEPLOYMENT USING NETLIFY
+ RECENT POSTS SIDEBAR
+ CATEGORIES SIDEBAR
+ POSTS LIST BY CATEGORY
+ BREADCRUMB NAVIGATION
https://wdtalk2021-headless-wp.netlify.app/
https://github.com/rioastamal-examples/webdevtalk2021-headless-wordpress

16. ./END
Rio Astamal
rioastamal
rioastamal.net
rio@rioastamal.net
Gambar icon diambil dari Flaticon.com
Presentasi ini juga dapat dilihat pada rioastamal.net/presentasi/2021/04/