XAMPP MySQL 無法啟動的問題 (MAC)

當啟動 XAMPP MySQL 時,如果遇到無法啟動的問題 (XAMPPERRORDOMAIN error 1),可以先查看一下 log

在 MAC 系統中,你可以在 /Applications/XAMPP/xamppfiles/var/mysql 中找到 log。

通常 log 名稱會是你電腦名稱,例如我的是 StanleyMBPR-2.local.err。

打開後來看看是否有相關的 error。

看到 tc.log 有問題。

解決的方法很簡單,請先移除 tc.log,然後重新啟動 MySQL,應該就可以了!

WooCommerce 4.7 發佈

WooCommerce 4.7 已經於 11/10 正式發佈,這是一個小版本的發佈,代表著向下相容之前的版本。

因為黑色星期五即將到來,所以 WooCommerce 團隊將這個版本的修改範圍縮小,同時專注在整體的穩定和相容性。

WooCommerce 4.7 包含了哪些新功能?

WooCommerce 4.7 的發佈包含了更新的 WooCommerce Admin (1.6.3) 和 WooCommerce Blocks ( 3.5.0和 3.6.0 )

值得注意的修正和更新

  1. 更新 product_cat/tag 分類法範本檔案的名稱為 product-cat 和 product-tag  (#27736)..
  2. 在”商品頁面”設定中排除草稿頁面 (#27890).

Filters and actions

Filters說明
woocommerce_should_send_low_stock_notification決定目前商品是否要觸發低庫存通知

範本檔案改變

檔案說明
content-product-cat.php新檔案用來取代 content-product_cat.php (#27736)
taxonomy-product-cat.php新檔案用來取代 taxonomy-product_cat.php (#27736)
taxonomy-product-tag.php新檔案用來取代 taxonomy-product_tag.php (#27736)

請注意 WooCommerce 仍然支援 content-product_cat.phptaxonomy-product_cat.phptaxonomy-product_tag.php

WooCommerce 4.6 發佈!

WooCommerce 4.6 已經於 10/14 正式發佈,這是一個小版本的發佈,代表著向下相容之前的版本。

WooCommerce 4.6 的新功能

WooCommerce 4.6 包含了更新版本的 WooCommerce Admin (1.6.1) 和 WooCommerce Block (3.4.0) 以及以些修正和本地化的改進。

針對所有店家的新歡迎頁面

新的歡迎頁面是在 WooCommerce 4.3 推出的,當時只有針對新的商店。而在 WooCommerce 4.6 中,所有的店家都可以看到這個畫面。你可以在文件中找到更多的功能說明。

值得注意的修正和改進

1.針對有使用語言重音標記的語言改善國家名稱的排序方式 (#27416)

2.改善使用 Twenty Twenty 佈景主題時的 notice 樣式 (#27387)

3.現在可以在指定商品的稅率時使用包含非 ASCII 的字元 (#27615)

4.移除舊的設定工具 (setup wizard) (#26853)

如果你想知道更多的修正內容,可以參考 changelog

Filters 和 actions

在 WooCommerce 4.6 中新增了幾個 filters 和 actions:

Filters說明
woocommerce_return_to_shop_text可以用來改變在空的購物車頁面中的 “Return to shop” 按鈕的說明文字 (filter)
woocommerce_cart_item_required_stock_is_not_enough可以用來改變在購物車中檢查商品庫存的行為 (filter)
woocommerce_should_send_no_stock_notification可以用來讓開發者針對特定商品來忽略寄送無庫存的信件通知 (filter)
woocommerce_after_order_details可以用來新增額外的資料在 order 內容之後 (action)

資料庫改變

這個版本沒有任何的資料庫改變

WooCommerce 4.5 發佈!

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

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

WooCommerce 4.5 有什麼新功能?

新的 onboarding 導覽

圖片來源:WooCommerce

當你第一次瀏覽 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、圖片延遲載入和自動更新等功能

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

xml sitemap

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

安全

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

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

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

區塊編輯器

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

新的 UI 介面

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

old gutenberg toolbar
舊版的區塊編輯器工具列
new gutenberg toolbar in WP 5.5
WordPress 5.5 區塊編輯器工具列

可同時設定多個區塊樣式

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

format multiple blocks

裝置預覽

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

device preview
裝置預覽

上標和下標

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

superscripts and subscripts
上標和下標功能

圖片編輯

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

inline image editing

新的區塊新增面板

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

block inserter
舊的區塊新增面板
block inserter in WP 5.5
新的區塊新增面板

區塊目錄 (Block Directory)

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

Block directory
區塊目錄

區塊版面配置 (Block Pattern)

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

block pattern

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

結論

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

WooCommerce 4.4 發佈

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

WooCommerce 4.4 有什麼新功能?

WooCommerce 區塊更新

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

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

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

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

Coupon 管理位置變動

圖片來源:WooCommerce

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 教學] 如何點擊連結直接下載檔案

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

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

在按鈕中新增 download 屬性

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

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

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

注意事項

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

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

參考資料

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

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

WooCommerce marketing hub
Marketing Hub。圖片來源:WooCommerce

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

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

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

關閉 WooCommerce 建議外掛

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

<?php

add_filter( 'woocommerce_marketing_menu_items', '__return_empty_array' );

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

參考資料:

起飛吧!使用 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 專案,實際瀏覽起來速度真的是飛快。接下來就是要嘗試來修改佈景主題了。