WORDPRESS SEBAGAI

HEADLESS CMS
RIO ASTAMAL
Founder BelajarAWS.com
 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

 beginner - intermediate

APA YANG DIPELAJARI?

+ Konsep Headless CMS

+ Headless CMS pada WordPress

+ Demo VueJS + Headless WordPress
 APA ITU
HEADLESS CMS?
HEADLESS CMS

SEBUAH CMS YANG TIDAK MEMILIKI KOMPONEN SISTEM TAMPILAN

DEPAN (FRONTEND) ATAU TERPISAH DENGAN MANAJEMEN KONTEN
(BACKEND).

READ WRITE
FRONTEND KONTEN BACKEND
REST/GRAPHQL
 HEADLESS CMS POPULER

DIMANA WORDPRESS?

*) Sumber https://jamstack.org/headless-cms/
WORDPRESS “BUKANLAH” HEADLESS CMS

WORDPRESS MEMILIKI KOMPONEN FRONTEND YANG DISEBUT THEME

YANG MENYATU DENGAN BACKEND.

TAPI…
 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/
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
},
...
}
}
]
 NORMAL WORDPRESS
VS
HEADLESS WORDPRESS
NORMAL WORDPRESS WORDPRESS
MYSQL
1. Request

2. Response THEME PLUGIN

HTML/CSS/JS
PHP
FRONTEND

HEADLESS WORDPRESS
WORDPRESS
MYSQL
1. Request 2. REST API

4. Response FRONTEND 3. Response PLUGIN

>_
_ HTML/CLI/Mobile/Desktop JSON {…}
PHP

THEME
APA KEKURANGAN DARI
HEADLESS WORDPRESS?
 HEADLESS WORDPRESS NORMAL
WORDPRESS THEME 
 PILIHAN THEME YANG SANGAT
TIDAK BISA DIGUNAKAN
 BANYAK & VARIATIF

 

TIDAK SEMUA PLUGIN 
 PLUGIN UNTUK BERBAGAI
DAPAT DIGUNAKAN
 KEBUTUHAN

 

PERLU PENANGANAN 
 SEO BEKERJA TANPA PERLU
KHUSUS UNTUK SEO KERJA EKSTRA
 KELEBIHAN UTAMA
HEADLESS WORDPRESS
MULTI-LANGUAGE DEVELOPMENT WORDPRESS SUDAH 

SANGAT POPULER

MULTI-PLATFORM DEPLOYMENT WP digunakan oleh 40.7% seluruh website*

>_
_

*) https://w3techs.com/technologies/overview/content_management
 DEMO
HEADLESS WORDPRESS
+ VUEJS SEBAGAI FRONTEND
 + RECENT POSTS SIDEBAR

+ VIEW POSTS LIST (HOMEPAGE)
 + CATEGORIES SIDEBAR

+ VIEW SINGLE POST
 + POSTS LIST BY CATEGORY

+ DEPLOYMENT USING NETLIFY + BREADCRUMB NAVIGATION

https://wdtalk2021-headless-wp.netlify.app/
https://github.com/rioastamal-examples/webdevtalk2021-headless-wordpress
 ./END
Rio Astamal rioastamal.net
rioastamal rio@rioastamal.net
Presentasi ini juga dapat dilihat pada rioastamal.net/presentasi/2021/04/

Gambar icon diambil dari Flaticon.com