Freelance網頁設計流程 - 5個步驟, 讓你好好地接案子
這篇「Freelance網頁設計流程」，我將分享5個步驟, 讓你好好地接案子
Wordpress教學課程20231小時就學會架站
這是一篇全面，適合新手看的Wordpress教學課程 - 1小時就學會架站（2023年更新）。
在這篇教學，你會學習到：
- Wordpress的基本概念
- 購買網址，伺服器，安裝WordPress
- Wordpress實戰操作
- 安裝主題示範
如果你想學習Wordpress，或是想低成本做網站，這篇教學會非常適合你。
準備好了嗎？我們開始吧！
第1章Wordpress基本概念
Wordpress是一套非常受歡迎的架站方法。
它免費，開源，也具備大量模版及可擴充的功能。
即使你不懂編程，你也可以利用wordpress架站。
無論你想建立簡單網站，或是功能繁複的平台，通常都有對應的模版（Template）。
只要使用合適的模版，再作出一些修改，你便可以簡單地成功建立網站！
有不少大型公司的網頁，例如Unwire.hk，BBC America，Sony Music等，都是建基於Wordpress去架站的!
什麼是Wordpress?
Wordpress是一套非常流行的內容管理系統，簡稱CMS。
內容管理系統（CMS）的作用是，讓一個不懂編程的人，也能夠更新網頁的內容。
跟據https://trends.builtwith.com/cms，Wordpress是現今最多人用的CMS。
通常，網站開發人員會把設計好的網站，連上CMS，讓一個不懂Programming的人，也能夠更新網站的內容。
然而，由於Wordpress的功能非常強大，它漸漸變成製作網頁的神器。
WordPress 有一個功能叫「theme（主題）」，簡單來說，就是一個網頁的外觀。我們也稱次為網頁模板。
我們可以合法地買一些別人設計好的各種漂亮外觀，把它變成自己的網頁。你會發現，這些各式各樣的主題竟是如此多，既專業又漂亮。
要注意我們這裡討論的是wordpress.org，而不是wordpress.com。wordpress.org是一套免費，開源的CMS。而wordpress.com則是一個讓你Blog的第3方服務。
要了解更多網頁設計的基本概念，可參考：
寫網頁課程2021 - 學寫網頁的9個重要概念
要利用wordpress架站，大概可以分為2個步驟：
- 前期設置工作
- 利用worpdress架站
下一章，我們會集中處理前期設置工作。
除了文章教學外, 你也可以看看1這篇教學的Youtube版:
第2章購買網址，伺服器，安裝WordPress
前期設置工作，就是你要利用wordpress架站前，需要預備的工作。
有人說，前期設置工作很麻煩。的確，前期工作是很麻煩，沉悶，也令許多初學者在這個Step便卻步了。但，你不會放棄吧？
前期設置工作可以分為4個部驟：
- 購買網址
- 購買伺服器
- 把網址和伺服器連在一起
- 安裝Wordpress
我們先會學習前期設置工作。已經設置好wordpress的朋友，可以直接到Wordpress實戰操作。
購買網址
只要一個網址沒有被人注冊，我們便可以去購買。
選擇網址時，網址長度，和你的業務的關聯性，易記程度….等等都是考慮因素。
要查看和注冊.com .net .org的網址，我們可以到：
http://godaddy.com
選擇網址後，通常會問你要不要Privacy Protection。如果你想你的登記資料（如姓名，Email等）不被公開，便可選擇加上Privacy Protection。
Godaddy上的「Start your website for FREE」，不用tick。因為Godaddy的Server不太行。
要查看和注冊.com.hk .hk的網址，我們可以到：
http://www.hkdnr.hk/
要注意，注冊.hk的網站是需要身份證/商業登記證喔。
購買伺服器
由於Wordpress使用PHP為基礎編程語言，因此，我們需要一個運行PHP的伺服器。
此外，Wordpress還會使用到數據庫（Database）。而Database最常用的就是MySQL。因此，我們的伺服器要支持PHP＋MySQL。
Wordpress常用的伺服器環境叫LAMP。意思是Linux＋Apache＋MySQL＋PHP，代表系統OS上用Linux，透個伺服器軟體Apache運行PHP＋MySQL。
至於伺服器的選擇，我以往會推介新手使用Hostgator，因為設定簡單。但今天，我會推介新手都使用Google Cloud，原因如下：
- 接近免費。使用Google Cloud最平的機，約7USD一個月。而Google Cloud有300USD免費使用。因此對新手而說，Google Cloud起碼頭一年費用全免。
- Google信心保正，速度快。
然而，Google Cloud的缺點就是，它只會給你空的電腦，裡面什麼也沒有。你需要自己安裝LAMP環境，對新手而言，比較麻煩。
但各位不用害怕，我會一步一步Guide你去做＝）
首先，到https://cloud.google.com/，選擇「免費試用GCP」
選擇你的國家，接受同意條款。按Continue。
填寫你的Credit Card資料。按Continue。
你用USD300免費使用，不會被扣錢的。
安裝WordPress
接下來，我們便可以去安裝WordPress了。到達Google Cloud的主控台。搜尋「Wordpress」，並選擇「Wordpress Certified by Bitnami」。
Wordpress Certified by Bitnami是一些Package，裡面已經替你設定好Wordpress及LAMP環境。
選擇Launch on Compute Engine。
Zone是Server的地區。（當然愈近愈好）
Machine Type選擇micro對初學者應該夠用。（你想機能強一點便選擇貴一點的吧）
Disk就選擇40GB應該就行。
等一會。。。安裝成功了！記得把所有資料，包括網址，後台網址，後台登入與密碼都一一記下。
在瀏覽器上輸入網址，下圖就是你剛剛裝好的Wordpress了！
你也可以登入Wordpress的後台試試看！
移除 Bitnami 出現於網站右下角的 Banner
現在，我們還有一個問題，就是網站右下角，會出現一個Bitnami的廣告icon。
接下來，我們將學習如何把它移除。
到左手邊的Menu，按Compute Engine，選擇VM Instances。
VM Instances就是你的Server電腦喇！
找到你的VM Instance後，按SSH，選擇Open in browser window。
SSH是透過command line，與你的Server溝通的一種方法。
輸入以下command:
要一句一句的去輸入。每輸入完一句按Enter
sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
*此Command的意思：移除Banner
sudo /opt/bitnami/ctlscript.sh restart apache
*此Command的意思：重新啟重apache
sudo /opt/bitnami/ctlscript.sh restart nginx
*此Command的意思：重新啟重 nginx
輸入以上的3條Command後，右下角的 Banner成功被移除了！
連接網址和伺服器
接下來，你要把網址和伺服器連在一起。在以上的godady + google cloud例子中，一共有兩個步驟要做：
- 把Google Cloud Server上的IP設為靜態IP
- 把Godaddy網址上的A record指到你的Server IP
把Google Cloud Server上的IP設為靜態IP
首先，到你的Google Cloud。搜尋VPC，然後選擇External IP Address。
把type由Ephermeral轉到Static。
隨便改個名字，按Reserve。
把Godaddy網址上的A record指到你的Server IP
到你的Godaddy Panel。找到你的Domain後，按Manage DNS。
DNS全名叫Domain Name System。意思是Domain與IP Address的關係。
把@的A record中的value轉為你的Google Cloud IP。
A record用來指定Domain對應的IP。
通常我們會設立兩個A record。一個是@，一個是www。
意思是你的網址 xxx.com 及 www.xxx.com 皆會指到你的Server IP。
但在今次這情況，Godaddy本第已經有一個CNAME record：把www轉到@。
因此，我們無需要再設立www的A record。
接下來，等待4-24小時，你的網址便會連接到Google Cloud！
第3章Wordpress實戰操作
好了！經過一大輪的前期工作，我們終於要學習Wordpress的實戰操作了！
我們將會由Wordpress的基本操作開始去學習，包括：
- Page
- Post
- Menu
- Users
- Themes
- Plugins
- Widgets
- General Settings
- 設定首頁
我們開始吧！
基本操作 – Page
如果你的網址是xxx.com
那麼，你的Wordpress後台地址便是xxx.com/wp-admin
後台就是只有網頁管理員（就是你）才可以進入的地方。
Wordpress的後台可以管理整個網站，例如其內容，外觀，甚至各種不同的功能等等。
現在大家請開兩個瀏覽器，一個是你的網址，一個是你的後台。
在後台左手邊, 是這個後台的主要菜單。你試試按Pages->All Page
什麼是Page?
Page就是「頁」。
每一頁，都會有一個自己獨立的網址。
比方說：
xxx.com/about-us
xxx.com/faq
xxxx.com/contact
從以上可見，每一個內頁都有一個獨立的網址。任何人只要在瀏覽器上輸入這個網址，便能去到相應的頁面。
現在，你可以試試新增一個頁面。到All Pages -> Add New。然後填下標題，內文，最後按publish。
接一下View Page，便可以成功看到剛剛建立的頁面！
Page Address（以前叫Permalink）就是這個頁面的網址
接下來，你可以為這個Page新增一個Block。按＋，然後按Paragraph
你更可以設定字體顏色，粗體，斜體等等。
另外，你可以按一下那3個圓點，然後按Edit HTML。直接修改HTML。
你可以在左手面，Drag & Drop每個block的位置。
做完所有改動後，記得要按Update！那麼所有改動便會儲存。
Update完後，你可以接View Page，或在新建的頁面上按Refresh，以看到更新後的內容。
另外一個概念叫Featured Image。我們試試按右下角的Set Featured Image。
Featured Image是一張代表這頁面的相。（只有一張）
把照片直接拖到這裡。
按一下Select。
成功為這頁加上Featured Image了。
除了Featured Image外，你也可以在內文加圖片。按＋ -> Image
按Media Library。然後你就可以上傳照片。
按一下上傳後的照片，你可以改變該圖片的一些設定，如圖片大小，置左/中/右等等。
再三提醒：更改完後記著按Update!
Refresh這一頁的網址，成功看見上傳後的照片。
基本操作 – Post
什麼是Post?
Post就是網頁上news(新聞)或blog(部落客)的部份。
Post其實和Page很像。但是大部份的Post，外觀都是一樣的。每一個Post不同地方只在於其Post的內容。
比方說，在apple的網頁中，每一剛新聞的外觀都是一樣的。
現在我們試試去新增一個Post。按Post -> Add New，其他的動作基本上和Page一模一樣。
我們更可以把Post歸類。到All Post -> Categories。隨便新增一些Category。在Name 輸入後按Add New Category 便可。
然後我們回到講講新建的Post，剔下這個Post的Category便可以。
基本操作 – Menu
每一個多於一頁的網站， 都會有一個主要導航(Navigation)。他們會出現在每一頁上，目的是供用家可以看站內的其他頁。
這個主要導航，我們在Wordpress上稱次為Menu。
到Appearance -> Menus，按Create a Menu。然後隨便輸入一個Menu名稱，按Create Menu。
在左手邊我們可以選擇一些想加進這Menu的Page，然後按Add to Menu。你也可以選擇Custom Links，加上其他連結。
Display Location一定要剔。它代表你的menu要放到這個網站上的哪一個位置。
你也可以按一下小三角，去更改Menu上的文字。
你更可以Drag & Drop，去為Menu重新排序。
看！成功地放置Menu了！
基本操作 – Users
Wordpress已經內建了一個用家管理系統，我們稱之為User。
到Users -> All Users
正常的情況下，Users就只有你一個用家 - 你自己的管理員帳號。
另外，你也可以到Users -> Your Profile，去重新設定你的登入密碼。
通常的情況下，我們並不需要利用到這個用家管理系統。
但如果你的網頁可以開放給用戶注冊，你便可以借助這個系統，管理你的用戶。
基本操作 – Themes
Themes就是你Wordpress的外觀。透個使用不同的themes，你可以更改網站的外觀。
到Appearance->Theme
Wordpress內置的theme store都是免費的theme，但通常都不太漂亮。
我自已通常會使用themeforest上的收費theme。
同一個Wordpress上，你可以install多個theme，但只能active一個。
基本操作 – Plugins
Plugins可以為你的Wordpress新增功能，例如Ecommerce，多國語言等等。
到Appearance->Installed Plugins
Wordpress上內置的Plugin Store都是免費的Plugin，但通常已經夠用。
一個Plugin在install後，必須activate才可以啟用。
基本操作 – Widgets
接下來，你會學習Widgets。
Widgets是網站的一小片位置，我們可以隨意在這片位置上加上我們需要的東西。
Widgets通常應用於一個網頁Sidebar（側欄）或者Footer（網頁最底部的位置，通常每頁都會出現）上。
到Appearance->Widget
在這個主題，你可以看到，只有一個位置可以給我們放Widget，就是Footer。
Footer Widget上面寫着「Add widget here to appear in your footer」，因此，我們知道這個widget用作footer。
你可以使用Drag & Drop，把左邊的Available Widgets drag到右邊的Footer Widget上。
基本操作 – General Settings
最後，我們要學習一些Wordpress的基本設定。
第一個常用的設定是Settings->General。你可以更新網站的title及tagline。
Title是你網站的名稱。而Tagline則是一至兩句的短句子，去描述你的網站。
Settings->Permalinks可以設定你的網址結構。
Permalinks我通常使用的設定是postname，因為可以讓用家更容易大概知道該頁是什麼。
基本操作 – 設定首頁
最後的最後，我們可以為wordpress設定首頁。
到Settings->Reading
預設的Front Page Display設定是Your latest posts，代表你最新的post。
你可以選擇A static page，讓你在Page中選擇一頁作首頁。
第4章安裝主題示範
終於來到最後一課了。在這一課，我將會示範從頭開始，去使用一個theme，來建立一個新聞網站。
你將會把前面學習了的知識，都用一次。
我們會使用一個免費的theme - Neila，去建立一個新聞網站。
然而， 我其實自己什少使用免費的theme，因為免費的theme都不太漂亮。我通常是使用themeforest上的收費theme。不過大家今天初學， 用免費theme試試做也不要緊！
安裝主題示範 — 建立新聞網站
首先，到Appearance->theme。按Add New。
在右上角搜尋"Neila"，然後按install。
按"Activate"，去啟動主題。
到前端外觀看看，整個網頁的外觀轉換了！
這是一個新聞網站。每一個新聞都會在wordpress中用post去表示。而且，你可以把它們分類。
我們先去新增一些分類。到Posts->Category，輸入分類名稱，然後按「Add New Category」。
接下來，到Post->Add New新增一些Post。記得要放入Featured Image及把它們Tick到對應的Category。
關於網頁的照片，我喜歡使用一個免費圖片庫，叫pexels。
到達pexels.com後，搜尋圖片。
然後按Download。Size的話選擇Larget就夠用。Original通常File Size會太大，不建議使用。
下一步，就是去建立Menu。到Appearance->Menus，輸入Menu的名稱，然後按Create Menu。
然後，在Menu上加上你要用的頁（就是你的Category）。在Display Location上Tick「Primary Menu」，按Save Menu。
接著，你可以到Appearance->Widgets修收你的Sidebar。今次，我的Sidebar只放了3樣東西：Search, Categories及Recent Posts。
最後，到Settings->General，更改你的Site Title及Tagline。
就這樣，你很快便利用一個theme，建立了網頁！
總結
Wordpress其實並不難學。但要充分理解及運用，也要時間去練習。以上的內容，已教授了你很多基礎wordpress知識。大家好好學習吧！
如有任何問題，歡迎Email我！
你可能也會喜歡...
螢幕錄影程式(Mac/Window) - 12個付費/免費/免安裝螢幕錄影APP
這篇「螢幕錄影程式(Mac/Window)」將會為你介紹 12個付費/免費/免安裝螢幕錄影APP，以及它們各自的優點和缺點，如果你有需要進行影片教學、遊戲實況、會議錄影、課程錄製等等，這篇文章很適合你！
加入我們的Email List
免費參加【網頁開發入門CRASH COURSE】線上課程！
