WordPress.org 網站架設 — 四步上手

設計師通往架設自己網站的道路 — 使用佈景主題 / 使用外掛 / 運用超神編輯器快速建構網頁 / 媒體上傳

何佳泓
9 min readOct 7, 2018

在第一篇裡說到WordPress在2018年在網站上的市佔率已達30%以上,必然有很多人在這網站架設的開發上擁有很多的資源投入,也因此擁有很多的物外掛可以使用,有免費的也有付費的,而這些開發讓往後的設計者能更方便、快速的開發,不用太多的Coding就能建構出很絢麗、美觀的網站,而會Coding的人能在這上面開發出更方便、實用的網站,以不同角度切入都能做出一定水準的網站。不僅擁有來自世界各地的開發者,也擁有眾多的使用者,也因此讓他於網站架設中的地位立於不敗之地。

前兩篇先讓大家能夠做出一個網站的雛形先擁有一個自己的網站,若還沒有架設起WordPress的可以先去看這兩篇:
初出茅廬:WordPress.org 網站架設(一) -自家電腦當網站伺服器
初出茅廬:WordPress.org 網站架設(二) -免費虛擬主機空間架站

再來會快速的講解幾個重點,讓剛起步於WordPress的朋友,能在WordPress世界中開始探索。

以我個人體驗上來說,覺得WordPress最核心的最首要要學會的有四個:外觀、外掛、頁面、媒體 那我們開始依序講解吧!

左側是控制列,在往後載入更多外掛時也有可能會直接出現在控制列中。

基礎一:外觀

外觀中的佈景主題theme也是我們常說的模板,是貫穿整個網站的預設架構,雖然只是是“預設架構”,後方會提到編輯器,而編輯器可以讓你創造更多不同樣式的版型,但擁有一個方便的預設架構可以減少很多開發上的製作成本,所以選擇一個好的佈景主題便是一件很重要的事。

推薦佈景主題:AstraOceanWPHestia

好的佈景主題帶你上天堂,爛的佈景主題讓你改到瘋狂。

在Wordpress設定中一定需要選擇一個主題才能繼續往下,如果刪光了佈景主題你的網頁就會出現error。一開始預設值會是wordpress的初始主題“貳零壹柒”,他每年也都會出新的版型,所以看到這種數字的都是官方出的。

#安裝佈景主題:選外觀 > 佈景主題 > 安裝佈景主題

找到喜歡的主題,按下安裝,就安裝完成了,可以儲存很多個佈景主題在開始時,可以多找一些,找到你適合的後,再把其他用不到的刪掉就好。
右邊有個“預覽”,但不建議在這上面預覽,因為不知道為啥,看到的效果都跟實際上呈現的差很多,如果想看效果,建議是安裝後在即時預覽來看效果。

安裝完後 再按一次佈景主題,就可以看到有安裝過的主題,在這邊可以預覽效果,跟啟用要使用的主題,記得一個網站只能啟用一個主題。

進入“即時預覽”時會發現左側多一排工具列,如果是已啟用的主題要使用這排工具列就進入“自訂”,而這工具列是選擇主題最重要的一個參考指標,每個佈景主題能控制的項目、內容、方式都不同,而付費版的主題能調整的功能也會更豐富些。
工具列最下方的是平台切換,因WordPress有設定RWD,讓在每個平台都能有較好的觀看感受,所以在開發的時候記得每個平台都預覽過,也因為有RWD,所以左側隱藏控制區也適時的開關一下。右邊會時不時出現藍色圈圈,按下去他會帶你去編輯該物件的編輯區。

建議在這邊花點時間摸一下工具列的每個項目,多暸解哪些地方可以調整。#挑選主題的原則
1.與哪些頁面編輯器或外掛做最佳化:(很難直接說出差別,但總體而言,會讓你在開發上更順暢),基本上都會直接寫在主題上,也可以進他們的官網去暸解看看他們主題的優勢。
2.左側工具列的靈活性:這就在測試時感受一下,看在靈活性上是不是你要的。
3.是否有額外的插件或主題支援:如果有支援表示改動性以及開發速度上也比較快些,例如:Astra主題 就會有Astra Starter Sites 的外掛,裡面有他開發的一些主題款式可以選擇,及預覽,而這邊的都是用Astra及編輯器做成的,所以你也能比較知道在這個主題下你能做出什麼樣的效果。

Astra Starter Sites 畫面

4.使用率:用“較熱門、更新頻率高、下載次數高”的主題,相對比較安全。

基礎二:外掛

外掛是WordPress最大的亮點之ㄧ,讓你快速架站的一個關鍵,在上面找到你需要的功能外掛,用組合的概念,蓋出你的網站!之後會再寫幾篇關於不錯的外掛的介紹。

#挑選外掛的原則:(其實跟挑主題很像)
1.盡量用“較熱門、更新頻率高、下載次數高”的外掛,也是一樣避免病毒、外掛問題造成你的網站死掉,安全性真的很重要。
2.留下用得到的外掛就好,可以多方嘗試幾種外掛,但測試完不適用就把它關掉,盡量避免開著一些雜七雜八的外掛,很容易拖慢整體的速度跟漏洞。

#安裝外掛:外掛>安裝外掛>輸入要找的外掛名稱>立即安裝 > 啟用

#啟用外掛:外掛>已安裝外掛>找到你的外掛>啟用

#額外補充 如果在安裝過程中,按到其他的標題跳掉,導致進不去頁面的時候,將這個新加入的外掛刪除重新整理應該就可以恢復了。
外掛都存放在的地方在 根目錄/wp-content/plugins

基礎三:頁面

頁面是整合網站各個分頁的地方,可以編輯頁面、新增頁面
#新增頁面:頁面>新增頁面>輸入頁面名稱> 發表 > 自動產生頁面網址

在初始模式的編輯模式中就是在一個框框中填入你的內容,但因為太難使用,所以這邊我們要安裝超神頁面編輯器加速編輯效率及提升美感。

原始空蕩蕩的頁面編輯

這邊真心推薦兩大超神編輯器:ElementorBeaver Builder

Elementor
Beaver Builder
安裝其中一個頁面編輯器外掛,安裝方式參考”基礎二-外掛”

安裝後就會在頁面編輯的地方出現“使用Elementor編輯”

左邊是視覺化模組的工具列,要用的時候就把他拖拉到右邊的框框中就可

右側的架構,是讓排版有一定的規則,會更方便編排,及更好設計

這個是選擇分兩格的架構 ,大框架中間又分兩格小架構

版型庫中有分區塊跟頁面,一開始還不知道該怎麼製作的時候可以參考這些模組,插入使用,也可以參考他們怎麼製作的,等更了解熟悉後便可以自己創造版型,然後使用自己做出來的版型。

基礎四:媒體

除了文字以外都算需要額外儲存的都可以存為媒體,而主要分類有圖片、聲音、影片,而建議在主機裡只存放圖片跟聲音就好,影片建議是用第三方網站遷入(例如youtube、vimeo…),可以減少你的主機的儲存量,增加載入速度。

#新增媒體:媒體> 新增檔案 > 選擇檔案
在下面紅標的地方有寫單一個檔案的上傳大小上限,這個通常跟主機商或主題有關,雖然可以解除上傳檔案的限制,但這邊要提醒大家,建議上傳的東西都處理過後再上傳會比較好,檔案大表示頁面的loading重,如果loading太重也會影響到整體網頁預覽速度。

#解除上傳大小限制方法
在 根目錄 找到.htaccess的檔案(如果你的根目錄裡面沒有這個檔案就自己新增),在裡面加入以下程式碼,加好後回存重新整理就OK了。

php_value upload_max_filesize 100M
php_value post_max_size 100M
php_value max_execution_time 300
php_value max_input_time 300

目前是設定設定成100M 如果要改更大 就把upload_max_filesize跟post_max_size調更高。
回存後重新整理,上傳大小變100MB

這時就可以比較沒有限制的上傳的~但記得每個上傳的檔案都要處理過會比較好歐。

上傳完的檔案在 媒體 > 媒體庫,預設值會幫你用月份來分類。

預設年月份來分類

以上四個步驟都學完後,你學會了….
如何使用主題 / 如何加入外掛 / 使用超神編輯器快速建構網頁 / 媒體上傳

再來換你上路了~開始用Wordpress建構屬於你自己的個人網站吧!

--

--

何佳泓

從設計的角度擁抱程式,走進互動世界