Jetpack 提供免費 Asset CDN 為你的 WordPress 核心檔案分流加速

19{icon} {views}

如果有經常閱讀免費資源網路社群的架站相關教學,應該知道我相當重視速度,而提升網站載入速度方法很多,最基本的是使用更快、更好的網站空間,例如 Cloudways 協助使用者部屬最佳化 WordPress 環境,除此之外,選用 Cloudflare 這類 CDN 服務不但能強化網站安全,更重要的是利用各區域節點達到加速、節省流量等效果,對於架站的基礎建設來說是非常值得投入的選項。

如果你本身使用 WordPress 架站,特別推薦官方提供的 Photon CDN 免費功能(這是包含在 Jetpack 外掛程式的其中一個模組),可針對圖片分流加速,雖然會犧牲圖片品質,但能大幅降低流量耗費,如果搭配延遲載入(Lazy Load)等功能將有非常棒的效果,不過也不是毫無缺點,例如圖片會因壓縮而稍微降低畫質,除此之外,快取(Cache)期限永久不失效,若是圖片編輯更新,只能重新命名圖片才能獲取新的圖片檔案。

以往 Photon CDN 只能針對 PNG、JPG 或 GIF 圖片格式進行處理,最近在 Jetpack 6.6 更新後確定加入一項全新「Asset CDN」模組,簡單來說,這是對 WordPress 核心和 Jetpack 相關檔案進行分流加速的新功能,可以透過 WordPress 官方的 CDN 伺服器處理 CSS、JS 檔案,不過僅止於 WordPress 核心及 Jetpack 檔案,像是 jQuery、Genericons、Dashicons 和一些在 Jetpack 外掛模組中會用到的檔案。

雖然 Asset CDN 不支援佈景主題或第三方檔案,但站長們會發現 WordPress 網站開啟時會載入不少核心檔案,如果又有使用 Jetpack 外掛的話那麼檔案會更多,開啟 Asset CDN 將能夠直接取代鏈結並改由 WordPress CDN 提供檔案,降低主機負載,獲取檔案也有加速及壓縮效果。

目前這個模組還在測試階段,必須透過特殊方式才能將它啟用,或許也還不夠完善,有興趣的話可以照著本文教學將它啟用,即可在網站中測試這個全新的加速功能。

外掛名稱:Jetpack by WordPress
外掛鏈結:https://zh-tw.jetpack.com/

使用教學

STEP 1

開啟 WordPress 控制台,從「外掛」的「安裝外掛」中找到 Jetpack by WordPress.com 功能,接著點選「立即安裝」即可將它下載、安裝到你的網站中。

如果沒有外掛選項,有可能你使用的是 WordPress.com,WordPress.com 和 WordPress 不同,可以參考「當 WordPress 遇上 WordPress.com:它們是相同的嗎?」瞭解兩者的差異。

STEP 2

啟用後會先出現 Jetpack 設定畫面,點選「設定 Jetpack」開始進行,這個外掛比較特別的是必須連結使用者的 WordPress.com 帳號,如此一來才能使用相關模組。

WordPress.com 免費註冊、申請帳號過程並不算太困難,連結後會跳出是否允許以某個身分連結 WordPress 網站的提示訊息,核准後會跳到方案規格,目前免費版在頁面下方,點選「免費開始使用」就能跳過付費並免費使用 Jetpack 相關功能。

STEP 3

設定完 Jetpack 並在網站中開始運作後,點選 WordPress 控制台左側選單的 Jetpack 並找到「設定」選項,接著將網頁拉到最下方,點選「偵錯」鏈結(灰色文字不是很明顯請自己找一下)。

稍待片刻,Jetpack 會測試網站是否可以正常連接,這部分結果無論為何並不影響到接下來的使用,有些伺服器可能會有防火牆或一些阻擋規則,但只要能將網站和 WordPress 帳號連接就沒問題。

將頁面往下拖曳,點選「存取您網站上可用的 Jetpack 完整模組清單」鏈結。

STEP 4

從模組列表中找到「Asset CDN」並點選「啟用」後就能開啟此功能,因為這個模組還在測試階段,必須使用此方法才能找到開啟,未來如果加入 Jetpack 成為正式版就不用這麼做,直接於控制台將它啟用即可。

開啟 Asset CDN 後,返回 WordPress 前台檢視原始碼,就能看到原有 WordPress 核心檔案及 Jetpack 相關檔案路徑改為從 https://c0.wp.com/ 獲取檔案,看起來會像這樣:

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計後台網頁設計

帶您來看台北網站建置套版網頁設計台北網站改版設計台北RWD響應式網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益

CommentBox.io 沒有廣告、不追蹤用戶隱私的網站留言系統

2{icon} {views}

通常做了一個網站後,開發者會加入互動功能,最常見的包括社交網站按鈕和留言討論區,如果你是使用 WordPress 架站,預設情況下就已經內建迴響機制,若你覺得功能太陽春還可以透過 Jetpack Comments 模組強化,讓留言者使用自己的社交網站帳號登入,不用重新註冊帳號,當然也有不少提供留言框的服務,例如老牌的 Disqus,後來被收購後已經不太推薦使用。

其實最簡單、快速的方法是使用 Facebook Comments 留言外掛程式,但我知道有些人堅持不用臉書,而且沒有 Facebook 帳號又無法匿名回覆,因此臉書留言框可能不適合所有網站類型使用。如果你想找一個更穩定、可靠的第三方留言功能,可以研究一下這個新服務。

本文要推薦的「CommentBox.io」是一款第三方留言外掛,功能淺顯易懂,就是讓使用者可以在頁面下方留言或進行討論,設計風格簡約,適用於各種網站樣式,更重要的是 CommentBox.io 沒有廣告、不收集使用者 Email,任何人都可以透過和第三方服務帳戶連結,快速登入進行留言。也支援匿名留言功能。

如果你未來想轉換到其他留言平台,CommentBox.io 亦能將留言備份匯出,不會將使用者綁在平台上進退兩難,這些都可以在控制台內自行操作完成。

CommentBox.io 本身提供免費和付費方案(每月 $10 美元),兩者差別在於免費方案有每個月最多一百篇留言的限制,不過對於小網站或單一頁面來說其實沒什麼影響,如果需要更強大的留言審核功能,還可考慮付費升級 Moderation Plus,一般來說預設的留言管理工具就已經很夠用。

網站名稱:CommentBox.io
網站鏈結:https://commentbox.io/

使用教學

STEP 1

首先開啟 CommentBox.io 網站,點選右上角的 Dashboard 或找到 Sign Up 註冊帳號按鈕,有四種註冊方式,包括使用第三方 Facebook、Twitter 或 Google 帳戶登入或是以 Email 註冊,無論使用那一種方式仍必須回到信箱點選信中的確認鏈結。

STEP 2

註冊登入 CommentBox.io 控制台,第一次使用必須先建立一個專案,填入你的網站名稱和網域名稱,先設定一下 Email 通知功能,看看有沒有需要在自動核准留言、有留言等待審核或有留言被標記為垃圾訊息時收取郵件提醒。

預設情況下所有留言都會自動核准、出現在留言系統中,如果你希望可以手動審核每一則留言,可調整成「Manual」,在沒有審核通過前不會顯示出來,不過缺點就是會比較耗費時間,留言也無法即時,另有折衷方案「Granular」只在內容包括鏈結、留言者被其他網站封鎖或匿名留言等情況下才會需要手動審核。

STEP 3

建立專案後 CommentBox 會給出一個「Project ID」,每個使用者每個網站的 ID 都是獨一無二,稍候在將留言框加入網站時會用到。

STEP 4

點選「Embed Instructions」查看網站提供的內嵌說明,裡頭會有各種在網站放入留言框的方式,簡單來說,只要塞入一個 .js 文件,以 HTML 方式放入一個特定 div 標籤即可在該位置載入 CommentBox.io 留言框。

想測試留言框也可以在 CommentBox.io 網站首頁下方找到這項功能。

 

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計後台網頁設計

帶您來看台北網站建置套版網頁設計台北網站改版設計台北RWD響應式網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益

NGINXConfig 網頁伺服器 NGINX 設定檔產生器,依需求產生各種 conf 檔

3{icon} {views}

十年前開始自己研究架站,跟很多人一樣都是從 Apache 開始,後來出現 Nginx 後普遍的作法是將它拿來做反向代理(Reveres Proxy),既有的網頁伺服器就會退居後端,由前端的 Nginx 負責相關工作,依照經驗可以提升網站速度,亦能降低負載,在原有硬體規格上承載更多的訪客同時上線(Nginx 本身還能夠針對靜態檔案進行快取)。因為我最初是從 Apache 開始學習,早期都得和設定檔奮戰,一直到 Nginx 我才發現它的設定檔夠簡潔,簡單到我好像無法直接編修。

這可能是許多 Nginx 使用者的心聲,即使設定檔很簡潔但在編寫時並不那麼容易,必須去找一些範例動手修改,尤其是從 Apache 轉到 Nginx 都很希望有個轉換工具將設定檔轉為 Nginx 適用版本,可惜大多數情況下還是得花時間自行檢視和編寫,後來我乾脆都用 ServerPilotCloudways 這類自動化佈署服務,可以省下更多時間,避免出錯。

不過如果你想研究架站,想要手動建置 Nginx 網頁伺服器,即使再困難的設定檔都得硬著頭皮挑戰一下,接下來「NGINXConfig.io」是你必須收藏起來的「神兵」!

這是一款開放原始碼免費線上工具,用途是讓使用者快速產生 Nginx 所需要的各種設定檔,聽起來非常酷對吧?NGINXConfig 透過網頁介面讓使用者進行相關設定,最終產生對應的各個 .conf 檔,還能將產生的所有設定檔下載備份。

依照 NGINXConfig 說明,這個工具可以設定的項目包括網站基本選項、HTTPS、安全相關選項、PHP、Python、Routing、Cache、Reverse Proxy、Logging 等等,已經內建幾種常用的架站項目,例如前後端、Node.js、單頁面應用程式、WordPress、Drupal 和 Magento,點選後可針對該項需求先啟用特定選項。

網站名稱:NGINXConfig
網站鏈結:https://nginxconfig.io/

使用教學

STEP 1

下圖就是 NGINXConfig 操作介面,主要設定選項集中在網頁上半部,中間有一些常用到的指令和說明註解。

在上方選項進行相關設定,下方的 .conf 設定檔就會即時更新。

STEP 2

NGINXConfig 主要設定項目都以標籤方式顯示於上方,包括一般網站設定、HTTPS、安全性、PHP、Python、Routing、Cache 和 Reverse Proxy 等等,如果有架站經驗的話應該不會太難懂,比較棒的是欄位上也有範例格式可供參考。

如果 Nginx 網頁伺服器要拿來運作特定程式,NGINXConfig 也提供一些選項,點選後就會預先選取所需的相關功能,例如選取 WordPress 後會啟用 WordPress 規則。

STEP 3

NGINXConfig 特色是讓原有的 Nginx 設定檔變得更容易理解。

像是 HTTPS、HTTP/2、Force HTTPS、HSTS 等等選項可能在 Nginx 都不是那麼容易編寫,透過 NGINXConfig 讓選項變成互動式開關,只要在網頁中切換,下方的設定檔就會即時更新。

最後,將 .conf 設定檔複製、貼回自己網頁伺服器對應的路徑,重新啟動 Nginx 就能夠完成套用修改。當然細節部分我就不在文章裡多做闡述,本文是想推薦 NGINXConfig 這款 Nginx 設定檔產生器,至於要怎麼樣安裝、架設 Nginx 伺服器可能得自行去其他更專業的網站爬文。

STEP 4

如果你想將辛苦修改好的設定檔備份、保存下來,切換到「Tools」可以找到打包下載為 ZIP 格式的下載工具,比較特別的是 NGINXConfig 內建分享功能,找到底下的分享網址還能將相關設定值透過鏈結傳給其他人檢視。

值得一試的三個理由:

  1. 協助使用者快速產生 Nginx 設定檔
  2. 可針對特定需求或程式先起用特定選項
  3. 設定檔可下載備份為 Zip 格式或產生分享鏈結

推薦閱讀:

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計後台網頁設計

帶您來看台北網站建置套版網頁設計台北網站改版設計台北RWD響應式網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益