回專欄首頁

01. 為什麼要用 WordPress 架設網站?

到了 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
2021/04/07 1367

02. 製作網站前需要做好哪些準備?

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

03. 10分鐘架設好 WordPress 網站 (主機購買與安裝教學)

嗨囉,我是設計師 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
2021/04/07 636

04. 剛架好 WordPress 網站就要做的 10 件事情 (上)

嗨囉,我是設計師 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
2021/04/07 890

04. 剛架好 WordPress 網站就要做的 10 件事情 (下)

嗨囉,我是設計師 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
2021/04/07 419

05. WordPress 佈景主題實用推薦指南

嗨囉,我是設計師 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
2021/04/07 290

06. 如何在 WordPress 上設計網頁

嗨囉,我是設計師 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,我們下次見啦~掰掰!
2021/04/07 1016