使用 Cloudways 架設 WordPress 網站教學,快速部屬最佳化環境

三月初看到一則新聞:奧地利顧問公司 Q-Success 針對全世界網路流量排名前一千萬的網站進行調查,WordPress 市佔率 60.2%,整體網路更有高達三成網站使用 WordPress!這是非常驚人的數字。WordPress 會如此深受使用者喜愛可歸功於社群龐大的佈景主題和外掛資源,有更多第三方服務應運而生,當然程式本身也因為開源、加入全世界自願者的力量,相輔相成使 WordPress 更臻完美。

WordPress 分為兩種:自行架設 WordPress 或註冊 WordPress.com,通常我們會選擇前者以擁有更高的自由度和可自訂性,技術門檻及成本也相對會高一些。之前已經寫過不少架設 WordPress 網站的詳細教學主題,包括:

  • 使用 Google Cloud Platform 雲端主機免費版架設 WordPress 教學
  • 亞馬遜 VPS 服務 Amazon Lightsail 搭配 ServerPilot 架設 WordPress 教學
  • 從 Blogger 自訂網址搬家到自架 WordPress,六步驟不求人教學
  • WordPress Hosting 架站空間精選,最多人推薦的五個國外虛擬主機方案

本文想來介紹一家我認為相當適合 WordPress 架站者使用的網站空間,相信曾研究過架站的朋友應該聽過「Cloudways」,如果將它定義為虛擬主機、VPS 其實都不盡正確,以更準確的說法,Cloudways 是一家幫你最佳化網站主機的服務商(和 ServerPilot 比較接近),本身並不直接營運主機空間,而是和其他更專業的主機商合作,透過 Cloudways 最佳化後的環境將會更安全、效能表現更好。

Cloudways 目前支援幾個很常見的 VPS 和雲端主機服務,包括:DigitalOcean、Linode、Vultr、Google Cloud Platform(GCP)、Amazon Web Services(AWS)和 Kyup,Linode 是前段時間新加入的,你可能會問:我能以更便宜價格向這些主機商直接租用空間,為何還要被 Cloudways 多賺一手?

這就要重新討論 Cloudways 本質,Cloudways 可以幫助使用者更快速建構出一個穩定快速且高效能的環境,從網站首頁可以看到這張圖,它使用 Apache + NGINX 作為主要網頁伺服器,搭配上 Varnish Cache、PHP-FPM、Memcached、Redis 等快取功能,如果你使用的是 WordPress、Joomla、Magento、Drupal 等在支援範圍內的程式,還可透過 Cloudways 安裝最佳化版本,讓它在環境中得以運作得更順暢。

不過要注意的是 Cloudways 並不提供伺服器最高權限(root),它會完全幫使用者代為管理主機,包括一些安全性更新、修復升級,讓我們可以更專注於管理網站,省去處理技術問題的麻煩,尤其對於沒有技術背景的使用者來說,多投入一些預算選用 Cloudways 相對來說會更安全可靠,若碰到問題也有 24/7 全年無休的線上支援可以獲得協助。

那麼 Cloudways 要如何計價呢?跟一般虛擬主機一樣都是按照主機規格計費,不同的是會依照你選用的主機服務、主機位置而有不同價格,簡單來說就是「Pay-as-you-go」用多少算多少,計費單位最小為每小時,付費方式為信用卡或 PayPal。

以下我會示範如何以 Cloudways 搭配主機服務來快速架設你自己的 WordPress 網站,真的非常簡單,而且不用幾分鐘時間,Cloudways 控制台提供非常直覺且易於操作的環境,目前它也針對新註冊用戶提供「免費試用」,無須準備信用卡,只要註冊就能開始架站。

網站名稱:Cloudways
網站鏈結:https://www.cloudways.com/en/ (推薦鏈結)

使用 Cloudways 架設 WordPress 完整教學

免費註冊 Cloudways 帳戶

STEP 1

首先,我們必須先從 Cloudways 取得一個帳戶,可直接使用 Google、Github 或 LinkedIn 帳號登入,或是輸入 Email、設定密碼獲取帳號,要注意的是如果你之後想要使用第三方帳戶一鍵快速登入,必須在註冊時就先以此方式來登入,未來無法再加入。

STEP 2

我在註冊時遇到一個狀況,Cloudways 提醒我必須開啟線上交談(Chat)功能才能獲取我的權限。以往是註冊後只要直接收取 Email 驗證信就能啟用帳號,我不確定為什麼碰到這個狀況,如果你也遇到相同訊息,可照著以下步驟操作。

開啟右下角的 LiveChat 功能,輸入你的名稱、Email(剛才註冊使用的 Email),相關部門選擇「Sales (Online)」然後選擇身分為 New Customer,在啟用線上交談後,告知對方你想試用 Cloudways 並詢問能否開啟帳號即可,當客服人員收到後會詢問你相關資料,如果沒有問題就能從 Email 收到驗證信。

以 DigitalOcean 建立第一台網站主機

STEP 1

進入 Cloudways 控制台,先點選右上角「Add Server」按鈕建立新的伺服器。

部屬新的伺服器前 Cloudways 會讓你選擇要使用的應用程式,在這裡選擇 WordPress,這就是 Cloudways 最佳化後的版本,會預先安裝必要的外掛功能。如果你傾向使用純淨版本,可選擇「Clean」也就是從官方網站直接取得的程式。

STEP 2

接著需要設定你的應用程式名稱、伺服器名稱和專案(Project),一切就緒後就能選擇你要使用的主機服務商,在這裡我只總結 DigitalOcean、Linode 和 Vultr 這三項 VPS 服務,如果你預算足夠或有其他考量,考慮使用 AWS 或 GCP 以獲取更好的速度。

AWS 和 GCP 計價方式就有些不太一樣,不同於 VPS 並沒有流量使用上限,會依照你當月使用的流量多寡計價,而且不同地區的流量價格也不相同。

以價格來說,DigitalOcean 最便宜、Vultr 次之、Linode 會稍微再貴一些,若你的主要訪客在台灣,選擇東京和新加坡節點會獲得最快速度,只有 Vultr 和 Linode 有東京節點,但三家都有新加坡節點。

Linode 有東京節點,Vultr 也有,從台灣連線速度相當優異,想維持最低預算建議選擇 DigitalOcean 的新加坡節點,每個月價格為 $10 美金。

STEP 3

要如何知道各個伺服器方案規格呢?將滑鼠游標移動到 Server Size 上方就能看到,包括記憶體、硬碟容量、流量和 CPU 核心數量,拖曳後會即時在下方顯示每小時或每月價格。

STEP 4

我們在這裡直接選擇 DigitalOcean 最低方案,同時使用從台灣連線回應速度較快的新加坡節點做為範例,選好後按下右下角「Launch Now」開始建立伺服器和部屬程式。

Cloudways 會告訴你大約剩下多少時間才會完成,在此之前可先使用其他功能,但無法進入伺服器的控制台畫面。

在 Cloudways 快速安裝最佳化的 WordPress

STEP 1

當伺服器建立完成後,前方指示燈轉為綠色,點選進入主控台。

最重要的項目應該是伺服器的 Master Credentials,包括主機的 IP 位址(稍後用於網域名稱對應,設定在 DNS)、帳號密碼,登入資訊部分是用於 SFTP 和 SSH 連線,前面有提到 Cloudways 不會給最高權限 root ,因此在這裡的帳號密碼就是主機的連線資訊。

如果要將網域名稱對應到 Cloudways ,只要加入一個 A 記錄、指向 Public IP 。別忘記到應用程式設定裡將「Domain Management」加入你的網域名稱,雖然下方有個指示讓使用者把網域名稱對應到某個 CNAME 記錄,但 CNAME 無法用於裸域名(Naked domain),因此使用 IP 做為 A 記錄會比較妥當。

STEP 2

在 Cloudways 大部分的選項都可透過控制台設定,我的習慣是先從「Settings & Packages」裡選擇 PACKAGES 功能,將 PHP 升級到 7.0 或 7.1(目前預設就是 7.0),可以有更好的速度、安全性和效能。除此之外,我也會將 MySQL 改為「MariaDB 10」。

這些操作需要一點時間安裝下載和更新,不過 Cloudways 可以全自動完成,如果你在操作過程中遇到錯誤,通常只要重新再操作一次就能通過。

STEP 3

Cloudways 的設計是將伺服器和應用程式拆開為兩部分,如果要進行系統設定,可以從上方選單找到「Servers」;若是跟程式相關的選項則從「Applications」畫面中操作。

接下來我們就進入 Application Management ,找到 Cloudways 幫我們安裝的 WordPress 相關資訊,從 Admin Panel 可以找到 WordPress 控制台登入網址、使用者名稱和密碼,這是預先建立的管理員帳號,當然也能在登入後刪除、修改成其他帳號。

STEP 4

預設情況下登入 WordPress 會是英文版,從「設定」將語系更改為正體中文。

Cloudways 最佳化的 WordPress 預設就已安裝「Breeze」外掛,我在另一篇文章「Breeze 免費 WordPress 快取外掛推薦,功能完整卻輕量快速」介紹過,這是由 Cloudways 自家開發的 WordPress 快取程式,更早之前是使用 W3 Total Cache 做為預設的快取外掛選項,但礙於設定太過複雜,且可能無法和 Cloudways 主機環境有效整合,後來乾脆自己做一個。

無論你是不是使用 Cloudways 主機,其實都可選擇 Breeze 做為快取功能。

STEP 5

現在一般網站都會加上 SSL 憑證,啟用 HTTPS 加密連線功能,對於 SEO 也有幫助,而在 Cloudways 控制台就已經內建 SSL 憑證管理選項,可直接使用免費 Let’ s Encrypt SSL 或自己自訂憑證,設定方法也很簡單,輸入 Email 和網域名稱就能自動取得憑證,而且也能在過期失效前自動續約,不過在設定前必須確認 DNS 已經成功對應到 Cloudways。

STEP 6

如此一來,一個很基本的 WordPress 網站就此成形,裡頭會有一些預設內容,將它全部刪除、重新開始吧!當然要學習、可研究的 WordPress 知識還很多很多,將網站架起來只是最基礎的範疇而已,如果有興趣的話可以翻翻我之前寫過的 WordPress 相關教學主題,網路上資源也很多,或許能有一些些幫助。

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

RunCloud 佈署最佳化主機環境,整合 DigitalOcean 架設 WordPress 教學

對於經驗豐富的架站工程師來說,要從乾淨的系統建構出最終可上線運作的環境並不困難,但如果是一般使用者,無法流暢在指令列下工作,可能就得透過圖形化介面幫忙,常見的包括老牌虛擬主機控制台 cPanel,VPS 通常會使用服務自行開發的介面,如果是 Google Cloud Platform 或 Amazon Web Services 我會推薦搭配 ServerPilot 快速架設 WordPress,這麼做有助於快速架構出最佳效能的環境,而且在安全及後續更新維護較為輕鬆。

本文要推薦「RunCloud.io」是一家來自馬來西亞的新創公司,主要營運項目是雲端伺服器控制台,支援 DigitalOcean、Linode、Vultr 和 AWS、GCP、Azure 等雲端主機,只要線上連接就能在你的伺服器自動佈署最佳環境,一鍵安裝支援的架站工具,減少伺服器相關設定所耗費的時間或問題,同時它也內建伺服器監測功能,直接從控制台就能進行相關操作。

RunCloud.io 內建目前主流的 HTTP/2,能讓 HTTPS 網站速度更快,還有 Google 維護的 Brotli 壓縮演算法,也提供多種 PHP 版本讓使用者快速切換。RunCloud.io 支援的一鍵式程式安裝工具包括:WordPress、Drupal、phpBB、Grav、Joomla、phpMyAdmin、Piwik、Prestashop、Mybb、Concrete5,網頁伺服器架構則有 NGINX + Apache2 和 NGINX 兩種選項。

此外,RunCloud.io 執行的服務有 Nginx、Apache、Redis、Beanstalkd、Memcached、Mariadb、Supervisord,內建防火牆和各種安全設計,也有各種管理功能,建立資料庫、檔案管理或設定排程工作。所有工作都可在一個雲端控制台完成。

計價方式分為免費和付費版本兩種,免費版可使用基本功能,沒有時間限制,如果需要用到 SSL 憑證、多用戶管理、Git 或查看伺服器狀態等等,可考慮每月支付 $10 美元升級,年繳還有兩個月折扣。

網站名稱:RunCloud.io
網站鏈結:https://runcloud.io/ (推薦鏈結)

使用教學

以下我使用 RunCloud.io 搭配 DigitalOcean 新加坡節點進行示範教學,同時也會安裝 WordPress 中文版,如果你偏好其他的雲端伺服器,也能將 DigitalOcean 替換成其他選項,主要操作方式不會差太多,細節依照各個服務而有所不同。

將你的伺服器服務連接到 RunCloud

STEP 1

首先,開啟 RunCloud.io 後點選首頁的「Get Started」開始,可直接使用 GitHub、Digital Ocean 或 Google 帳戶登入使用或是輸入 Email、密碼建立一個新帳號。

登入 RunCloud 後點選「Connect Server」連接你的雲端主機。

在此之前你必須從 VPS 或雲端主機建立伺服器,建立時選擇 Ubuntu 16.04/18.04 x86_64 LTS(完全乾淨安裝,沒有任何其他的服務),如果使用 VPS 那要注意不支援 OpenVZ。硬體部分至少要有 1GB 以上空間、單核心、最少 512 MB 記憶體和一個 IP 位址。

為你的伺服器命名、填入 IP 位址,接著點選最下方的「Connect this server」。

STEP 2

如果無法連上你的伺服器,RunCloud.io 會給出一段指令,點選然後將全部指令複製下來。

回到你的伺服器,以 ssh 或服務提供的 console 登入伺服器,貼上剛才那段指令並以 root 權限執行。

返回 RunCloud 可以看到目前的安裝進度,在一段時間後會逐漸到達 100%,因為過程會安裝各種必要的程式,安裝速度也取決於伺服器的網路速度及硬體,通常會需要幾分鐘時間。

安裝程式結束後 RunCloud 會給出新的 MySQL root 管理權限密碼、使用者名稱和密碼,這部份資訊很重要,記得要保密不要被其他人獲取。

STEP 3

等待 RunCloud 在伺服器佈署好所有程式及設定,就能從控制台看到這台主機。

點選後會有詳細資訊,包括 CPU、記憶體、硬碟和 Uptime 等資訊,所有功能都可以從側邊欄選單選取使用。

在 RunCloud 平台一鍵安裝 WordPress 教學

STEP 1

準備好伺服器的所有必要程式後,接著要開始安裝 WordPress,也是本文的範例,前面有提到 RunCloud 支援許多程式,包括:WordPress、Drupal、phpBB、Grav、Joomla、phpMyAdmin、Piwik、Prestashop、Mybb、Concrete5 ,如果安裝的程式不列在其中,依然可透過手動方式進行安裝設定。

選擇左側的「Web Application」然後點選「Create Application」建立新的應用程式。

為應用程式命名,設定網域名稱、路徑、PHP 版本後新增應用程式。

STEP 2

建立應用程式後,點選進入詳細資訊頁面,可以看到相關設定選項,如果日後要管理網址、設定 SSL 憑證或檔案管理員都是從這裡進行操作,現在要先透過安裝程式快速安裝 WordPress,點選左側「Script Installer」程式安裝工具。

從最下方 Script 類別找到「WordPress」,然後按下「Install」開始安裝。

STEP 3

在安裝完成之前如果開啟你的 IP 位址,會看到 Website Unavailable 畫面。

STEP 4

WordPress 必須搭配資料庫才能安裝使用,回到 RunCloud 選擇「Database」功能,我們要先建立資料庫及登入資料庫的使用者,這邊分為兩個步驟:建立資料庫、建立資料庫使用者,最後將資料庫權限指派給該使用者就可以了。

比較可惜的是 RunCloud 似乎沒辦法全自動一鍵做這些工作,使用者還是得自行安裝操作。

設定後記得把密碼先複製起來,暫存在其他地方,指定給使用者存取資料庫的權限。

STEP 5

在看到你的 WordPress 安裝畫面前,還要再進行一個「網域名稱伺服器」DNS 設定步驟,這部份我就不多做說明,簡單來說,將你的 DNS 記錄以 A Record 指向主機的 IP 位址,生效後應該就能在網址列輸入網址看到 WordPress 安裝畫面。

WordPress 引以為傲的五分鐘快速安裝很簡單,將剛才資料庫的名稱、資料庫使用者名稱和密碼設定好後就會看到 WordPress 網站部分的資訊設定,而看到以下畫面代表伺服器的資料庫部分已經正常連接。

在最終步驟設定一下網站標題、使用者名稱、密碼和 Email 即可完成 WordPress 安裝。

RunCloud 已經佈署好適合讓網站運作的環境,可以感覺到速度上相當順暢,不過還是得安裝快取外掛才行,例如:Breeze,除了可提高網站速度,還有助於降低負載,在最小的硬體開銷達到最佳效果。

這項服務其實和 ServerPilot 有些類似,不過在介面設計上更為動態且較有質感,若是討論到易用性,我偏好 ServerPilot 較多,但是 RunCloud.io 功能更強大、更完整。如果你想接觸 VPS 或是雲端主機,但又苦無技術背景而無法自行操作,除了使用 Cloudways 之類的全托管方案外,搭配 RunCloud.io 或許能有事半功倍的效果。

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

【精選推薦文章】

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

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

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

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

AddThis 現已免費!一行程式碼為網站加入分享追蹤按鈕,整合電子報等行銷功能

曾經有段時間我選擇 AddThis 做為免費資源網路社群的分享按鈕,類似服務很多,你可能或多或少都有聽過,例如:Shareaholic、ShareThis、AddToAny,名字看起來都很像,這類服務特色是在單一分享按鈕中整合所有常見的社群服務,無須自己加入按鈕或編寫程式碼,後來礙於載入速度緣故我又找到另一個更好用的 Sumo(最早名稱為 SumoMe),如果你是使用 WordPress 架站我會推薦 Social Warfare,這是一款輕量美觀且兼具速度的社群分享按鈕外掛。

這幾天 AddThis 在部落格宣布服務將轉為完全免費!更早之前分為 AddThis Pro($10 美元)和 AddThis Business($75 美元)兩種付費方案,提供不同的可自定性和配額限制,當前使用者只要註冊帳戶就能免費享有 AddThis 完整功能。

雖然現在 AddThis 已經不是我的社群按鈕選項,但還是必須說 AddThis 是老牌分享按鈕,無論在穩定性及可靠度方面都值得信賴。當前功能也不再只有分享按鈕,還整合追蹤按鈕、相關文章、電子報、鏈結宣傳和贊助機制,雖然方便卻增加程式碼大小,對載入速度也會有所影響。

AddThis 使用方法很簡單,只要將一段程式碼加入網站就能啟用,在選項部分都是從 AddThis 網站設定調整,包括要加入那些分享按鈕、位置、顏色、呈現方式、在行動裝置上瀏覽樣式或分享後出現的訊息提示等等。如果你使用 WordPress、Magento、Tumblr、Shopify 等平台還有對應的外掛程式或設定教學可供使用。

以下我會簡單介紹 AddThis 註冊和設定教學,不過就不針對細部做說明,主要也是將重點擺在分享按鈕功能(重點是告訴大家 AddThis 服務已經走向完全免費的消息),前面有提到這項服務還有內建其他工具,例如追蹤、相關文章等等,亦能設定目標規則決定要顯示在那些頁面中,如果有興趣的話可以自己動手研究一下。

網站名稱:AddThis
網站鏈結:https://www.addthis.com/

使用教學

STEP 1

開啟 AddThis 網站後可以從左側看到 AddThis 分享按鈕範例,也是實際顯示樣式,會依照使用者的裝置及螢幕大小而顯示於不同位置。

透過 Google、Facebook 帳戶快速登入,或是以 Email 註冊一個帳號。

STEP 2

登入後會在 AddThis 自動建立一個專案名稱,首先選擇一個要使用的工具,之後還是可以從控制台裡新增或刪除,工具部分 AddThis 提供分享按鈕、追蹤按鈕、相關文章、電子報工具、鏈結宣傳和贊助功能,在這裡我們先選擇最基本的 Share Buttons。

STEP 3

選擇分享按鈕類型,例如懸浮於側邊、文章內、隱藏於角落(游標移動到圖示後自動展開)、圖片、Popup 視窗、Banner 等等,我認為懸浮的效果相當不錯,而比較常見的作法是讓分享按鈕顯示於網站的內文上方或下方。

AddThis 有個很智慧的設計:依照不同使用者提供個人化的分享按鈕類型,也就是當你選擇自動顯示按鈕時,AddThis 會依照每個使用者實際情形顯示出不同的按鈕組合,假如判定使用者最常使用 Facebook,那麼 Facebook 按鈕就會被顯示出來。

當然你也是可以自己手動挑選幾個要顯示的分享按鈕,點選「Add More Services」可以加入更多服務,AddThis 收錄的社群網站或討論區相當完整,連我們慣用的 LINE 或 Plurk 都列在其中。

STEP 4

設定完畢,依照 AddThis 給出的程式碼複製、貼到自己網站的 </body> 標籤之前,這一切就算大功告成,是不是非常簡單呢?如果你不知道如何編輯網站程式碼,還能依照 AddThis 提供的教學操作,前提是你使用的平台或環境剛好 AddThis 列在網站中,就可以找到更詳細的設定教學。

假如你是使用 WordPress 自行架站,AddThis 也有在 WordPress 外掛資料庫上架,搜尋將它安裝到網站中,接著進行相關設定就能將 AddThis 提供的相關功能整合到網站部落格。

STEP 5

前面有提到 AddThis 設定調整都是在網站中進行,好處是不用更換程式碼,設定儲存後自動反映在你的網站裡。如果你覺得只有加入分享按鈕不夠的話,點選「Add New Tool」還能增加其他的新工具,例如我習慣加入分享按鈕和追蹤按鈕,這樣就可以少裝很多外掛,也不用自己寫程式碼囉!

若你正在經營一個網站或部落格,甚至是製作了一個簡單的單頁面網頁,都可透過 AddThis 將分享追蹤按鈕快速整合到網站裡,省下編寫程式碼的時間和難度,當然可能會犧牲掉一些載入速度,不過一個程式可以加入很多功能,如果有用到也是很划算,有興趣的朋友不妨自行研究一下,除了 AddThis 以外還有不少類似工具,可找出最符合自己的選項使用。

值得一試的三個理由:

  1. 老牌分享按鈕服務 AddThis 現已完全免費
  2. 輕鬆整合追蹤按鈕、電子報和宣傳等功能
  3. 完整可自訂性,一段程式碼即可運作
  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 按一下以分享到 Google+(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 點這裡寄給朋友(在新視窗中開啟)

推薦閱讀:

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

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

使用 SiteGround 虛擬主機一鍵快速安裝 WordPress 教學

這幾年最被站長們推薦的虛擬主機 SiteGround 相信大家都不陌生,我曾在「WordPress Hosting 架站空間精選,最多人推薦的五個國外虛擬主機方案」將它列在首位,事實上隨著後來硬體、網路頻寬價格逐漸下探,虛擬專屬主機(VPS)價格幾乎到了和虛擬主機不相上下的程度,進而壓縮到虛擬主機的空間,不過不能說它過時,至少搭配上 cPanel 或其他控制台就能輕鬆管理網站,讓沒有經驗的網站管理者也能有相當安全可靠、方便管理的環境。

SiteGround 是一家總部位於巴拿馬的虛擬主機服務,開始於 2004 年,至今管理超過 160 萬個網域名稱,提供各式規格的主機方案,包括虛擬主機空間、WordPress、WooCommerce 空間、雲端空間等等,本文要鎖定的是 WordPress Hosting,如果你想以 WordPress 架站,但又沒有太多預算,那麼 SiteGround 或可成為你的第一站。

SiteGround 的 WordPress Hosting 分為三種規格:StartUp、GrowBig 和 GoGeek,除了在空間、流量及可架設網站數不同,其實也有一些細部的差異(請看規格比較),其中我認為最有用的「SuperCacher」(由 SiteGround 開發的快取技術,可以讓網站速度增加不少)只提供給 GrowBig 和 GoGeek 方案使用,因為價差不大,我建議直接挑這兩個方案註冊。

此外,SiteGround 內建免費一鍵搬移網站(Free Site Transfer)功能,若你本來使用其他主機商,想換成 SiteGround 就能夠快速轉移所有資料,其他像是 SSD 硬碟、HTTP/2 或當前最多人討論的 SSL 功能都已經內建其中,而且整合 Cloudflare 和 Let’s Encrypt 等免費服務確實讓剛架站的朋友省去許多麻煩。

接下來我想開始介紹如何以 SiteGround 虛擬主機快速建立一個 WordPress 網站,因為本身就有提供自動安裝功能,其實整體來說非常簡單,幾乎不用幾分鐘就能將網站完成上線!不過仍必須擁有自己的「網域名稱」才行,當然 SiteGround 也提供使用者註冊網址,稍後我會一併介紹和教學。

網站名稱:SiteGround WordPress Hosting
網站鏈結:https://www.siteground.com/go/freegroup (推薦鏈結)

在 SiteGround 建立 WordPress 網站完整教學

1. 註冊 SiteGround 帳戶

在開始前請先準備好一張可用的信用卡,訂購過程必須以信用卡付費,雖然 SiteGround 提供免費 30 天試用,仍要先付費才能完成註冊。詳情可參閱退款政策說明。

STEP 1

開啟 SiteGround 的 WordPress Hosting 頁面,選擇要購買或試用方案,前面提到 GrowBig 和 GoGeek 方案才有「SuperCacher」功能,建議直接選這兩種方案。

選好方案後,可直接在 SiteGround 註冊一個新網域名稱(註冊費每年 $15.95 美金),建議在其他註冊商註冊會比較便宜,也不容易被綁定在主機商而無法轉出,如果你已有網域名稱,那麼選擇「I already have a Domain」並將網址輸入即可。

域名註冊商推薦:

  • Gandi.net 全新改版!註冊網域名稱含免費 Whois 隱藏和信箱功能
  • 在 Google Domains 註冊購買網域名稱教學

STEP 2

接著要填寫基本資料,包括 Email、密碼、姓名、地址和電話等資訊,因為是付費服務,盡量填正確以免日後造成問題或糾紛無法處理,資料部分必須填寫英文,可上網找找地址英譯服務進行轉換。

下方的付款資訊只接受信用卡,無法使用 PayPal 或其他支付方式,填入你的信用卡卡號、到期日期、所有人名稱和信用卡後方驗證碼,大致上就算完成註冊程序。

在最下方的購買資訊,有不同的付款週期,除了試用一個月必須額外支付 $24.95 設定費,其他的年繳、兩年繳和三年繳都可以享受一定的優惠,要注意的是當期限一到重新續費時就會變回原價,如果有長期的網站營運計畫,建議可一次購買較長時間會更划算。

另外,資料中心部分 SiteGround 提供四個節點:美國、荷蘭、新加坡和英國,如果使用者多在亞洲地區,那麼選擇新加會是最快的路徑。

STEP 3

送出訂單,如果 SiteGround 成功刷卡扣款,就會開始建立帳戶等相關資訊,完成後也會在信箱收到 Email 通知,包括發票、訂單確認、帳戶資訊。

2. 在 SiteGround 建立一個 WordPress 網站

STEP 1

登入 SiteGround 控制台,開始進行自動化的 WordPress 安裝設定,SiteGround 好處是提供一鍵式安裝功能,不用再從頭到尾自己手動設定操作,大致上只要從控制台就能完成網站建置,其他部分可搭配 cPanel 控制台調整。

在這裡我們選擇「Start a new website」建立一個全新網站,如果你想從其他主機商移轉到這裏,可選擇第二個移轉網站,應該會安裝一個外掛,輸入一些基本資訊後就會自動把資料和相關檔案移轉到新的空間。

STEP 2

自動化程式可安裝 WordPress、WooCommerce、Joomla、Drupal 或 Weebly 等程式,在這裡選擇 WordPress,接著設定一下管理員的 Email、使用者名稱和密碼,在帳號密碼長度上有一些限制,為了讓使用者有更好的安全性,帳號無法修改(但可建立其他管理者帳號),密碼可以在登入控制台後修改為其他選項。

STEP 3

SiteGround 會一直推銷其他旗下產品,例如網站掃描功能,在這邊不需要加購,直接點選確認到下一步。

一切就緒,點選「Complete Setup」完成設定,WordPress 便會自動安裝完成。

STEP 5

最後從 SiteGround 控制台可以看到帳戶的 DNS 紀錄和 IP 位址,必須將網域名稱對應到主機空間才能存取,這裡有兩種方法:更改 DNS 紀錄或是將網址的 A 指向 IP 位址,我建議改 DNS 會比較一勞永逸,但缺點是需要一段時間完成更新。

如果你是使用 Cloudflare 或類似服務,其實只要把 A 紀錄指向 SiteGround 提供的 IP 位址就可以對應完成,當然這個 IP 是共享的,你也可以付費取得獨立 IP 位址,就不用擔心被其他網站影響,但必須額外付費。

3. 將 WordPress 設為正體中文,內建快取加速功能

STEP 1

從 SiteGround 控制台點選「My Accounts」找到「Installations」會看到安裝的 WordPress 網站,點選「Go to Admin Panel」快速前往 WordPress 控制台,要注意的是進行這步驟時網址必須已經成功對應到主機,否則是會看不到畫面的。

這裡我就跳過 DNS 伺服器設定步驟,因為在其他文章已經寫過不少次,相信如果你有網域名稱的話,應該也會知道要如何設定 DNS 或對應 IP 位址。假如不知道如何操作,建議可參考 Cloudflare 文章設定方式。

前往 WordPress 控制台(直接在網址後面加上 /wp-login.php/wp-admin/ ),輸入剛才自動化安裝時設定的帳號密碼,沒問題的話就能登入。

進入控制台從左側選單找到「Settings」,將 Site Language 調整為「繁體中文」,時區部分則設定成 UTF+8,儲存後就會看到中文介面並顯示正確時間。

STEP 2

前面介紹有提到 SiteGround 的 WordPress Hosting 其中一項特色是「SuperCacher」,這是什麼呢?通常 WordPress 都必須安裝快取(Cache)外掛,一來可加速網站,不用每次載入頁面時都從資料庫抓取資料;二來也能降低伺服器負載。而 SiteGround 提供的快取是在伺服器端進行,速度更快。

預設情況下會在 WordPress 安裝一個「SG Optimizer」外掛,這個外掛就提供快取功能,因此不用額外安裝 WP Super Cache、WP Rocket 這類的快取功能。

STEP 3

點選進入 SiteGround 提供的「SG Optimizer」功能,分別有三個選項:SuperCacher 設定、HTTPS 設定和 PHP 設定,設定維持預設值即可,如果你不知道應該調整什麼。

在快取中已經勾選包括動態快取、自動清除快取,如果要清除快取資料可以從 SuperCacher Config 裡進行操作,點選「Purge the Cache」就能將快取資料全部刪除,對要更新網站來說會用到,特別是當你發現網站沒有隨著你的修改而呈現最新狀態時,可能就是快取的問題。

這時候你就已經有了一個最基本的 WordPress 網站了!是不是非常簡單呢?

4. 大功告成

到這裡為止你已經成功建立好一個 WordPress 網站,但架站之路才正要開始,WordPress 博大精深無法在一篇文章中完整介紹,需要使用者自己花時間好好研究摸索,不過我之前也已經寫過幾篇安全性與設定方面的教學,可以直接參考:

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

【精選推薦文章】

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

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

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

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

Facebook 推出「顧客聊天外掛程式」為 WordPress 快速加入聊天外掛功能

去年底 Facebook 推出「顧客聊天外掛程式」(Customer Chat Plugin),也就是將現有的聊天室功能串接到一般網站、部落格的實用工具,對於需要提供客戶服務來說也非常有用,不用受限於 Facebook 粉絲頁面,從網站裡一樣可以進行線上交談,通常會拿來做購買前諮詢或售後問答服務。我之前寫過一篇 「Facebook 顧客聊天外掛程式將 Messenger 嵌入網站提供即時通訊教學」,要將外掛工具放入網站並不會太困難,只需要修改一下程式碼即可。

如果你是使用 WordPress 自行架站(是 WordPress.org,不是 WordPress.com,兩者不同),好消息是 Facebook 終於推出官方版免費外掛「Messenger Customer Chat」,這個外掛讓站長可將顧客聊天功能整合到 WordPress 網站,完全不需要自己修改佈景主題或程式碼,幾乎是全自動化!目前已經上架至 WordPress 外掛資料庫。

透過 Messenger Customer Chat 可開啟快速設定模式,透過互動式介面選擇你要顯示的樣式和說明文字,最後將產生的程式碼自動回傳 WordPress,儲存後即可在 WordPress 網站看到效果,對於不知道應該如何修改網站原始碼的朋友來說會很有用。

網站名稱:Messenger Customer Chat
網站鏈結:https://wordpress.org/plugins/facebook-messenger-customer-chat/

使用教學

STEP 1

首先,開啟你的 WordPress 控制台,從左側選單點選「外掛」功能。

接著按上方「安裝外掛」直接將下載的 Messenger Customer Chat 外掛壓縮程式上傳即可安裝,我在測試時發現從搜尋功能無法找到這個外掛,不確定是不是尚未被收錄到索引中,如果你遇到無法找到該外掛的問題,就是從官方資料庫下載然後手動安裝。

STEP 2

安裝後啟用外掛,側邊欄選單就會多出一個「Customer Chat」功能,第一次使用先點選「Setup Customer Chat」設定顧客聊天外掛,設定後會產生程式碼並自動載入你的網站外掛選單。

STEP 3

接著會開啟 Facebook 的 Messenger Customer Chat 設定功能,在第一個畫面中必須先選擇你要加入網站的粉絲頁面。

會有一個簡單的介紹說明,告知使用這個功能是將 Messenger 新增到你的網站。

STEP 4

重點來了,預設情況下如果語言是英文,請先選擇「中文(台灣)」將介面改中文,然後把其他選項都調整一下。

有使用過 Messenger 的話應該會知道上方都會顯示一個「回覆時間」,告訴使用者你可能會在多久之後回覆訊息,這部分可以自行修改,或是維持預設值讓 Facebook 依照你的回覆情形自動顯示,如果你想讓 Messenger Customer Chat 更貼近網站色彩,讓它看起來不要太過突兀或不和諧,亦能在外觀選項上自訂顏色。

設定結束,點選右下角的「完成」返回 WordPress 控制台。

STEP 5

原有的 Customer Chat 外掛頁面就會帶入剛才設定好的程式碼,同時為啟用狀態,別忘記點選「儲存變更」將這些紀錄儲存起來。

不過你可能發現一個問題,就是在設定時如果輸入中文歡迎文字可能無法正確帶入外掛中,沒關係,點選「Edit Code」編輯程式碼,將最下面 logged_in_greetinglogged_out_greeting 改成你要顯示的歡迎文字。

STEP 6

若你的網站有使用快取(Cache)外掛,別忘記將快取檔清除,回到首頁應該就能從右下角看到 Messenger Customer Chat 功能,是一個小小的 Messenger 圖示,點選前會出現歡迎文字,點選「開始洽談」就會跳出對話視窗。

操作上大概就像下圖這樣,能為你的網站或部落格提供更即時的 Live Chat 功能。

值得一試的三個理由:

  1. Facebook 在 WordPress 外掛程式庫上架顧客聊天功能
  2. 一鍵快速設定,無須修改佈景主題原始碼
  3. 設定完成後會自動將程式碼帶入 WordPress

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

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

使用 Cloudflare 防火牆 Zone Lockdown 保護網站控制台及登入頁面教學



Copyright : Weerapat Kiatdumrong / 123RF Stock Photos

我在 WordCamp Taipei 2018 分享這幾年經營免費資源網路社群的經驗,當中也提到我選用的工具服務和理由,作為一個樂於分享的使用者,其實沒有什麼不可告人的「秘方」,反倒很希望能夠將自身經驗拋出來讓大家參考,獲得更多回饋,通常在交流過程中可以使自己學習很多。雖然沒有任何作法可以 100% 符合所有網站需求,但我還是希望透過文章傳遞一些你可能會用到、足以解決問題的觀點,當然這些不應太過複雜,至少要能讓大家願意閱讀,我寫的文章才會有所用處。

在演講時我不斷提到一個推薦的服務 Cloudflare,兼具我重視的速度和安全性,除了是一款內容傳遞網路(CDN)服務外,更重要的是它提供許多安全工具,可以增加網站的防護力,不要覺得你的網站很安全或不會被盯上,事實上有很多的自動化程式都是隨機尋找可下手攻擊或植入惡意程式的目標,因此平常就要做好安全措施,總不可能等到被入侵才來修補漏洞。

如果你使用 WordPress 架站,最需要防護的控制台(wp-admin)和登入頁面(wp-login.php)絕對別輕忽,早先很多網站都是教你透過 .htaccess 限制可連線的 IP 位址,若你已經開始使用 Cloudflare 的話,可以把這部分丟給 Cloudflare 協助處理,我相信它在安全防護上會更強大也更具有彈性和空間。

本文要介紹 Cloudflare 其中一個模組「Zone Lockdown」,這個模組在防火牆(Firewall)頁面底下,可以想見它和防護有關,簡單來說,利用 Zone Lockdown 功能可設定要加強防護的區域,讓使用者預先設定某些路徑僅能讓某個 IP(或 IP 範圍)來源存取,如果運用在 WordPress 最基本的用法是把登入頁面和控制台設定進去,如此一來就能確保只有你可以存取控制台,不僅大幅降低被攻擊入侵的機會,也能不被暴力測試帳號密碼消耗主機資源。

我之前也推薦過另一個方法:啟用 Jetpack「單一登入」機制教學,讓你的 WordPress 網站更安全(含兩步驟驗證),也能讓 WordPress 更加安全,你可以挑一個適合自己需求的使用,那麼接下來我會更深入說明 Zone Lockdown 功能。

使用教學

STEP 1

首先,你可以在登入 Cloudflare、選擇你的區域(網域名稱)後點選 Firewall 找到這項功能。

Zone Lockdown 暫不提供 Cloudflare 免費帳戶使用,如果你是免費方案,會要求升級到 Pro 或更高的方案才能開啟這項工具。Pro 帳戶可提供三個規則設定,Business 則有 10 個額度,其實數量不用太多,若你已經升級到最基本的 Pro 方案就可以滿足基本需求,除非你想設定很複雜的規則。

STEP 2

如果你是付費方案,應該會看到 Zone Lockdown 功能已被開啟,點選「Create Lockdown Rule」建立第一個網址防護規則。

STEP 3

在這裡我以一般 WordPress 網站(自架站)為例,首先,設定一下規則名稱,例如可以命名為「僅限從辦公室 IP 位址登入 WordPress」,設定一個讓你可以一眼看出來的名稱即可,重點在於第二個欄位,也就是設定要讓 Zone Lockdown 防護的網址,可以設定為:

  • *example.com/wp-login.php*
  • *example.com/wp-admin/*

請將上面的 example.com 替換成你的網域名稱,如果格式不同也自行調整一下。

在第三個欄位「IP Range」將你平常使用的固定 IP 設定進去,可使用 IP 區段或是 IPv6 位址,最後點選「Save and Deploy」就能保存並將設定啟用,一切都是這麼簡單。

STEP 4

Cloudflare 各項模組功能都有快速開關,記得將規則切換到綠色的 On 才算啟用。

STEP 5

當有人連線到你設定防護的路徑,來源不在 IP 位址的白名單中,就會被 Zone Lockdown 模組自動擋掉,看到的會像下圖防火牆封鎖畫面(Access Denied)。

被阻擋的當下,Cloudflare 防火牆就會將此事件紀錄下來,可以在控制台看到被封鎖的來源、時間、存取的路徑、IP 位址及 User Agent 等資訊,當然如果是你不小心被阻擋,可以在 Firewall 中把自己加入白名單,就能解除問題,或者也可隨時將 Zone Lockdown 暫停或關閉。

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

【精選推薦文章】

如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!

想要讓你的商品在網路上成為最夯、最多人討論的話題?

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師”嚨底家”!!

WP Test 測試 WordPress 最棒範例內容,填充各種內容協助開發佈景主題

每次建立一個全新 WordPress 網站進行測試前,總得先部署適合開發的環境,以往我都是使用 WordPress 官方提供的佈景主題開發測試範例元件(Theme Unit Test),能快速匯入一堆測試內容(也就是範例內容),這個範例檔其實藏得非常隱密,如果平常沒有閱讀說明文件的習慣可能很難馬上找到,後來我又陸續發現其他適用於 WordPress 的範例測試檔案,若你有開發上的需求,想要填充內容到新網站,可以試試看其他人準備好的檔案。

本文要介紹的「WP Test」從字面上的意思就知道是用於 WordPress 的測試資料,後來被新的擁有者收購成為 Post Status Labs Project ,WP Test 是一套非常詳盡、完整的測試檔案,可以作為開發外掛和佈景主題使用,它以 Theme Unit Test 為基礎,結合超過四年的課程經驗匯集而成的一個測試內容。

在 WP Test 中收錄各式的範例內容,包括各種文章、分類、標籤、媒體庫、頁面、迴響、選單和帳號等等,只要透過 WordPress 匯入工具匯入 .xml 檔即可快速建構出充滿各種測試內容的網站。值得一提的是 WP Test 開放原始碼,資料部分會隨著時間不斷更新,以符合各種版本階段的開發需求(不像 Theme Unit Test 可能很少更新),亦可透過 WP-CLI 指令列模式快速安裝測試內容。

網站名稱:WP Test
網站鏈結:http://wptest.io/

使用教學

STEP 1

首先,先從 WP Test 網站點選「Download」下載封裝好的測試檔,解壓縮後有一堆資料,我們只需要其中的 wptest.xml 檔案即可。

點選左側「工具」中的「匯入」,找到 WordPress 匯入器,點選「立即安裝」。

STEP 2

安裝好匯入器後,別忘記「啟用匯入器」,這功能最初內建於 WordPress,後來改以外掛方式下載安裝,使用後可以從外掛頁面將它停用、完整刪除。

STEP 3

接著在 WordPress 內容的頁面中,點選「選擇檔案」然後找到剛才下載的 wptest.xml,選好後點選下方的藍色按鈕,會將文字部分內容匯入。

STEP 4

匯入作者頁面不要做任何更動,匯入前別忘記勾選「下載並匯入檔案附件」才不會讓某些圖片或媒體檔案無法看到,匯入時需要一段時間,請不要把分頁關閉,等待匯入工具跑完。

出現全部完成的提示訊息後就能返回控制台。

STEP 5

你會發現原有的 WordPress 多出很多文章,這些就是 WP Test 提供的範例內容,可以測試各種文章、不同佈景主題樣式的呈現效果,包括橫式和直立圖片、藝廊、Twitter、特色文章和摘要等等。

媒體庫裡也會匯入許多圖片,用以開發測試版面設計。

STEP 6

回到 WordPress 前台,這些預設好的內容就會依照你的佈景主題設計而變得不同,比較特別的是在 WP Test 也有提供測試用的選單,包括長選單及空白選單,如果你想在 WordPress 開發佈景主題或外掛,可能會需要填充一些內容進去測試,那麼 WP Test 就會很有用,可惜這些內容仍是以英文為主。

因為已經用不到了,匯入後別忘記到「外掛」功能中把 WordPress 內容匯入程式停用、刪除,這就是最簡單最基本的 WP Test 使用方法。

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

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

如何退訂免費資源網路社群每日新文章 Email 電子報通知?

長久以來免費資源網路社群都有提供 Email 訂閱更新通知的功能,最早是使用 Google 的 FeedBurner RSS Feed 訂閱工具,後來選擇 Jetpack 的 Subscriptions 模組讓使用者能有更彈性運用,亦可選擇要接收的電子郵件格式和寄送時間(就是網站目前右上角的訂閱功能),對我來說,以 Email 接收資訊的管道是很必要的,在發佈文章後可以快速推送給使用者,相較於推送桌面通知我更傾向不打擾不干擾的 Email 郵件通知。

 

一般而言,有禮貌的 Email 電子報或訂閱郵件都會提供退訂鏈結(Unsubscribe),可以快速從郵件清單將自己的地址移除,通常都是一鍵完成,然而有些退訂方式就設計得比較難懂,還得手動選擇要退訂的訂閱項目或是反覆輸入 Email 地址,就更不用說是完全沒有提供退訂鏈結的電子報,這在台灣相當常見,不但相當冒犯也算是過時的方法。

偶爾會收到讀者來信詢問要如何停止接收免費資源網路社群的新文章通知?站在網站管理者的立場還是希望大家多多使用這項功能,不過如果真的覺得每天 Email 多到爆炸,而且沒有太多時間看文章的話,其實網站郵件通知是可以快速取消訂閱的。以下我會教大家怎麼樣管理訂閱或是退訂網站的 Email 通知。

如何退訂不想接收的電子報或郵件通知?

STEP 1

首先,打開你要退訂的郵件,在最下方可以找到「取消訂閱」和「管理訂閱」鏈結,不管點那一個鏈結都會連到 https://subscribe.wordpress.com/,這是 WordPress 提供的郵件通知功能,自然就是回到 WordPress 設定。

其他的 Email 電子報或行銷廣告也是類似的退訂方式,在郵件上方或下方通常能找到一個「Unsubscribe」,點選後就會引導到訂閱設定頁面,大多情況不用進行任何操作,就會自動將你從寄件名單刪除。

STEP 2

點選取消訂閱後,會引導到 WordPress 提供的訂閱管理頁面,不過目前還沒有完成中文化可能會有一些中英文字串夾雜的情形,在這裡可以看到你曾訂閱過的網站(例如免費資源網路社群),如果你不想完全退訂,但又希望能選擇接收郵件的時間,點選「Settings」鏈結調整要接收的 Email 格式和時間區間。

確定要刪除訂閱嗎?點一下中間的藍色按鈕「Delete Subscription」就能將你從寄件清單移除,沒關係,未來隨時可以重新訂閱,如果你已經訂閱很多來自 WordPress 網站的郵件通知,想要一次全部停掉,可點選右邊的「Stop All WordPress.com Subscriptions」鏈結,停止接收所有來自 WordPress.com 的訂閱郵件。

STEP 3

若你是更早期透過 FeedBurner 訂閱的朋友一樣也能手動退訂,不過可能日後就無法再次加入接收名單,因為網站目前已經沒有提供 FeedBurner 訂閱表單,但目前的訂閱功能仍可以隨時退訂或加入清單,退訂方法一樣是找到郵件最底下的 Unsubscribe,點選後進入看到如下頁面,再次點選確定訂閱的按鈕就能離開寄件名單。

STEP 4

跳出黃色的 Successfully unsubscribed… 訊息後代表已成功取消訂閱。

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

【精選推薦文章】

如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!

想要讓你的商品在網路上成為最夯、最多人討論的話題?

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師”嚨底家”!!

為 Facebook Comments 留言外掛程式加入延遲載入 Lazy Load 功能教學



Copyright : dolphfyn / 123RF Stock Photos

幾天前在「CommentBox.io 沒有廣告、不追蹤用戶隱私的網站留言系統」一文有提到當今網站或部落格使用的幾種留言服務,而目前最多網站使用就屬 Facebook Comments 臉書留言外掛程式,可透過幾行程式碼快速串接,也不用自己建置相關系統或資料庫,整合使用者的 Facebook 帳戶在管理上更容易,我在幾年前就已經將 WordPress 內建的迴響功能關閉並替換為臉書留言外掛,在資源耗用和安全性方面更為理想。

雖然 Facebook Comments 速度還算快,但對於網頁載入時間也會有些影響,一開始我只把這段程式碼擺在文章頁面下方,後來發現每次打開網頁、不管有沒有要留言都會花時間載入 Facebook 相關 .js 檔,於是就研究了一下應該怎麼改善這個問題。

預設的 Facebook Comments 外掛程式沒有延遲載入,也就是每次開啟網頁只要有這段程式碼就一定會載入留言功能,因此可以加入一個判斷視窗高度的參數,當拖曳到留言框位置時才會載入相關檔案。這段程式碼修改自 Lazy Facebook Comments Plugin,原本使用於 Ghost,但稍微調整一下後 WordPress 也可使用,而且不用額外安裝外掛。

使用教學

STEP 1

首先,你必須先去 Facebook 自行建立一個新的應用程式,然後獲取應用程式 ID,這部分我就不多做介紹,網路上已經有很多完整教學,也或許你本身已經在網站上安裝過留言功能。

為了讓 Facebook Comments 具有留言審核工具功能,要在網頁的 前加入這兩行宣告代碼,同時將 YOUR_FACEBOOK_USER_ID 設定為你的臉書使用者 ID,YOUR_APP_ID 設定成應用程式 ID ,這部分通常可以從佈景主題的 header.php 檔案進行修改。

STEP 2

接著打開佈景主題 single.php(或相關檔案),找到跟迴響相關的程式碼片段,例如:comments_template() ,將它完整移除以關閉內建留言功能。複製以下程式碼貼上,以 Facebook Comments 作為預設的留言工具。

這邊要注意的是 YOUR_APP_ID 必須改為你的應用程式 ID,同時確認 sdk 版本是否過時,如果直接使用這段代碼,已有 Lazy Load 也就是延遲載入的功能內建其中,而獲取留言的方式是使用該頁面的固定網址。

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

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

不習慣 WordPress 5.0 Gutenberg 編輯器?Classic Editor 回歸傳統編輯器

WordPress 已有一段時間沒有跨版本的大更新,依照釋出時間表來看,距離上次 4.9 已經超過一年,對於 WordPress 更新歷程來說是從未出現過的。5.0 預定釋出時間不斷往後延遲,多半是卡在全新編輯器 Gutenberg,推出後確實也如預期褒貶不一,許多使用者紛紛湧入外掛頁面給一顆星評價以表達不滿,不過任何大改版一開始勢必都會有段陣痛期,尤其是對現有網站會不會造成影響,外掛、佈景主題能不能跟上等等都是要考慮的問題。

如果你還沒辦法適應 WordPress 5.0 以後的 Gutenberg 編輯器,或者有某些原因而希望可以繼續使用舊版編輯器(例如可能某些格式會因此而跑掉),現在還是有機會能回到過去,官方提供一款「Classic Editor」傳統編輯器外掛功能,只要安裝就能將 WordPress 5.0 恢復成舊版的編輯器,當然也可以交叉互用。

假如你的 WordPress 網站擁有多個作者,Classic Editor 允許管理員為所有使用者選擇預設的文章編輯器,或是交由使用者自行選擇,亦能指定在不同文章、頁面中使用特定編輯器。

外掛名稱:Classic Editor(傳統編輯器)
外掛鏈結:https://tw.wordpress.org/plugins/classic-editor/

使用教學

STEP 1

將 WordPress 更新到 5.0 版以後,預設的編輯器會變成 Gutenberg,將每一個部分都當成區塊(Block)處理,對於新手來說降低入門的難度,統一內容插入方式,同時讓「所見即所得」發揮得更透徹、更淋漓盡致。

為了避免升級後舊有內容發生問題,因此會將舊文章包在傳統編輯器的區塊中,未來的新文章將能夠陸續支援 Gutenberg。

STEP 2

如果想回復舊版編輯器,只要從外掛中點選「安裝外掛」,輸入 Classic Editor 就能找到傳統編輯器功能。

將它安裝、啟用就能在網站開啟相關設定選項。

STEP 3

在「設定」的「寫作設定」中,會有全站預設編輯器的選項,可調整為傳統編輯器或是區塊編輯器,也就是新的 Gutenberg 編輯器。如果你的網站有多個使用者,想讓每個人依照自己的習慣選擇,亦能開始讓使用者自行切換編輯器。

開放自行切換編輯器,在文章或頁面列表中原有的「編輯」功能會被取代,可選擇使用區塊編輯器或是傳統編輯器開啟編輯功能。

STEP 4

下圖就是在 WordPress 5.0 後使用傳統編輯器的樣式。

即使如此,適應新的編輯器是遲早的事,安裝外掛也只能延長這段轉換的時間(根據外掛頁面說明該專案會維護至 2021 年),並不建議一直停留在舊版或不進行更新,不過如果你有這需要,那麼安裝 WordPress 官方外掛會是最妥善的解決方式。

推薦閱讀:

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

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”