Elementor 動畫在瀏覽器上沒有作用

Elementor 提供了很多豐富的動態效果,讓你不需要撰寫任何複雜的 CSS 就可以幫網站增加互動性。

如果你在你的電腦或手機發現動畫沒有作用,很可能是因為電腦或手機的設定。

如果你測試的電腦是 Mac,你可以在系統偏好設定->輔助使用->顯示器->減少動態效果,確認一下減少動態效果是否有勾選。

減少動態效果

如果是 iOS,可以檢查在設定->輔助使用->動態效果->減少動態效果的設定,是否有勾選。

減少動態效果

相關說明請見 Elementor 文件:https://elementor.com/help/entrance-animations/

參考資料:

https://web.dev/prefers-reduced-motion/
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

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 這類的外掛,來在後台新增程式碼區段。不過要注意的是,這個頁面中所放的內容未來可能還會有所變動,所以未來可能還是會需要打開它。

參考資料:

Font Resize