歡迎嚟到我哋嘅WordPress新手教學!呢個年代做生意點到要有個網站,但如果啱啱創業,無預算但有時間,咁樣可以點算?唯有自己DIY整網站!由於WordPress係免費使用,以及有各種方便使用嘅插件同模版主題,可以等你容易哋設計網頁、新增各種功能,所以今次嘅教學使用咗WordPress。呢篇文章我哋將從了解最基本嘅網站知識開始,然後一步一步教註冊域名、申請網頁寄存、到安裝WordPress,以相對最低嘅成本建立一個WordPress網站。
WordPress簡介
WordPress係一個開源的內容管理系統 (Content Management System,簡稱CMS),由Matthew Mullenweg同Mike Little喺2003年創建。該系統主要由MySQL、PHP等程式所組成。WordPress嘅開源特性意味著佢不屬於任何公司,而係由世界各地的工程師、開發人員等共同維護同優化。任何人都可以自己開發外掛或佈景主題。根據2021年嘅數據,WordPress喺全球網站嘅市占率係42.4%,全世界約有4億5000萬個網站都係用WordPress架設。
WordPress.com vs WordPress.org
需然WordPress共同創造者同Automattic創辦人都係Matt Mullenweg,但係WordPress.org同WordPress.com喺有分別。WordPress (WordPress.org) 係一個開源軟件,不屬於任何人;而WordPress.com係一個提供WordPress服務平台嘅平台,屬於私人公司Automattic。至於自行安裝WordPress同使用WordPress.com服務嘅分別可以參考以下對比:
使用自我託管嘅WordPress,使用者需要自行購買域名及網頁寄存,並自行安裝同管理WordPress。呢種使用WordPress嘅方式提供最大嘅靈活性同自由度,使用者可以自由選擇同安裝各種主題及插件,並可以任意修改WordPress底層程式碼;然而使用者需要自行建立同維護WordPress網站,包括處理網站嘅備份、更新及安全問題。
WordPress.com係一種託管服務,由Automattic 公司開發和維護。使用者可以註冊一個帳戶,就可以透過WordPress.com平台上創建同管理WordPress網站,無需自行購買主機(甚至購買域名),及自行安裝WordPress; 然而,這種方式嘅自由度較低,平台會對可使用嘅主題和插件進行限制,功能亦會跟據不同月費計劃而有所不同。
所以要真正最平建立WordPress網站你其實可以使用WordPress.com嘅免費計劃,不過你可以用嘅功能會受限制(唔可以自行安裝WooCommerce及連接自己嘅域名等),同埋會有廣告喺你嘅網站出現。所以我哋嘅最平整WordPress網站教學,會係關於自行購買域名及網頁寄存,再安裝WordPress。
網站架設基礎知識
開始架設WordPress網站之前,先了解一啲基本嘅網站架設知識係好重要。以下係一啲關於網站架設嘅基礎概念,等你明白教學每一步嘅用意。
域名 (Domain Name)
域名是網站的網址嘅主要部份,例如:www.example.com。佢係網站在互聯網上嘅識別方法(以及你嘅品牌識別之一),用於讓使用者能夠輕鬆咁搵到你嘅網站。選擇一個簡單易記、含有品牌名稱、或者同網站內容相關嘅域名係十分重要。
網頁寄存 (Web Hosting)
網頁寄存係指將網站檔案儲存喺互聯網網上嘅伺服器上,等使用者能夠訪問你嘅網站。選擇一個可靠且性能良好嘅網頁寄存服務商對網站嘅載入速度同穩定性至關重要。
網站 (Website)
網站係由一組相關嘅網頁,可以由一個或多個網頁組成,並共享相同嘅域名。網站可以係個人、企業、政府或非營利組織所擁有,用於展示信息、提供服務或進行交流等。
網頁 (Web Page)
網頁係指單個文檔或者顯示頁面,最基本係由HTML、CSS編寫。網頁可以包含文字、圖像、影片、音樂、以及超鏈結等示素。HTML(超文本標記語言)係一種用於創建網頁嘅標記語言,佢透過標籤嚟描述網頁嘅結構同內容。CSS(層疊樣式表)係一種用於控制網頁外觀同排版嘅語言。通過將CSS同HTML結合使用,就可以最基本地控制網頁嘅內容同形像設計。
CMS (內容管理系統)
內容管理系統(Content Management System, CMS)係一種用於管理網站內容嘅軟件(喺網頁設計層面上),佢可以等你輕鬆咁創建、編輯同發布內容,而無需具備專業嘅網頁設計同開發技術。CMS通常提供會一個方便使用嘅界面,等使用者可以簡單哋喺後台管理網站內容,而不需要直接編輯HTML和CSS去更改網站內容。
WordPress
WordPress就係一個個開源嘅內容管理系統(CMS),多年嚟已經被廣泛應用於建立各種類型嘅網站,如Blog、公司網站、網店等。WordPress擁有豐富嘅插件同佈景主題,令到用戶可以輕鬆咁擴展網站功能同修改網站外觀。由於佢嘅易用性同靈活性,WordPress已成為全球最受歡迎嘅CMS之一。
建立你第一個WordPress網站嘅流程
了解完以上嘅基礎知識後,你就會大慨明白整一個網站係一回點嘅事。由於我哋今使用WordPress整網站,所以所需步驟可以好簡單,只需要:
- 購買域名
- 申請網頁寄存
- 安裝WordPress
由於呢個算係十分新手嘅教學,所以當中流程都會盡量採用基本及簡單嘅設定,務求最平、最快咁建立起你嘅第一個WordPress網站。
購買域名
第一步會係購買域名,如果想要購買.com/.net/.org,可以使用porkbun.com,佢嘅價錢算係最平個幾間,仲有免費WHOIS privacy服務,所以以下教學都會根據porkbun.com進行。如果你想用其他域名供應商都無問題,因為啲設定都係大同小異,但就可能啲設定位置會有所不同,需要自己注意返。
一般建議選擇一個同你嘅業務相關、品牌相關嘅域名、或者以品牌名稱作域名。最好要簡單易記,能夠清楚地反映你嘅網站內容或服務。
(如果你需要.com.hk/.hk,可以考慮在https://hostingspeed.net/ 註冊域名,因為Porkbun沒有.hk域名提供,首年$99/其後每年$250)
1. 選擇域名
事不宜遲,立即瀏覽https://porkbun.com(或者鐘意嘅域名註冊商),我哋會見到一個搜尋欄位,寫著「Find your domain….」。輸入我哋想買嘅域名,然後撳隔離嘅搜尋制。
2. 檢查域名的可用性
搜尋咗域名之後,我哋需要睇吓呢個域名係咪已被註冊。假設我哋搜尋一個已被註冊嘅域名,例如下圖嘅「google.com」,我哋會見到佢會寫著unavailable,咁即係表示呢個域名已被註冊。
3. 購買域名
如果搜尋嘅域名係可以註冊,咁我哋就可以喺域名註冊商個度註冊,當我哋見到佢有一個價錢同「+」就表示你可以註冊呢個域名。
不過有一點要注意,因為porkbun會建議埋其他TLD或者相似嘅域名比你。好似以下例子,我哋搜尋「helloworldcompany」,但因為「helloworldcompany.com」已被註冊,所以哋會見到有啲建議,例如「helloworldpany.com」,所以加入購物車前要睇清楚。
假設我哋覺得使用「helloworldpany.com」都無問題,就可以撳「+」加入購物車。
加入購物車後,如果只需購買一個域名,可以直接按「Checkout」,或者右上角購物車Icon去埋單。
喺購物車都要對一對我哋買嘅域名、年期*同價錢有冇錯,無問題就撳「Continue」。
*無錯「買」域名係有年期,你可以選擇一次過「買」幾多年,到期再決定續期,或者每年續期都得。
我哋可以係呢度註冊新帳號或者登入帳號,由於呢個係新手教學,所以我哋需要開新帳號。填寫「Create a new account」表格所需嘅欄位,再撳「Create Account」即可。
註冊完成後,頁面應該自動轉跳返購物車頁面,循例都對一對想購買嘅域名名稱、年期同金額,無問題就可以撳「Continue to Billing」比錢。
呢度揀其中一個比錢方法比錢就可以。
成功比錢之後,頁面應該會自動轉跳到Domain Management頁面。如果無自動轉跳,可以撳右上角「Account」選項入面嘅「Domain Management」。
如果所有嘢無問題,Domain Management頁面就會見到我哋剛剛買左嘅域名。有咗域名我哋就可以準備購買網頁寄存,但呢一頁唔好關閉住,因為一陣我哋都面要去返呢一頁。
申請網頁寄存
完成購買域名後,就可以開始申請網頁寄存,要用低成本建立WordPress網站,就可以考慮使用SpeedyPage呢間網頁寄存。因為今次嘅教學會用到cPanel同佢嘅WP Toolkit功能去一鍵安裝WordPress,所以我哋會選擇呢間喺新加坡都有Server嘅網頁寄存供應商。
PS: 如果需要寄存高效能/高流量WordPress/WooCommerce網站,可以考慮Cloudways服務,無需自行設置伺服器,亦可輕鬆在網上建立/管理高效能的WordPress網站。
1. 選擇寄存服務及計劃
首先去SpeedyPage網站,然後上面選單揀WordPress Hosting。今次我哋會選擇WordPress Hosting,需然較Web Hosting貴少少,但因為佢有附送CDN同WP Toolkit,所以十分值得選用。
去到WordPress Hosting個頁之後,我哋可以揀Monthly Pricing / Annual Pricing,如果用足一年,Annual Pricing會免費2個月,計落平少少。
另外如果只需要1/2個網站,選擇最平嘅Starter Plan就可以了,直接撳計劃下方「Order Now」。
2. 輸入域名及其他資料
因為我哋頭先已經買咗域名,所以選擇「I will use my existing domain and update my nameservers」,然後喺下方輸入剛購買嘅域名。注意要分開域名名稱同TLD()即是「.com」部份輸入。例如「google.com」就要分別輸入「google」及「com」(唔需要輸入「.」),輸入完成撳「Use」去下一步。
跟住呢度就要選擇返Server位置,如果你嘅網站目標受眾係喺香港,建議選擇「Singapore」; 歐洲就揀「United Kingdom」; 北美就揀「Ashburn, USA」。
揀好Server位置後,撳「Continue」去下一步,準備輸入建立帳戶資料。
頁面下面「Billing Details」需要輸入個人資料去註冊新帳戶。
跟住「*」號去填哂所需欄位即可,Postcode可以填寫「NA」。
跟住填埋帳號Password同Confirm Password。
3. 確認及付款
填寫好資料後,我哋就可以選擇鐘意嘅付款方式,同埋揀接唔接受推廣資訊。揀好就可好Tick埋右邊Checkbox接受使用條款,然後撳「Checkout」按指示比錢。
4. 完成付款
比完錢之後,我哋應會係「My Dashboard」見到我哋嘅服務,同埋會顯示為Active。撳我哋剛購買嘅服務「WordPress Hosting – WordPress Starter Annual」右手邊「Manage」就可以管理同了解更多詳情。
入左去之後會見到使用咗幾多容量同流量,以及一啲cPanel或者Webmail嘅登入捷徑。但而家我哋首先要做嘅事,就係將我哋一開始買嘅域名,「駁」返去網頁寄存個度。而我哋而家呢一頁可以唔洗關閉住,一陣都需要返嚟呢度。
4. 設定域名
另外呢個時侯,我哋應該會收到SpeedyPage寄出嘅幾封Email,其中一封叫做「Your new cPanel account credentials」。
呢封Email係關於網頁寄存嘅一啲設定資料。
拉落啲中間部份會顯示網頁寄存Nameserver位置,應該會係兩個子域名 (xxxx.xxxxxx.xxx咁嘅格式)。我哋而家就需要將域名嘅Nameserver改做佢提供嘅Nameserver。
要更改域名嘅Nameserver,我哋需要去返剛才porkbun嘅Domain Management個頁。搵返啱啱註冊嘅域名,然後撳右手邊「Details」,下方就會彈出更多選項。
喺中間位置會見到「AUTHORITATIVE NAMESERVERS」,撳「Edit」就可以修改。
呢個時會彈出修改畫面,我哋需要先將所有現有嘅Nameservers位置 子域名)刪走,然後將剛才Email提及嘅Nameservers Copy&Paste落去。
就好似上圖咁,建議直接Copy你收到個封Email入面嘅Nameservers,因為有可能唔同容易打錯。輸入完畢後撳「Submit」就可以。
檢查SSL安裝
完成域名嘅Nameservers指向網頁寄存嘅Nameservers之後,跟住我哋就可以先檢查一下網頁寄存有冇自動幫我哋安裝好SSL(用於HTTPS網站)。
我哋可去返網頁寄存嘅Dashboard/Product Details頁面,然後據左手邊「Actions」下面嘅「Log in to cPanel」進入cPanel控制台。
cPanel控制台嘅畫面會類似係咁,呢度可以管理電郵設定同網站設定,以及查看網站除錯記錄等資料。
要設定SSL,就要碌落少少去落Securty個欄,然後撳SSL/TLS Status。
呢度我哋會見到預返咗好多個子域名,以及我哋一開始註冊嘅域名,由於今次我哋主要講整網站,所以搵返我哋註冊嘅域名(假設註冊咗abc.com,淨係睇abc.com同埋www.abc.com就得),睇下佢哋有冇綠色鎖Icon喺左邊,同埋右邊有冇寫著AutoSSL Domain Validated。有嘅話就可以直接跳去下一步 —— 安裝WordPress。
如果無嘅話可以先等5分鐘,因為域名剛註冊同埋Nameservers改左無耐,域名記錄未必咁快傳播開去。等完最少5分鐘,就可以直接撳Run AutoSSL。
撳完Run AutoSSL就會見到佢變咗做AutoSSL in progress,即係代表佢索取緊免費嘅SSL Cert,係要等一陣先會完成。
如果過左5-10分鐘都無改變,你可以直接F5, 再查看返自已嘅域名(假設註冊咗abc.com,淨係睇abc.com同埋www.abc.com就得),睇吓有冇成功獲取SSL Cert,好似上圖框住咁。無問題就可以準備安裝WordPress!(一般情況所有域名同子域名都會自動成功獲取到SSL Cert)
安裝WordPress
1. 進入cPanel控制台
終於嚟到最後一步,亦都算係最簡單嘅一步。因為我哋有cPanel 嘅WP Toolkit,所以都係「一鍵安裝」嘅形式就搞惦。(其實要安裝WordPress都有好多種方法,但我哋有WP Toolkit,緊係快快手用佢幫手裝WordPress。不過如果用緊嘅網頁寄存供應商無附送WP Toolkit,或者使用DirectAdmin,可以睇下有冇Softaculous。大多網頁寄存都會有Softaculous,佢都可以提供WordPress及各項「Apps」嘅一鍵安裝功能,不過實際都要問返供應商先知。)
我哋今次用WP Toolkit就直接撳左手邊「WP Tookit」,用佢嚟安裝及管理WordPress網站。
2. 使用WP Toolkit安裝WordPress
入到WP Tookit頁面後都好方便,直接撳「Install」或者「Install WordPress」。
跟住就可以喺Installation Path揀返你嘅域名(假設剛才註冊咗abc.com,呢度可以揀abc.com / www.abc.com。新手整網站用有冇www都無乜所謂,詳細www vs non-www嘅分嘢想知再講,可以轉登寫篇blog慢慢講),而Installation directory可以漏空。
Website title可以而家改,或者用佢作比你嘅先,之後入後台再改都得。
然後最主要填返WordPress Administrator嘅Email,Username同Password用返佢幫你Genearete都幾安全,無咁容易比人撞到,不過記住要用Password Manager/其他方法記低Username/Password。
其他欄位可以用返佢預設設定即可。填好想改嘅欄位之後就可以直接撳「Install」。
跟住喺右下角就會見到Progress Bar,等1-2分鐘應該會變做100% completed。呢個時侯我哋可以撳Scan或者直接F5。
安裝成功後,我哋就可以喺WP Toolkit入面見到我哋嘅域名,咁即係表示WordPress已成功安裝。
3. 測試安裝結果及登入後台
呢篇文寫個陣WordPress預設主題係「Twenty Twenty-Four」,所以如果我哋係瀏覽器輸入我哋嘅域名,撳Enter,然後見到以下畫面,就代表我哋已經成功建立咗一個WordPress網站!
然後我哋可以嘗試埋登入WordPress 後台,跟據我哋剛才嘅安裝設定,透過係瀏覽器輸入我哋嘅域名+ /wp-admin就可以去到WordPress後台。假設你嘅域名係abc.com,係網址欄輸入「abc.com/wp-admin」(如果安裝時選擇咁www.開頭,就要去「www.abc.com/wp-admin」),再Enter,就可以去到後台。
然後我哋就要用返先前記低嘅Username及Password登入。另外我哋其實都可以喺WP Toolkit個度,無需密碼直接登入後台。不過通過/wp-admin登入,都算傳統嘅登入方法,所以都要認識一下。
登入成功後,我哋就會類似上圖嘅WordPress後台畫面,喺呢度我哋就可以盡情哋整網頁啦!
開始使用WordPress
睇到呢度嘅你,相信已經同我哋一齊由註冊域名、申請網頁寄存、到最後成功咁建立一個最基本嘅WordPress網站。需然呢篇教學仲有好多範疇無涉及到,不過都希望可以幫到你有一個好嘅開始。
WordPress提供了無數的主題和插件,讓你可以根據自己的需求和喜好來定制你的網站。如果有與趣了解點樣使用WordPress,可以先睇下呢篇官方使用簡介:https://wordpress.org/documentation/article/first-steps-with-wordpress-block-editor/。
但使用WordPress亦會有機會引申出一啲效能同安全性嘅問題,所以記住透過定期更新、使用高質素插件、減少使用插件數量等方法,解決呢啲問題。