起飛吧!使用 Frontity 在本機建立你的第一個 WordPress 靜態網站

WordPress 的速度一直都是許多人心中的夢魘,雖然有很多最佳化的方法,但速度提升仍然有他的瓶頸。所以近年來許多開發者紛紛把目標轉向靜態網站 (Static Website)。除了有靜態網站的 framework 像是 GatsbyJS 以外,還有許多以靜態網站為主打的網站託管服務 (Web Hosting)冒出,像是前年 (2019) 贊助 WordCamp Taipei 2018 的 Shifter,另外還有同樣是靜態網站託管服務的 Strattic ,再再都顯示靜態網站在 WordPress 市場的發展性。

而近日 WordPress 市場上的另一個大新聞就是,Frontity 這個以 WordPress 為基礎的開源靜態網站 framework 融資了 1百萬美元,而背後的金主就包含了 Automattic,也讓人期待靜態網站在 WordPress 生態的發展。

Frontity 是以 React 來開發的,官網有相當完整的範例教大家怎麼進行架設和開發,我們就自己來動手試試看吧!

第一步:建立一個新的 Frontity 專案

frontity 有自己的 CLI 工具,請在命令列輸入以下工具來建立一個新的 frontity 專案。請將 my-app 取代為自己的專案名稱

npx frontity create my-app

安裝的過程會詢問你要使用哪一個主題,目前有兩個可以選,一個是預設的 Mars,另一個是 TwentyTwenty,我們先選擇 Mars

frontity select theme

選擇好佈景主題後,會安裝相關的套件,並且詢問你是否要收到 frontity 更新的資訊,如果要的話請輸入你的 email,就完成安裝啦!

frontity finish installation

完成安裝後,請切換到你的專案目錄,這邊是 ucheng-frontity

cd ucheng-frontity

這個是預設的專案目錄結構

frontity defatul project hierachy

第二步:啟動伺服器

要正常瀏覽網頁,必須先啟動開發的伺服器,請在你的專案目錄下輸入:

npx frontity dev

這個指令會啟動伺服器,同時會偵測你在 packages 目錄下的所有改動,執行指令後會自動在你的瀏覽器開啟測試站網址 http://localhost:3000,預設會顯示frontity 測試站的內容。

frontity default mars theme

第三步:連線到你的網站

預設啟動 frontity 專案時,會顯示 frontity 測試站的內容,如果要顯示自己網站的內容,請打開 frontity.settings.js 這個檔案。將 api 改為自己的網址,https://yoursite/wp-json。

Frontity%20WordPress%20d31385fdd2cc453b851eb6d9ee17a007/Untitled%204.png

接著再到瀏覽器重新整理畫面,即可看到內容改為自己網站的內容了。

frontity blog content

結論

以上就是如何在本機中建立你的第一個 Frontity 專案,實際瀏覽起來速度真的是飛快。接下來就是要嘗試來修改佈景主題了。

The Rising of No-Code Tool:Elementor 4 歲生日快樂

頁面編輯器在 WordPress 的歷史中扮演著蠻重要的角色,過去有知名的 Visual Composer,以及不同佈景主題自己開發的頁面編輯器,像是 Avada 的 Fusion Builder,Elegent Theme 的 Divi 和 beTheme 的 Muffin Builder 等等,各家佈景主題通常為了達到最大的掌握度,透過自己開發的頁面編輯器,來將可能造成的相容性衝突降低至最小,而這也造成了許多時候你換了一個佈景主題,等於要重新學習一套頁面編輯器,相當地費時。

Elementor 的出現改變了這個狀況,甚至是建立了自己的生態。

Elementor 的快速成長

Elementor 最早在 2016 年的 6 月 1 日發佈第一個版本,到今天剛好 4 年,短短的 4 年成長的速度卻相當地快。在日前他們就宣佈已經有多達 500 萬個網站使用 Elementor 來架設,佔全部 WordPress 網站約 7%。

elementor growth
Elementor 成長趨勢圖 (圖片來源:Elementor 官網)

Elementor 的未來

在今年 2 月的時候,Elementor 更宣布了金額高達美金 1500 萬的募資。有許多眼尖的人在徵才平台上看到,Elementor 在徵求雲端伺服器的人才,看似要為打造自己的架站平台做準備。而這似乎也不令人意外。

在 Gutenberg 隨著 WordPress 5.0 推出後,許多第三方開發者和公司也不斷地開發各式各樣的區塊,而慢慢地也有不少人在討論,Gutenberg 是否有可能是頁面編輯器的終結者?從各方面來看, Gutenberg 的確都有可能成為頁面編輯器的潛力,包含了目前正在開發中的 Full Site Editing,也看似乎在替 Gutenberg 成為頁面編輯器做準備。

不過 Gutenberg 作為頁面編輯器仍然有一段路要走,許多使用者對於 Gutenberg 的編輯體驗仍頗有微詞,也因此 Elementor 的出現似乎就成為了另一個救贖。

Elementor 簡單直覺的編輯介面,加上開放可擴充的特性,讓 Elementor 快速地發展出自己的生態。近日 Envato 更是推出了以販售 Elementor 範本為主的服務 Template Kits,無非是看中 Elementor 發展的潛力,在過去 Envato 其實也有類似的服務,就是以 Layers 這套佈景主題為主的商品販售,包含外掛和樣式,不過後來因為成長幅度有限而告吹,巧的是 Layers 佈景主題後來被 Elementor 給買了下來。Elementor 的出現,使用者似乎不太需要再像過去一樣,不斷地重新去學習一套佈景主題,而這也讓佈景主題的角色顯得有點尷尬。

結論

Elementor 的成長,對使用者來說的確是一項好事,因為他讓使用者更容易進入 WordPress 的世界,而他也像是一面鏡子,讓 Gutenberg 的發展更加戰戰兢兢。期待未來 Elementor 的發展,也希望因為有 Elementor 的存在,讓 Gutenberg 的發展更好,甚至是讓整體 WordPress 的社群更好。

WooCommerce 4.0 發佈

WooCommerce 4.0 發佈了!這是一個大版號的更新,代表著這個版本並不完全相容於前一個 3.x 的版本。所以建議在更新前先在測試環境測試,測試正常後再更新到正式站。

WooCommerce 4.0 帶來了什麼新功能?

WooCommerce 4.0 是 2020 年的第一個發佈的版本,其中包含了最新的 WooCommerce Admin 功能。WooCommerce Admin 是 WooCommerce 核心邁向以 JavaScript 為導向現代化使用者體驗的第一步。

WooCommerce Admin

新的 WooCommerce Admin 包含了許多新的更新,並提供給商點管理者更多資訊,包含:

  • 新的資訊頁
  • 新的報表頁
  • 新的通知體驗
  • 新的商店管理工具

要注意的是,雖然 WooCommerce Admin 內建在這個版本,但是舊的報表工具還是會留著,將來在適當的時機會移除舊有的報表工具。

為了要提供新的介面體驗,你的網站必須要執行 WooCommerce 5.3 以上,如果商店的 WordPress 版本在 5.3 以下,會自動關閉 WooCommerce Admin。

Action Scheduler 3.1

在 WooCommerce Admin 底下執行的一個很重要的技術就是 Action Scheduler。這個程式其實已經在 WooCommerce 核心中運行了。這個 3.1 的版本是一個針對效能改良過後的版本,使用自訂的資料表來儲存資料來讓使用者有更佳的體驗,即使你的網站有著很大量的訂單或商品資料。

新的 Onboarding 體驗

要開始一個商店並不是那麼容易,新的 Onboarding 體驗讓使用者更容易開始一家商店。因此有 50% 的新使用者可以嘗試這個新的 Onboarding 流程。

其他更新

除了 WooCommerce Admin 外,WooCommerce 4.0 還包含了許多更新

  • 改良的訂單編輯界面
  • 最新的 WooCommerce 區塊套件修正
  • 針對英國脫歐 (Brexit) 和 Vat 的修正
  • 改良的 Email 處理
  • 針對儲存可變商品和貨到付款的最佳化

除了這新改進外,還有很多小的修正和新的 hook 推出,你可以在 changelog 中找到這些資訊。

棄用的函式

countries_using_vat 已被 WC_Countries::get_vat_countries 取代

更新的範本檔案

檔案改變
cart/shipping-calculator.php國家的字串在運費計算中改變為國家/區域
global/quantity-input.php在數量欄位中新增 placeholder 屬性
emails/customer-reset-password.php修正段落尾端遺漏的標籤
emails/email-styles.php更新 CSS 樣式
emails/email-header.php將表格寬度設定為 100%
single-product/add-to-cart/grouped.php在數量欄位中新增 placeholder 屬性

佈景主題的未來?Block-based Themes

隨著全站編輯(full-site editing)已經是一個實際的目標,佈景主題在未來將會有不同的面貌。目前 Gutenberg 團隊已經開始 block-based theme(以區塊為基礎的佈景主題) 的初版文件來描述 block-based theme 的概念和內容。

什麼是全站編輯 (Full Site Editing)?

在了解 Block-based theme 會如何運作之前,也許你可以先了解一下目前 Gutenberg 的發展方向。Gutenberg 的終極目標就是希望讓使用者可以透過區塊系統來客製化網站的任何功能和外觀,到目前為止,區塊系統主要用來編輯文章內容。

為了要達成 Full site editing 的目標,任何網站上的動態內容都必須是一個區塊,例如網站的選單或是標題,使用者可以將選單或標題放在網站的任何一個地方。或許你會開始懷疑,如果我可以任意移動這些區塊,那麼佈景主題存在的功能到底是什麼?

提議的佈景主題結構

目前提議的佈景主題結構跟現有的結構差不多。最大的差別在於佈景主題的樣板會區分為 “block-templates” 和 “block template parts”

theme
|__ style.css
|__ functions.php
|__ block-templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ block-template-parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

如何使用 Gutenberg 鍵盤快速鍵

隨著 Gutenberg 的功能來越多,使用快捷鍵可以大幅加速你的編輯流程,如果你想要查詢 Gutenberg 的快速鍵有哪些,可以透過以下兩種方式來查詢有哪些快捷鍵可以使用。

透過工具列選單開啟快速鍵清單

開啟 Gutenberg 鍵盤快速鍵

透過快速鍵來開啟快速鍵清單

透過快速鍵開啟快速鍵清單會根據你的作業系統而有些不一樣。如果你是 Mac 的使用者,請使用 Ctrl + Opt + H 來開啟,如果你是 Windows 的使用者,請使用 Shift + Alt + H 來開啟。

快速鍵清單

鍵盤快速鍵Mac 快速鍵Windows 快速鍵
顯示鍵盤快速鍵清單Ctrl + Opt + HAlt + Shift + H
全域快速鍵Mac 快速鍵Windows 快速鍵
儲存變更Cmd + SCtrl + S
復原變更Cmd + ZCtrl + Z
取消復原變更Cmd + Shift + ZCtrl + Shift + Z
顯示或隱藏設定面板Cmd + Shift + ,Ctrl + Shift + ,
開啟區塊導覽選單Ctrl + Opt + OCtrl + Alt + O

Gutenberg Block Directory: 區塊目錄與單一區塊外掛

Gutenberg 在 6.5 的版本加入了一個新的實驗性功能,讓使用者在新增區塊的時候,可以搜尋到其他未安裝在網站上的區塊。而這些未安裝在網站上的區塊將來將會顯示在 WordPress.org 上的一個區塊的分類。這個功能其實是 Matt Mullenweg 在 2018 的 WordCamp US 上宣布的 9 Projects for 2019 中的其中一項。

如果你想實驗這項功能,可以自行安裝 Gutenberg,然後在 Gutenberg > Enable Block Directory search 中找到這項功能。

啟用 Block Directory

啟用之後,你就可以在區塊編輯器中插入區塊時搜尋區塊。這邊是以 Boxer 這個測試區塊為例。

當你插入了這個區塊時,實際上是安裝了一個外掛在你的網站上。所以你去外掛清單看會多出一個外掛。

到這邊你應該不難發現,未來將會有一個新的外掛型態,而這個外掛是以單一區塊的模式來提供功能。之所以會有這樣的概念原因在於,目前已經有很多的外掛提供了自己的區塊,但是基本上你很難用區塊的名稱去搜尋到這個區塊,而且在外掛的頁面上,也很難描述清楚提供的區塊的所有功能。

WordPress 團隊提出了一個新型態的外掛概念:Single Block Plugins。這些外掛只會提供一個區塊,且會在外掛的目錄中歸類在 Block Directory 這個內容中。更多的資訊和討論可以到這邊

參考資料:

WooCommerce 3.9 發佈

WooCommerce 團隊針對 WooCommerce 發佈的方式做了一些改變,為了讓發佈的時程不會拖的太長,導致一次有太多的變動加入到發佈的版本中,將來 WooCommerce 將會改為定期的發佈,讓每次的變動不至於太大。上一個版本 3.8 是在 2019/11/5 發佈,而下一個版本 3.9 即將於 2019/1/7 發佈。我們來看看新的版本會包含哪些變動吧!

WooCommerce Block

新版的 WooCommerce 3.9 將會包含 WooCommerce Block 2.5。

WooCommerce 3.9 新增了一個 “全部商品”的區塊,這個區塊跟原本 WooCommerce 核心的商店頁面的顯示是一樣的,不過這個區塊是透過 Javascript 和 REST API 來顯示資料,所以顧客在瀏覽商品時可以停留在同一頁,瀏覽體驗會很好多。

你可以編輯這個商品清單區塊的內容,來控制商品顯示的資料(Inner Block),或是與其他區塊共同使用,例如商品過濾區塊。

新的 PHP 和 WordPress 最低版本要求

WooCommerce 3.9 最低需要 PHP 7.0,這個要求同時代表著你需要 WordPress 5.0 以上的版本才能正常運行 WooCommerce 3.9。如果你的商店的 PHP 低於 7.0 或是 WordPress 低於 5.0,你將無法升級到 WooCommerce 3.9 的版本。

其他的改進

新的用戶引導(Onboarding) 介面

ShareAblock – 一個開源共享的 Gutenberg 區塊、範本資料庫

ShareAblock 是由 EditorsKit 開發者所建立個一個開源共享的區塊、範本設計資料庫,成立的目標在於希望讓使用者能夠更快速地使用並設計區塊。所有人都可以自由地下載網站上的區塊或樣板,但上傳的資格目前仍有所限制,只有經過審核的部分作者可以上傳,不過你還是可以申請成為具資格的上傳者。

如何使用

由於目前 Gutenberg 並未支援區塊的匯出和匯入,如果要匯入下載的區塊或樣板,必須在網站上先安裝 EditorsKit,EditorsKit 支援以 json 的格式匯出區塊,並透過拖曳的方式直接匯入區塊到你的編輯器中。

匯出區塊內容

找到你想下載的區塊設計,頁面上會說明這個設計使用了哪些區塊,以及他個功能描述,按下 Download Now 來下載。

按下 Download Now 會跳出視窗要求輸入你的姓名和 Email。

完成後會有一個下載確認,這時候我才了解原來他是一個購買的流程,同時也會在這個網站幫你建立一個帳號,也許將來會有收費的計畫,讓一些比較進階或複雜的區塊設計能夠讓使用者付費下載,我覺得這也是蠻合理的,至於使用者買不買單就看之後的發展了。

匯入區塊內容

找到你下載的 json 檔,透過拖曳的方式直接拖曳到你正在編輯的編輯器中,即可完成匯入。以下為匯入的 Call to Action 區塊範例。

Schedule a free consultation

Vestibulum et magna mattis, sollicitudin convallis ligula ac. Ullamcorper turpis, nec metus nunc vel ullamcorper turpis, turpis. Augue justo nec convallis metus nunc vel turpis. 

範本

除了區塊以外,網站上還有另一個分類是範本 (Template),範本屬於比較完整的設計頁面,你可以快速地建構出頁面。

未來

目前 EditorsKit 和 ShareABlock 在做的事算是走在蠻前面的,很多你覺得不錯的功能也許將來也會直接內建在 Gutenberg 中,或許將來在 WordPress.org 上,除了外掛和主題之外,還會再多一個區塊的分類,讓使用者可以自由地上傳和下載區塊,我想屆時 Gutenberg 也會被更多使用者所接納。

Font Resize