王昱程 – 第 6 頁 – 每日 WordPress

WooCommerce 4.5 發佈！

2020-10-182020-09-10 作者: 王昱程

WooCommerce 4.5 已經於 9/9 正式發布，這是一個小版本的發佈，代表向下相容於之前的版本。

這個版本是一個相對小規模的更新，專注在整體程式的穩定和相容性。WooCommerce 團隊根據之前的發佈流程中學習並改進了整體的測試流程。而這個改變可以確保之後的發佈可以更加的可靠和穩定。

WooCommerce 4.5 有什麼新功能？

新的 onboarding 導覽

當你第一次瀏覽 WooCommerce 首頁畫面時，你將會看到一個指引來提供你更多資訊 (#4890)

REST API

這個版本將原本在另一個源碼庫(#27100)的 REST API 合併進入 WooCommerce 核心中。之後任何關於 REST API 的問題，都會被記錄在 WooCommerce 核心的源碼庫。

Filters

這個版本增加了5個 filters

Filters	說明
woocommerce_cart_product_cannot_add_another_message	可以顯示多於1個商品被放入購物車中的訊息
woocommerce_cart_product_out_of_stock_message	可以顯示一個商品沒有庫存的訊息
woocommerce_cart_product_not_enough_stock_message	可以顯示一個商品的庫存不足的訊息
woocommerce_file_download_method	檔案下載方式
woocommerce_query_for_reserved_stock	可以改變讀取商品保留庫存的查詢

執得注意的修正和改善

1.當你啟用 “在輸入地址之前隱藏運送成本” 的功能時，現在在你完全輸入地址之前運費會完全隱藏 (#27143)

2.如果你取消了一個狀態為 pending 的訂單，這個訂單使用的折價券會被釋出 (#27179)

3.當你手動建立訂單時，如果變化商品沒有指定貨號 (sku) 則會回傳父商品的貨號 (#27171)

4.折價券的代碼現在會將 HTML 的標籤以編碼的方式儲存。這提升了安全性來確保不會將沒有過濾的輸入儲存起來。這將會有一個資料庫的 migration 當你安裝 4.5 時，所以這不是一個會造成任何錯誤的改變。 (#27140)

你可以在 changelog 中看到所有的修正和改善。

資料庫改變

這個版本不需要任何核心資料庫的改變。但是，4.3 的版本新增了一個新的資料庫表格，所以如果你是從 4.3 版本之前更新的，請確保 WordPress 使用者有權限新增資料庫表格到資料庫中。

WordPress 最低版本需求

這個版本雖然沒有改變最低的 PHP 版本需求，但提升了最低的 WordPress 版本至 5.3。

WordPress 5.5 Eckstine 發佈！新增 Sitemap、圖片延遲載入和自動更新等功能

2020-08-22 作者: 王昱程

WordPress 5.5 Eckstine 已於 8 月 11 日正式發佈，這次的發佈帶來了許多新的功能，主要包含速度、搜尋和安全三個面向，一起來看看這些新的功能吧！

速度

WordPress 5.5 內建了圖片的延遲載入 (Lazy Loading) 功能，這個功能過去通常由外掛或佈景主題提供的功能，現在內建就提供了這項功能。這個功能會讓圖片在進入使用者的瀏覽器檢視範圍時才會載入圖片，而不會在網站載入時就將全部的圖片載入。

延遲載入除了能夠改善使用者體驗外，也能夠讓使用者在手機的環境下，大幅減少頻寬的流量使用。

WordPress 5.5 的延遲載入是使用標準的網頁規範，針對每個有標示寬跟高的圖片標籤，加上 loading=”lazy” 這個屬性值，預設 WP 會在以下內容顯示的圖片都加上 loading=”lazy” 的屬性：

the_content()
the_excerpt()
widget_text_content()
get_avatar()
wp_get_attachment_image()

目前這項功能只有針對 <img> 這個標籤，如果你的網站有其他的資源，像是 iframe、影片或是一些嵌入內容(embed)，就無法適用。你可以使用第三方的外掛，像是 WP Rocket 來針對其他資源提供延遲載入的功能，如果你啟用了 WP Rocket 的延遲載入功能，則 WordPress 內建的延遲載入功能就會關閉。

搜尋

WordPress 5.5 內建了 XML Sitemap 的功能，讓瀏覽器能夠更容易找到你的網站。當然目前這個Sitemap 功能比較陽春一點，但他是可以擴充的，所以你可以針對你的需求去修改你的網站地圖。如果你有安裝別的 SEO 外掛，內建的 Sitemap 會自動停用。

內建的 sitemap 會在你網站根目錄下的 /wp-sitemap.xml 這個網址路徑，不過如果你是輸入 /sitemap.xml 一樣會被轉向至 /wp-sitemap.xml

內建的網站地圖會列出文章、頁面、分類、標籤和使用者，如果你希望列出其他的內容，還是必須要依賴第三方的外掛。

安全

過去 WordPress 的自動更新功能僅限於核心程式，現在你可以選擇是否要自動更新外掛或佈景主題，來讓你的網站維持在最新的狀態。預設狀態下，這個功能是關閉的，若你要啟用則可以針對每個外掛或佈景主題來啟用自動更新。不過要注意的是，這個自動更新功能僅限於在 WordPress.org 上的外掛和佈景主題。

另外，你現在也可以自行透過後台上傳 zip 檔來更新外掛和佈景主題

以上三個是這次比較重大的更新，當然每次 WordPress 的更新也會包含一個很重要的部分就是區塊編輯器，這次也不例外。

區塊編輯器

新的 UI 介面
可同時設定多個區塊的樣式
裝置預覽
上標和下標
圖片編輯
新的區塊新增面板
區塊目錄 (Block Directory)
區塊版面配置 (Block Pattern)

新的 UI 介面

新的區塊編輯器提供了新的 UI 介面，包含了區塊選擇器和工具列等。其中區塊的移動功能也被移到了工具列中。

new gutenberg toolbar in WP 5.5 — WordPress 5.5 區塊編輯器工具列

可同時設定多個區塊樣式

過去若要設定樣式，只能針對區塊一個一個設定。現在你可以一次選擇多個區塊，然後同時設定樣式。

裝置預覽

現在你可以直接在區塊編輯器中預覽頁面呈現的結果，包含了桌面、平板和行動裝置，你也可以選擇在新分頁中預覽，也就是過去預設的預覽功能。

上標和下標

過去若要使用上標和下標的功能必須要使用 EditorsKit 這樣的外掛，現在內建就提供了。

圖片編輯

現在你可以直接在編輯器中編輯圖片，你可以設定圖片的比例或是旋轉圖片，若你編輯了圖片並套用後，會在媒體庫中產生一張新的圖片。

新的區塊新增面板

過去舊的區塊新增面板將不同的區塊以不同的分類區分並收合起來，要找到你要的區塊必須收合不同的分類才能找到，5.5 中的新增面板則是全部展開，讓你能夠更快速地找到你要的區塊。

區塊目錄 (Block Directory)

在 WordPress 5.5 中你可以輸入關鍵字來搜尋在你的網站上有安裝的區塊，這些區塊包含了內建的區塊以及你安裝第三方外掛或佈景主題提供的區塊。若搜尋不到，則會顯示在 WordPress.org 中的區塊，你可以直接安裝這些區塊，而不用再到外掛搜尋頁面或是自行下載安裝，相當地方便。

區塊版面配置 (Block Pattern)

我們之前有介紹由 EditorsKit 開發者所建立的區塊範本資料庫 ShareABlock，那時候我們就有提到，也許這樣的功能未來會內建在 WordPress 中，現在我們在 WordPress 5.5 中看到了，就是版面配置 (Block Pattern)。

版面配置是由多個區塊所組成的群組，讓你可以快速將這些版面設計新增至你正在編輯的文章或頁面中。你也可以透過 register_block_pattern 來新增自己的版面配置。

結論

以上就是 WordPress 5.5 所帶來的一些重大更新和新功能，當然還有很多針對開發者所提供的功能，如果想要知道更多詳細的功能，可以參考 WordPress 5.5 的發佈資訊或是 Field Guide 。

WooCommerce 4.4 發佈

2020-10-182020-08-18 作者: 王昱程

WooCommerce 4.4 在 8/18 正式發布了，這是一個小版本的發佈，代表著會相容於之前的版本。

WooCommerce 4.4 有什麼新功能？

WooCommerce 區塊更新

這個版本包含了許多 bug 修正和許多區塊的更新，一些值得注意的更新包含：

1.更新樣式讓所有的區塊看起來更佳一致，同時移除 dashicon 的 class。

2.區塊會使用商品圖片裁切的設定

3.只用在前端的 js 檔不會於後台編輯器載入

Coupon 管理位置變動

Filters and actions

Filters	說明
woocommerce_product_cross_sells_products_heading	可改變交叉銷售商品內容的標題
woocommerce_enable_nocache_headers	允許不要設定 no-cache header來增加速度
woocommerce_duplicate_product_exclude_meta	新增一個參數 $existing_meta_keys
plugins_update_check_locales	參數 $locales 的預設值改為包含所有 locales
woocommerce_translations_updates_for_{$plugin_name}	可以改變註冊自動翻譯更新的外掛
woocommerce_bacs_accounts	新增一個參數 $order_id

新增和改變的 filter

Action	說明
woocommerce_order_note_added	在新增訂單註解後執行

[Elementor 教學] 如何點擊連結直接下載檔案

2020-06-14 作者: 王昱程

在製作頁面內容的時候，有時會上傳一些檔案，透過連結的方式讓使用者下載，不過通常預設點擊檔案連結會開啟一個新視窗再下載檔案，不是那麼的方便，這時候我們可以透過增加 HTML 的 download 屬性，來達到這個目的。

<a href="/images/mydownload.pdf" download>

在按鈕中新增 download 屬性

自訂屬性 (Custom Attributes) 的功能，可以在任何可以設定連結的 Elementor 小工具中使用，其中一個就是按鈕，你可以設定按鈕的連結，並設定自訂屬性。

請點擊要編輯的按鈕來開啟小工具的設定介面
點擊連結的齒輪按鈕來開啟額外的設定
在 Custom Attributes 欄位輸入自定義屬性，屬性請以 key|value 的格式來輸入，如果有超過一個屬性，請以逗號(,)來分隔。

以上圖為例我們新增了 download 屬性，後面接著的 myfile 則是下載檔案的新名稱，當使用者點擊該檔案時，該檔案將會被重新命名然後下載。如果你沒有輸入檔名，則會以原始的檔名來下載。

注意事項

使用 Custom Attributes 有幾點注意事項要留意：

自定義屬性只能在能夠設定連結的小工具中設定，例如按鈕。在文字編輯器小工具中你無法直接設定(但你還是可以透過編輯原始文字的方式來自行加上屬性)
Chrome 65 和以上的版本以及 Firefox 只接受同源 (same-origin) 的連結網址，也就是你設定的檔案連結必須要和你的網站網址是相同的，不然會沒有作用。請參考，CanIUse 網站。
基於安全的原因，你無法設定 Javascript 的屬性在連結上，例如 onclick

參考資料

移除 WooCommerce 後台行銷 (Marketing Hub)選單

2020-06-07 作者: 王昱程

WooCommerce 4.1 新增了一個 [行銷] (Marketing Hub) 選單在後台。

目前這個選單頁面中包含了三個項目：

已安裝的外掛
推薦的外掛
WooCommerce 知識庫

而這些外掛都是 WooCommerce 官方網站上的外掛。如果你不希望看到推薦外掛內容，可以在後台 WooCommerce > 設定 > 進階 > WooCommerce.com 來關掉顯示推薦外掛內容。

不過有些人覺得這些內容幫助不大，希望整個選單都不要顯示，那麼你可以透過以下的 Filter 來隱藏選單。

<?php

add_filter( 'woocommerce_marketing_menu_items', '__return_empty_array' );

請把以上的程式放到子佈景主題的 functions.php 中，若你不知道怎麼放，可以透過 Code Snipptets 這類的外掛，來在後台新增程式碼區段。不過要注意的是，這個頁面中所放的內容未來可能還會有所變動，所以未來可能還是會需要打開它。

參考資料：

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

2020-06-072020-06-04 作者: 王昱程

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 更新的資訊，如果要的話請輸入你的 email，就完成安裝啦！

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

cd ucheng-frontity

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

第二步：啟動伺服器

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

npx frontity dev

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

第三步：連線到你的網站

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

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

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

結論

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

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

2020-06-142020-06-01 作者: 王昱程

頁面編輯器在 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 發佈

2020-06-172020-03-10 作者: 王昱程

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

2022-01-062020-01-14 作者: 王昱程

隨著全站編輯(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
    |__ ...

註：block-templates 和 block-template-parts 目錄已分別改為 templates 和 template-parts

如何使用 Gutenberg 鍵盤快速鍵

2020-01-08 作者: 王昱程

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

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

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

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

快速鍵清單

鍵盤快速鍵	Mac 快速鍵	Windows 快速鍵
顯示鍵盤快速鍵清單	Ctrl + Opt + H	Alt + Shift + H

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