文章列表

到了 2021 年的今天，要架設網站實在不是很困難的事情，相對應的方便工具也很多，那在這麼多選擇之中，為什麼會推薦使用 WordPress 呢？今天這篇文章會分享我認為很有說服力的五個重點原因，趕緊來看看吧～ 嗨囉，大家好！我是設計師 Riven 🙂 WordPress 對我來說，是個首次進入網站開發的任意門，打開之後發現了無限寬廣的世界；在那個還沒有什麼人討論 UI/UX 的年代，身為大學生的我，持續練習這項專業技能，然後用架設網站、網頁設計來接商業案，不但繳清了學費、房租，也賺到出國好幾趟旅行的費用，而在累積個幾年的架設經驗後，網站開發也成為我受邀到各地講課教學的專業主題，真要說 WordPress 對我來講是個徹底改變人生的軟體也不為誇張。 而今天呢，我想來聊聊使用 WordPress 來架設網站的五個重點原因，我相信現在 2021 年了對於我們來說有很多很多架設網站的選擇，所以我列出這幾個 WordPress 獨特又迷人的地方，也許能給大家一些能夠幫助選擇的參考。 “ 最近我開設了一堂線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】。帶領大家重新理解 WordPress 的強大和威力，自由設計、建立個人品牌網站、自媒體部落格、公司形象網頁和作品集等等。 ” 有興趣的大家可以點擊右方連結，了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u 什麼是 WordPress？ WordPress 誕生於西元 2003 年，是一個開放原始碼軟體，地球上接近四成的網站都是用 WordPress 架設的，並且在全世界都有開發者與設計師替其貢獻佈景主題、實用功能外掛或是本地翻譯，也是目前最主流的 CMS（內容管理系統）選擇，一直以來都很適合拿來寫部落格、經營自媒體內容網站。 而隨著網際網路發展仍不減其地位，WordPress 經歷多次更新改版後，至今已經到了第五代(WordPress 5.0)，除了大家印象中拿來做部落格用途之外，現在因為功能愈趨完整、操作介面更簡單，要用來架設企業形象網頁、電商金流網站，或是設計師作品集等等都很方便了，目前要用 WordPress 架網站已經不像以前那樣需要透過複雜的安裝流程，取而代之的是我們更可以著重在網站的設計與使用者體驗上。 架設 WordPress 網站需要的成本為主機與網域，每個月換算下來的費用約為幾百元左右，而第一次學習推薦使用Cloudways主機來進行購買與安裝架設。 而接下來呢，讓我們來仔細聊聊 WordPress 受到來自全球各地開發者與設計師喜愛的原因。 簡單 在以前啊，架設網站是個需要點技術門檻的事情。 現在呢，隨著 WordPress 這個開源軟體這十幾年來的不斷進化，讓網站架設入門的難度一直在下降。 除此之外，架設網站的體驗也愈來愈好，比起三年前、五年前，現在來看架網站可以說是非常簡單、快速也快樂的事情噢。 如果想架設一個網站，都是 10 分鐘以內的事情。就算是剛開始的新手同學，可能初學第一天就能架好，然後不出摸個大概 3、5 天吧，我相信也能透過 WordPress 來手工出一個完整網站來。 社群 你知道嗎？根據W3Techs的數據統計，全世界的辣麼多網站當中，有接近 40% 的網站都是由 WordPress 製作的（下圖灰色長條），而且在使用內容管理系統 (CMS)的網站中，WordPress 佔了超過六成的數量！（下圖綠色長條） 而且從這幾年的數據看下來，都有增長趨勢。 從上圖中我可以看出來，使用 WordPress 架設的網站數量遠遠超過 Wix, Weebly 等類似的網站架設平台，而且第二名以後全部加起來都還沒有 WordPress 高～😂 這就是壓倒性的勝利呀～ 很多人在剛開始架設網站的時候都會猶豫要選哪一個來做，而從數據來看 WordPress 不僅是內容管理系統(CMS)網站架設的首選，也是地球上最多人拿來做網站的框架，並且已經維持好幾年都是這樣。 WordPress 在各國的社群討論熱度也非常高，活躍的社群氛圍也意謂著對於新手來說，如果製作中遇到問題，在網路上或是問朋友、在社團發問，能夠更輕鬆地獲得解答。 以台灣使用中文的 Facebook 社團來說，目前最多人的應該是WordPress Taiwan 正體中文，裡面有很多資深開發者聚集，如果你已經具有 WordPress 架設經驗，而且能精準表達問題是什麼，那這樣子的貼文在社團當中就可以很快獲得網站前輩們的熱心回答。 除了有問題可以隨時找人問以外，台灣的許多縣市也都會定期舉辦 WordPress 實體聚會活動，像是台北、台中跟台南等等地方都有，或是一年一度的WordCamp也是相當大型的論壇年會，可以與其他 WordPress 站長互相切磋網站經營經驗。 再加上如此有人情味的 WordPress 社群，其實也會給予使用 WordPress 架設的網站許多福利，比如說繁體中文化翻譯（像是在台灣就有Alex這樣的高手在民間幫忙）以及資訊安全的維護等等，都能夠讓我們的網站更好用、更安全。 WordPress 自由開源的風氣，讓全世界的開發者、設計師形成活絡社群，並共同維護與打造獨特的網站生態系。 功能 仰賴於地球上有很多開發者替 WordPress 開發好用的外掛(Plugin)，基本上只要想得到的網頁功能，舉凡增強 SEO、電商金流，資安維護或網站加速等等，你都可以透過安裝外掛來替網站裝載更強的功能，不用自己寫程式碼。 根據 WordPress 官方所登錄目前總共有五萬多個外掛，其中大多是免費的，而我們也可以直接從 WordPress 的後台直接搜尋與挑選外掛，看到喜歡的可以直接點擊安裝跟啟用，並能直接在後台面板進行設定。 而其中有些進階功能是可以額外付費購買的，能達成的功能面就愈廣、愈深，但可以幫忙省下很多時間。 WordPress 網站後台可以直接安裝享用的外掛 而且，如果你是懂程式的開發者，也可以自己去撰寫 WordPress 網站的功能，並不會限制太多；自己額外寫的外掛則也可以放到網路上販售推廣，WordPress 的生態系就是如此蓬勃發展。 使用適合的 WordPress Plugin 搭配網站，可以讓我們的網站如虎添翼；一般來說公司形象網頁、個人部落格都是很基本的網站類型，所需要的功能在 WordPress 上都可以很快達成。 但如果說想要讓網站更進階一點，像是變成線上課程的平台，或是做成付費訂閱的網站，還是想要打造一個電商王國，WordPress 都能夠替你延伸達成，只是愈是進階的網站功能，相對需要的技術底子就愈深，一般來說都會需要工程團隊幫忙。 WordPress 豐富的外掛(Plugin)能夠替網站增添許多實用功能，讓網站不斷升級強化。 設計 這點算是我身為設計師所最關注的重點了，我曾經試過很多的網站架設工具，像是常聽到的 Weebly , Wix 等等，坦白說這些工具都已經做得簡單好上手，但也因此犧牲掉了很多能自己去客製的成分，這在設計上會造成很大的限制，在使用的過程中會很常發生這邊不能改、那邊不能動，很難將網頁排成我想要的樣子，相信犯有介面強迫症的設計師應該都深有同感⋯ 而 WordPress 相對來看呢，能客製化的程度相當高，這都要感謝世界各地都有很多佈景主題 (Theme)的設計者，替 WordPress 設計很多好看的主題，尤其 WP 發展到今天，外觀樣式的調整都發展到相當成熟的階段，設計師比以前有更大的發揮空間可以去設計出自己喜歡的網頁。 WordPress 佈景主題清單 WordPress 裡面有許多內建且免費的主題，雖然簡單但也夠用，而如果想要更精緻、更具備的佈景主題，則也可以另外購買 Theme 來套用，可以立即見效地讓網站變成喜歡的樣子，並且仍能保持設計上的彈性，並不只是套用模板(Template)那麼簡單，在 WordPress 網站當中，佈景主題通常仍是具有相當高的操作客製程度，可以滿足我們對介面與視覺的控制慾。 能夠發揮「設計」的 WordPress 主題 比如說我最喜歡的 WordPress 佈景主題就是Divi了，這是我用過數十個 WP 主題裡面，介面最直觀且視覺好看，還能讓設計師輕鬆上手的了，非常推薦。 便宜 綜合以上四個重點特色，我們可以透過 WordPress 來製作好看又好用的網站，而且不用太多設計跟程式基礎，我們從客觀角度來看，理應上這個服務應該要很貴，但實際上自己架 WordPress 網站超級便宜的啦！ 其中最主要的原因是，Wordpress 本身是自由開源軟體，提供給大家免費下載與安裝，而我們可以在WordPress.org網站當中看到更多介紹資訊，這邊也順便提醒大家，本篇文章提到的 WordPress 是WordPress.org而非WordPress.com噢！ 「.com」的版本可以視作為「.org」的陽春版本，是個更容易操作的架站工具，但由於其犧牲了客製彈性且價格更高，所以暫不推薦使用。 WordPress.org官方網站 因此，基本上你只要花費幾百元買個一年網域，再花個三四千塊買個一年份網站主機，頂多看情況再買個一兩千塊的佈景主題或實用外掛，就可以靠自己架出外包價值至少要八、九萬元台幣的網站（直接省下一個零！）。 甚至手藝好一點，還可以開始自己接網站設計的案子，賺賺外快，只要做的網站夠好且速度快，完全可以是個穩定吃飯技能。 本站相關教學使用CLOUGWAYSWordPress 網站主機 但值得注意的是，這樣只是滿足了「做好一個網站」的基本成本而已，網站上線雖然很快，但其實後續經營都還是需要不斷地投入時間或營運成本去維護網站，又或者想要更複雜一點的功能，就需要花錢來讓專業工程師幫你操作。 說是便宜其實也是比較出來的，如果說今天是要外包請人做網站，最簡單的可能幾萬塊建置費用跑不掉，但自己做可能只要幾千塊，這對於剛創業、或是剛有經營網站想法的人來說，是個很棒的選擇，不用先花一筆費用去做網站，而是可以在初期先實驗一下，等日後真的覺得有這個需求，或是想要有更精緻的網站的時候，再去委託專業團隊來幫忙。 而跟類似的服務比起來，比如說 Wix 或 Webflow 好了，自製 WordPress 網站真的便宜不少（一樣是租賃主機跟使用服務），而且彈性更大，雖然說每個平台都各有優缺點，但對於 WordPress 來講，只要肯花時間學習跟研究，肯定是各方面的完美解決方案。 ● ● ● 重點回顧 好，基於以上這五個之所以選擇 WordPress 架設網站的重點原因： 簡單、社群、功能、設計、便宜 讓我成為 WordPress 的萬年鋼鐵粉，平常因為興趣我很喜歡嘗試各種網站架設工具，即便如此，也還是不影響 WordPress 在我心目中的地位。 但其實架好 WordPress 網站才算是真正的開始。在慢慢充實網站內容的路上，肯定會遇到很多難解的課題，或不明原因的 bug，在一個個解決問題的過程中，以及對於網頁排版跟美感的掌握與平衡，會讓我們對於網站架設與設計的能力就會逐漸提升，是一件充滿挑戰的事情。 總之，靠自己架設網站真的是一件很有成就感的事情，邀請你一起加入！😃 我是設計師 Riven 我們下次見囉～ 🙂 對 WordPress 課程有興趣的大家可以點擊右方連結，了解完整內容➢http://go.sat.cool/3emm3u

嗨囉，我是設計師 Riven 🙂 今天這篇文章想要整理給即將開始製作網站的朋友，可以先有個頭緒，來開始做進行準備資料與素材，也就是通常來說網站設計裡的企劃階段，能夠藉此來規劃個人或團隊的時間流程與分工任務，而我們在這部分做的愈完整，之後進入製作網站環節的時候就會更順暢。 想了解更多全面性的設計思考方法與步驟，像是網頁需要包含什麼內容？如何排版？ 可以參考我最近開設的一堂線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】，課程會從設計思考，帶大家一步步拆解如何打造成熟的網站。 點擊右方連結，了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u 思考網站製作的主要目標 開始企劃一個網站前，要先想好明確的達成目標，可以是商業上的具體實現，或是個人的創作使用，還是不想再被社群媒體束縛住，任何能夠說出口的目標都可以。 以及思考在網站架設好之後，會拿來做什麼樣的用途，是會拿來撰寫文章嗎？還是呈現資訊給潛在客戶，或是拿來當作多個社群媒體間共同的源頭呢？同時也能想想這個網站跟 Facebook、Instagram 或 YouTube 等社群帳號間，可以怎麼樣產生互補甚至是加乘的效應。 如果想得更仔細一點，可以連同使用者瀏覽網站時的感受一起考慮進來，怎麼樣的網站會吸引他們？進來網頁後希望瀏覽者做什麼互動，怎麼樣可以使得每一位網站訪客停留久一點，甚至是還可以去其他頁面看看。 邊想就趕緊動手寫下來吧！用條列式的方式寫在筆記本上，逐條列出製作網站的目標，或是當腦袋中有一些畫面產生的時候，也可以稍微畫個示意圖，這些思考靈感的蒐集趁早開始，就能讓最後網站製作更出色。 開始去思考並規劃要製作什麼樣的網站，並動手將粗糙的想像畫面畫出來。 每一種網站類型（形象網站、部落格網站、電商網站等）都有不同的規劃與設計方式，但基本的架構流程都是差不多的，而專業的設計師與網站企劃人員會更刁鑽仔細地去執行每一個步驟，如果我們對於製作網站還不是那麼熟悉，仍然可以去嘗試看看，相信也能夠從中更認識自己想做的網站雛形，並一步步地將完成度提高。 我剛好有寫過一篇設計個人品牌網站的文章，如果你也是想做這個題目的話，可以前往參考看看： 蒐集類似或競品網站 如果已經稍微想好了接下來要做的網站要幹嘛，或是也有可能目前還沒什麼想法，我們可以先試著找一些現有的網站來當作參考，而參考範例可以分為兩大類：就是想要做出這樣子的「典範網站」，以及商業競爭對手的「競品網站」兩種類型。 典範網站可以搜尋看看平常你喜歡或常逛的網站，用「設計」的角度重新檢視一次，因為平常都是以「使用者」的角度去看，可能會忽略一些細節，而如果今天真的想自己來做網站了，想必能夠用更犀利的眼睛去看這些網站是怎麼產生跟規劃的，這些觀察得來的蛛絲馬跡，每一筆資訊都很重要。 而競爭品牌是當自己已經有明確要做的網站主體了，就可以去偷看一下對手品牌是如何去規劃與設計網頁，有哪些做的好的地方能夠借鑒，又或者看起來有哪些缺點，這些情報儘早記錄下來，也能夠在之後製作網站的旅途上幫上大忙。 建立網站的資訊架構 隨著上面兩個步驟達成後，我們應該都對現在這個網站的輪廓樣子有點概念了，而接下來我們就可以試著去想想看，要放上哪些重點內容在網頁上面。 通常來說，一個「網站」會由數個的「網頁」組成，而每一個網頁都會緊扣一個重點資訊；比如說「關於我們」的網頁、「品牌故事」的網頁、「部落格」的網頁、「最新消息」的網頁⋯等等。 我們可以先去將這些預計要做出來各個頁面，做一個簡單的排列，並以使用者進入「首頁」後，能夠往下一個階層走的關係去做安排，之後才以樹狀的分支方式做延伸。 riven.design的網站架構（簡易版） 簡單拿幾張便條紙，將這個「網站」要有的「網頁」一個個寫出來，並做好斟酌增減跟前後排序吧。 我們不太可能在網站的選單中，塞入 10 幾個跟「關於我們」同樣權重的網頁資訊，當想做的網頁資訊很多的時候，可以將其權重順序往下放，比如說同時想在網站上置入「歷史沿革」「品牌故事」「得獎經歷」等資訊，那其實大可以全部都放到「關於我們」的網頁底下就好，不需要另外開一個網頁來做。 而如果寫出來之後發現，各個網頁的資訊量都不太夠，也許是目前有的內容量撐不起來那麼多個網頁，而為了不使網站看起來過於單薄，我可以做成一頁式的 Landing Page 做為首頁，並將所有網頁內容由上到下做安排（也是要按照重要順序排列），就可以做成一個豐富的網站登陸頁面了。 構築網頁文案及內容 而當網站輪廓與網頁資訊都架構好後，我們就可以來想一想到時候要放上去的文字內容了。 這個步驟可以好好地透過文件來整理網站的基礎內容，很適合順便來回顧你個人、公司或品牌的經歷，同時重新思考品牌與網站的定位。 我們可以將前一個資訊架構步驟中，所逐條列出的網頁項目，做進一步的延伸，比如說用 Google Docs 或 Notion 這樣的筆記軟體，開好一個個的網頁筆記，並好好地認真想想要放上的麼樣的文字內容、圖片或相關區塊。 關於如何寫好文案，這是一門需要認真看待的專業，你可以在網路上購買線上課程、去誠品買書，或是有預算的話也能夠外包給專門的文案公司進行。 而如果需要形象照片與圖片，則可以趁早開始準備，像是在網路上找到相關可用的圖庫資源，或是安排預算找攝影師進行拍攝。 剛好前陣子我也整理了一些照片與圖片的網路圖庫資源，如果需要的話可以去找找： 這個步驟如果準備得很完整，到時候網站架好就只要將資料複製貼上跟上傳就好，建議不能偷懶噢～！ 取網站名稱跟網域預查 經過上面幾個步驟之後，相信這個網站的企劃書已經完成的差不多了吧！而原本可能對要做什麼網站還不是那麼清楚的朋友，也可以從過程中慢慢整理一下～ 最後，當整個網站的方向大抵都變得更清晰了，我們就可以來幫網站取個名稱，順便找一下有沒有適合的網域可以買。 網站名稱就是大多數人在 Google 搜尋結果上看到的，亦或是分享連結看到的頁面後綴，以及瀏覽器分頁上顯示的名稱。 所以取網站名稱只要能夠清楚表達這個網站在幹嘛，以及文字整體可以容易被搜尋到就好。 比如說「崔咪的旅遊ｘ吃貨ｘ購物部落格」是個會比「我是崔咪，崔咪是我」來得更適合網站的名稱，但後者可能因為較具趣味性，拿來當作粉專或 IG 名是沒關係的。 那有了網站名稱後，還可以再來想一下英文的網域名稱，也就是俗稱的網址。 比如說來看一下riven.design，就是由 “riven” 這個網域名稱，加上 “.design” 這個網域後綴所組成；而我們可以更換不同的後綴來暗示網站的類型，比如說 .com 是商業公司，.blog 一看就知道是部落格，而 .org 則是組織機構等等。 我們可以透過像是 GoDaddy 這樣的域名平台，購買我們想要的網域，可以先輸入比如說 “Akali”、”Amumu” 等自己想取的名字，然後再去找相對應的網域後綴，一般來說一年的費用大概都是幾百元而已，但有些頂級網域可以賣到破萬，而不管選擇什麼樣的網址，最重要的都是要記得續約啊～ 可以透過搜尋的方式找的可用的網域名稱 好啦，以上就是這篇文章的全部內容，希望能夠對馬上要開始製作網站的你有些幫助！ 一起踏上製作網站的旅途吧～相信我們都能夠從中得到成就感，並看見顯著的進步。 我是 Riven，我們下次見囉～掰掰！ 對WordPress 課程有興趣的大家可以點擊右方連結，了解完整內容➢http://go.sat.cool/3emm3u

嗨囉，我是設計師 Riven 🙂 平常擔任講師除了會教授 UI/UX 設計技巧之外，偶爾也會受邀去分享 WordPress 架站教學，而過程中最有成就感的事情，就是將完全不會做網站的同學，教到能夠親手架好一個網站出來了！ 我想讓架網站可以成為每個人日常的愛好興趣，一起沈浸在設計與開發的樂趣中，期待能透過這篇文章整理，來讓你可以簡單又快速建立起屬於自己的第一個 WordPress 網站。 架設網站的主機一直都是許多朋友跨不出去的門檻，的確在以前網站開發是個需要不少前置作業與專業知識的技能，但在今天已經有許多方便的工具及流程能讓我們更快上手，接下來會分享的是如何在短短操作時間內，並且不用先花任何一毛錢，就可以完成 WordPress 網站的架設。 “ 最近我開設了一堂線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】。帶領大家重新理解 WordPress 的強大和威力，自由設計、建立個人品牌網站、自媒體部落格、公司形象網頁和作品集等等。 ” 有興趣的大家可以點擊右方連結，了解完整 WordPress 課程 ➢http://go.sat.cool/3emm3u 開始架一個網站需要哪些東西 ☑️ 主機 拿來放置網站包括程式、圖片等的資料與檔案，實際上線後每年費用成本約為 $5,000 ~ $數萬元不等，租賃虛擬主機來用會較適合，網站架設完成後也尚需維護，所以對新手來說最好挑容易管理、不用費太多心思的主機經銷商。 在以前，若是購買一般虛擬主機，則可能還需要安裝環境，然後要手動到 WordPress 網站下載安裝程式，才可以建立 WP 網站，但在現在有許多一鍵安裝的方法。 ☑️ 網域 也就是網址名稱，讓使用者可以透過網址連到你的網站，每年的授權費約幾百～幾千元不等，值得注意的是網域是愈簡單愈短愈好，然後記得續約，不然明年被搶走就哭出來惹（確定要用的網址就開啟自動續約）。 常見的網域有 .com (commercial 適合商業公司)以及 .org (organization 適合非營利組織)可以針對專案屬性去買適合的域名。 現代的網域也有很多有趣的選擇，像是 .design 或是像本土的 .taipei 與中文域名等等，若可以讓使用者留下深刻印象，也是很不錯的附加價值。 申請主機伺服器 可以拿來製作 WordPress 網站的主機商有百百款，而其中我覺得最適合新手使用的就是Cloudways了。 介面對剛接觸網站架設的朋友很友善，而且租賃費用彈性計價，用多少算多少，不會一開始就要刷很多錢。 更重要的是有免費使用 3 天的額度，讓我們可以先架設來玩看看，並且具備臨時網址可以用，不用需要先購買網域做對應。 簡單來說，是個現在立刻就可以馬上架一個網站來玩耍的好選擇。 前往購買 CLOUDWAYS 主機 註冊帳號 到Cloudways官網點擊右上角 START FREE 免費試用。 註冊會員，可以使用 Google 帳號快速註冊。 輸入密碼與基本資料調查（職業、在意網站哪方面、每個月主機預算） 帳號驗證 成功登入後就會進來這個畫面，要先點擊上面綠色按鈕：VERIFY YOUR ACCOUNT。 買主機前要先進行帳號驗證。 網站主機申裝 當我們完成帳號註冊與驗證後，就可以回到建立伺服器的畫面了，上排伺服器與專案的命名就先簡單取一下名字就好。 而接下來可以按照下面的截圖進行設定： 選擇預設 Digital Ocean 的主機（親測過最推薦） 維持默認的 2 GB 空間不動（可以免費試用） 伺服器地址選擇 Singapore（新加坡離台灣使用者比較近） 完成之後按右下角 LAUNCH NOW 進行安裝。 WordPress 安裝 當看到以下畫面時，就是Cloudways已經自動在幫我們建立主機伺服器與安裝 WordPress 軟體了，實際等待時間為 5~7 分鐘。 會顯示 Adding Server .. 等它跑完。 安裝完成之後，我們就可以前往剛架好熱騰騰的 WordPress 網站了： 選擇將 SERVERS 按鈕 切換成 APPLICATIONS 介面，並點擊 WordPress 區塊。 來到這邊就是我們主機裡 WordPress 的管理介面，點選下圖藍框處的連結就可以前往 WordPress 後台。並請利用此處的帳號密碼進行登入。 點選 WordPress 後台的登入網址 這邊就是 WordPress 網站後台登入口，輸入帳號與密碼即可。 成功進入到我們剛架好的 WordPress 網站後台啦！ 大功告成！如此一來我們的 WordPress 網站就架設好啦！恭喜！！😊 切換網站語言 如果對於英文比較難適應的同學，可以在 Settings > General > Site Language 的地方，將語言切換成繁體中文，然後滑到網頁下方 Save Setting 儲存。 這樣就可以在全中文的 WordPress 網站後台進行探索！ 正式啟用主機伺服器 而如果三天之內我們的 WordPress 網站還使用的習慣，記得要回到Cloudways升級我們的帳號（原本是免費試用帳號）。 如果不小心過了試用期，則還需要另外重建 (Restore)伺服器，多一個步驟。 點選Cloudways上綠色的按鈕：UPGRADE MY ACCOUNT 輸入信用卡相關資料。 而 Biling Details（帳單資訊）需要使用英文填寫，若不知道通訊地址的英文，可以到中華郵政全球資訊網-查詢專區進行查詢，且 Phone（電話）要加上國際冠碼噢！例如說 0986543210 要變成 +886986543210。 之後每個月會依照我們的網站主機使用情況進行扣款，而如果已經申請購買好了網域名稱，也可以在Cloudways上進行對應設定。 網站架好後下一步 好啦，這樣就完成我們的 WordPress 網站安裝了，整體操作流程應該僅需 10 分鐘左右，超快！ 而接下來要做的，就是一步步建構出我們的網站，以及生產頁面內容，還有持續最佳化與維護網站等等。 這些關於設計與開發上的的技巧，我們會在之後的專題攻略與文章內容上聊到更多，今天就先將網站架起來就可以了～這是最重要也是對大多數人來說最困難的第一步！如果你對相關主題有興趣，可以持續訂閱我們網站的電子報，或是追蹤相關社群媒體平台噢～ 對了！剛架設完我們的第一個網站，我想也稍微聊一下通常來說網站的製作上的流程都是怎麼進行的。 一般架設網頁需要哪些人手 一般最簡單的配置就是設計師 + 工程師。 👩🏻‍💻 設計師 主要負責畫出網頁的設計稿，調和配色、排版等視覺，與規劃流程、動線等，然後交付給工程師進行開發。以前叫做網頁設計師，或網站美編的工作，在現代由於專業領域分工的關係，我們習慣用 UI/UX 設計來稱呼，以強調此網站更注重使用者為核心的體驗與設計。 👨🏻‍💻 工程師 主要是將設計稿給還原做成真正的網頁，撰寫前端語言 (HTML5 + CSS3 + JavaScript 等)進行開發，並搭配後端程式 (在 WordPress 中是 PHP) 進行協作。不同的網頁框架會用不同的程式語言開發，除了 WordPress 之外，還有像是 Bootstrap、Laravel 以及 Joomla! 等。 除此之外視數位產品的規模，可能還會有更多角色加入，像是 UI/UX 設計師、前後端工程師、專案管理以及視覺設計師等等，做網站已經是個成熟且專業的領域，但如果我們只是要架一個簡單的網頁呢？我們可能在創業初期人手不多，或只是個人興趣想練習，有更適合的做法嗎？ 其實透過 WordPress 一個人也能架 WordPress 是款開放原始碼軟體，全世界都有開發者與設計師替其貢獻佈景主題、好用外掛或是本地翻譯，且根據統計共超過 1/3 的網站是用 WP 進行製作，仰賴社群維護的專案在資安上也更安全些，重點是 WP 發展至今已經不像以前那樣需要透過複雜的安裝流程，讓我們更可以著重在網站的設計與使用者體驗上。 聽起來是不是很令人感到興奮呢 😎 邀請你一起加入我們用 WordPress 製作網站的旅途～ 我是 Riven 我們下次見囉，掰掰！ 對WordPress 課程有興趣的大家可以點擊右方連結，了解完整內容➢http://go.sat.cool/3emm3u

嗨囉，我是設計師 Riven 🙂 歡迎回來！ 在上一篇《10 分鐘架設好 WordPress》的文章中，我們已經將網站主機連同 WordPress 軟體都安置好了，恭喜你已經踏出最困難的那一步！ 那麼接下來就是要正式開始操作我們的 WordPress 網站，在最一開始總有些該做的事情等著我們去做，勤勞一點做完這些步驟，會對之後架站過程有很大幫助的～ 架站完成後的網站排版、美感設計、後台管理、網頁流程是決定網站成敗的重要因素。 想了解更完整的架站撇步，可以參考我最近開設線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】。 點擊右方連結，了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u 而為了寫這篇新手適用的教學文章，我重新辦了新的帳號，刷了卡續約主機還申購新的網域，並將過程詳實一步步記錄下來，照著做保證可行噢！！ 架設 WordPress 網站可以到Cloudways進行申請帳號及購買。 如果上次架好網站後，不小心將瀏覽器的分頁關掉了，可以再按照上面這篇文章的步驟，重新回到Cloudways並登入帳號，然後於後台介面的左上角選擇 Applications 並點選 WordPress 應用程式，接著再次登入進去 WordPress 網站，方能銜本篇文章接下來內容。 本篇文章截圖皆以繁體中文介面呈現，若網站仍是預設的英文，可以到後台的 Settings > General > Site Language 更換語系；另外相關步驟截圖皆是以電腦瀏覽器大小為主，建議使用電腦閱讀，用手機看會太小啦！ 認識 WordPress 控制後台 進入 WordPress 後台後第一眼看到的就是這個控制台，有一些基本的初始操作步驟可以跟著做，而隨著網站經營時間久了，我們之後可以隨時回來這裡進行基本的網站保養（管理）。 剛開始還很空的 WordPress 控制台介面 靠近左側一排的功能區域很簡單易懂，基本上稍微摸個一兩下就可以搞清楚了，下面我們條列一下主要的功用，大家之後邊操作就會邊熟悉了： 控制台日後可隨時回來進行網站管理、軟體更新的面板，並可自定義想要看到的資訊。 文章只要是想在網站中新增、撰寫文章都要來到這裡，也可進行編輯或分類等操作。 媒體乘載這個網站中圖片、影片的存放地點，也可進行批次上傳與刪除等動作。 頁面等同於網頁；想在網站中新增或編輯任一網頁，都要在這裡進行噢。 留言可管理網站體內的 WordPress 系統留言，但在台灣其實串臉書留言更實用。 外觀主宰網站的樣式介面設計，可以進行基本的內建設定與通用頁面的基礎排版。 外掛WordPress 殺手級功能之一，可以在這邊透過裝載新的外掛來讓網站功能愈強大。 使用者可以在此新增網站的管理員與編輯權限，若有多人管理這個網站時可在此進行操作。 工具可以做它站內容的匯入、匯出以及本站資料的匯出等動作；不過平常用不太到這個。 設定可進行網站基本設定的地方，像是網址、時區、文章連結、媒體預設設置等等。 而隨著網站的外掛 (Plugin) 愈裝愈多，控制後台這邊的選項與功能也會愈來愈複雜；目前剛架設好的初始狀態是最簡單的樣子了。 設置佈景主題 大概對後台介面有個簡單理解後，我們先到外觀的佈景主題，可以看到目前網站所套用的樣式是 Twenty Twenty-One (2021) 最新的 WordPress 內建佈景主題。 之後如果看到佈景主題有更新的提示，都可以順手點一下更新。 然後點選下圖藍框處可以看到目前網站長什麼樣子 嗯⋯⋯看起來有夠陽春的網頁呢 😅 Twenty Twenty-One 是一款能讓使用者使用區塊編輯器盡情揮灑個人想法的佈景主題。它內建多款全新區塊版面配置，能讓使用者在極短時間內建立美觀的內容版面配置，並以通過時間考驗的柔和色彩及令人眼前為之一亮的設計，網站外觀設計能讓內容更加相得益彰。請試試 Twenty Twenty-One 佈景主題，便能看到它將作品集、商務網站或個人部落格提升到新境界。 我們可以選擇繼續使用這個佈景主題，等到網站文章與資訊愈來愈多的時候就，內容才能夠撐起來像個正常的網頁。 而如果之後想要換個佈景主題來做，則可以在佈景主題選擇安裝佈景主題 來找到更多的樣式設計來安裝、套用，這邊看到的多是免費的。 WordPress 上有很多內建的免費佈景主題，但都是簡簡單單的那種。 關於佈景主題的挑選，我們之後會專文探討與教學，這邊可以先選擇預設的內建主題即可。 網站標題命名 剛看了一眼現在網站的樣子後，我們也可以來幫網站命個名稱；同樣在外觀底下的自訂按下去就可以找到設定的地方。 （右圖）此處選擇網站識別展開 我們就可以在此處更新上網站標題、網站說明的文字，這會影響使用者在瀏覽器上看到的實際資訊噢！試著想個完整又有創意的網站名稱吧。 同時，這邊也能夠上傳圖片做成網站圖示，就是瀏覽器分頁上的小圖，專業術語上叫做 Favicon，建議是 512×512 尺寸的透明背景 .png 縮圖。 發表第一篇文章 回到 WordPress 網站後台，我們來新增第一篇部落格文章吧！在控制台點選文章就可以找到文章管理的介面，接著我們點選新增文章。 進入文章編輯器後，就可以直接開始撰寫文章的標題跟內文了，在本站中看到的每一篇文章也都是在這邊直接敲打而成的哦～ 而目前 WordPress 採用區塊編輯器的設計，可以用模組化的方式來編輯文章排版，比如說標題段落、放置圖片、引文樣式等等，算是很友善的寫作環境噢！ 順帶一提這編輯器其實是最近更新後才好用很多，以前的 WordPress 文章編輯器之難用，真的寧願在 Medium 寫好再複製過來欸⋯在 WordPress 教學文裡這樣吐槽是對的嗎 若寫作完成後，就可以在右側面板中選擇先預覽文章，或直接發佈文章，以及還可以設定精選圖片（連結縮圖）與設定永久連結（文章網址）等等動作。 建立第一個網頁 通常來說一個「網站」會由數個「網頁」所組成，而透過 WordPress 控制台的頁面我們可以來新增與編輯網頁。 而就跟新增編輯文章一樣，我們可以透過 WordPress 內建的區塊編輯器來製作網頁，將一個個內建好的區塊模組放進去，就能夠逐步建構出網頁上的內容。 對WordPress 課程有興趣的大家可以點擊右方連結，了解完整內容➢http://go.sat.cool/3emm3u

嗨囉，我是設計師 Riven 🙂 歡迎回來！ 繼上一篇《剛架好 WordPress 網站就要做的 10 件事情 (上)》介紹到如何建立第一個網頁，本篇將會繼續分享剩下的五件事情。 “ 最近我開設了一堂線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】。帶領大家重新理解 WordPress 的強大和威力，自由設計、建立個人品牌網站、自媒體部落格、公司形象網頁和作品集等等。 ” 有興趣的大家可以點擊右方連結，了解完整 WordPress 課程 ➢http://go.sat.cool/3emm3u 自定義網站選單 當今天網頁——也就是 WordPress 中的頁面數量變多的時候，就會需要將其有系統地彙整在一起，並放置到網站當中提供使用者進行點擊互動。 我們在 WordPress 控制台的外觀底下的選單可以來新增我們的網站選單(Menu)。 除了能夠將現有的頁面加進去之外，也可以加入文章或自訂的連結（比如說臉書粉專）；而在選單項目都新增完成之後，也要勾選底下的「主要選單」才會正式被網站認作要使用的網站選單噢！ 新增選單項目完成後，要記得儲存選單。 再次回到網站前台（點擊左上角的網站名稱）就可以在網站上方看到剛新增的選單出現了。 運用小工具擴充側邊欄與頁尾 打開外觀>小工具，這邊看每個「佈景主題」的差異不同，會有一些可自定義欄位可以使用，像是本站文章右側的側邊欄，就是以 WordPress 小工具排列而成。 而如果是這篇文章示範所用的 WordPress 2021 內建佈景主題，則會有「頁尾」（如下圖）可以操作，在專有名詞上就是所謂的 Footer 啦，也就是網站最下方的位置。 左邊的小工具都可以手動拖移至右方排列 在這邊放上內容（文字、圖片或標籤雲等）後儲存，網站最下方就會出現了！ 自訂網域與傳輸安全協定 如果今天已經看這個 Cloudways 提供的臨時網址不順眼，覺得網域太長太醜的時候～就是我們要來自訂網域的最好時間點了！ 不過如果還沒有申請自己的網域，請先去像是 GoDaddy 這類的域名供應商購買，然後進行紀錄的指向設定；在那邊找到 DNS 管理的地方，然後新增一筆 A 紀錄，如下圖輸入 @ 跟指向到 Cloudways 的 IP 就可以。 如果過程卡住可以參考以下兩篇說明： How Do I Take My Website Live from Cloudways? Creating an A Record: GoDaddy 確認擁有網域之後，回到Cloudways登入帳號後台，選擇 Applications > Application Management >Domain Management，就可以找到輸入網址的地方。 輸入網址後 SAVE CHANGES 接著馬上就可以看到我們的網站網址更新成功啦！連後台登入網址也會變噢！ 登愣！！這樣網站的網址就成功完成對應啦～🥳 是不是很簡單呢！ 緊接著，我們順便來處理 https:// 傳輸安全協定，這個步驟建議在網域設好之後立即進行，這樣以後麻煩事會少很多..（留下年輕時不懂事的淚水😢 很多網站的網址列會顯示紅色的鎖頭或是「不安全」，這是由於該網站尚未取得 SSL 安全憑證，也因此網址只會顯示 http://..，而不是 https://..。 要搞定這個任務也滿簡單的，我們一樣回到Cloudways登入帳號後台，選擇 Applications > SSL Certificate >SSL MANAGEMENT，就可以看到以下畫面，接著輸入信箱與剛設定好的網站網址就可以了。（憑證種類保持 Let’s Encrypt 不變） 輸入好後按下 INSTALL CERTIFICATE，等待一段時間後，回到網站後就更新好憑證了。 登愣！！我們的網域成功變成 https:// 開頭的安全網址啦～😎 輕輕鬆鬆 ● ● ● 媒體圖片尺寸設定 我知道這時候大家可能都等不及要去進一步裝飾跟整修網站ㄌ，但我們的網站後台還有一些枝微末節的小事情要去做。 回到 WordPress 網站後台，選擇設定>媒體這邊，將所有裁切數值霸道地改成 0，最下面上傳檔案的預設年份與月份也要取消勾選，然後按下儲存。 這個步驟除了是不要讓媒體庫多一堆自動產生的圖片尺寸，同時也是防止網站自動在手機、平板等較小尺寸裝置上，使用了較小張的圖片，因為這會讓像是 iPhone 這樣有 Retina 螢幕的手機上，圖片顯示起來會感覺糊糊的，可能路人看不出來啦，但在設計師眼中這個網頁跟打了馬賽克沒兩樣。 而照年份與月份命名資料夾，則會有可能讓之後搬家的時候，造成新檔名遺失路徑的問題，會造成非常大的麻煩與重工。 因此這個步驟算是稍有經驗的 WordPress 架站者會知道的，畢竟以前都吃過很大的苦頭呢⋯⋯ 安裝資安防護外掛 最後一個步驟，也是很重要的架設技巧！現在網站掛在線上難免都會遭受到許多機器人攻擊，可能是重複造訪網頁、刷惡意留言或試圖攻擊管理權限等等，那一般網站架設新手哪懂得資安防護呢？這時候可以仰賴好用的外掛。 WordPress 上有許多實用的外掛可以安裝使用。 我們可以在 WordPress 控制台 >外掛>安裝外掛的地方，輸入 Wordfence Security 來找到這款外掛(Plugin)，安裝後啟用就可以自動減輕網站的安全負擔，並會告訴你許多要注意的地方。 耶！恭喜你 👏 完成架設好 WordPress 網站後基本的步驟了，第一次跑這些流程的時候會稍微卡卡的，相當正常哦！等架過幾次網站經驗後，這些步驟都是很順手就能夠完成的，以本篇文章實際的架站過程來說，大概也不用 20 分鐘就能全部完成了。 這些事情有點像是在市場買了新鮮的魚，回家後要先用流水洗淨，再將魚皮剝除，還要清理魚肉雜質等等的料理前置步驟，有點瑣碎但對於後面的環節來說是相當必要且關鍵的。 而接下來呢，就是要開始著手建置網頁的內容與設計了，要將現在看起來比陽春麵還陽春的網頁徹底大改造！！ 好啦，今天的內容就先到這邊，如果想要看到更多相關教學，可以訂閱本站設計攻略電子報，或是到 FacebookRAR 設計攻略按讚追蹤噢👍 同時，也歡迎到我們新的 Facebook 社團WordPress 網站設計攻略討論區發文討論與交流，裡面也會不定期發佈相關設計教學噢～ 我是 Riven，我們下次見啦～掰掰！ 對WordPress 課程有興趣的大家可以點擊右方連結，了解完整內容➢http://go.sat.cool/3emm3u

嗨囉，我是設計師 Riven 🙂 當我們今天已經成功架設好 WordPress 網站，並已經做好基礎的前置處理，下一步就是幫自己的網站選個喜歡的佈景主題 (Theme)，選到適合的主題除了可以讓網站更有設計感，同時也能加速網頁製作的流程。 佈景主題是進入網站第一眼的視覺感受，也是決定網站品牌好感度的第一印象。 想知道如何以視覺化的方式製作出高質感的網站嗎？ 我最近開設了線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】。 點擊右方連結，了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u 為什麼要使用佈景主題 套用佈景主題的概念有點像是使用模板，在網站的技術世界中，使用模版（或稱套版）是相當常見的事情，不過比起其他設計領域的模板，WordPress 的佈景主題由於其可拆解性與高客製程度，我們可以透過它來變化出不同外觀的網頁，而不是單純套套模板而已。 只要平常累積足夠的佈景主題使用經驗，熟知不同產業與客戶需求適合使用上哪個 Theme，在做網站案子的時候就會超級快！🥳 因此大多數網站接案者，應該都曾經買過不少 WordPress 佈景主題，經驗愈多、踩過愈多雷的設計師，在製作網站的技巧上就愈純熟。 使用佈景主題在網站上，有點像大學生選科系那樣，選到適合的主題就能夠有更舒適的開發環境、更好的設計體驗，在 WordPress 控制台中也能夠享有更完整的系統可以輔助你完成想要做的網站；而如果中途想要反悔，也不是不行（甚至切換操作相當簡單），但就是換主題的過程中會遇到很多困擾，同時也會有很多頁面、設定需要全部重來，曠日費時～ 使用適合的佈景主題架設 WordPress 網站能夠事半功倍。 如何幫網站選擇適合的佈景主題 雖然說 WordPress 本身就有相當多的免費佈景主題，但那些就我看來都有點過於簡陋，僅具備簡單的介面與功能，當然如果是無慾無求的佛系站長應該可以接受⋯⋯但一般來說，不論你是要架設個人網站、商業形象網站，或是經營部落格等等，都建議需要安排一筆預算，來購買網站付費佈景主題。 那至於佈景主題怎麼選擇？有哪些要注意的地方呢？我們接著看下去： 設計風格 佈景主題的外觀視覺通常是首先會注意到的，所以我們可以預覽一下佈景主題的介紹頁面，通常會被吸引到的都是「這就是我想要的風格！」——不過，這邊建議可以找找看有沒有套用這個主題的相關官方 Demo 範例，看多了通常能夠抓到更精準的主題設計風格，而延續這樣的感覺去改造成自己想要的網站，就會比較輕鬆～ 佈景主題廠商的範例網站有很大參考價值。 忽略圖庫 而在逛佈景主題的時候，有個要邊看邊注意的地方就是，這些範例網站都是使用精美的圖庫照片，比如說滿版的背景、好看的人物肖像、精緻的食物攝影等等，但到時候做網站是要幾乎全部換掉的！可以先腦補一下如果換成自家產品或自己的照片，是不是一樣能有相同的視覺效果。 如果已經有嘗試過在網站上換圖檔的話，會發現有許多 WordPress 的佈景主題都是用照片撐起來的！實際上的排版與設計並沒有成品照那樣好看；但另一方面往好處想，這些讓你心動的範例，也是個不錯的設計參考，也許只要照著去準備相關的網頁素材，比如說找專業攝影師幫商品進行整組商攝，或是找一天去拍個專業感的個人形象照，再來置換網頁模版的圖片，就能夠達成類似的效果了。 要做好一個好看的網站，這些「現實世界中的準備」都是需要且重要的噢！ 佈景主題採用的照片都具備高質量。 字體鋪陳 而除了照片之外，很多新手同學在選擇 WordPress 主題上也容易有個盲點，就是被英文字體牽著走，有許多人架設網頁的時候，會發現套版的主題怎麼換了中文字就崩壞，就是這個原因。 不少佈景主題由於都是國外的公司販售，皆是以英文的文字做呈現，但英文其實有相當多網頁字型能夠選擇，要知道這些字體都是有情感在裡面的，有氣勢滂礡的、可愛嬌貴的、優雅氣質的等等很多！那這樣帶有情緒的字體在網頁上，不只是很加分而已，甚至能夠主導網頁的視覺設計。 所以在看佈景主題的時候，也要稍微想一下如果這邊換成中文會怎樣、那邊換成自己公司的文案會長怎樣，因為到時候是真的全都要替換的；而如果還是喜歡該主題的風格，到時候也能夠認真找找有沒有合適的「網頁字型(Webfont)」可以購買使用，就能夠達成相似的感覺了。 網頁字型在網站排版中佔比非常高。 開發彈性 而除了看看套版主題的現成外觀設計之外，我們也得注意一下各主題的客製彈性，有些主題寫得很死，雖然樣式好看，但要改一些東西完全改不了，甚至找半天都不知道去哪裡設定；真要說的話可以用如 CSS3 這樣的前端語法去硬改，但那樣就會麻煩很多，而且對架站新手來說需要相當多的學習時間。 而現在很多主題都有提供好操作的介面可以用，能夠輕鬆將網頁改成自己要的樣子，可以的話盡量找到這些開發彈性高的佈景主題，從排版、字體、顏色到功能面都可以自訂的主題就很棒～ 現在的 WordPress 功能非常完整，跟過去不同了。 運作效能 而綜合以上幾個選擇條件，也許能找到完全符合的完美主題，但其中還是有一些佈景主題在網站中的佔體非常龐大，也就是俗稱的很肥！這會拖垮網站的運作速度，讓瀏覽起來的速度變慢，進而造成使用者的閱覽體驗不佳，需要相當小心。 通常架站的時候，不論是佈景主題 (Theme) 或外掛 (Plugin)，我們在選擇上都很注重會不會給網站帶來過大的負擔，如果過重的話就會再找找有沒有別的替代方案。 同樣都是佈景主題，有些很輕量，有些則重到難以負擔。 而經過以上的 WordPress 佈景主題的條件篩選，加上我自己多年的跳坑、踩雷經驗，我想在這邊跟大家分享與推薦我自己的本命網站佈景主題。 一生推薦的設計感佈景主題 過去幾年花在付費佈景主題的成本大概有十萬以上（包含幫客戶買的授權），其實我大可以在這邊寫好幾個各種佈景主題來擴充文章字數，但實在覺得其他也沒什麼好介紹的，因為在我心目中，是有唯一推薦的最好用 WordPress 佈景主題的，就是Divi Theme。 riven.design 就是使用這套佈景主題進行設計與開發。 當然，這僅是我個人主觀的經驗跟想法，你也可以問問看別人、去 Themeforest 逛逛，或是嘗試看看最近滿流行的 Elementor，但基本上全球熱銷的排行榜前十名我都實際用過了，還是撼動不了Divi在我心中的地位。（*Divi 唸法是”滴V”） 接下來我想跟大家分享幾個推坑推薦的地方： 所見即所得的視覺化編輯 如果你是設計師，或習慣 Adobe Xd 或 Illustrator 等軟體的繪圖編輯，那 Divi 超級適合你的！ 取代要在密密麻麻的程式碼中撰寫網頁，Divi可以透過視覺編譯的方式直接在網頁上拖曳、調整，並附有內建的編輯器，可以直接編輯設定，而且是「所見即所得」也就是即時看到的網頁，就已經是完成的網站了。 幾乎是跟設計軟體相同的操作邏輯，但卻可以拿來做網頁。 便於開發的網頁巢狀結構 在網站開發的過程中，會使用像是 HTML 5 或 CSS 3 等程式語言去架構出基礎雛形，其中「巢狀」就是網頁程式碼中相當基本的形式，可以想像成每個網頁裡都是由一個一個的結構區塊從上而下組成，每個區塊裡面又包裹一層區塊，然後裡面有像是標題、文字等常見的元件。 而 Divi 就是將這樣的巢狀結構視覺化，我覺得這樣超棒的！如果你是熟網頁前端語言的工程師，這樣的設計更符合編譯習慣；如果是網站架設的新手，這樣的排版邏輯相當好理解，在學習上更容易了。 有了巢狀的網頁結構，在編輯與管理上很舒服。 通體舒暢的網頁設計體驗 我覺得Divi是最適合設計師的佈景主題了！主要原因就是：Divi 內建的編輯器，有很多適當且剛好的細節可以處理，能滿足設計師們對於視覺優先的需求。 Divi有很多其他佈景主題較難處理的部分，像是漸層、陰影、圓角等等，都可以透過簡單的介面進行調整，在 UI 介面設計上來說，這些都很基本，也是現代網頁中常見的設計方法。 而就算不是設計底子的朋友，也能夠過這樣具備設計感的佈景主題編輯器，來輕鬆做出好看的網站，整體的視覺效果比起其他佈景主題具有更多的細節。 簡單來說，透過Divi我們可以更容易地把網站做成具備質感與符合現代標準的網頁，如果嘗試過其它佈景主題卻總是做不出好看網站的你，非常推薦試試看！😀 前往購買 Divi 佈景主題 🖥 ✅ 給個小訣竅 看完上面的介紹，是不是很想快點嘗試Divi這個超強設計感的佈景主題呢？我認為這樣的架構設計可以完成 90% 以上的 WordPress 網站需求，因此除了新手拿來練功之外，等熟悉之後使用作為商業網站設計案子使用也相當適合。 在剛開始學習 WordPress 網站的階段，透過佈景主題會覺得更有成就感，帶著這份喜悅會因此愛上架設網站。 而有時候設計師們會去雕一些細節嘛，有些可能 Theme 或 WordPress 本身已經滿足不了你，像是 Webfont、JavaScript 或是 SVG 動畫等等進階技巧，這個時候在網路上查找解法的時候，網站架設實力也慢慢地提升囉！ 好啦，今天關於 WordPress 佈景主題挑選方法與推薦介紹的內容就先到這邊，如果想要看到更多相關教學，可以訂閱本站設計攻略電子報，或是到 FacebookRAR 設計攻略按讚追蹤噢👍 同時，也歡迎到我們新的 Facebook 社團WordPress 網站設計攻略討論區發文討論與交流，裡面也會不定期發佈相關設計教學噢～ 我是 Riven，我們下次見啦～掰掰！ 對WordPress 課程有興趣的大家可以點擊右方連結，了解完整內容➢http://go.sat.cool/3emm3u

嗨囉，我是設計師 Riven 🙂 今天這篇教學會延續上一篇文章所推薦的Divi Theme WordPress 佈景主題，並在網站上來試著用 UI 介面的設計方式來進行實作，我們可以藉此來理解基本的網頁設計邏輯。 Divi Theme 的功能非常強大，不過在製作時，仍需要操作者本身對於設計有一定美感或對於架站有經驗，才能創造很實用又美觀的網站。 最近我開設了一堂線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】，會從使用者的角度發想，帶著你打造出成功的網站。 點擊右方連結，了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u 安裝佈景主題 購買完Divi Theme後，我們可以在 MY DOWNLOADS 頁面看到可以使用的佈景主題與相關資源，但剛開始只要選擇左上角的紫色 DIVI THEME 的部分來用就可以了。 點擊紫色的按鈕 (DOWNLOAD THE DIVI THEME) 來下載佈景主題 接著回到 WordPress 主控台，在外觀 > 安裝佈景主題 > 上傳佈景主題處選擇剛下載的Divi.zip檔案，並按下立即安裝。 上傳檔案後稍等片刻即可。 啟用！ 完成佈景主題安裝！ 認識基本元件模組 而緊接著，我們就可以來搭建網頁囉！先來在 WordPress 主控台的頁面選擇新增頁面，所謂的頁面在這裡指的就是網頁的意思。 而因為我們有購買付費的佈景主題的關係，可以直接跳過內建的 WordPress 頁面編輯器，選擇尊絕不凡的紫色按鈕Use Divi Builder。 此處有三種建立頁面（網頁的方式）由左而右分別是：從頭開始製作、使用現成版型、複製現有頁面。 我們這邊先選擇左邊藍色的 Start Building，從空白頁面開始製作，來熟悉一下 Divi 的網頁設計模組有哪些可以用。 然後要選擇的是 Row 的佈局，簡單來說就是將網頁（橫向）做幾等分的切割，可以先暫選第一個就好，之後都還可以隨時進行調整。 接著會看到的就是 Divi Theme 裡面的模組化元件，我們可以用這些來搭建想做的網頁，可以視為組成頁面的最小單位，可以好好探索玩玩看～ 可以直接搜尋關鍵字來找比較快～ 而其實綜觀網頁的發展歷史，不難發現其實即便到了現在，網頁的都還是主要由文字 + 圖片來構成，並用各種巧妙搭配與創意安排來做出排版與視覺效果。 文字 Text 文字應該是網頁上最基礎也最重要的元件了，透過 Text 模組可以放上文字並進行編輯，不得不稱讚一下 Divi 在模組編輯做的真的是非常好，幾乎是所有 WordPress 佈景主題當中最好用的了！ 在 Content 面板可以更換文字內容 在 Design 面板可以調整文字大小、顏色跟字距、行距等等。 圖片 Image 除了文字以外，網頁的組成另一個重要元素就是圖片了，透過上傳到 WordPress 媒體庫的圖片，可以來豐富我們的網頁～ 可以點選畫面上灰色的 + 按鈕，來新增模組。 可以直接上傳圖片來置換。 套用預設網頁版型 而大概理解了 Divi Theme 元件模組的使用後，我們可以直接來套個已經做好的網頁模板，除了比較能夠清楚完整網頁的架構，也能比較快有製作網頁的成就感～ 我們從畫面底端的紫色（⋯）按鈕展開 Divi 控制列。 然後選擇 + 號，就可以看到 Divi 做好的預設版型。 在這邊任意點選一個預設版型網頁，就可以進去看到許多頁面可以選擇，而每一個都是可以直接套用進來我們網頁的。 這邊以 Web Agency Landing Page 為例。 這邊要先輸入購買 Divi 購買得到的帳號名稱與序號 序號在這邊：https://www.elegantthemes.com/members-area/api （要登入） 接著就會開始安裝了～ 所見即所得編輯器 這樣看起來就是完整的網頁了，接下來就是將文字、圖片等等換成自己要的，就可以快速完成一份網頁了。 套用預設版型網頁完成！ 不過這邊要跟大家講一下上圖中的巢狀結構，先理解這個概念之後會好做很多！ Divi 的頁面結構基本分成最外面的藍色 Section，裡面包裹著綠色 Row，在裡面會包裹著灰色的 Module，一層包著一層。 而裡面所有的模組(Module)都可以進行修改文字、調整樣式等設定，同還也還能夠直接拖曳排版，還有進行複製與刪除等操作。 而且我們也可以直接用滑鼠去變更介面上的間距，來讓網頁的留白空間達到和諧的狀態。 而一開始操作 WordPress 佈景主題，建議可以直接從這樣具備高度彈性的的預設模板去修改，並在調整的過程中，就會對這套主題愈來愈熟悉。 剛開始用肯定都會卡卡的，但我覺得 Divi 這套已經是很好上手的了～ 響應式的設計調整 而在電腦上編輯頁面，雖然使用 Divi 新增元件與調整外觀很方便，但是仍要注意在製作網站的時候，除了以現在正在使用的電腦當作基準外，也要注意其他尺寸裝置的瀏覽體驗，不然會容易造成用較大的電腦螢幕、用較小尺寸的手機或平板的時候，偶爾會出現跑版或顯示異常等等的狀況，這在 UI 設計裡的術語叫 RWD 響應式網頁設計（Responsive Web Design）。 那在 Divi Theme 主題裡面該怎麼處理不同尺寸的網頁編輯呢？相當簡單！只要在左下角的裝置 icon 按一下就可以切換用不同裝置的視角來直接進行調整。 平板大小的觀看尺寸 而上面分別有電腦、平板與手機三個主要裝置為設定基準，我們在分別設定排版與樣式後，這個網站會自動在中間過度的尺寸安排響應變化，以應變現在日趨多樣的螢幕裝置瀏覽。 手機大小的觀看尺寸 比較建議的做法是，先以電腦版進行內容與排版的編輯，然後來回檢查平板與手機的狀況，如此一來可以盡可能地確保在任何裝置顯示下都安全無虞。 ✅ 給個小訣竅 好啦，這樣就是在 WordPress 上進行網頁設計的基本技巧，其實還有很多更深入的方法，但這樣會讓文章變得過長，而且太過複雜會嚇跑很多人～～ 所以就先以基礎的核心內容介紹為主，比較建議的學習方式是以此展開並靠實作練習，過程中遇到不會的地方就是著找找看、實驗看看，然後 Google 逛逛、官方論壇爬一下，就我所認識的大部分 WordPress 站長都是靠這樣磨鍊出來網站製作的技巧的，畢竟不會所有鉅細彌遺的技巧都會白白寫在那邊，網站架設跟設計是很深很深的專業啊！ 噢對了，今年我有規劃製作一堂完整的 WordPress 網站設計線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】，可以提供給大家更友善的架站學習體驗，同時理解設計的基礎方法，如果有興趣的同學可以訂閱本站 設計攻略電子報，或是到 FacebookRAR 設計攻略按讚追蹤噢！之後也會有更多內容釋出 🙂 同時，也歡迎到我們新的 Facebook 社團WordPress 網站設計攻略討論區發文討論與交流，裡面也會不定期發佈相關設計教學噢～ 我是 Riven，我們下次見啦～掰掰！