如何調整 Jetpack Photon 圖片品質

Jetpack Photon 是很多使用 WordPress 架站的朋友會使用的功能, 使用 Photon 可以大幅降低網站的流量, 但其實 Photon 會壓縮圖片的品質, 如果你是對圖片品質比較要求的話, 可以試著調整 Jetpack 的壓縮比率。
Jetpack 提供了 quality 這個參數來讓你調整圖片品質, 要注意的是這邊的 quality是代表著壓縮的品質, 所以如果設為 100, 不代表他不會壓縮, 只是代表著失真的程度會比較小。

JPG 預設的 quality 為 89%, PNG 為 80%, 而 WebP 則為 80%. 要注意的是,如果瀏覽器支援 WebP, 則 JPG 和 PNG 會被自動轉為 WebP。而當 quality 設為100時, 將會進行無失真壓縮, 在某些情況下可能會產生比原本圖片還要大的圖。

Photon API

Photon

Mastering Image Optimization in WordPress

使用 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, 即可看到我們剛安裝好的網站

WordPress 4.9 新功能 – 增強的自訂工具(Customizer),更好的架站體驗

WordPress 4.9 Tipton 已經於 2017/11/15 發佈了,這次的改版讓你在進行網站的設計工作時能夠更加地順暢,且遠離錯誤。就一起來看看 WordPress 增加了哪些新功能吧!

這篇文章僅列出一般架站者會使用到的功能。

Customizer Workflow Improved

  • Draft and Schedule Site Design Customizations
  • Collaborate with Design Preview Links
  • Design Locking To Guard Your Changes
  • A Prompt to Protect Your Work

Coding Enhancements

  • Syntax Highlighting and Error Checking? Yes, Please!
  • Syntax Highlighting and Error Checking? Yes, Please!
  • Warning, Potential Danger Ahead!

Even More Widget Updates

  • The New Gallery Widget
  • Press a Button, Add Media
  • Shortcodes in Text Widget

Site Building Improvements

  • More Reliable Theme Switching
  • Better Menu Instructions = Less Confusion

WooCommerce – 使用 WP-Cli 批次刪除全部商品

WooCommerce 如果要批次刪除商品,可以透過後台選取多個商品然後批次刪除,但是當在商品數量很多時就會顯得非常麻煩。

如果你的主機或架站環境有支援 WP Cli 就可以透過指令來一次刪除,會省力很多。

wp post list --field=ID --post_type=product | xargs wp post delete --force
wp post delete $(wp post list --post_status=publish --post_type='product' --format=ids --posts_per_page=10000) --force

參考文件:https://developer.wordpress.org/cli/commands/post/delete/

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搜尋和廣告的影響。