【如何自架網站-跌破眼鏡超便宜簡單架設個性化網站詳細步驟教學】乙文,從NameCheap與Name選購全球性世界通用域名,挑選虛擬主機伺服器bluehost的代管服務到指定域名程序,自行免費安裝WordPress架站軟體,控制台設定介面中文化,外掛程式Elementor,網頁與文章排版編輯實習,是專門為資訊門外漢,網站素人所撰寫的全方位自架網站詳實攻略。

  •  寫作緣由: 

  網路搜尋,網路購物,甚至,連網路地圖都會推薦我們,哪裡有哪些選擇,更可以告訴人們,怎麼選擇比較適合。

  甚至,我有許多歐美地區朋友的孩子們,在成年禮時,最受父母青睞的,送給集子成年的子女,是一個網站。代表他們已經成年,應該更具體地在網路世界留下成長痕跡,專業看法與作品。而在經營網站的過程中,因為必須用自己的語彙表達給未曾謀面的,專業與非專業的網友,學習之路也因而更加紮實,未來在激烈的下一代競爭中,更有可能被看見,被知遇,被拔擢。

  在網路時代已然成形數十年的今天,一個事業,乃至一個個體,怎能在網路世界,搜索引擎搜索不到?不佔有立足之地呢?您說,是嗎?

  然而,像我們這樣的資訊門外漢,網路素人,要怎麼開始網站經營的?會很貴嗎?很難嗎?

  是的,就在幾個月前,我也有著同樣的疑惑,結果,網路上教我的,卻是一位小學五六年級的美國孩子。他說,很簡單的,就bra-bra講了一缸子。

  實不相瞞,的確不難!一步一步來都很簡單,這也是我覺得應該回饋社會,將這些步驟詳實羅列出來,提供給更多有此需要的人,一個具體可行的參考。

本文章節目錄

室內設計-裝潢-鄉村風-新古典-混搭風-作品分享-幸福莊園-餐廳-枓櫃-傢飾-陶偶
陌生的道路上一旦有熟門熟路的朋友相伴,就不一樣了!

★自架網站很難嗎?很貴嗎?

  話不多說,且來分享我在經營網站,關於貴不貴,成本經費的問題。

  當初,購買現有的築韻集團域名twdreamspace.com,是第一年份2.99美元,其後年費18.99美元。虛擬主機代管費用則是每個月3.75美元(一次購買36個月份)。

  所以,假使不管域名首年折扣年費,一樣用18.99美元的年費計算的話,那麼,平均網站架設費用每個月相當於6.17美元,以匯率1美元兌32元新台幣保守估計,相當於每個月的平均費用新台幣197元,還不到兩百塊錢。平均一天不到新台幣7元呢!

  如果,為了前途的耕耘,事業的基礎,甚至是電子商務的經營,每天七塊錢還嫌貴?那麼,我真的也不知道該說甚麼了~

  然而,像我們這樣的資訊門外漢,網路素人,要怎麼開始網站經營的?很難嗎?

  是的!如果沒人教,肯定是寸步難行的。否則,外面相關網站服務公司收費那麼貴,難道是騙人的?當然是有他們的道理的

  但是,如果透過越洋的FB Messamger通話,加上一些網路連結的網站文章,一位國小五六年級的美國小孩也可以遠端傳授,讓我得以成功自架網站,那麼,要說多難,也是言過其實。

  既然是資訊門外漢,加上網路素人,要怎麼選擇向誰購買網域較好呢?我是靠搜尋引擎海量評估的。

  至於架站軟體,首選當然是是占率過半,又免費的WordPress囉!市占率長期居冠,又是免費的開源(Open Source)軟體,能夠受到使用者長期擁戴,當然是有他們的道理的

  而虛擬主機代管的服務廠商,也是用同樣的邏輯,選擇市占率最高的,價格也很親民的bluehost。

  因為一開始對網展相關知識全然不懂,而這個市場又是大則恆大,競爭激烈,完全透明,所以,就先信賴市場競爭機制,所長期自然而然篩選出來的,菁英中的菁英,大體上是不至於錯到哪裡去的

  以目前使用近一年的經驗來看,倒也真的還沒有任何後悔,甚至如果你問我,我的推薦廠商也是如此,迄今未變

室內設計-裝潢-鄉村風-新古典-混搭風-作品分享-幸福莊園-餐廳-陶偶-裝飾
所有自架網站的第一個功課,當然就是選購自己心儀的網域名稱(簡稱域名,英文Domain)囉!)

★如何向NameCheap購買超便宜域名所有權?

  以個人的經驗以及各國自架網站者的口碑,目前就個人感受來說,購買世界性的域名,最被推薦的有兩家,分別是Name以及NameCheap這兩個商業機構。

  聽起來NameCheap會比Name這家機構還便宜!當然有可能是,也有可能不是,我待會兒再一一說明

  我們姑且先介紹NameCheap這家機構,讓您以此為例,具體詳實地了解如何在此完成購買域名的動作。

  首先,當然就進入這家機構的首頁囉!

  敬請點擊以下任一圖片,進入NameCheap.com的首頁,來試著搜尋看看,您所心儀的網域名稱,是否還沒被人捷足先登,價錢又是多少,是否非常優惠吧!

Domain names for just 88 cents!
Domain names for just 88 cents!
Domain names for just 88 cents!
NameCheap.com的首頁
NameCheap.com的首頁

  以上圖為例,假設我們在此想購買的是interiordesigntw.com,那麼輸入該域名,再點擊其右方紅色的[Search](搜尋)按鈕,就會出現以下畫面

輸入你想要的域名,例如interiordesigntw.com,就會出現許多相關的選擇及其標價。
輸入你想要的域名,例如interiordesigntw.com,就會出現許多相關的選擇及其標價。

  以上圖為例,假設我們在此想購買的是interiordesigntw.com,那麼就點選該欄位右方灰黑色的[Add to Cart](放入購物車)按鈕即可。

  一般來說,若是一般自架網站的素人,一開始只要點選一個自己滿意的域名即可,除非您是大集團,或是專門轉賣讓售域名為業,否則先勸您不用貪心,先買一個域名就好

選擇所有您要的域名,一一點選其後面欄位的[Add to Cart](放入購物車)之後,就可以進行結帳了。
選擇所有您要的域名,一一點選其後面欄位的[Add to Cart](放入購物車)之後,就可以進行[View Cart](檢是購物車)的動作了。

  畫面上方有四個購物車的選項,除了Private Email(私人電子信箱)之外,都要額外付費,我都沒選,而私人電子信箱,其實到處都有,谷歌(Gmail)更專業又免費,所以也不建議勾選。

  Hosting就是虛擬主機代管,也就是您將來網路資訊與管理,實體存在的處所,本人還是一本初衷,依然推薦您選擇bluehost這家市占率最大,相對物廉價美的更專業廠商,較好。

  而Positive SSL這項安全連線的認證,如果您選擇bluehost為您服務虛擬主機代管時,也是免費提供。

  另外,EasyWP這項服務,我也會詳細步驟教學,耐心告訴您如何自行操作,大可以也把這筆經費一起省下來的。不是嗎?

剛剛的畫面點擊[View Cart]檢視購物車之後,進入此畫面。畫面中的年限(Years)可供您選擇批量購買域名所有權的年限.首購優惠一樣會包含進去,不用擔心。

  如上圖所示,在Year這個下拉選單,還可以選擇批次購買此域名所有權的年限,連同首年的首購優惠價格都會一起合併計入,不用擔心優惠成為夢幻泡影。

  除此之外,WhoisGuard這項隱私權額外保護的優惠,不只免費,而且會在購買域名年限期間,一直跟著域名,不會因為域名轉換虛擬主機代管廠商而失效,當然就不用客氣,點選取用囉!

  至於只有首年免費的DNS服務,因為可以選擇免費優良廠商bluehost代勞,這筆支出,咱也建議您一併省下吧!

既然WhoisGuard Privact Protection免費又可移轉,當然點選。為避免以後還要填寫個資細,請點選儲存個資選項,再點擊下方紅色Continue(繼續)的按鈕。
既然WhoisGuard Privact Protection免費又可移轉,當然點選。為避免以後還要填寫個資細,請點選儲存個資選項,再點擊下方紅色Continue(繼續)的按鈕。

  所以,您看看,以這個很不錯.com域名,十年下來,只需要107.6美元,相當於新台幣3300元,每天不到新台幣1塊錢的權利金。夠便宜了吧?

  而左上角的CANN十年期註冊管理費,也才1.8美元,相當於每年只跟您收取0.18美元,折合新台幣5塊多。

  這,如果不叫佛心來著,怎樣才算佛心來著呢?連我都不好意思了呢!

  接著,敬請點選紅色Continue(繼續)按鈕,進入下一階段。

剛剛我們並未登入,所以進入須先登入的畫面,如果還沒有該公司帳號,便需要填寫右邊各欄位,先完成設立帳號的動作,才能繼續進行域名採購的程序。
剛剛我們並未登入,所以進入須先登入的畫面,如果還沒有該公司帳號,便需要填寫右邊各欄位,先完成設立帳號的動作,才能繼續進行域名採購的程序。

  上圖右側的各欄位中,First Name(名)與Last Name的部分,個人建議您以護照/信用卡上的英文姓名分別填入,比較好。

因為是美國公司,又需要進行信用卡購物流程,比較建議姓(Last Name)與名(First Name)採用您性用卡上面的英文姓名,比較好。
因為是美國公司,又需要進行信用卡購物流程,比較建議姓(Last Name)與名(First Name)採用您性用卡上面的英文姓名,比較好。

  完成帳號新設前,敬請點擊並詳讀該公司的Terms of Service(服務條款),閱讀並同意的話,請勾選其前方方塊,在點擊其下方紅色Create Account Continue(繼續完成帳號設立)的按鈕。

因為網路實名制是世界趨勢,所以還要填寫更多個人資料,包括姓名,聯絡地址與手機號碼,其中手機號碼需要您自己使用的號碼,才收得到驗證碼。
因為網路實名制是世界趨勢,所以還要填寫更多個人資料,包括姓名,聯絡地址與手機號碼,其中手機號碼需要您自己使用的號碼,才收得到驗證碼。

  如果已知該域名為公司行號而申請創立的網站之用,請填寫Company Name(公司名稱)的英文全稱。

  並在其下的欄位Job Title(職稱)填入您的正是英文職稱。

  在勾選其下的方塊,表示您代表公司申購此域名。

包括姓名、地址請都以英文輸入,電話號碼分為兩個欄位,第一欄位是國碼,如果是台灣手機請選+886,然後第二欄為請輸入您手機後9碼。
包括姓名、地址請都以英文輸入,電話號碼分為兩個欄位,第一欄位是國碼,如果是台灣手機請選+886,然後第二欄為請輸入您手機後9碼。

  上圖的Fax Number(傳真機號碼)可以不用填寫,畢竟現在也很少人使用了。

  電子信箱敬請務必填寫正確,後續會需要透過這個電子信箱與NameCheap公司雙向聯繫。

填寫您所用信用卡的英文姓名,卡號,並確認信用卡帳單地址,檢是無誤後就點擊下方紅色Continue(繼續)的按鈕,進入下一步驟。
另外,剛剛信用卡卡號填寫後,會跳出一對話框,要求您輸入信用卡背後的三位數密碼。
另外,剛剛信用卡卡號填寫後,會跳出一對話框,要求您輸入信用卡背後的三位數密碼。
本案例選擇十年,之後約一兩秒畫面會更新,可點選免費項目,其餘您自己斟酌(不建議),再點選[Confirm Order](確認訂單)準備進行付款。
  上圖Promo Code是指,如果您有該公司的優惠折扣代碼,就可以填入取得優惠折扣,如果沒有,就留空白,不用理它
訂單內容有時較長,轉動螢幕往下審閱所有內容,確認訂單無誤,就可以點擊紅色[Pay Now](現在付款),以信用卡付款,完成往欲購買的所有動作。
訂單內容有時較長,轉動螢幕往下審閱所有內容,確認訂單無誤,就可以點擊紅色[Pay Now](現在付款),以信用卡付款,完成往欲購買的所有動作。

  如果一切審閱無誤,就請點擊紅色Pay Now(現在付款),進行信用卡支付購買域名相關項目的所有權與特定網站服務。

  那麼,以NameCheap公司為例的網域購買程序,就在此告一段落,而您對該網域擊其相關網站服務的起算時間,也就開始計時了。

  恭喜您!又完成了畢生另一件有意義的【第一次】!

  因為以本案為例的,interiordesigntw.com,其十年期域名所有權的總費用,NameCheap公司的報價為109.4美元.而Name公司的報價則是125.9美元,所以,我當初是選擇向NameCheap公司購買的。

  然而,並不是每個案例皆是如此,所以,才特別費心分享給您詳細步驟教學,讓兩家之名業者都一起報價,再讓您有機會以更便宜的價格買下心儀域名的所有權。

★如何向Name購買超便宜域名所有權?

  其實,在現實商業世界裡,NameCheap和Name這兩家網域登錄選購服務公司,競爭非常激烈,也不必然任何網域名稱,哪一家永遠都是比另一家便宜,所以,建議您不妨多比較,比較佔便宜。

  那麼,我們不妨拜訪Name.com的首頁,開始比價比價。

  因為會員的關係,本人剛拿到介紹優惠,所以,建議您點選以下圖片進入該公司首頁,就能以本人朋友的名義,多獲得美金五元的優惠,何樂而不為呢?

  點擊上述圖片之後,就會出現以下頁面,讓您以本人朋友的名義,創建您在該公司的新帳號,有權享用特有的,額外的五美元優惠折扣。

登錄或創設帳號之前,如果點選上面的圖形方塊,就會出現這個畫面,還可以再優惠美金5元唷!
登錄或創設帳號之前,如果點選上面的圖形方塊,就會出現這個畫面,還可以再優惠美金5元唷!

  將滑鼠移到[Domains]選單,其下方就會出現一道綠色橫桿,如圖所示。

填寫新設帳號所有資料,完成開立帳號動作之後,請至頁面左上角,尋找[Domain]的下拉式選單。
填寫新設帳號所有資料,完成開立帳號動作之後,請至頁面左上角,尋找[Domain]的下拉式選單。

  將滑鼠移到[Domains]選單,其下方就會出現一道綠色橫桿,如圖所示。

[Domains]選單下拉之後,如圖所示,敬請點選最左邊[Domain Name Search]的選項。

  點擊上述圖片[Domain Name Search]的選項,就會出現以下頁面,開始出現中文頁面,如下圖所示。

  您就可以在頁面置中位置的搜索欄位,輸入自己最夢寐以求的網域名稱(域名)。

搜尋域名
搜尋域名

  例如,本人當初比價的是interiordesigntw.com這樣的網域名稱,就直接輸入搜尋。

  好好想一想,您自己最夢寐以求的網域名稱(域名)是甚麼呢?不用客氣,就直接輸入進去,看看是否還有機會,而萬一運氣不是那麼好,系統也會列出最相近的域名,還可以選購的名單,供您進一步參考選用。

搜尋域名interiordesigntw.com
購買域名-搜尋域名

  以本人當初比價的interiordesigntw.com網域名稱,當時搜尋結果為例,即使為可選購的域名,系統仍然會羅列您可能還要加購的相近似的域名,如下圖所示,供您參考。

  我的心不貪,而且無暇經營照顧那麼多網站,因此當時就只取一瓢飲。

列出許多interiordesigntw.com相關域名
列出許多interiordesigntw.com相關域名

  於是,當時就只有點選interiordesigntw.com網域名稱右方,綠色的,[加入購物車]的按鈕。

  當時這個域名,首年年費優惠價8.99美元,其後續年費,每年12.99美元。

  左側欄一長串的選項,則是該公司推薦您憶起購買的網站服務商品,如果是初學者,而且有意跟我一樣,虛擬主機代管的廠商,會另外擇優選價格更合宜的廠商,那就不用費常去研究這一長串的推薦商品了。

檢視購物車
檢視右側欄[訂單彙總]的金額不對,還多了一項商品?先不用慌,待會兒答案會為您揭曉。
由Name.com公司另外推薦的網站服務相關選項-1
由Name.com公司另外推薦的網站服務相關選項-1
由Name.com公司另外推薦的網站服務相關選項-2
由Name.com公司另外推薦的網站服務相關選項-2

  接著,敬請點選網頁更上方,灰色背景的[購物車]選單,進行選購項目的審閱。

點選右上[購物車]之後可以查看購物車項目
點選所購買域名所有權年限,以及審視該公司所推薦相關網站服務的必要性,無誤之後就可以進行登錄作業。

  原來是,系統自動為您加了一項商品[Advanced Security, Privacy]的網站服務,所以,又多了4.99美元。不過,這是可以刪除的,只要您點擊其價格後方的垃圾桶圖樣,就可以了。

點選所購買域名所有權年限,以及審視該公司所推薦相關網站服務的必要性,無誤之後就可以進行登錄作業。
點選所購買域名所有權年限,以及審視該公司所推薦相關網站服務的必要性,無誤之後就可以進行登錄作業。

  如上圖所示,將[Advanced Security, Privacy]網站服務的價格點了垃圾筒圖樣之後,該項商品就不會被列入計算了。

  由於個人實在覺得interdesigntw.com的名稱非常難得,還沒被捷足先登,年費方面也非常值得,於是,當時就點選十年期的費用,請系統結算看看總共多少錢。

  如果覺得一切都滿意,敬請點擊右側欄位[訂單匯總]下方綠色的[登錄]按鈕。然後,就會出現以下畫面。

如果先前已有存過信用卡資料,如要照舊就點選第一項的既有信用卡資料,若無,就請點選+新的信用卡或借記卡(現金卡),並開始填寫信用卡或現金卡相關個人資料。
如果先前已有存過信用卡資料,如要照舊就點選第一項的既有信用卡資料,若無,就請點選+新的信用卡或借記卡(現金卡),並開始填寫信用卡或現金卡相關個人資料。

  如敬請詳填您的信用卡或現金卡的個人相關資料,確認無誤之後,就可以點擊網頁右側欄[訂單匯總]下方,綠色的[完成訂單]按鈕了。

  然後,螢幕出現新的頁面如下所示。

如果一切無誤,就請點擊右上角綠色的[下一步:付款]按鈕。
如果一切無誤,就請點擊右上角綠色的[下一步:付款]按鈕。

  點擊綠色的[完成訂單]按鈕之後,頁面呈現如上所示。

  敬請再審視一次,並思考這項交易是否讓您覺得滿意,如果都沒問題,就請點擊[訂單匯總]下方,綠色的[下一步:付款>]按鈕。

  因為以本案為例的,interiordesigntw.com,其十年期域名所有權的總費用,NameCheap公司的報價為109.4美元.而Name公司的報價則是125.9美元,所以,我當初是選擇向NameCheap公司購買的。

  然而,並不是每個案例皆是如此,所以,才特別費心分享給您詳細步驟教學,讓兩家之名業者都一起報價,再讓您有機會以更便宜的價格買下心儀域名的所有權。

★如何向bluehost選購超便宜又適合自己的虛擬主機代管服務?

  因域名購買妥當之後,接下來就是慎選虛擬主機代管服務的廠商囉!

  虛擬主機代管的好處,隊與我們這樣的網路素人,資訊門外漢特別重要,因為,有專業技術人員無時無刻在幫我們守護著軟體、硬體與網路連線性能等等苦差事之外,許多問題到了他們的手裡,都可以迎刃而解。

  也就是說,只要有問題,或是疑問,只要上去技術支援平台,用文字對話的方式,都可以即時獲得解答與回應。這樣的技術支援,超貼心,也超級重要,所以廠商的專業程度必須很好。

  雖然短短一年不到的實戰經驗,我只接觸過虛擬主機代管廠商,bluehost一家而已,無從比較,但是純以個人使用心得與網路搜尋而得的風評來看,的確是個值得推薦的選項!

  唯一的問題,對某些國語寫得比英語還要好上許多的人來說,稍微有點壓力,因為都是英語的文字對談

  也因為是文字對談,有時比較難以解釋的英語橋段,我都會先寫在Word檔,或其他文書檔案,方便逐句或逐段複製貼上,加速對話溝通,也提升問題描述的精準度。

  那麼,這麼棒的網站服務,要價會不會很高呢?

  事實上是,出乎我意料之外的低耶!

  您看看下圖這張虛擬主機代管服務的月費,從2.95美元起跳,到13.95美元的頂級服務。

  以我個人築韻集團官方網站前十一個月的使用經驗來看,平均月瀏覽率超過一萬,網路文章110多篇,相片一千多張,也才佔分享資源的五分之一不到。

  因此一般初學者的頭兩三年,除非網路相簿影片和文章產出驚人,否則每個月2.95美元,平均每天花3塊新台幣聘請全年日夜無休的專業技術網站軟硬體服務,真的是超級划算的。

bluehost伺服器主機共享式虛擬主機代管服務價格一覽表

  個人因為幫子女購買他們的域名,以及增加專攻英語市場,與簡體中文市場的原因而添購新的域名。

  為了節省虛擬主機代管的經費,所以2018年7月將虛擬主機代管服務升級至可以無限域名(即網站)的Choice Plus級別。

  虛擬主機代管的月費因此變成5.95美元,以現今5個網站而言,平均每個網站的虛擬主機代管月費反而降低為1.2美元不到,即每天每個網站約分攤新台幣一元三角。

  我只能說,自架網站,真的是便宜到不要不要的了!

bluehost伺服器主機共享式虛擬主機代管服務商品包含的項目
即便是專屬伺服器虛擬主機代管服務的月費也不過是13.95美元而已。

  所以,廢話不多說,讓我們繼續一步一腳印,完成自架網站的基礎建設吧!

  首先,敬請點擊以下畫面,以便進入市占率世界最大的虛擬主機代管廠商bluehost首頁,並有機會在訂單結算時獲得額外優惠。

bluehost首頁
登入bluehost的畫面
  接下來,敬請點擊上面網頁中間偏左的,綠色的[Get Started Now](現在開始),以便進入市占率世界最大的虛擬主機代管廠商bluehost的虛擬主機代管商品介紹頁,並有機會在訂單結算時獲得額外優惠。

  點擊之後,網頁會自動變成bluehost的虛擬主機代管商品介紹頁,如下面兩張圖面所示。

  進入此網頁之後,網頁右上角藍色橫幅區域都會有個[Chat]的按鈕,遇到任何問題,都可以按此按鈕,展開即時的雙向文字對話,取得應有的協助。

bluehost虛擬主機代管服務商品一覽表上半部
bluehost虛擬主機代管服務商品一覽表下半部
bluehost虛擬主機代管服務商品一覽表下半部
輸入欲委託bluehost虛擬主機代管的域名

  上圖左邊欄框是在bluehost選購域名所進行的搜尋之用。

  上圖右邊欄框是讓您輸入在他處已購買的域名。

如果您遲遲未動作,bluehost系統會貼心告訴您,也可以直接進到下一步驟。
如果您遲遲未動作,bluehost系統會貼心告訴您,也可以直接進到下一步驟。

  如果您遲遲未動作,bluehost系統會貼心告訴您,也可以直接進到下一步驟。

  下圖所示,為自動進入的畫面,可以開始填寫新設帳戶的相關個人資料。填寫相關個人姓名時,建議您填寫護照(信用卡一樣)上面的英文姓名。

在bluehost設立新的帳號-輸入基本資料

  下圖第一個欄位是您目前已選購項目的小計金額。

  下圖第二個欄位則是bluehost公司建議您額外加購的品項,筆者通成都沒有加購任何項目,供您參考。

在bluehost設立新的帳號-已選購商品與推薦商品
在bluehost設立新的帳號-已選購商品與推薦商品

  接下來是填寫您想要用來付款的信用卡或現金卡,依序分別是卡號,有效期限,以及卡片背面簽名欄右側的三位數密碼。

  填寫完畢之後,敬請在審視一遍,如果一切無誤,則可以點擊左下角綠色的[Summit](送出)按鈕。

在bluehost設立新的帳號-填寫信用卡資料
在bluehost設立新的帳號-填寫信用卡資料

  之後,就會進入新的畫面,請您再次審視訂購單內容,以及您個人相關資料,無誤之後,就可以按下綠色的付款按鈕。

  填寫完畢之後,敬請在審視一遍,如果一切無誤,則可以點擊左下角綠色的[Summit](送出)按鈕。

  系統還會要求您就新設的帳號,設立保密效果擊強的密碼。包括數字、大寫字母、小寫字母語特殊符號。

  因為保密效果太好,往往您因此自己也記不下來。解決方式對於華人來說,其實就簡單許多。

  例如,以注音符號輸入中文的方式,為自己的密碼設定中文密碼,就很容易辦到。

  中文密碼,比如說:【沒是多喝水!】,第一個字符是開頭,所以該字符大寫,結果,實際上出現在密碼的就變成了【Ao6g42ji ck gjo3!】。

  然而,實際上密碼通常規定不能有空格,也就是將所有中文字第一聲的空格捨去不按,所以密碼就又會變成【Ag42jickgjo3!】,因而成為強度非常強的密碼了

  再一次恭喜您,藥丸了另一個人生中非常有意義的第一次唷!

  先喘口氣,透透風,接下來的工作,當然是將其通公司所購買的網域所有權,透過簡單的程序,轉換到bluehost的虛擬主機囉!

★如何向bluehost指定購自NameCheap域名的虛擬主機代管服務?

  也許您已經發現了,bluehost也有販售域名,那麼,域名和虛擬主機代管,在這家公司一起購買,不就好了?

  而且,一起買還有個好處,那就是不用網域轉換主機代管廠商,少了一道程序,不是更簡單嗎?

  然而,一般認為,bluehost的域名費用往往明顯偏貴,為了您的荷包著想,所以沒這樣建議,敬請見諒唷!

  不過,如果您還是非常好奇,不妨點擊以下圖片,進入bluehost域名搜尋的網頁移探究竟,也是很好的。

  況且,這個動作不論是在哪家域名登錄公司都超級簡單,又有可能為您省錢,何樂而不為呢?

  接下來,咱們就直接進入主題囉!

  首先,我們以個人再NameCheap所購買的interiordesigntw.com域名所有權為例,為您詳細解說步驟教學,如何將這個域名轉移到虛擬主機代管服務廠商bluehost進行包括軟硬體在內的代管服務。

NameCheap首頁登入後點擊左上角您的帳號,擊會出現下拉式選單,敬請點擊Dashboard選項,擊會出現以下網頁畫面。
NameCheap首頁登入後點擊左上角您的帳號,擊會出現下拉式選單,敬請點擊Dashboard選項,即會出現以下網頁畫面。
NameCheap首頁登入後點擊左上角您的帳號,擊會出現下拉式選單,敬請點擊Dashboard選項,擊會出現以下網頁畫面。
NameCheap首頁登入後點擊左上角您的帳號,擊會出現下拉式選單,敬請點擊Dashboard選項,即會出現以下網頁畫面。

  NameCheap首頁登入後點擊左上角您的帳號,擊會出現下拉式選單,敬請點擊Dashboard選項,即會出現以下網頁畫面。

您在NameCheap帳號的Dashboard(控制面板)的畫面,下方條列了您的代辦事項.

  上面的畫面是您在NameCheap帳號的Dashboard(控制面板)畫面,下方條列了您的代辦事項。目前顯示的是【Verify Contact】(確認聯絡方式),敬請點擊該按鈕,讓系統自動送出一封電子信箱,以便確認將來域名所有權期限屆滿之前,能夠以該電子信箱通知通知得到您,提醒繼續購買該域名的所有權,以免造成莫大的困擾。

您的電子信箱來自NameChaep工資的確認函,一經您的點擊之後,瀏覽器壞自東新增一個頁面如下圖所示,告訴您的確認已經成功收到。
您的電子信箱來自NameChaep工資的確認函,一經您的點擊之後,瀏覽器壞自東新增一個頁面如下圖所示,告訴您的確認已經成功收到。

  接下來請回到原先畫面,敬請點擊畫面右側欄位的[Domain List](域名列表)就會出現以下這個畫面。

[Domain List](域名列表)的畫面

  在以上[Domain List](域名列表)的畫面域名欄位最右側的[Manage]按鈕,點擊之後就出現以下畫面。

接下來敬請點擊畫面右側欄位的[Domain List](域名列表)就會出現這個畫面。
接下來敬請點擊畫面右側欄位的[Domain List](域名列表)就會出現這個畫面。

  [Domain]域名與[WhoseGuard]隱私權保護都設有自動續約功能,關於[WhoseGuard]隱私權保護因為一直都免費,自動續約依然免費,您可以不用擔心。

  這兩個欄位後方的[Add Years](增加年限),允許您在到期日前隨時可以加碼增加所有權與使用權的年限

  敬請新增瀏覽器頁面進入bluehost首頁,點選頁面上方橫幅選單[Domain]的[Domain list]就會出現如下畫面。
敬請新增瀏覽器頁面進入bluehost首頁,點選頁面上方橫幅選單[Domain]的[Domain list]就會出現如下畫面。

  再將螢幕畫面往上滑移,點擊右下角的[Name servers],就可以看到兩個重要DNS參數。

  如果以我個人的DNS參數為例的話,就是:
  ns1.bluehost.com
  
  ns2.bluehost.com

  一如下圖所示。

在漿螢幕畫面往上滑移,點擊右下角的[Name servers],就可以看到兩個重要DNS參數。
再將螢幕畫面往上滑移,點擊右下角的[Name servers],就可以看到兩個重要DNS參數。

  接著敬請切換瀏覽器頁面至NameCheap網站剛剛的畫面,再向上滾動畫面,在表格最左方有[Nameservers]欄位,在其問沆右邊有下拉選單,敬請點選[Custom DNS}。

  然後將你自己的DNS參數一一輸入即可

  每輸入一個新的DNS參數,就會有[v]和[X]出現,fm,確認無誤即點擊[v]以完成輸入動作。

每輸入一個新的DNS參數,就會有[v]和[X]出現,fm,確認無誤即點擊[v]以完成輸入動作。
每輸入一個新的DNS參數,就會有[v]和[X]出現,fm,確認無誤即點擊[v]以完成輸入動作。

  再次恭喜您,不知不覺就將NameCheap新購網域管轄權轉移至虛擬主機代管最大廠商bluehost家門口了。

  然而路途遙遠,一般這個動作的完成時間24至48小時不等

  至於您如果問我為什麼,我也莫宰羊,每一個廠商都是如此,而我也問不出個所以然來。

★如何向bluehost指定購自Name域名的虛擬主機代管服務?

登入Name的首頁
登入Name的首頁
點擊[域]
點擊[域]
點擊[管理域]之後的畫面
勾選想要處理的域名,表格上方就會出現幾新的選單
點擊[編輯域名服務器]就會出現此畫面
  敬請新增瀏覽器頁面進入bluehost首頁,點選頁面上方橫幅選單[Domain]的[Domain list]就會出現如下畫面。
敬請新增瀏覽器頁面進入bluehost首頁,點選頁面上方橫幅選單[Domain]的[Domain list]就會出現如下畫面。

  再將螢幕畫面往上滑移,點擊右下角的[Name servers],就可以看到兩個重要DNS參數。

  如果以我個人的DNS參數為例的話,就是:
  ns1.bluehost.com
  
  ns2.bluehost.com

  一如下圖所示。

在漿螢幕畫面往上滑移,點擊右下角的[Name servers],就可以看到兩個重要DNS參數。
再將螢幕畫面往上滑移,點擊右下角的[Name servers],就可以看到兩個重要DNS參數。

  接著敬請切換瀏覽器頁面至Name網站剛剛的畫面,再向上滾動畫面,在表格最左方有[Nameservers]欄位,在其問沆右邊有下拉選單,敬請點選[Custom DNS}。

  然後將你自己的DNS參數一一輸入即可

  每輸入一個新的DNS參數,就會有[v]和[X]出現,fm,確認無誤即點擊[v]以完成輸入動作。

逐項填入您再bluehost公司的域名服務器(Namesevers)參數

  接著敬請檢視您所輸入的bluehost域名伺服器參數無誤之後,點擊其下藍色的[更新域名服務器]按鈕。

  然後網頁就會更新畫面如下圖所示

域名服務器更新完成
域名服務器更新完成

  接真是令人歡欣鼓舞,您又再一次完成,閣下以前認為是【不可能的任務】了!

  然來賓請掌聲鼓勵鼓勵!

★如何在bluehost同時擁有多個網站代管?

  現在敬請將瀏覽器切換到原先bluhost的頁面,如下圖所示。

將瀏覽器切換到原先bluhost的頁面,如圖所示。
將瀏覽器切換到原先bluhost的頁面,如圖所示。

  然後點擊上圖畫面中間左側欄選單中的[Assign a domain to your cPanel account]選項,就會出現如下畫面

可以在此開始為再其他公司機構所購買的域名,進行轉換虛擬主機代管廠商的[指定程序],讓接下來到bluehost門口的域名得以名正言順地登堂入室,合法接受代管作業了。
可以在此開始為再其他公司機構所購買的域名,進行轉換虛擬主機代管廠商的[指定程序],讓接下來到bluehost門口的域名得以名正言順地登堂入室,合法接受代管作業了。

  在上圖步驟一(step 1:enter domain)中,點選第二項,並請輸入域名

域名正確輸入完成後,步驟二(Verify Ownership),擊驗證域名所有權也會自動完成,並且在該欄位顯示Ownership verified. 並且秀出正確的域名伺服器參數。

  如上圖所示,域名正確輸入完成後,步驟二(Verify Ownership),擊驗證域名所有權也會自動完成,並且在該欄位顯示Ownership verified. 並且秀出正確的域名伺服器參數。。

  接下來敬請進行步驟三。

  步驟三主要是選定這個新域名所架設的網站,和原有網站的關係。如果,新網站是您的第一個網站,就選第一個選項。如果是第二個或更以後的新網站,想要與原網站完全獨立不相關,也請點選第一個選項。

步驟三主要是選定這個新域名所架設的網站,和原有網站的關係。如果,新網站是您的第一個網站,就選第一個選項。如果是第二個或更以後的新網站,想要遠原網站完全獨立不相關,也請點選第一個選項。
步驟三主要是選定這個新域名所架設的網站,和原有網站的關係。如果,新網站是您的第一個網站,就選第一個選項。如果是第二個或更以後的新網站,想要與原網站完全獨立不相關,也請點選第一個選項。

  接下來敬請繼續進行步驟四。

  步驟三主要是選定這個新域名所架設的網站,和原有網站的關係。如果,新網站是您的第一個網站,就選第一個選項。如果是第二個或更以後的新網站,想要與原網站完全獨立不相關,也請點選第一個選項。

步驟四,選擇軟體安裝在第一個網站的檔案結構的位置,因為我都是要求每個網站在管理運用上頜自獨立,所以一律選擇.第二個選項(Create a new directory.)。
步驟四,選擇軟體安裝在第一個網站的檔案結構的位置,因為我都是要求每個網站在管理運用上頜自獨立,所以一律選擇第二個選項(Create a new directory.)。

  接下來敬請繼續四個步驟全都設定妥當,也檢視無誤之後,敬請點擊左下角綠色的[assign this domain](指定域名)開始執行指定域名的程序。

  經過幾十秒的運作,看起來是OK的。接下來,敬請再次點擊bluehost網頁上方藍色橫幅的[Domains]選單之下的[Domain List],檢視整個域名指定的作業是否順利完成。目前看起來一切順利。

再次點擊bluehost網頁上方藍色橫幅的[Domains]選單之下的[Domain List],檢視整個域名指定的作業是否順利完成。目前看起來一切順利。

  再度為您喝采!

  有關域名採購,以及域名指定到bluehost虛擬主機的困難重重,依然被聰明的您給輕舟已過萬重山地達成了!

  接下來的,安裝免費開源架網站系統的步驟,對您來說,就再也不能說有多難的了。

★如何不花一毛錢自行合法安裝市占率最高的WordPress架站軟體?

  終於來到了安裝軟體的功能了。

  經如果萬一,您還沒有買好自己專屬的網域名稱(簡稱域名,英文Domain)。不妨任意點選以下三個圖片,搜尋可用也是您心儀的域名,貨比三家不吃虧。

Domain names for just 88 cents!
Domain names for just 88 cents!
Domain names for just 88 cents!

  敬請登入bluehost網頁,在[Website]欄框點擊[Install WordPress]按鈕,如下圖所示。

登入bluehost網頁,在[Website]欄框點擊[Install WordPress]按鈕。
登入bluehost網頁,在[Website]欄框點擊[Install WordPress]按鈕。

  敬請登入bluehost網頁,在[Website]欄框點擊[Install WordPress]按鈕,如下圖所示。

選取已在bluehost虛擬主機代管的域名開始安裝網站WordPress架站軟體
安裝WordPress架站軟體、安裝版面配置模板、外掛程式,以及其他相關設定,bluehost都有專人可以服務,價目表如圖所示。您也可以考慮看看,或是跟著步驟教學一回升二回熟也很優!
安裝WordPress架站軟體、安裝版面配置模板、外掛程式,以及其他相關設定,bluehost都有專人可以服務,價目表如圖所示。您也可以考慮看看,或是跟著步驟教學一回生二回熟也很優!

  敬請選取您正要安裝WordPress軟體的域名相關網址。

  本教學案例以interiordesigntw.com為例,自然選取的是http://www.interiordesigntw.com。請注意,要記得您自己的域名跟此範例是絕對不一樣的。

  選取完畢即如下圖所示,接著審視無誤之後,敬請點擊其右方的綠色[Next]按鈕,好繼續進行下一步驟。

本教學案例以interiordesigntw.com為例,自然選取的是http://www.interiordesigntw.com。請注意,要記得您自己的域名跟此範例是絕對不一樣的。

  如果,您要安裝的網站(域名),是在此伺服器主機的第二個或以上的網站(域名),則請在[/]之後,在自行輸入全部英文小寫的[wordpress]字樣,指定WordPress架站軟體在此目錄之下安裝,如此,才不至於和第一個原有的網站(域名)相衝,如下圖所示。

  選取完畢即如下圖所示,接著審視無誤之後,敬請點擊其右方的綠色[Next]按鈕,好繼續進行下一步驟。

為同一伺服器主機的第二個或第二個以後的網站安裝WordPress架站軟體時,請在其子目錄輸入全部英文小寫的[wordpress]字樣。
為同一伺服器主機的第二個或第二個以後的網站安裝WordPress架站軟體時,請在其子目錄輸入全部英文小寫的[wordpress]字樣。

  雖然避免了與第一個原有的網站(域名)相衝,但是代價是新網站的首頁,以本教學範例來說,將會是:

http://www.interiordesigntw.com/wordpress/

  而不是:
http://www.interiordesigntw.com/

  於是乎,人們習慣將您這個新網站的首頁連結輸入成
http://www.interiordesigntw.com/卻會找不到該網站。

  聽起來問題似乎很大,其實不難解,本人會另傳專文加以說明,如何輕鬆解決這個問題的。

  接下來畫面更新如下,並請輸入您的網站標題,確認電子信箱,管理者(建議使用您的Google電子信箱)以及最重要的,登入網站後台管理的密碼。

  因為這個密碼非常重要,麻煩您務必一定要記得先將它複製到文書檔案,例如word檔儲存起來,以免後悔莫及。

  將來您登入網站管理後台之後,可以重新設定您比較好計的密碼,所以也不用覺得太麻煩

    綠色[Next]按鈕左方三個小方框都打勾,表示您理解也接受,WordPress在安裝過程中會幫您創建資料庫,如果原本檔案結構之下有任何相同檔案都會被複寫(因是新建檔案目錄,其檔案夾應該都是空的,如果如此,其時無計有檔案被複寫的憂慮),以及您同意WordPress的服務條款。

  接著審視無誤之後,敬請點擊其右方的綠色[Next]按鈕,好繼續進行下一步驟。

接下來畫面更新如下,並請輸入您的網站標題,確認電子信箱,管理者以及最重要的,登入網站後台管理的密碼。

  恭喜您!WordPress架站軟體安裝中………..

恭喜您!WordPress架站軟體安裝中...........

  真是令人驚艷!

  恭喜老爺!賀喜夫人!

  WordPress架站軟體不到一分鐘安裝完畢!

WordPress架站軟體安裝完畢!

★如何完成網站基本設定與控制台介面中文化?

  架站軟體安裝完畢之後,循慣例bluhost又來推銷網頁配置模板(theme),而且都還要再多掏腰包,如下圖所示。

  恭喜老爺!賀喜夫人!

  本人佛心又來了,乾脆一不作二不休,繼續與您溫馨分享如何免費安裝模板。

架站軟體安裝完畢之後,循慣例bluhost又來推銷網頁配置模板(theme),而且都要在多掏腰包。
架站軟體安裝完畢之後,循慣例bluhost又來推銷網頁配置模板(theme),而且都還要再多掏腰包。

  接下來請在瀏覽器開設新頁面,在頁面最上方的網址欄輸入您新購的域名所對應的首頁連結。

  例如,本教學案例的域名是[interiordesigntw.com],其相對應的網址就是[www.interiordesigntw.com],請您依樣畫葫蘆,只是將本案例的域名改為您新購的域名,即可。

  如果,您所架設的新網站是該伺服器主機的第二個或第二個以後的網站,那麼,本教學案例的域名是[interiordesigntw.com],其相對應的網址就是[www.interiordesigntw.com/wordpress],請您依樣畫葫蘆,只是將本案例的域名改為您新購的域名,即可。

  噹~噹~噹~~~

  頁面就會更新如下圖所示:

您的新網站已存在,但仍在裝潢施工中,只允許有密碼的管理員入內造訪施工。

  然而您的新網站雖已存在,但仍在裝潢施工中,只允許有密碼的管理員入內造訪施工,所以會出現這樣的非比尋常畫面,是可以理解的。

  還記得嗎?本人之前叮嚀您務必牢記,甚至製作小抄的管理員帳號與密碼,現在就要派上用場囉!

  接下來,敬請點擊畫面中央偏下方的藍色[Admin Login](管理員登入)按鈕,緊接著會出現如下對話框:

管理員登入網站後台時的帳號密碼輸入對話框
管理員登入網站後台時的帳號密碼輸入對話框

  然如果萬一您真的忘記密碼的話,也不用太慌張,輸入錯誤時,會有一個[Lost your password?]的按鈕,點擊之後,卻仁管理員電子信箱,選擇重新設定密碼,在到您管理員電子信箱,進行密碼重設,也是補救之道。

  例如,以下是輸入密碼錯誤時的畫面

忘記管理員密碼了?

  所以,無論如何,您還是可以進得了自己新架設網站的後台,進行裝潢施工,好選一個良辰吉時,在網路世界暪墨登場的。

  只是密碼忘記的話,會多花一些時間和步驟,但總歸您還是可以如願進入以下的畫面。

網站後台登入之後第一眼的驚鴻一瞥!

  所如上圖所示,一開始架站軟體就會詢問您,這個網站是屬於[Business]商業性質?還是[Personal]個人性質?老實說,因沒實驗過,並不知道這兩者的差異何在。個人傾向於選擇商業性質的原因是,這樣可選擇的功能比較多,將來網站擴展性比較好,所以一律選擇[Business]這個選項。個人初學者觀點,供您參考。

  選定[Business]之後,新畫面如下所示。

選擇商業性質後的新畫面,輸入網站[Site Title](標題)與[Site Description](敘述)。

  緊接著,當然就是填寫這兩個欄位,確認無誤之後,敬請按下[Next](下一步)按鈕,進入下一步驟。

  接著,新畫面如下所示。

接著,軟體問您是否可以開始寫網頁文章了。

  我想,此時此刻還有更重要設定有待完成,就選擇[Nope](不要)。

  接著,新畫面還會有一兩個各式不同類別文章的詢問,都先跳過,來到如下所示的新畫面。

軟體詢問是否需要安裝外掛軟體讓網站流量更高,依然先不要。

  既然是商業性質的網站,也基於十名至的世界潮流,當然毫不猶豫留下營業地址

輸入營業地址
輸入營業地址

  目前還沒考慮到電子商務的需求,所以這一部份也可以暫緩

詢問您是否需要安裝電子商務相關外掛程式,還是暫緩,先跳過。
軟體詢問是否需要安裝網也配置模板,曬先暫緩。在此畫面右上角有個藍色原款反白X,點選讓軟體跳離[Dashboard](控制面板)。

  上圖中,軟體詢問是否需要安裝網也配置模板,也先暫緩。在此畫面右上角有個藍色原款反白X,點選讓軟體跳離[Dashboard](控制面板)。

  接著,新畫面如下所示。

[Dashboard](控制面板)的初始畫面
[Dashboard](控制面板)的初始畫面
  敬請點選左側邊框[Settings](設定),出現下拉式選單,請點選[General](一般),如下圖所示。
敬請點選左側邊框[Settings](設定),出現下拉式選單,請點選[General](一般)。

  在Site Language的選項可以點選中文(繁體,簡体都有)。

您可能偏好中文介面,讓我們先選擇網站語言設定[Site Language],只需將畫面往上滑移,就可以看到並開始設定了。

  除此之外,建議您也花點時間檢視原本預設的設定,看看有哪些需要更改以符合您未來更確切的需要。

您可能偏好中文介面,讓我們先選擇網站語言設定[Site Language],只需將畫面往上滑移,就可以看到並開始設定了。

  都設定好之後,在此畫面右下角點擊藍色的[Save Change](儲存變更)的按鈕,整體網頁的英文介面全都中文化了。親切感是不是全都來了呢?

都設定好之後,在此畫面右下角點擊綠色的[Save Change](儲存變更)的按鈕,整體網頁的英文介面全都中文化了。
都設定好之後,在此畫面右下角點擊綠色的[Save Change](儲存變更)的按鈕,整體網頁的英文介面全都中文化了。

  截至目前為止,雖然日後還有許多設定微調的作業可以讓您的網站更趨向盡善盡美,然而,最主要的WordPress架站軟體,以及基本的設定也都告一段落,站時可以畫下好好的句點了!

  您學習的精神實在太令人感佩了!

  恭喜老爺!賀喜夫人!今天又創下令人讚嘆的人生另一個第一次了!

★如何不花一毛錢自行合法安裝主題佈景?

  以蓋房子來比擬的話,您已經將基礎打好,鋼筋骨架梁柱與結構牆都打點的差不多了!

  接下來,網頁模板(又稱主題佈景,英文theme)的建立,就好像是安裝精美的門窗,為牆壁上匹土粉光,搭建好樓梯電梯一般,也是邁向這棟建築物行動通暢,四通八達,以及攸關未來視覺效果優劣雅俗的基礎建設。

  接下來,咱們就一起來玩玩主題佈景吧!請在網站控制台點選左側邊欄的[外觀][佈景主題],就會出現以下的畫面。

接下來安排網頁配置的設定,一般都是使用現成模板(theme),可以在[外觀][佈景主題]的選項中選取您所要套用的模板。

  上圖的三個模板是安裝WordPress架站軟體時,就已預設模板的方式一起免費安裝的。既然免費,您可以隨意擇一而用,甚至輪流換著用,看看有何不同,哪一類模板較適合您的需求。

  不過,其實免費模板多如過江之鯽,所以,還是先介紹您如何搜尋自己被推薦的模板,這樣對您儘速熟悉模板相關知識,應該更好。

  接上圖左下角有個空白模板框,中間有個[+]號,點擊之後,即可瀏覽數百上千個,玲瑯滿目的佈景主題。有的免費,有的要價驚人,任君選擇,各取所需。

搜尋可用的佈景主題’

  上圖左上角有個關鍵字搜索框,供您搜索特定關鍵字相關的佈景主題之用。

  識初學者通常以貌取人,光看圖片就判定優劣,其實,慢慢就會了解,佈景主題挑選的重點是版面配置,圖片的部分通常您也不好沿用,基於版權,通常也不許盜用,而且,即使可用也會失去您網站該有的特色了!

安裝名為Make的主題背景
安裝可用的佈景主題’

  上圖中間名為[Make]的佈景主題,看起來簡直遜斃了!

  其實,不瞞您說,因為它的開發者很注重軟體相關的穩定性,所以我的第一個網站,築韻集團官網,一直都是使用這款佈景主題,應該很少人聯想的到。

  點擊任一主題佈景的圖框,其右下角都會出現[安裝][預覽]兩個選項。方便您評估滿意之後,一鍵即可安裝!

  下圖為[Make]佈景主題安裝好之後,在其左上角會出現[已安裝]的提示。

啟用名為Make的主題背景
啟用名為Make的主題背景

  上圖中間名為[Make]的佈景主題,點擊[安裝]之後,該按鈕旋即變成[啟用]按鈕。

  我們現在就啟用它來作為教學示範吧!

  接下來,敬請點擊作左側欄[外觀][佈景主題]就可以看到該佈景主題已經出現在這個畫面,而且在其左下角以註明[啟用]!

完成啟用名為Make的主題背景之後的畫面

  那麼,在網路世界裏,您的新網站從瀏覽器第一眼看起來是如何呢?

  蛤?蝦密?哪也安捏?是雪景嗎?怎麼白花花一帶片?

在網路世界裏,您的新網站從瀏覽器第一眼看起來是如何呢?當然,目前只有管理員才看的到,不用心急,接下來當然是好好裝潢網站的門面,並充實具有一一的內容囉!
在網路世界裏,您的新網站從瀏覽器第一眼看起來是如何呢?當然,目前只有管理員才看的到,不用心急,接下來當然是好好裝潢網站的門面,並充實具有一一的內容囉!

  當然,目前只有管理員才看的到,不用心急,接下來當然是好好裝潢網站的門面,並充實具有意義的內容囉!

  我們甚麼網頁內容都還沒有添加進去,部白花花一片,啊不然,一片漆黑會比較好嗎?

  接下來,我們趕快來學一學外掛的基礎安裝,將超好用的網頁排版編輯器Elementor這個非常知名的外掛軟體,安裝起來,好好來裝潢美化您的新網站吧!

★如何安裝免費版超好用網頁排版編輯外掛程式Elementor?

  當然,誰不希望自己架設的網頁,能夠吸睛,最好能讓自己自豪,讓網友讚嘆!

  要達到如此境界,工欲善其事,必先利其器,且讓我們來學學時下最受歡迎的,超簡單又多功能的網頁排版編輯器Elementor外掛程式吧!

  這個Elementor外掛程式免費版就很好用,付費版更精彩,功能太多族繁不及備載,本文只消先教您一招半式,就先能綽綽有餘了!

  那麼,我們就先來安裝免費版的Elementor外掛程式吧!首先,敬請點擊左側欄[外掛],最先映入眼簾的將是以下畫面。

WordPress架站軟體預設的已安裝外掛程式
WordPress架站軟體預設的已安裝外掛程式

  由於我們架站至今,還沒有自行安裝過任何外掛程式,因此,上述外掛程式必然是隨著WordPress架站軟體安裝,以及bluhost安裝軟體的程序,預設一定要安裝的外掛程式。

  由於還是初學者,我們就先不要去動這些外掛程式,比較安穩。等日後武功高強了,再來思索整體外掛的配置,就可以了!

  接下來,敬請點擊[外掛][安裝外掛],則會出現以下畫面。

在[外掛][安裝外掛]頁面的右上角有搜尋欄位方便以關鍵字找到您想要了解或安裝的外掛程式
在[外掛][安裝外掛]頁面的右上角有搜尋欄位方便以關鍵字找到您想要了解或安裝的外掛程式

  上圖右上角有個搜索框,輸入關鍵字[Elementor]之後,畫面將變成如下圖所示。

  敬請點擊該畫面中的[Elementor Page Builder]與[Elementor Essential Addons]這兩個外掛程式右上角的[立即安裝]按鈕。

  接下來,敬請點擊該兩個外掛程式右上角的[啟用]按鈕,就完成這兩個重要的網頁排版編輯器其外掛程式的安裝了。

搜尋知名網頁排版外掛程式lementor相關的結果
搜尋知名網頁排版外掛程式lementor相關的結果

  在此附帶一提,[Elementor Page Builder]這個外掛程式事主程式,一定要安裝,才能享受Elementor網頁排版編輯器的功能。

  接下來,敬請點擊左側邊欄[頁面][全部頁面]按鈕,將所有現存頁面條列出來。

點擊左側欄的[頁面][全部頁面]便會出現以下所有網頁的列表,目前的列表都是WpordPress的預設網頁,可以由編輯它們來作為範例。
點擊左側欄的[頁面][全部頁面]便會出現以下所有網頁的列表,目前的列表都是WpordPress的預設網頁,可以由編輯它們來作為範例。

  請將滑鼠移到[Home Page-首頁]的欄位,則在其下方會出現編輯、快速編輯、回收桶與查看四個選項,如下圖所示。

將滑鼠移到[Home Page-首頁]其下方就會出現編輯、快速編輯、垃圾桶與查看四個選項。
將滑鼠移到[Home Page-首頁]其下方就會出現編輯、快速編輯、回收桶與查看四個選項。

  敬請點擊編輯選項,則畫面將呈如下圖所示,正式進入網頁編輯畫面。

  敬請點擊[使用Elementor編輯]的按鈕,如下圖所示。

編輯Home Page-首頁的畫面
編輯Home Page-首頁的畫面

  接著就會自動進入Elementor網頁排版編輯畫面,如下圖所示。

進入Elementor外掛程式編輯的畫面
進入Elementor外掛程式編輯的畫面

  在上圖編輯畫面中間的大型虛線方框內有兩個按鈕,左邊是[新增段]按鈕,右邊則是[新增版型]按鈕。

  由於是初學者入門教學,我們以臨摹的方式開始學習最有效率,因此敬請先點擊[新增版型]按鈕。於是畫面就會呈現如下圖所示的,充滿許多版型可供選擇的對話框。

點擊[新增版型]所出現的畫面

  此對話框分為三部分,目前呈現的是[頁面],左邊的選項是[區塊],右邊的選項則是[我的版型]。頁面最完整,區塊只含其中一小部分,我的版型是您創作過程中自行儲存自創的版型。

  既然是臨摹,就以最完整的[頁面]區裏選擇最愛或最適合的版型來練習吧!

  請注意,這裏眾多的版型,如果右上角有洋紅色[Pro]字樣,代表是要付費才能使用,而且是美金計價,每個月付款,所以我盡量不採用。

  本教學範例我選擇的是免費的,名為Art Gallery的版型,當滑鼠移到該版型的範圍時,其左下角便會出現綠色的[插入]按鈕。

例如,咱們先來挑選這款版型Art Gallery來練習。
例如,咱們先來挑選這款版型Art Gallery來練習。

  點擊[插入]按鈕之後,畫面變成如下所示,整個版型已然搬進了您的編輯頁面。

該版型載入到您的網站首頁的情形
該版型載入到您的網站首頁的情形

  點擊左側欄右方的[<]按鈕之後,整個編輯指令欄位就會隱身,模擬在正常瀏覽器觀看時的視覺效果。於是,畫面變成如下所示。

  另外,因網頁無法以單一螢幕完整呈現,因此在此以四張圖片完整呈現網頁的實際視覺效果。

模擬網友在瀏覽器觀看的實際視覺效果-上
模擬網友在瀏覽器觀看的實際視覺效果-中上
模擬網友在瀏覽器觀看的實際視覺效果-中上
模擬網友在瀏覽器觀看的實際視覺效果-中下
模擬網友在瀏覽器觀看的實際視覺效果-下

  點擊上圖最左側的[>]按鈕之後,整個編輯指令欄位就會重新顯現,如下所示。

  如果您要儲存草稿,只要點擊畫面左下方綠色[發佈]按鈕旁的[▲]按鈕,就會出現[儲存草稿]與[儲存版型]兩個選項。點擊[儲存草稿]按鈕,約數秒鐘之後即完成草稿儲存。

儲存網頁草稿

  此時,您就可以安心點擊瀏覽器最左上角的[←]按鈕,離開Elementor編輯器作業環境,回到WordPress編輯環境,如下圖所示。

預覽
預覽

  敬請再點擊畫面右方的[儲存為草稿]按鈕,待儲存完成,請再點擊其右方的[預覽]按鈕,則瀏覽器會新增一個頁面顯示出正在編輯的網頁或文章將來發佈之後,從瀏覽器真正看到的視覺效果,如下圖所示。

首頁預覽

  敬請切換瀏覽器頁面到原先頁面編輯的頁面,再點擊畫面左方的[使用Elementor編輯]按鈕,進入Elementor編輯畫面,試著改變各編輯框內的文字內容與背景圖片,非常方便就可以編輯出屬於自己風格與需求的原創網頁或文章,如下圖所示。。

  敬Elementor的設計是非常直覺的,因此很適合自己先玩玩看。當然,日後我也會儘速抽空寫出一系列的Elementor相關的詳細步驟教學文章,讓您可以更迅速登堂入室,甚至青出於藍而勝於藍。敬請期待唷!感恩!

首頁草稿
首頁草稿
首頁草稿-中

★後記與相關文章

  • 後記:

    許多事情是萬事起頭難的,不過,如有貴人提攜,像我當年那麼幸運,篳路藍縷的艱辛就變得輕鬆許多,也不用虛耗精力、時間與金錢在徒勞無功的冤枉路上。

    許多事情,沒真正作過的話,其實有很多的擔心與疑慮,當您真正經歷過了,才會真正明白,大多數都是屬於杞人憂天,根本不是那麼一回事!

    隨著人工智慧的發展,工業4.0的必然到來,許多人其實都應該好好省思,既然無可避免地,必須面對科技浪潮所帶來的巨大改變,自己是否也有可能成此浪潮而起,讓自己成為時勢英雄的一份子,而不是只能坐以待斃,無奈地等著越來越沒機會的未來。

  希望,本文詳細步驟教學,能夠引領您,開始一個屬於自己網路世界建構的開始。當然,今天只是引您進門,真正的修行如何,合適全然在於您個人的努力囉!

  自古以來長江後浪推前浪,青出於藍而勝於藍比比皆是,相信,假以時日,對於網站,您一定可以經營得比我更出色!

免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎?

    敬請點擊上方圖案,免費註冊免費訂閱築韻集團專業文章,以後只要有新作出刊,您的電子信箱就會馬上收到通知。感恩!

總公司地址:台灣省新竹縣竹北市福興路1028巷1號

台中分公司:台灣省台中市北屯區崇德路二段462號9樓之一

聯絡人:張世忠先生(0939-061-556)

電子信箱:mark.chang.1031@gmail.com

築韻空間美學工坊臉書粉絲團

築韻出版社臉書粉絲團

築韻集團YOUTUBE影片頻道

築韻集團FLICKR相簿圖庫