
現在的網站前端技術日新月異,當我們看到使用 Window.history 的做出來的轉場效果,開始覺得 WP 網站每次的換頁的頁面刷新令人不耐。大部分的 WP 的佈景仍然採用 jQuery 做為 javascript 的元件庫,雖然還算堪用,但由於 WP 的使用的是 PHP 當作開發語言,麵條式代碼在佈景的維護性上,痛苦萬分。
雖然在前端已經不符使用,但是 WP 的後台管理系統實在太香。 他的媒體管理,現成的文章系統,和超多好用的外掛都比自己手把手建立後台的 CP 值高的太多太多。
簡單的分析一下這麼做的優缺點吧
優點
- 前端的使用更加彈性,可以跳脫 WP 佈景主題的限制,並使用現代的前端框架(Vue, React, Angular)
- 方便和其他來源的 api 進行整合
- 不用搭建後台,可使用現成 WP 後台進行資料管理
- 可搭配許多 WP 的外掛進行使用,縮短開發時間
缺點
- 需求比較特殊時,必須要懂 WP hook,改成自己想要的方案
- elementor、woocommerce 這類會修改佈景的外掛,不能使用
好在 WordPress 在 4.x 版之後,提供了 REST api 的功能。也就是說我們可以使用任何的前端框架去取得 WordPress 網站的任何資料,大幅增加了網站前端建構的彈性。
這邊簡單的教大家,如何把 WordPress 當作單純的資料管理器使用,並在前端使用現代框架搭建網站。
注意! 本教學不適用於使用 WordPress.com 搭建的網站
建議大家在開始之前,最好具備以下能力:
- 具備在雲端主機(Bluehost, SugerHost …) 安裝 WordPress 的能力 。
可以參考以下教學:
帶路姬:
https://wpointer.com/wordpress-tutorials/wordpress-5days-blog-day1/
TechMoon:
https://techmoon.xyz/bluehost-wordpress/ - 對於 WP 的後台操作有一定的熟練度,會發表文章、安裝外掛等。
- 理解 REST api 在做什麼。
下一篇會從安裝 WordPress 網站的後續動作進行說明 :