使用 Local by Flywheel 進行 WordPress 本地端開發

先前我們介紹過如何使用 DesktopServer 進行本地端開發,當時文章中提到了另一款類似的付費工具 pressmatic,如今已被 Flywheel 買下,而買下之後 pressmatic 更名為 Local by Flywheel ,且變成完全免費,使用 Local by Flywheel 可以快速建構本地端的開發環境。

Flywheel 於日前也被 WPEngine 收購了,所以將來也許 Local 也會加入對 WPEngine 的整合。

目前 Local 除了免費的版本外,也提供了付費的版本,付費的版本多了一些進階的功能,像是團隊的協作,以及可以直接將你在電腦上做好的網站同步到 Flywheel 上。免費和付費版本的比較可以參考官網的比較圖

1.下載 Local

到 https://local.getflywheel.com/ 下載

2.啟用 Local

第一次啟用時需安裝一些軟體,從畫面可以知道,Local 的執行實際上是透過 virtualbox 的虛擬化技術

安裝完後會進入 Local 的網站管理介面,介面相當的簡潔,按下 Create A NEW SITE 開始建立你的第一個網站吧!

3.建立網站

跟著 Local 的步驟即可完成網站的建立。第一個步驟需要輸入網站簡單的名稱,作為識別用,你也可以設定網站的domain,這邊預設是用.local當結尾,你也可以用.test(但不要用 .dev,因為 .dev 已經是 google 買下的頂級網域,無法作為本機開發使用)。網站資料的路徑預設是放在 ~/Local Sites/ 底下,你也可以改成你習慣的位置。

因為本地端開發經常會需要建立新網站,這時候你可以建立一個安裝包,這邊稱作 blueprint,例如你可以將 WordPress 和你經常使用的插件打包成 blueprint,這樣下次開新網站時,只要選擇這個安裝包就可以直接安裝,不用再重新下載那些經常使用的插件,是不是很方便呢!

  1. Step1: 輸入網站基本資訊
  2. step2 選擇網站環境
  3. step3 設定 wp 帳號資訊

完成後按下 add site, 即可完成網站建置,由於我們是第一次建立網站,Local 會詢問要不要將剛剛設定的網站管理員帳號密碼設成預設,這樣下次就不用再重新設定。

你的第一個網站就完成囉!

在瀏覽器中輸入test.local, 即可看到我們剛安裝好的網站

WooCommerce 客製化 – 如何隱藏 WooCommerce 商品類型

WooCommerce 預設有幾種商品類型,在新增商品時,你可以選擇以下四種商品類型

 

但有時候商店的商品種類是很限定的,像是大多數的商店並沒有組合商品或是外部和加盟商品,為了避免後台操作者的困惑,你可以選擇把不需要的選項拿掉。

參考連結

https://cartible.com/tips/customizing-product-types-selectbox-in-woocommerce/

 

WooCommerce 客製化 – 新增訂單狀態

WooCommerce 內建有幾種預設的訂單狀態,但這些狀態不見得適合每個商店,因為店家通常都會有一些自己的內部流程,所以為了方便我們可以新增客製的訂單狀態,讓店家的內部流程可以更順利一點。

 

首先透過 register_post_status 這個函式來新增一個客製化訂單,另外透過 wc_order_statuses 這個 filter, 來在訂單編輯頁面中加入新的訂單狀態

在訂單編輯頁面的訂單狀態中,就可以看到新增的狀態。

但是如果要編輯訂單狀態必須一筆一筆訂單改,那也太沒有效率了,所以我們要在訂單清單中的批次處理動作中,新增我們增加的訂單狀態。

首先透過 handle_bulk_actions-edit-shop_order, 來更新選擇的訂單狀態。

另外透過 admin_notices, 來顯示你要提醒使用者的相關訊息。

如此商家就可以在訂單清單中批次更新訂單狀態了。

 

參考文章:

https://rudrastyh.com/woocommerce/bulk-change-custom-order-status.html

Yoast SEO 教學 – 設定麵包屑的主要分類(Primary category)

yoast seo primary category

Yoast SEO 在 3.1 版時推出了一項新功能,Primary category,讓你可以在多重分類的狀態下,設定麵包屑(breadcrumbs)的顯示分類。

我們知道 WordPress 允許一篇文章設定多重分類,若是你的網站啟用了麵包屑功能時,同一篇文章只會出現在同一個分類路徑下。

若你希望改變這個路徑,可以透過 yoast 提供的功能,將該分類設定為 primary category

yoast seo primary category

在頁面顯示上就會以該分類為主要分類路徑。

breadcrumb-primary-category

 

參考來源:https://yoast.com/yoast-seo-3-1/

 

 

如何讓 WordPress 網站支援 AMP(Accelerated Mobile Pages)

Accelerated Mobile Pages (以下簡稱 AMP ),是 Google 提出的一項加速手機版網頁內容瀏覽的技術,你可以把它想像成是 Facebook 的 Instant Articles。使用此技術後,Google 將會針對你的頁面建立一個快取,所以當使用者從手機搜尋並連結到你的網頁的時候(實際上不是由你的主機提供網頁檔案),手機瀏覽器可以很快速地開啟快取頁面,此篇文章先且不討論使用此技術會帶來的影響,而是讓你了解,如何讓你的 WordPress 網站支援 AMP。

 

安裝 WordPress AMP 插件

要讓網頁支援 AMP,必須製作符合規格的網頁,google 定義了一些amp的標籤,您可以前往 google amp網頁了解符合amp需求的網頁規範。不過很幸運的 Automattic 製作了一個 AMP 的插件,讓你可以快速讓你的wordpress網站支援 AMP。

AMP

下載安裝並啟用後,即可讓你的網站支援 AMP。

測試

由於 AMP 網頁啟用後,google需要一點時間才會爬得到,如果你要確認你的網頁成功支援 AMP,可以透過以下的方式確認。在瀏覽起中開啟你網站的某篇文章連結,並於網址後面加上 /amp,即可看到 AMP 網頁。

amp test

 

如果打開 chrome developer tool,在console中你可以看到,Power byAMP html 的相關文字

如果要驗證網頁是否符合 AMP 規範,你可以在AMP 網址列後面打上/#development=1,並重新整理。

 

 

若成功通過驗證,即會出現 AMP validation successful的訊息,接下來就等google去爬你的AMP 網頁啦!

amp-validate

目前這個插件能客製化的選項並不多,在 0.4版以後,你可以修改一些基本的顏色和色彩色定。

 

使用 Glue for yoast seo & amp

由於 WordPress AMP 插件僅提供基本的 metadata 設定,如果你使用了yoast seo,並沒有辦法使用最佳化後的 metadata,因此yoast seo針對此問題撰寫了一個小外掛 Glue for yoast seo & amp,顧名思義就是讓yoast seo和amp插件有比較好的整合,同時他也提供了更多的色彩設定選項,以及加入google analystic的功能。

Glue for Yoast SEO & AMP

安裝並啟用後,在yoast seo會多出一個 AMP 選單。

你可以設定要支援 AMP 文章類型,在此篇文章發布前,頁面(page)還不支援

你也可以做更進階的外觀設定,像是AMP 網頁的logo,或是內容的顏色等等。

也可以加入ga的追蹤碼,請參考 Adding Analytics to your AMP pages,如果你有使用 MonsterInsights plugin 插件(之前叫做 Google Analytics by Yoast),他會針對AMP 和google analystic有較進階的整合。

如果設定正確,過一陣子之後應該就可以在GA看到AMP網頁的瀏覽數據了。

除了在GA中檢視數據外,你也可以在Google search console 中檢視amp網頁的瀏覽數據。在搜尋分析中,將搜尋結果呈現方式設定為AMP非複合式搜尋結果即可。

google search console amp

 

到此為止,我們算是完成了 wordpress 網站和 AMP  的基本整合,同時還讓yoast seo 以及 google analystic 都能夠和AMP 一起運作。

在接下來的文章,我們會陸續探討你的網站是否該使用AMP ,以及使用AMP 對網站seo搜尋和廣告的影響。

 

改變 WooCommerce 註冊使用者的預設角色

WooCommerce 預設會將註冊的使用者角色設為顧客(Customer),但有時候可能會因為一些行銷的需求,或是某種原因,希望將改變預設的使用者角色。如果你只是單純地修改一般設定中的新使用預設角色,是不會有任何作用的。

wp-new-user-default-role
設定->一般設定

不過 WooCommerce 提供了一個 filter 讓你可以改變預設的註冊使用者角色。這邊我們將新使用者的角色設為 WP 一般設定中的預設角色。或是你可以直接設定角色的ID(例如vip)。