欣迪

現在的網站前端技術日新月異,當我們看到使用 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 搭建的網站

建議大家在開始之前,最好具備以下能力:

  1. 具備在雲端主機(Bluehost, SugerHost …) 安裝 WordPress 的能力 。
    可以參考以下教學:
    帶路姬:
    https://wpointer.com/wordpress-tutorials/wordpress-5days-blog-day1/
    TechMoon:
    https://techmoon.xyz/bluehost-wordpress/
  2. 對於 WP 的後台操作有一定的熟練度,會發表文章、安裝外掛等。
  3. 理解 REST api 在做什麼。

下一篇會從安裝 WordPress 網站的後續動作進行說明 :

WordPress 做為純管理系統使用 (2) 安裝建議

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。