ALL POST - 架站勤拿手

15_我應該選擇哪一套佈景主題

2022-07-19 尚無留言

簡介

選到對的主題，是學習WordPress最重要的第一步，須慎重思考。

說明

接下來會介紹幾套我列為可選用清單之「免費」佈景主題，列出的項目我只會選用一套作為後續章節的教學用途，所以如果你安裝的主題與本課程選用的主題是不同套的，後續的章節有些在「自訂」設定的地方可能就無法完全參考，你須自己摸索一下每套主題自帶的「自訂」設定。

主題名稱	費用	用途	說明	官方Demo	實際案例
OceanWP	僅使用免費版	主要用來作為較客製化不同各種網站類型的基本框架。亦可純套版部落格。	僅作為框架用，透過頁面編輯器與其它外掛可設計出部落格、購物商店、官網、一頁式等類型網站。	點此	點此點此
Blocksy	僅使用免費版	主要用來作為較客製化不同各種網站類型的基本框架。亦可純套版部落格。	僅作為框架用，透過頁面編輯器與其它外掛可設計出部落格、購物商店、官網、一頁式等類型網站。	點此	點此點此
VT Blogging	僅使用免費版	套版部落格	簡單素雅，色塊分明。	點此	點此
Kokoro Rose	僅使用免費版	套版部落格	偏少女風，女生大都會喜歡。	點此	點此
Makenzie Lite	僅使用免費版	套版部落格	偏華麗的主題，一安裝好就可以擁有滿有質感的首頁。	點此
Blogito	僅使用免費版	套版部落格	簡單素雅	點此
WP Diary	僅使用免費版	套版部落格	稍嫌華麗	點此
Hello Elementor	免費版	純框架主題	無法任何內建功能或Demo，專用用來設計網頁。

「實際案例」都是我經手的作品

注意 : 在表中「OceanWP」、「Blocksy」的「實際案例」你所看到的「首頁」(甚至每一頁)都不是佈景主題提供的，而是我們透過「頁面編輯器」外掛來自己設計排版的，也就是說自己客製化自己的每一頁。

進階說明

如果你只是要純寫部落格，那麼找「部格式主題」來套版，並①把該套主題的「自訂」摸熟，還有②WordPress原生後台功能也摸熟，這樣子就不用走客製化設計網站的學習路線，可以在2天之內就開始當部落客寫文章了。(當然如果想增加一些小功能例如社群分享、置入廣告…仍得繼續往下面章節學習並安裝適當的外掛)

後面章節主要會不以「套版」來教學，當然若你純是為了當部落客，只要選則一套喜歡的部落格主題來「純套版」即可, 如果你想學的是「網頁排版」，做出比較客製化的網頁，那就不能只滿足於套版，應把基本課程學完上手後，後面另有教學來教怎樣使用編輯器來「設計網頁」。

14_對佈景主題基本認知

2022-07-19 尚無留言

簡介:

佈景主題是整個網站的基本框架、基本外觀、樣式，是必須安裝的，或稱「套版」，但若學習正確的方式，可以打造想要出的網頁或功能，擺脫套版的框架。

說明 :

這個章節非常重要，會先說明許多觀念再繼續後面的章節，請務必耐心把本章節所說明的觀念與方向弄懂再往下學習，很多學習WordPress的新手的「誤入歧途」都是源自一開始對佈景主題錯誤的認知與無知。

很多人在學習WordPress架站的初始階段，被錯誤的資訊或網路廣告所影響，對佈景主題產生錯誤的謎思或依賴，造成後續過度購買、無法駕御、反覆重新開始等等的情形。

觀念1:佈景主題有99%都是英文

WordPress源自國外，雖目前後台已有繁體中文介面，但額外加裝的佈景主題仍在「設定」上仍大多數是英文，我們須有基本英文閱讀能力或靠Google瀏覽器按右鍵翻譯中文來閱讀(我都這樣做的)。

雖設定上大都是英文，但我們在設計網頁或寫文章時仍是以中文來編寫，所以訪客瀏覽網頁時所看到的仍是你所編寫的中文內容，只會有少數的功能標題在前台呈現時會是簡短英文，但這個我們後面可以有方式把這些片段英文也翻成中文，讓訪客看到的是全中文的網頁。

觀念2:免費與付費的差異

不管是免費主題或付費主題，都是「套版」，套了之後再做設定與修改。

Ф免費主題

WordPress本身就有提供數以千計的免費式佈景主題，可以在後台直接搜尋安裝，不過絕大部分的主題都有許多限制，很多的「設定」都要付費版的才會開放。

另大部分的免費主題，其實並不好用，只能靠有經驗或用過的人才能告知你哪幾套免費佈景主題是較好用、較好上手的、較好操作的。

但也有一些免費式的佈景主題，在免費版時的就沒有過多的限制，是值得我們列為「愛用」清單之一的。

Ф付費主題

付費主題主要是在「主題市集」(我比喻的稱呼)可以購買，那邊也有數以千計的付費主題可以選購，每一套大約50~60美金不等。

會購買付費式主題的原因不外有二，一是它內建許多功能，二是可以直接匯入它做好的美美的Demo。但這二點卻也是新手最大的盲點與浪費學習時間、繞遠路的主因。(後面另詳述)

(比較簡表)	免費主題	付費主題
優點	免費、簡單	多功能、有Demo可匯入
缺點	● 功能少，無Demo可匯入。 ● 在「設定」上有所限制。 ●未來如果更換主題，不太會痛，沒有較大的過度期。	● 可「設定」的地方較多，但也可能偏複雜，不知怎麼設。 ● 太多功能用不到，可能也不懂怎麼關掉，影響網頁載入速度。 ● 匯入的Demo會自帶外掛，而自己又安裝外掛，可能會造成功能重覆。 ●未來如果更換主題，在設定與風格上，一切得重來。
改善方式	靠適當的外掛來打造想要的功能。	內建的功能可能是不符合實際需求的功能，所以仍得靠其它外掛來補足想要的功能。

觀念3:每一套主題的「自訂」的範圍都不一樣

「自訂」的意思，是指佈景主題可以「自己設定」的地方，例如可以設定全站的主要風格、配色、幾欄式、選單數量、字體大小等等。

重點來了，不管是免費或付費主題，每一套的可「自訂」範圍與內容完全都不一樣，免費的主題提供的「自訂」比較少，付費式的主題提供的「自訂」較多，甚至有些偏向複雜、有難度，須仔細研究、閱讀官方教學，付費式主題的官方教學甚至太冗長且過多英文篇幅易造成閱讀上的門檻。

也正因「每一套主題的「自訂」的範圍都不一樣，所以如果你把網站的主題做更換，你就得重新去研究這些新的自訂項目，所以沒事就不要亂更換主題，選好一套用到底就是了。

更換主題並不會造原所編寫的內容消失，更換主題只會造成網站樣式或外貌上的改變。

觀念4:安裝後無法與主題展現的Demo呈現一模一樣

這個情形一般常發生在免費主題身上，因為免費主題一般沒有提供Demo可匯入，所以在安裝前的預覽雖看來美美的，實際上安裝後只是一個空的框架與少數部分會一樣(如上圖)，這些預覽其實大都只是「示意」畫面而已。

觀念5:佈景主題的Demo修改問題

付費主題一般都會提供Demo讓你匯入，就可以馬上讓你的網站跟它的Demo站完全一模一樣，很棒吧？才不是呢，後面你就知道苦在哪裡了!

美美的Demo是糖衣毒藥

例如這個付費主題「Flatsome」的Demo站，看上去每個可匯入的Demo是非常棒，好像匯入後網站就可以直接上線了，對吧？

實際上你會遇到的問題有很多:

問題(1):Demo數量

匯入的Demo有太多頁了(有些會有30幾頁以上)，你必須思考如何選擇性的刪除與保留，也包含主選單或相關連結。

問題(2):切版問題

你網站實際上的資料量，例如文案、圖片，一定要在Demo頁上去替換成你的圖文，而Demo網頁上有幾張圖，你就得準備幾張圖去替換，Demo網頁上有幾個段落的文字，你就得硬生出那樣數量的文字去替換，所以對Demo頁的修改，你新手能做的只是換圖換字而已。

另外，想進入一步修改，會發現Demo網頁上切割好的版位可能太多或太少，你還得學習研究它自帶的編輯器來摸索怎樣「切版」，才能增加或刪除每一網頁上的版位區塊。(自帶的編輯器大都很難用)

問題(3):自帶編輯器的問題

每個佈景主題大都有自帶編輯器，每個佈景主題都各自為政，而且未來一更換主題，不僅須得重新學習新的編輯器怎樣用，而原主題編輯器所製作的內容很可能就會變成「原始亂碼」的狀態。(後面會教怎樣才能避免此情形)

問題(4):自帶外掛的連動關係

Demo匯入時也會同時匯入很多外掛，這些外掛可能有互相搭配的效應，所以你必須研究出哪支外掛用在哪裡、控制了哪裡，與哪一支外掛做了連動控制，對新手而言要搞清楚這些「因果關係」其實有很多的門檻。

有些匯入的外掛其實很難用很複雜，同樣的功能我們可以透過前人的經驗來安裝更適當更好上手的外掛。

觀念4:佈景主題只要「慣用一套」就好了

為了增加你對佈景主題的「自訂」熟悉度與了解它的極限在哪，強烈建議只要慣用1~2套主題就好了，所以要慎選主題，這很重要!

如何選擇適當的佈景主題？

1、不需要內建多功能的佈景主題

一開始功能就是歸0，學習上才會沒有過大的阻礙。

2、不需匯入Demo網頁

以後想要設計出美美的網頁，我們可以靠「頁面編輯器」外掛來設計製作，不須靠修改Demo頁，也不需要另學習Demo頁的自帶編輯器，重點是以後就算換主題也不會讓我們製作的頁面效果消失不見。

3、以輕盈簡單、純框架式的主題就好

主要是為了減少學習複雜度與避免內建太多東西而影響網頁效能速度。

4、不足的功能怎麼辦？

以後會以「外掛」為導向，用「堆積木」的概念把想要的功能慢慢堆疊出來，想要什麼功能再裝外掛就好，不需一開始就內建或匯入一堆功能之後才來苦思怎樣關掉或刪掉。

如果你真的很想試試買了付費版型好不好用，那也可以買來親身體驗看看囉!

13_WordPress後台快速說明

2022-07-19 尚無留言

前言

剛安裝好WordPress時，如上圖，這是一個最原始最乾淨的WordPress後台，左邊的功能選項也僅短短數個，隨著未來慢慢安裝擴充外掛，這些左側選項也會慢慢變多變長。

介紹

控制台/首頁 :主要呈現一些此站的相關資訊、或未來有裝擴充外掛時，有些外掛會有些資訊也會呈現在這裡。

控制台/更新 : 這個頁面會顯示更新、設定自動更新及哪些外掛或佈景主題需要更新的相關資訊。

文章、頁面、媒體 : 為預設的可新增資料的資料區，這容後面再述。

留言 : 文章或頁面有開放留言時，後台會統一在此頁可見所有所有留言與管理留言。

*外觀 : 安裝佈景主題、設定選單的地方。

*外掛 : 安裝擴充外掛的地方。

使用者 : 新增或管理所有不同權限使用者的地方，包含一般訂閱文章的網友名單也會在此呈現。

工具 : 此區比較少用，但有些外掛安裝後的設定頁面會落在此處。

設定 : 網站初始設定的地方，有些外掛安裝後的設定頁面也會落在此處。容後面再述。

以上僅須先基本了解即可，而且有些後台頁面其實很少會用到，故初期不必過度探索。

12_登入網站後的初始化設定

2022-07-19 尚無留言

簡介 :

一個全新的網站須先做點基本設定，就跟新手機剛入手時也須做點基本設定，以利後續的運作。

實作開始 :

1、路徑 : 設定/一般

對照下圖與說明自行調整，這個以後可以隨時更動。

網站標題 : 幫自己網站想一個名字，品牌名、公司名都可。

網站說明 : 此網站的簡短說明，大概10~20字即可。

網站圖示 : 不是Logo，可以當它是「網址圖示」，在瀏覽器頁籤會出現的識別小圖示。(下載Demo圖來上傳練習)

*WordPress位址 : 此處不要亂動，除非會造成網站無法登入。

*網站位址 :此處不要亂動，除非會造成網站無法登入。

會員資格 : ~~不要勾~~，勾了會一堆機器人來註冊。(如果以後需要有加入會員功能，會用外掛方式來做，故此可以安心先不要勾)

網站介面語言 : 繁體中文或隨你高興。

日期格式 : 如圖即可。

時間格式 : 如圖即可。

完成後按下存檔即可。

2、設定/媒體

設定WordPress網站會自動產生的的圖尺寸。

WordPress都會預設幫我們產生不同尺寸的縮圖，這有利於網頁載入的速度，這是一種貼心，但這樣子每上傳一張圖就會多產生3種尺寸，比較浪費空間。

而後面會安裝佈景主題後，佈景主題也有它自行要用的縮圖尺寸，佈景主題不一定會吃以上3種內建的縮圖，不同的佈景主題可能會自己產生要用的縮圖尺寸，這樣你又會再多3張縮圖，所以每上傳1張圖就得多產生6張縮圖，為了節省空間，我們讓佈景主題自己去產生縮圖就好，故如上圖把內建的縮圖功能關掉。

當然你不關也可以的。

3、設定/永久連結

永久連結 : 指的是網址的架構或稱為格式，指的是每頁網頁或每篇文章在主網址 abc.com後面的名稱或代號，例如「 https://smallway.com.tw/網頁設計/ 」，主網址後面那串就是每一頁網頁的代稱或名稱。

一般預設是「postname」，即主網址後面就是你該網頁或文章的標題，可自行修改成中文、英文、數字或英數混合，新手架站暫以此「postname」為設定即可。

以下為「永久連結」的補充說明，若覺得太複雜可先略過:

吸收更多

我們可以在自訂結構中，刪掉postname後重新點選下方不同的格式，也可以同時選擇多種格式並透過斜線區隔來拼湊出想要的格式，例如新聞網站常用的是「年月日+post_id」來作為每篇文章的網址格式，這樣易於一眼判別是何時的新聞文章。

不過，這邊我們就統一『post_id』就好，這樣你寫文章時就不用篇篇去把把網址後面(slug)名稱都手動改成英文。

以「postname」而言	以「post_id」而言
頁面與文章都可以自由修改網址後面的名稱或代稱。	頁面可以自由修改網址後面的名稱或代稱，但文章不行，文章網址會自動套上流水id當文章網址。
https://smallway.com.tw/關於我們 → 可以再自改成 https://smallway.com.tw/about	如果網站會寫大量文章，我習慣用這樣的格式。

注意1 :
有些新網站在永久連結中的格式沒設定好，會造成每篇文章點進去就404找不到網頁。

注意2 :
這永久連結(即網址格式)一開始定好後，以後就不要亂改，以免網址已經被google收錄一段時間後有人搜尋點進來會找不到網頁。
如果一段時間真的有必要性要調整，就得另做好「301轉址」的對應設定，才會讓舊格式網址自動跳轉至新網址的格式。

4、設定/討論

4.1 關閉留言審核

這樣訪客的留言就會不用經批准就會出現留言區。

4.2 設定訪客留言者的頭貼

設定成自動產生。

以上是我覺得最基本的初始化設定，請務必先完成。

維護模式:

如果網站暫時不想被搜尋引擎收錄，也不想讓別人看到製作中的半成品，可以考慮先使用「維護模式」的外掛來讓網站每一頁都變成「維護中」的字樣。

11_帳密小整理

2022-07-19 尚無留言

簡介 :

把當下所申請的帳密做清單式整理，日後方便管理。

說明 :

1、網域帳密

在Gandi申請網域時的會員帳密，請保管好!

2、主機帳密

在Cloudways申請主機時的會員帳密，請保管好!

3、網站後台帳密

在主機端的Application的網站中，可以找到網站後台帳密，可先複製到記事本存檔。

再來，請直接從「網站帳密」進入你的網站後台吧 !

※整理個小表格如下:

1.網域帳密	■登入網址 : https://www.gandi.net/ ．帳號: ．密碼:
2.主機帳密	■登入網址 : https://cloudways.com/ ．帳號: ．密碼:
3.網站帳密	■登入網址 : https://你的網址/wp-admin ．帳號: ．密碼:

結語 :

以後會一直反覆用到的是「網站帳密」，另兩組就比較少用了。

『網域帳密』一般只有隔年續約時才會再用到，

『主機帳密』只有要做網站還原或新增網站時才會再用到，

所以暫時沒有用到的帳密請妥善保管!

[SMTP]啟動Cloudways主機端的SMTP寄信服務(純寄)-Elastic Email

2022-07-19 尚無留言

簡介

讓網站的各種通知信，例如忘記密碼、註冊通知、線上表單…等各式信件可以在「網站」上以該網域的名義成功寄出到指定的信箱，且不易進入垃圾信匣中。

運用範圍

全站任何主題、插件只要會發出信件通知的，都會自動使用此發信服務。

範例

假設我的網站的網域是smallway.tw，

在此網站上面所發出的信件都是以「smallway.tw」為寄件人的Email信箱(如下圖範例是 [email protected])，這就是以「該網域的名域」來成功發送，才會具有較高的可信度，比較會秒送達至對方信箱，也不易進入垃圾信匣中。

觀念

這樣子可以以該網域名義所寄出的信件的協定一般稱為「SMTP」，聽到這個名詞先別開始覺得有點難了，因這個服務在目前專為WordPress環境運作的主機上，已有許多簡化。

所以只要是xxxx@你的網域、yyyy@你的網域、zzzz@你的網域…這種形式的「寄件人」(前面ID可自訂)都可以說它是用此「網域名義」發出信件。

而在WordPress網站中，我再把「網域名義」作為寄件人分成兩種，這兩種的共通點都是可以成功寄出信件，而不同點是一種是可「收信」的(有收信匣，另稱之為網域信箱)，一種是不可收信的(純以網域名義寄信)。

由於前幾面教的是租用Cloudways主機，下表就以Cloudways主機所提供的方案做個比較。

區分	網域名義發信	網域信箱
服務名稱	Elastic Email	Rackspace Email
寄信	可	可
收信	不可 (有人寄信過來是無效信箱，因是虛擬的，這只是以一個網域名義發信實際上並這個信箱並非真實信箱)	可 (會有一個網頁版的收信後台，也可以用Gmail或Outlook代收或寄信)
設定難易度	簡單	稍複雜
費用	1000封/0.1美元	1個信箱1美元(預設無封數上限)
	故『xxx@你的網址』→因是虛擬信箱，故『xxx@你的網址』，xxx可以自訂或隨意修改或新增多個且無上限。	1美元買1個信箱，故無法增加多個信箱，但『xxx@你的網址』前的id可以修改，但修改後視為新的信箱，若有人寄信給你在修改前的那個信箱就會變成無效信箱，收不到信。
官方說明	點此	點此1 點此2

實作 :

在新手架站的章節，就先以「網域名義發信」來教學，讓你的網站先能正常寄出信件為優先考量，至於「網域信箱」將會在另一個專題做說明。

1、啟用Elastic Email服務

2、選擇方案

初期小網站先選最低方案即可，以後若不夠用，它會寄信通知你，你再來提升至下個方案即可。

3、選擇要套用在哪個主機上

若是這台主機裡面有架多個網站，都會全數自動套用到。

4、選取Elastic Email

如下圖點選後即可套用完畢，而第④是可以寄測試信的，但因DNS尚須接著也設定一下才能回來寄送測試信。

上圖是截圖自smallway.tw，因該網域已有設定過，故以下就改幫「smallway.com.tw」這個網站做一下SMTP寄信的DNS設定。

5、在DNS加上5筆記錄

請進入網域商的後台，如同第07節那樣的介面，去添加5筆DNS記錄，這5筆記錄就是要讓網域名義寄信的服務可以運作所必須的設定。

▼下表參考官方說明網頁之整理

種類	DNS 類型	名稱/主機/別名	內容
SPF	TXT	@	v=spf1 a mx include:_spf.elasticemail.com ~all	自動或最低
DKIM	TXT	api._domainkey	k=rsa;t=s;p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCbmGbQMzYeMvxwtNQoXN0waGYaciuKx8mtMh5czguT4EZlJXuCt6V+l56mmt3t68FEX5JJ0q4ijG71BGoFRkl87uJi7LrQt1ZZmZCvrEII0YO4mp8sDLXC8g1aUAoi8TJgxq2MJqCaMyj5kAm3Fdy2tzftPCV/lbdiJqmBnWKjtwIDAQAB	自動或最低
Tracking	CNAME	tracking	api.elasticemail.com	自動或最低
MX	@	aspmx.l.google.com	無	1
DMARC	TXT	_dmarc	v=DMARC1; p=none;	自動或最低

Elastic Email 並非是網域信箱，所以不需要MX記錄，故這邊的MX只要隨意有設就可以了，但經測試有時候MX完全不設也可以運作。

如果是替子網域來設定的，則參考這一個表格，只差在加上「.子網域ID」而已。

種類	DNS 類型	名稱/主機/別名	內容
SPF	TXT	子網域ID	v=spf1 a mx include:_spf.elasticemail.com ~all	自動或最低
DKIM	TXT	api._domainkey.子網域ID	k=rsa;t=s;p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCbmGbQMzYeMvxwtNQoXN0waGYaciuKx8mtMh5czguT4EZlJXuCt6V+l56mmt3t68FEX5JJ0q4ijG71BGoFRkl87uJi7LrQt1ZZmZCvrEII0YO4mp8sDLXC8g1aUAoi8TJgxq2MJqCaMyj5kAm3Fdy2tzftPCV/lbdiJqmBnWKjtwIDAQAB	自動或最低
Tracking	CNAME	tracking.子網域ID	api.elasticemail.com	自動或最低
MX	@	aspmx.l.google.com	無	1
DMARC	TXT	_dmarc.子網域ID	v=DMARC1; p=none;	自動或最低

6、驗證網域

當DNS設定完後，回到Cloudways後台，在Elastic Email的啟用畫面上，如下圖點擊箭頭處的驗證。

輸入您網站的網域

7、寄測試信件

參考第4點的所在位置，然後可以如下圖啟動測試寄信。

▼我寄信是填 test@網域，你可以用任意字母當成「xxx@你的網域」，xxx可以任意自訂，因不管怎樣訂定xxx，這都是以你的網域名義所寄出的信，都會成功寄達。

▼成功收到測試信件

總結

上面的流程看起有點繁雜，實際上只要跟著設定一次，再來就不用再設定第二次了，若真的設定不成功，Cloudways線上客服隨時在線，也可以請客服協助您查原因。

10_在主機端手動做第一次備份與設定自動備份

2022-07-18 尚無留言

簡介 :

新網站先做一次手動備份，萬一後面網站玩壞了可直接來此復原。

說明 :

備份，可以在主機端做，也可以在網站端做，一般而言我會傾向在主機端做即可，有必要性我才會在網站端也順便做，並把網站端的備份檔再自動上傳至Google雲端空間

這邊先示範用主機端做。

我們課程教的是「Cloudways」主機，它本身就有每日自動備份的功能(不用再付費)，但由於自動備份是在半夜才會啟動，而我們現在已經要開始玩我們的網站了，為了避免新手不小心把網站搞壞(其實剛開始是不太可能)，我們就先手動做一次備份吧。

其實是我為了讓新手們有備份的觀念與知道怎麼做備份，所以規劃在此先手動做一次。

開始實作 :

1、手動備份

一樣在 “Application”下的網站裡面，點選”Backup and Restore”，如下圖，在②的地方按下去就是手動立即備份了。

靜等它跑完即可，此時不要任意關閉畫面。

2、手動還原

同樣的畫面，下方若點選 ” ROLLBACK “再點OK，就可以選一個日期還原。

基本上它的日期是每2日一個備份，保留15個還原點。

以上即學會了在「主機端」對網站的備份、還原。

3.更改自動備份的週期

如下圖，先切換到Servers的介面，設定一下備份的週期，基本上是建議設定每日一次(預設值是每2日一次)並保留四週，這樣就可以了。

進階說明 :

1、網站備份檔可以下載嗎？

在主機端做的備份檔預設是無法下載(想下載須另外改成本地端空間備份才行)，但在網站端做的才可以下載或再設定讓它直接備份到Google雲端去，需要時再去雲端空間來下載。

2、一般用網站端做的備份可以直接下載，下載後可以複製到其它主機上的空網站去還原，這樣就變成一個一模一樣的網站了，也就是所謂的「網站搬家」。

3、用WordPress替人做網站，完工後若業主要求要交付原始檔的話，只要交付這個「網站端的備份檔」即可。

4、未來如果網站有做外掛升級、大變動前，最好都來手動備份一次，以免網站出問題要還原時卻沒有離現在最新的備份檔可用。(因主機自動建立的備份時間點是前一日)

09_在主機端安裝免費SSL憑證

2022-07-18 尚無留言

簡介 :

SSL憑證主要是讓封包傳輸時，替封包做「加密傳輸」，有安裝的話讓網址會有「https」開頭。

(尤其是機敏資料，例如填寫會員資料、購物網站的刷卡…等等)

SSL憑證不用另外買，我們用的這家主機商就有送了!

準備 :

請先測試一下前一章節教的所設定的網域指向是否已經生效，若未生效則安裝SSL憑證會失敗喔。

只要在瀏覽輸入你的網址，如果已經可以看到一個全新的空的WordPress網站就代表已經指向生效了。

開始實作 :

1、至「Applications」選擇網站

先從Applications中選擇自己剛安裝好的網站，並點擊進去。

2、點擊”SSL Certificate”

「SSL Certificate」就是主機商提供的免費SSL。

如下圖步驟完成即可。

3、強制使用https開頭的網址

安裝成功後，會跳出一個小視窗問你是否要把網址都強制轉向至有https開頭的，請按下「ENABLT HTTPS」。若按太快不小心關掉，可以來圖4這邊設定即可。

4、重要提醒

你一定要把SSL憑證安裝成功，且確定網址都已經是「https」開頭(有一個鎖頭)，才正式在網站中上傳圖片、檔案之類，

否則在你網址都還沒有成為https狀態之下，就開始編寫網頁，此時頁面或文章時所上傳的任何檔案或媒體，它的來源網址都會是無https的，而就算你未來把SSL憑證補安裝好了，原本已上線的網頁中的媒體或圖，仍會是無https狀態的路徑，這樣會造成整個網頁中有https與無https的圖檔混在一起，形成「混合內容」，在瀏覽器的網址列上仍是會顯示不安全。

其它說明 :

1、SSL憑證也有付費式，但一般網站我們用免費的就非常足夠了。

2、免費SSL憑證的提供 : 有些主機商會提供、有些是網域商也會提供，但一般都是主機端會提供居多。

3、有安裝SSL憑證不代表主機、網站就不會受駭客攻擊或入侵，真正要防止駭客的是主機(商)的主機防護能力、網站的資安作為，而不是單靠這個SSL憑證。

4、有安裝SSL憑證的話，訪客的瀏覽器上就不會出現不安全的字樣，讓訪客比較安心可以瀏覽。

08_把網域的DNS指向主機

2022-07-18 3 則留言

簡介 :

把買好的網域指向與主機裡面的網站做互相對應，這樣在瀏覽器輸入網址才能找到新架設的網站。

說明 :

在網域後台把A紀錄填上主機的網站的IP。

在主機後台，把網站的Domain輸入網域名稱。

(這個動作稱為「修改DNS記錄」)

開始實作 :

主機後台:

1、主機端 : 先在「網站」加入新買的網域名稱

到Applications中選到自己的網站，然後把新買好的網域名稱填入，不用包含http，如下圖。

2、主機端 : 取得主機IP

在Server中，如下圖複製好主機IP。

網域後台:

3、登入Gandi網域 / 我的產品

4、進入DNS設定

5、找到「A」對應的編輯

找到「A」，指的就是「A紀錄」，A紀錄就是用來對應主機的，照下圖做即可，剩下的都先不用亂動。

6、填入主機IP

7、靜等生效

大概5分鐘左右，在瀏覽器輸入您的網址，就能直接對應到您的網站了，您會看到一個全新的空網站。

若超過5分鐘仍未生效，則很可能是本機電腦的 DNS 快取 還沒更新，所以請立即重開機後再測試應可正常。

若暫不想重開機，可以在電腦中直接輸入一個指令可讓電腦免重開機就更新DNS:

Windows

按 Win + R 鍵 → 輸入 cmd → 按 Enter。
（或是搜尋「命令提示字元」）

在黑色視窗輸入： ipconfig /flushdns

蘋果電腦macOS

打開 終端機 (Terminal)：

用 Spotlight 搜尋 Terminal

或 Finder → 應用程式 → 工具程式 → 終端機

在終端機貼上：sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder

8、生效後立即安裝SSL安全憑證

請見下一篇。

總結

這邊新網站只需要設一次，以後就幾乎不會再用到這邊的設定了。

這樣是不是很容易呢？買網域、買主機好像沒那麼可怕呢!

補充說明 :

1、一般DNS生效需要24小時以上時間(台灣很多網域商就是如此)，但有些網域商的DNS在更新與散播上有比較特殊的處理，所以在速度上很快就生效了，像我們用的Gandi設定好A紀錄，不用5分鐘就生效了。

2、其實DNS的設定尚有另一種方式，就是「DNS託管」，也就是網域雖然在Gandi買，但可以把「DNS紀錄管理權」直接託管給你的主機商，這樣以後在主機商那邊就可以直接設定DNS了。不過我們用的Cloudways主機商並沒有這種託管服務，所以我們只能在Gandi這麼直接設定A紀錄中的IP即可，但也沒有很麻煩，三兩下就完成了。

補充子網域的設定 :

把網域前面加上不同的ID名稱，就形成了「子網域」，子網域可以用來對應不同的新網站。

主網域 : 100cc.xyz
子網域1 : mydog.100cc.xyz
子網域2 : mycat.100cc.xyz
子網域3 : mylife.100cc.xyz
……可無限新增

子網域的DNS設定與主網域的設定完全一樣，只要新增一筆A記錄並加上「ID名稱」就行了，例如我想要用的子網域是「site2.100cc.xyz」，且在主機端也已新增好第2個新網站了，所以只要如圖設定一筆A記錄並加上「ID名稱」即可對應完成。

▼「@」代表主網域，所以只能有一個，但子網域可以有很多個(加上ID名稱)。

07_網站主機申請流程(Cloudways)

2022-07-18 1 則留言

主機的申請，我們採用CP值最高、效能也穩定的Cloudways的VPS主機，也是市面上最多人使用的主機商之一。

因主機商在國外，故介面會是英文版的介面，但只要網頁上按右鍵翻成中文，在操作上就沒有太大的門檻，而且我們只要架設好網站之後，不會常常需要進入到主機後台做特殊操作，只會較常登入網站後台居多。(如果你想使用國內的主機商請另參考這家台灣遠振主機商)

Cloudways VPS主機特色

效能比一般的虛擬主機好上許多。
以小時計算，每月最低11美金即可租用一台主機，且規則未來可以隨需求往上調整更高階的計價方案。
可試用3日。
有網站「副本」功能(staging)，未來在做設計大改版、debug可在副本上做，都OK了再推送覆蓋至主網站(正本)。
有自動搬家工具。
有免費SSL憑證。
一台主機可架多個網站。(故也有人會合租一台主機)
有24小時線上客服。
可租用企業信箱給員工使用。

開始申請Cloudways主機

1、從START FREE開始

申請網址 : 點此

(若看不到網址請用無痕模式開啟此頁)

2、使用Google帳號註冊

點Google帳冊比較快。

並設定一個密碼，請將密碼記下來。

3、寫信驗證身份

不一定每個人註冊時都會跳出要寫信驗證，但如果有要求驗證會出下圖的頁面，此時可複製上面的客服信箱來寫一段小訊息做驗證。

請用你申請時的信箱寄信給它指定的信箱( [email protected] )，

主旨 : Please active my account : xxxx@gmail.com
內容 :「Please active my account,thanks」即可。

如果客服有回信詢問問題你須回答一下(直接按回信)，如下圖，給個FB主頁網址與個人電話，這樣就可以通過了。

4、登入

回到主機商首頁，改按右上的「login」來登入，或直接點 :

登入網址 : https://platform.cloudways.com/login

再直接點取右下角「線上客服」請他們立即收信，這樣就可以馬上通過驗證了。

可複製下列的對話貼上 :

對話文字 :
Please active my account.
My email is : [email protected] I have sent a verification letter.

如果客服有回一些問題，用Google翻譯一下再回覆即可。

客服說沒問題，會要求你去收信並點一個網址做最後激活帳戶，這個一定要去點喔!

5、驗證信箱

收信並點一個網址做激活帳戶，會自動轉登入主機後台的介面，此時只要把信用卡做一下綁定即可。

6、驗證手機

回到Cloudways後台，可能會有下圖的畫面可以選主機，但右下角仍有紅字警告你尚未完全所有驗證。

如下圖(我用瀏覽器按右鍵翻成中文)，點選驗證帳戶。

輸入手機號碼，收到簡訊後再輸入簡訊驗證碼即可完成驗證。

7、綁定信用卡

就算只是要試用三日，也要先綁信用卡才能試用喔!

我們要先綁一下信用卡，如下圖路徑去點選(也可以點此直達設定頁面)。

輸入卡號

完成以上後，請放心，目前都沒有費用產生(因為裡面還沒有網站)，直到正式安裝網站了，才會開始按小時計費，每月月繳一次費用(自動刷卡)。

如果三日後不想再用，可以把整台主機刪除，然後信用卡解除綁定即可。

8、開始安裝主機與網站

9、切換回舊介面

Cloudways主機後台，目前有新舊二種操作介面，我比較習慣舊介面，本站教學目前也都以舊介面來說明，故可依下圖切換至舊介面。

10、信用卡到期日加入Google行事曆

超級重要!!!

Cloudway主機只能用信用卡繳費，但我的有些客戶們曾發生信用卡到期了但未留意，故主機的月繳費時的扣繳失敗，造成主機被停用，故在申請完主機綁完信用卡後，請立即打開你的Google行事曆，在信用卡到期日的前一個月提醒自己要進到Cloudways來更換卡片(延展)，否則會不小心讓自己的主機因未繳費而完全消失喔，這樣苦心設計經營的網站全都救不回了，這一點超重要!!!

還有「網域」的購買也是有綁信用卡，也記得在信用卡到期時要一併更換綁定的信用卡唷!