WordPress基礎教學:26個主題(安裝+主題外掛,附有5.0古騰堡編輯器說明)

這篇是寫給我的客戶以及希望利用Wordpress來架設官方網站的朋友,如果你希望進一步架設購物網站,那麼還需要進一步了解WooCommerce這套半官方的Wordpress插件(Plugin)。 WordPress安裝,號稱是幾分鐘之內就可以完成,對於所有的網站開發者而言,這確實是快速而完善的一套成熟系統。我所見過的許多網站開發者所設計的後台(包含我自己) ,都遠遠不及於WordPress的設計理念。

這篇文章所示範的是wordpress4.9以前的版本;wordpress5.0以後,因為推出了新的編輯器,新增文章、頁面時的操作介面與傳統編輯器有很大的差異,若讀者所安裝的版本是5.0,那麼在發表文章、頁面、媒體等操作步驟時,可以切換到其他說明文章。其他主要功能則沒有差異。

如果你問到「如何安裝WordPress?」、「WordPress為何可以用來架設企業網站」、「WordPress強大之處」,那麼本文可以簡單作一個回答。從Wordpress的安裝到簡單操作,將讓你體驗這套系統的強大之處。

對此,我在以下26個主題,示範如何進行準備工作、架設WordPress網站、設定網址格式、決定網站樣式(長相)。你將學會如何安裝WordPress,並了解初學者應該要掌握的基礎功能。

01.架設網站前的基本工作

在開始架設Wordpress之前,有幾個基本工作需要先進行準備,這幾個工作不難,難的是選擇,主要就是價錢與成本的問題,簡單說是cp值。

這幾個基本工作依照順序步驟如下:

  1. 註冊網域(申請一個路標)
  2. 租用主機(租一間房子)
  3. 設定DNS指向(把路標指向房子所在的地址)

本文依照Wordpress初次使用者,簡化這三個步驟牽涉的各種因素,提供網友參考。

註冊網域(申請一個路標)

常見的網址有com、org、com.tw、org.tw、idv.tw、tw….,這些網址可以在很多網站進行註冊,在臺灣有以下:

在國外,則多不勝數,網路上google後可以找到很多。多半主機租賃業者都會同時提供網域申請,不過若你想註冊的網域有.tw,那通常需要選擇臺灣的註冊網站。

挑選域名的建議:

適合的域名:若您是打算用來作商業活動,那麼.com、.com.tw、.tw都是比較適合的。.com由於是最早的域名,相對便宜,但通常想得出來得好網址幾乎都註冊完畢。.com.tw需要營業登記的資料,.tw則是台灣的網域。若您有社團法人等非營利組織的證照,那可以申請org.tw。對於個人,我則建議找便宜、常用的網域即可,若內容以中文為主,則.tw即可,若想面對兩岸,國際化的域名更佳。

關鍵字:域名和你的品牌名、公司名、服務內容最好相關,可以強化關鍵字。

簡短:域名應好記、好打,勿用數字和橫線(-),數字或是手機號碼其實並不容易記憶,除非是親人或至友,一般人也不會特別去記一組手機號碼。

租用主機(租一間房子)

主機是用來放置網站的檔案,他可能位於世界上的某台連上網路,且24小時不關機的電腦。考慮成本因素(24小時不關機電力、機器購置、頻寬、管理人力),一般企業大多不再自架主機,而是選擇租用主機。提供主機租賃的業者依據規格訂出很多種類型的主機,初次架設Wordpress網站的朋友可以跳過,只要考慮以下幾種方案即可:

  1. WordPress主機:主機廠商為wordpress特別優化的產品規格,通常會在安全與一些配置上作優化,價格通常略高於虛擬主機。海外的產品選擇較多,台灣本土廠商較少推出特別針對wordpress作優化的主機。
  2. 虛擬主機:通常可以安裝各種網站,也具備網頁、資料庫、郵件等各項功能。常見的虛擬主機操作介面系統有cpanel與plesk兩種,部分廠商會自行開發自己獨有的介面。Wordpress需要安裝在Linux系統的虛擬主機,選擇非常多,大致可以從台灣本土與海外兩大類別選擇。
  3. WordPress.com:由wordpress官方企業提供專用於wordpress系統的方案,無需安裝,只需要申請帳號、付款、設定網址即可。不能安裝其他系統,也無法微調各種功能。方案有四種,從每月免費到每月799元。

若你是部落客,建議可以在Wordpress.com註冊帳號,申請免費的進行試用,如有需要再升級為商用版本(每年9588元,不便宜,但能享有來自Wordpress.com的部分隱藏流量)。若你是商業需求,那麼必須考慮的是是否確定只在主機上安裝Wordpress系統,若是,則可以選擇Wordpress主機或是虛擬主機;若可能在主機上安裝其他系統,則應該從虛擬主機方案下手選擇。

針對Wordpress優化的主機,仍然以海外廠商擁有較多的經驗,這些廠商並未公布到底在主機做了哪些微調,因此優化程度不得而知。
若你已經熟悉Wordpress,或是為了更好的效能想要為網站搬家,那麼一些提供雲主機架構的業者,也是可以選擇的方向。

選擇主機的幾個因素

主機位置:選擇最接近市場的主機。以台灣而言,常見的市場約有台灣本土、兩岸、東亞、歐洲、美國、全世界等。若網站主要是繁體中文,那選擇台灣本土與東亞(通常有東京、香港、新加坡)應該是最好的選擇。

主機效能:以主機硬碟空間、每月流量來區隔產品其實無法代表主機的實際效能,但如何比較出主機效能較快其實是非常困難的工作,因為有太多可以隱藏的作法能夠蒙騙一般消費者。

價格:海外主機通常比臺灣本土廠商的主機便宜,虛擬主機比vps主機便宜。價格從每年1000元到10000元之間,但可以說一分錢一分貨。若你考慮從海外租賃主機,那麼你可以評估這三家,他們取得WordPress官方評比的優異成績

Bluehost-sm
GreenGeeks-sm
Siteground-sm



評價與客服:這兩項是見仁見智的因素,若您不是熟悉程式、主機與英文,海外主機的客服很可能與你無關,但這兩項卻不是能夠輕易忽略的評估因素,因此最好的方式還是多瀏覽實際評價,剔除有負評的廠商,畢竟主機提供廠商多如牛毛。

設定DNS指向(把路標指向房子所在的地址)

IP位址(例如103.51.101.100)是網路世界的門牌號碼。每個網站都有一個IP位址。但一個IP位置可能有很多網站共用。

DNS(Domain Name System)就像是網路世界的地址簿。它把域名轉換成IP – 網友只需在瀏覽器輸入域名,就能造訪喜歡的網站。

當你購買了主機後,主機廠商將提供主機的IP以及NAME SERVER,通常NAME SERVER會有兩組,將NAME SERVER填入註冊網址的管理介面,就能完成DNS指向。

更改後的DNS指向,理論上需要24至48小時繁衍,以「同步」全球的DNS伺服器。但實際上,可能只需幾小時(甚至幾分鐘),新的DNS設定就會見效。

如何查詢是否生效?很簡單:在瀏覽器輸入你的域名。若出現主機商的預設頁面,新的DNS設定即告生效。

02.選擇適合你的安裝WordPress方式

安裝WordPress有很多方式,主要有:

  1. 虛擬主機的一鍵安裝
  2. 全手動安裝
  3. 主機指令安裝

一般網友會接觸到的應該都是前兩項,會第三種方式的朋友應該不需要來閱讀本文。本文介紹完整的安裝方式:全手動安裝;至於大部分虛擬主機都會內建的一鍵安裝,可以在租用主機後自行嘗試。
如果你已經準備好網域、主機等,接下來以下,你將學會如何在虛擬主機「全手動安裝」WordPress。

首先必須準備

  1. WordPress軟體:前往下載
  2. FTP軟體:如FileZilla、WinSCP、Cyberduck
  3. 虛擬主機的帳號、密碼

首先到WordPress.org下載軟體:

下載的是一個.zip壓縮檔。解壓縮後,你會有這些檔案:

再來安裝FTP軟體。在此使用FileZilla作為FTP軟體。FTP(File Transfer Protocol)是檔案傳輸協定的意思。FTP軟體,能讓你批量上傳 / 下載伺服器的檔案。網路上可以找到免安裝版,因為官方載點有時會有廣告。

打開FileZilla軟體後,進行基本設定,這時候需要虛擬主機的帳號與密碼。
這是FileZilla軟體的主畫面,右邊是遠端FTP主機的目錄,左邊是本地電腦的資料夾

設定ftp連線的資料,依照1、2、3輸入相關資料,這些資料虛擬主機會提供。

FTP一直是近三十年來最廣泛的傳輸協定,但是它並不提供安全連線。Secure File Transfer Protocol(安全檔案傳輸協定,簡稱 SFTP)使用了安全連線來傳輸檔案與密碼,因此如果可以,盡量改用 SFTP。大多數的虛擬主機商有提供 SFTP 連線的支援。

連接虛擬主機後,把之前下載(並解壓縮)的WordPress檔案和資料夾「全選」,然後拖曳上傳至虛擬主機的「public_html」資料夾。其他雜七雜八的資料夾… 請忽略!public_html是唯一存放網站的資料夾:

在少數主機商會以 www、public 或 web 來命名(public_html)。

03.建立資料庫

接下來的步驟是建立資料庫,並與你上傳的WordPress資料建立連結。
建立資料庫時,請先登入虛擬主機。常見的虛擬主機有cpanel與plesk兩種介面,部分虛擬主機廠商則會自己開發管理介面。
在此以cpanel來作說明,其他操作介面大同小異。

這是cpanel登陸後的主畫面部分,功能與樣式大同小異。

建立資料庫的方式

建立資料庫主要有四個步驟,分別是建立新的資料庫、新增使用者、新增使用者到資料庫以及設定權限。分別如下圖

建立資料庫的方式

在主機完成資料庫相關設定後,請務必記住資料庫名稱、使用者名稱以及使用者密碼,在接下來的步驟中將會使用到。

04.安裝WordPress

wordpress安裝流程畫面

在開始安裝之前,請確認你的網域是否生效。若已生效,在瀏覽器輸入你的網址,你將可以看到WordPress的安裝畫面。

wordpress安裝流程畫面

接著,填入資料庫那些資訊。「資料庫主機位址」維持 localhost 不變(有些主機的資料庫與網頁分開,這裡就必須要依照主機指示填入資料)。

WordPress是市佔率最高的開源軟體。駭客常會對WordPress做大規模的SQL Injection攻擊。若把資料表前綴(Table prefix)的 wp 改成其他字符,可預防這種大規模攻擊。

有時候,部分主機會因為目錄權限的緣故,導致安裝系統無法產生一個wp-config.php檔案,並寫入資料庫相關資訊,這時後你可能需要透過ftp進行手動設定。就如安裝提示的描述:

wordpress安裝流程畫面

我們會使用這些資訊來建立一個 wp-config.php 檔案。 如果因為某些原因而導致自動建立檔案無法運作,別擔心。你需要做的是把資料庫資訊填入設定檔。你也可以簡單地在文字編輯器開啟 wp-config-sample.php,填寫你的資訊,並將其儲存為 wp-config.php。

安裝完畢後,請記得將wp-config-sample.php刪除。若用手動進行wp-config.php建立,請參考其他文章介紹。

wordpress安裝流程畫面

點擊「執行安裝」。

接下來填入使用者名稱、密碼、電子郵件,這些是你登入WordPress後台所需。登入的角色權限是「管理員」。

wordpress安裝流程畫面

暫時先勾選「阻擋搜尋引擎索引這個網站」。待網站建置完成、開放參觀的時候,可以隨時後台的 設定 > 閱讀中取消這個勾選。

點擊「安裝 WordPress」,至此,安裝就大功告成!這時,若在瀏覽器輸入你的域名,會出現網站的前台。

請記得利用FTP軟體,將根目錄下的wp-config-sample.php檔案刪除。

05.登入WordPress

如何登入WordPress後台?最簡單的方法,就是在你的域名後面,加上 /wp-admin。例如:

https://yourdomain/wp-admin

若你已經登入WordPress,此網址會直接進入後台。若你還沒登入WordPress,你會被重新導向至登入頁面,如下圖,輸入帳號密碼,點擊「登入」,你就會進入WordPress後台。

WordPress針對安全性設計的插件,通常會將控制台的進入網址進行更改,避免駭客能輕易找到登入的窗口。

————————————————————————-
以上都是關於安裝Wordpress的步驟說明,接下來是對Wordpress初步操作的解說。在以下的解說中,主要以初學者立即上手的幾項重要認識,至於更進一步的可以在持續參考其他文章。

06.認識WordPress控制台

如果是首次登入WordPress後台,可以檢查是否有佈景主題版本、主系統、外掛的更新。有些主機商的WordPress並不是最新版(若你是一鍵安裝)。

剛完成安裝的Wordpress控制台有文章(post)、媒體(media)、頁面(page)、迴響(comment)、外觀(appearance)、外掛(plugins)、帳號(users)、工具(tool)、設定(settings)等主要功能鍵,每個功能點選會打開其子功能。為求簡潔,我們只在後面接著說明幾個重要功能,其他功能請另行了解。

WordPress控制台功能一覽
  • 文章(Posts):持續更新的內容
  • 全部文章
  • 新增文章
  • 分類
  • 標籤(Tags)

 

  • 媒體(Media):管理圖片與影片
  • 媒體庫
  • 新增檔案

 

  • 頁面(Pages):靜態頁面
  • 全部頁面
  • 新增頁面

 

  • 迴響(Comments):網友互動

 

  • 外觀(Appearance):決定網站長相
  • 佈景主題(Themes)
  • 自訂
  • 小工具(Widgets)
  • 選單(Menus)
  • 外掛(Plugins):更多的功能需求
  • 已安裝外掛
  • 安裝外掛

 

  • 帳號:多人管理
  • 全部帳號
  • 新增帳號
  • 個人資訊

 

  • 工具:實用管理
  • 可用工具
  • 匯入
  • 匯出

 

  • 設定:基本運作
  • 一般
  • 寫作
  • 閱讀
  • 討論
  • 媒體
  • 固定網址(Permalinks)
  • 隱私權

07.固定網址設定 Permalinks

WordPress網站為什麼在搜尋引擎上這麼吃香?原因很多,其中一個是它對網址做了偽靜態(URL Rewrite),讓一個以PHP為底層打造的網站系統,各個頁面的網址呈現不再是一堆亂數,取而代之是有條理的網址型態。
若依照Wordpress預設的網址,你所發表的文章,都可能長成:

https://yourdomain/?p=18

這種型態的網址,對於SEO並不會加分,相對於

https://yourdomain/how-to-install-wordpress

這樣有語意的網址名稱,將能對SEO有較好的分數表現。因此透過WordPress將網址作進一步適當的安排,是一件首要工作,這就是固定網址(Permalinks)的意義。

  • 使用英文、數字、橫槓混和搭配。
  • 不同的英文單字之間請使用橫槓分隔(-)
  • 不建議使用下劃線、底線(_)做為文字分隔。
  • 所有英文請小寫(就算輸入大寫也會轉小寫)。
  • 網址塞入的文字可以抓文章內重點關鍵字的英文。
  • 如果沒有設定預設會抓中文字,容易有問題。

若你有用Google Analytics分析網站流量,你會發現總有部分流量,是來自「Direct」:意指訪客是在瀏覽器直接輸入你的網址。因此網址愈短,愈好記、好打。

建議以「自訂結構」作為預設的網址結構:

wordpress固定網址結構

你可以參考我的設定

/%postname%.html
我的固定網址設定方式
我的固定網址設定方式

此外,我還會使用外掛將文章預設的網址中,/category/去除

至於另一個問題是,中文化的網址對於SEO的影響到底有多大?還是應該建立一個全以英文為主的網址結構?
有幾項原則可以注意

  1. 不要輕易忽略在地化URLs,主要是因為不同文字字母間都有其不同的特性,使用者也可能因為你的網址作了在地化,更願意進入到你的網站(更容易輸入URL到browser跟增加CTR的比例),若單論台灣市場,擁有一個中文化的Slug更能協助你增加網站CTR
  2. 若是為了搜尋普及,面向全球市場的品牌為了其品牌的一致性,則保持英文!
  3. 有些外掛,例如網址重定向

Google 官方的說法則是盡量讓你的URL保持乾淨,例如出現動態生成的變數或者是太多層次的URLs如:http://www.example.com/discuss/category/school/061121/interview/…..,都是對於整體URL的結構是不好的!

08.WordPress佈景主題

WordPress佈景主題就是用來快速改變、決定WordPress的外觀。你可以安裝多個佈景主題,並且快速切換。

簡單來說,佈景主題決定你網站的:

色調、個別頁面的「細節微調」選項(可能包括字型、LOGO等)、選單(包括手機版RWD的樣式)、小工具與其位置、特別功能

我們可以說,佈景主題的核心就是快速與輕鬆完成一個具備一定品質的網站的關鍵要素。
WordPress有上萬個佈景主題(免費或付費)可供挑選。無論是響應式設計、部落格、作品集、新聞型、企業網站、一頁式網頁、影音型、購物車… 都有相應的主題。
尤其是付費的佈景主題還提供許多特定行業的樣式與功能,例如旅遊、訂房系統、餐廳、新聞、房地產等,應有盡有。

你可以同時安裝多個主題,但只能啟用其中一個(啟用 = 使用中)。當你啟用一個新的主題,你通常須要重置選單&小工具—因為它們的位置、顯示方式隨主題而變。
雖然WordPress提供數量頗多的免費佈景主題,但是這類的佈景多半需要花更多時間,才能滿足你心目中理想的網站樣式,而且還需要具備一定技術,這並不是初學者能快速上手的。

如何選擇適合的佈景主題,是一件不容易的工作,但在這裡,你應該要先學會的是如何安裝佈景主題。
首先先到佈景主題頁面(外觀 > 佈景主題),會先看到已經安裝的佈景主題,以及系統目前啟用的佈景主題。若你想更換,只要滑鼠移到在該佈景主題上,就能看見啟用按鈕,按下後完成切換。

wordpress已安裝的佈景主題

若已安裝的主題不符需要,可以按新增,尋找新的佈景主題,並進行安裝。你可以在安裝完成的WordPress嘗試選一個主題安裝,並且啟用。但剛啟用完成的主題,即使到前端瀏覽,可能長相差距不大。依照我的經驗,在尋找時,如果只看”預覽”,可能也難以看出佈景主題的樣式,最好的方式是透過google,將wordpress與佈景主題名稱合併搜尋,找找開發者是否提供參考網站,這樣較能選出理想的主題。

wordpress安裝佈景主題

09.上傳佈景主題

除了WordPress.org提供的免費佈景主題,網路上還找到各式各樣免費和付費的佈景主題,付費的佈景主題通常介於NT$800~3000元台幣。依照經驗,約1800元台幣即可買到相當強大而且好用的佈景主題。

很多佈景主題開發者會提供有免費、付費兩種版本,讓你可以先用免費版,需要進一步的功能,再升級付費版。

一些功能強大的版型,會有極複雜的設置選項,需要花時間研究。若已經明確了解自己需要哪一類版型,例如企業(Business)、作品集(Portfolio)、餐廳(Restaurant)、律師(Lawyer)… 等等,你能用Google搜出一堆,比較著名的有:

上傳wordpress佈景主題

若你的網站是商業用途,我建議你還是找專業業者為你挑選版型,並且進行網站的設定與製作,因為即使是WordPress系統,也需要一定的學習成本,尤其是希望製作出專業水準的網站,需要大量專業知識與技術。
選定購買的佈景主題後,按下上傳佈景主題,將佈景主題的zip壓縮檔上傳到主機。

通常購買的佈景主題可能會包含操作文件說明,請進行解壓縮,以確認到底真正的檔案是哪一個zip檔。通常這個壓縮檔會以該佈景主題的英文名稱進行壓縮。

接下來我們先了解WordPress的兩大內容架構的差別並且進行網站的第一次內容更新。

10.頁面(Page) vs. 文章(Post)

WordPress主要有兩種內容:頁面,和文章,這兩種內容構成了網站的各種頁面。
如何區別這兩者?請看以下的比較表:

頁面文章
靜態網頁文章列表依時間排序的動態目錄
連結常置於選單頁腳連結可置於選單及頁腳,但少見
可分上下層(呈現於下拉式選單)可用分類、標籤、作者、時間篩選
預設:不可留言預設:可留言
不顯示作者、發表日期顯示作者、日期…等
不時間敏感時間敏感
範例:關於我、聯絡、隱私權政策… 等頁面文章列表範例:部落格、Facebook動態消息、新聞網站首頁 / 分類目錄

你接下來經常性發佈的內容,通常都是「文章」。
了解這兩者差異,接下來就試著在頁面與文章隨意寫上一些文字、圖片,然後到前端看看,你的網站將如何成形。

11.發表文章

請先嘗試新增一篇文章。

wordpress文章編輯介面

點擊「新增文章」,你會看到相同的編輯器、相同的「發表」面板:

文章編輯器-面板

  1. 標題輸入框:文章的標題請輸入與本文最貼切,且包含1~2個關鍵字
  2. 預覽:內文即時預覽(包含粗體字、顏色、插入圖片等編輯動作)
  3. 文字:顯示html格式,顯示編輯的動作產生的html碼
  4. 新增媒體:插入圖片或影片、檔案時使用
  5. 編輯工具:下圖是文字模式時的編輯工具,預覽模式是可以看到類似word的編輯工具
  6. 編輯框:輸入內文的地方
  7. 放大:將編輯框放大,暫時讓畫面更乾淨,可以專注於寫文章
  8. 內容摘要:請參考以下說明
  9. 儲存草稿:將撰寫的內容存為草稿,草稿模式文章不會出現在前端網頁
  10. 可見度:可以將文章置頂、或設定為需要密碼的模式。
  11. 立刻發表:這是wordpress的一項自動排程功能,可以設定將文章在某日某時自動發表(從草稿改為發表)
  12. 發佈:按下後儲存,並將文章發佈(發表)。
  13. 文章格式:wordpress將文章預設有多種模式,會在列表時呈現,不過仍要依照佈景主題設計,若無特別設計,可能看不出差別,初學可用標準,暫時先跳過。
  14. 分類:文章的分類,可以隨時新增。一篇文章可以勾選多個類別。
  15. 標籤:Tags,可以彌補分類的不足。一篇文章可以有多種Tags,例如一篇介紹園藝的文章,若文章分類是草坪、花園、盆栽三種,作者可以利用Tags加上初學者、澆水、病蟲害等,網友可以透過Tags找到更細緻的區分。
  16. 討論:有迴響(網友留言)、引用(Trackback)與通告(Pingback)。引用與通告請參考其他文章進一步的介紹。

與「頁面」比較:相同的編輯器,但旁邊有些面板不同。以下是「文章」獨有的面板:

格式:在每個佈景主題的定義都有些差異,有些主題會取消此功能。可以暫時忽略它。

分類:一篇文章必需屬於至少一個分類。可以依照日後文章數量再逐步增加分類或細分。

標籤:若有使用,建議要仔細思考其配置,增加對閱讀網友有幫助的標籤!

12.新增頁面

wordpress新增頁面

頁面的編輯畫面與文章類似,差別只在於右側的面板有些微不同。

頁面屬性:有上層、模版、順序三項子功能。說明如下:
上層:類似文章的類別,但實際上頁面的上下層關係通常只會表現在選單。例如:關於我們的頁面下面可能會有企業歷史、服務理念等等的頁面,我們可以將「企業歷史」頁、「服務理念」頁設定上層是「關於我們」頁。
模版:與佈景主題有關,通常一個網站的頁面版型會有幾種,每種版型長的不同,但應用某種版型的頁面會有類似的編排與元素。例如:「首頁」可能長的與其他頁面都不一樣,「隱私權政策」頁可能與「會員條款」頁都有相同的版頭、版尾、標題、內文樣式。因此佈景主題可能會提供幾種模版,讓使用者可以套用。
順序:每個頁面的顯示順序,大部分時間可能不會用到。

精選圖片:
每個頁面可以設定一張精選圖片,這張圖片可能會出現在列表時,也可能會在網友分享到臉書、line時候出現的單張圖片。

13.新增媒體

媒體依照格式大概有四種:文件(word或pdf等)、圖片、影片和音樂。

上傳WordPress的媒體,通常是文件和圖片。若要發佈影片和音樂,需要考慮主機效能(虛擬主機可能無法負載太大的影片或音樂);因此藉由第三方平台嵌入是比較適當的方式,如YouTube。

上傳圖片前,請進行壓縮、裁切等準備工作。未經壓縮或太大的原始圖片檔(單一照片超過2MB),會降低網頁載入速度。現在有很多免費的線上圖片壓縮服務 – 如Compress JPEGTinyJPGPicdiet

在WordPress編輯器插入圖片,首先將游標停在圖片要放置的位置,然後點擊「新增媒體」按鈕:
游標-插入圖片
游標放在要插入圖片的位置

wordpress新增媒體
wordpress在內文中新增媒體的方式

接著,從電腦拖曳圖片進來(上傳至WordPress媒體庫):

wordpress圖片設定
wordpress插入圖片時進行設定

在選擇圖片時,如上圖的3,4步驟,需要填入圖片的「說明」與「替代文字」,這兩項有助於SEO,盡可能適當填寫。「替代文字」的意義在於提供盲人與搜尋引擎了解這張圖片的內容,附加在html碼中,前端網頁瀏覽時通常不會看到。「說明」則是這張圖片的圖說,前端能看到。

將操作介面切換到預覽模式,你可以在插入的圖片上用滑鼠點擊拖曳,來調整圖片大小及位置 – 如同操作Word或Google Doc。

編輯插入的圖片大小與位置
wordpress的編輯介面可以直接編輯插入的圖片大小與位置

按下「發表」後,你的頁面就上線了…

14.嵌入影音媒體

WordPress編輯器利用oEmbed技術,讓你只須貼上媒體的網址,即可嵌入媒體。

以下示範如何在網頁上嵌入YouTube。第一步:複製URL

複製youtube或其他平台的影片網址
複製youtube或其他平台的影片網址

第二步:在編輯器內貼上URL,當你按下預覽時,就能在前端看到以youtube播放器內嵌的影片。

你也可以決定影音媒體的尺寸。

oEmbed支援的可嵌入媒體有:

YouTube
Instagram
DailyMotion
Facebook
看完整清單

15.用繼續閱讀截短文章

文章列表是依時間排序的動態目錄,在列表頁面(Blog、日期、作者、分類…等頁面)的文章會被截短或摘要。讀者必須點擊文章連結,才能看到全文。
WordPress的「插入繼續閱讀標籤」,可用來截短文章在列表的顯示長度。

適當的透過繼續閱讀將文章截短是讓版面乾淨的重要方式與技巧。

16.文章摘要

這裡所指的文章摘要,是WordPress Post Excerpts,這是一項常常被大家忽略的功能,在網站版面的編排上,適度的文章摘要呈現,讓版面文章呈現易於閱讀,資料一目了然,又可以加速網站頁面的載入時間,簡單又輕鬆的幫助網站管理者或是設計者,達成網站精進的目的。

例如雅虎的首頁新聞版面區塊,每則新聞固定是一張尺寸相同的圖片加上標題以及一段文字字數相仿的內文摘要,這樣的排列既顯整齊,吸引讀者進一步點選有興趣的文章,版面也不至於因為內文以及內文插圖而造成頁面過長。

在還沒有啟用文章摘要這一項功能前,WordPress頁面的呈現通常是將文章內容完整的顯示在網站頁面上。這種預設呈現的好處是訪客可以看到完整的文章內容,不過如果網站文章數量多,內容又像本文一樣又臭又長時,列表就會出現無底深淵,這樣就會成為閱讀與網站載入的負擔。

文章摘要如何呈現、是否呈現,依你的佈景主題而定(有些佈景可能沒有特別利用此功能)。每個佈景主題的設計方式不大一樣,只要符合 WordPress 佈景主題規範程式進行設計的,基本上在使用與設定上都相去不遠。若沒有特別編輯文章摘要,文章在列表頁的呈現,通常是文章開頭的幾句話。在預設的情況下,文章摘要會顯示55個字。不過因為標點符號或是空格、英文字母、中文字的影響,在字數計算上沒有那麼精準。如果想要控制文章顯示摘要的內容,就可以在文章編輯頁面,將摘要的欄位上,從主文將內容複製貼上。

WordPress預設隱藏了這個欄位,因此使用前首先要找出文章摘要的欄位。如下圖,在文章編輯介面的右上角點選顯示選項。

打開相關選項後,勾選文章摘要,該欄位會出現在主文編輯框下。

將希望出現的摘要,從主文上複製後,貼上,即可在列表時,讓該文章出現文章摘要部分的內容。

文章摘要與前一點的繼續閱讀截短有易曲同工之妙,差別在於繼續閱讀是由人工決定在哪個地方作出斷點,而文章摘要則是可以節省這個工夫(也可以每篇都不同),自動截取一定字數來作為摘要。
系統上,若設定了繼續閱讀(more),那麼列表會將繼續閱讀分隔線前的內文顯示。若繼續閱讀與文章摘要都有設定時,則會以文章摘要為主,顯示文章摘要的部分內文。

17.首頁設定

如果你是希望建立一個部落格,那麼在wordpress安裝完成後,你應該可以在前端看到部落格的雛型,尤其是選用佈景主題後,多半出現的頁面都是以部落格文章列表出現。

Wordpress-Twenty Nineteenwordpress-Twenty Nineteen套版首頁
WordPress5.0安裝完成後,預設Twenty Nineteen套版呈現的首頁

但若是想要建立一個企業網站、購物網站、新聞媒體等,你會需要一個與眾不同的首頁。因此必須進一步指定哪個頁面是首頁,哪個頁面則是部落格文章列表的頁面。
為了簡單了解,你可以先在頁面新增二頁,一頁的標題填入首頁,另一頁則填入部落格。

暫時新增的頁面
為了了解設定,暫時新增首頁、部落格的首頁二個頁面

接下來則是到設定 > 閱讀。如果你想要架設的是單純的部落格,那麼可以保持預設值不動。

"Wordpress設定

如果相望首頁特別設計,那麼依照剛剛新增的頁面分別設定「首頁」與「文章頁面」。
「首頁」指定為「首頁」。
「文章頁面」指定為「部落格首頁」。

"Wordpress設定

設定完成後到前端看看變化。

看看設定的首頁
看看設定的首頁
Wordpress-Twenty Nineteenwordpress-Twenty Nineteen套版首頁
看看設定的部落格頁

由於還沒有設定選單,因此剛剛設定的部落格頁還只能從預覽的方式瀏覽,因此接下來我們就來設定選單。

18.設定選單

截至目前,你的WordPress可能還沒有選單 / 導航菜單。我們來建立一個吧!

進入自訂 > 選單 > 建立新選單:

建立選單
1. 「選單名稱」取一個你能識別的名字(不會顯示於前台),按下建立選單。

建立選單
wordpress建立選單

2. 勾選左側選單的菜單。有四種類型可以加入選單:頁面(Pages)、文章(Posts)、自訂連結(超連結)、分類(文章的分類)。你可以在頁面看到剛剛新增的首頁、部落格首頁等頁面。請隨意勾選至少2個頁面,按下新增到選單。
右側新增的項目可以用滑鼠按住任一個拖曳排列順序或上下層。

wordpress選單設定
wordpress選單設定

3.選擇顯示地點「主要」。請注意,這裡出現的位置會依照佈景主題設計而有不同。

這樣,你的網站有導航選單了!

選單的位置,依版型而定!

選單出現在頂端
選單出現在頂端

有不少版型提供多個選單位置,並有一個「主選單」。但大部分主選單的位置,不是在網站頂端,就是在側邊欄。

19.運用小工具

小工具(Widget的中文意思)可讓你在網頁上的「小工具區塊」,增加客製化的內容。「小工具區塊」依照佈景主題設計會有多個位置,最典型的是部落格的右側欄。

部落格的右側通常會有最新文章、文章分類、最新迴響等等,這些都可以在小工具中設定。「小工具區塊」通常位於側邊欄或頁腳。但有些版型,能讓你在頁首、甚至文章裡加入小工具。你可以用WordPress預設的小工具,但你也可以透過外掛,來增加想要的Widget類型。

要做修改,請進入外觀 > 小工具:

Twenty Nineteen2019套版的小工具位置設計出現在版尾
Twenty Nineteen2019套版的小工具位置設計出現在版尾

20.外觀 > 自訂

自訂可以說是WordPress的所見即所得編輯方式。

Wordpress自訂介面
WordPress自訂介面

基本上,網站識別、色彩、選單、小工具、首頁設定、附加的css是自訂介面的基本工作項目,其中選單、小工具、首頁設定在其他介面中也能看到。
自訂的操作模式也可以視為佈景主題的設定清單,管理者通常要點進每一項進行設定,以完成一部分網站基本的工作。

接下來我們來完成自動介面中,網站識別這個項目。

網站Icon(又稱Favicon、網站圖示)是你在瀏覽器頁籤上,看到的網站小圖標:
尤其目前行動裝置手機的普遍使用,網站Icon已從瀏覽器的頁籤圖標,延伸至APP圖示。WordPress對Icon尺寸的最低要求,是 512 × 512 像素。因此可以準備一張512×512像素的圖片,來上傳設定。

wordpress網站識別
wordpress網站識別

22.CSS編輯

若要進一步修改網頁樣式,無法避免的是CSS。WordPress在外觀>自訂中提供附加CSS編輯。
不過要注意的是,在這裡輸入的css語法將會出現在每個頁面,若你想要個別頁面增加css,需要考慮安裝插件達成這個目的。

23.WordPress迴響

WordPress迴響(討論)在文章預設為「開啟」,但在頁面預設為「關閉」。

然而,你可以開啟 / 關閉個別頁面(和文章)的討論功能。首先,在編輯器上方「顯示選項」 > 勾選「討論」:

開啟關閉留言板
1. 顯示選項, 2. 勾選「討論」

這時編輯器下方會出現「討論」面板。在這邊,你可以決定是否允許迴響 / 留言:

前端若有網友留言,你可以在迴響中找到該留言,並且進行核准或丟到垃圾桶的判斷。
「你的留言正在審核中」,代表其他人目前看不到這則留言:

選擇「批准」,這則留言會公開顯示於文章下方

若要進一步設定細節,可以前往「設定」 >「討論」,你可在此對留言板做各種設定。

wordpress設定討論
wordpress設定討論

一般控管(手動核准留言),通常已足夠,若勾選「使用者要註冊並登入才能發表迴響」,請記得允許「任何人皆可註冊」,這在WordPress角色權限會另外說明。

更多選項,例如垃圾過濾、設定黑名單、大頭貼顯示方式…等。

不過由於Wordpress的開源特性與使用者多,因此有許多以程式在世界各地進行自動留言,針對每篇文章留下許多垃圾迴響,因此若開放留言,應該要進一步安裝外掛以過濾機器留言的侵擾,這我們另外在其他文章討論。

24.安裝外掛

外掛的英文稱Plugins。它是用來增加WordPress的某部分功能,而不像主題是用來改變外觀。外掛是Wordpress強大的主要原因之一,累積至今,已有數千種外掛程式可以協助WordPress管理者完成各種需要。

外掛有很簡單的(如側邊欄上的Facebook按鈕),也有很複雜的(如購物車系統)。

點擊左側欄的「已安裝外掛」,你會看到WordPress預裝(但未啟用)的兩個外掛:Akismet Anti-Spam 和 Hello Dolly:

安裝外掛
安裝外掛

針對這兩個預設外掛,建議啟用Akismet,刪除Hello Dolly。Akismet Anti-Spam是反垃圾留言系統。若你計畫開放留言,應該要啟用Akismet。啟用Akismet需要一個WordPress.com帳戶。

Hello Dolly是由WordPress開源計畫的創始人之一,Matt Mullenweg所開發。除了象徵意義,並無實質功能,刪除即可。

提示:許多WordPress外掛都會產生短代碼(shortcode),以方便客製化小工具區塊及內容。

如同主題,外掛除了可從後台安裝(免費)之外,你還可以在第三方網站下載(免費&付費),然後上傳WordPress,流程類似於安裝第三方主題。

上傳外掛
上傳外掛

以下我們以實用的SEO外掛來進行安裝說明。首先按下「安裝外掛」按鈕,畫面會跳出可以安裝的外掛。

wordpress安裝外掛plugins
wordpress安裝外掛plugins

接著在搜尋輸入SEO,會有許多關於SEO的外掛可以安裝,排行前面的二個外掛正好是推薦安裝外掛,擇一即可。

seo-plugins
WordPress最受歡迎的seo-plugins

我們選擇Yoast SEO來進行安裝,安裝時只要在該外掛上按下安裝即可。

安裝中的外掛
安裝中的外掛

安裝完成後,會出現啟用的按鈕,按下啟用,這個外掛就可以開始進一步設定與使用。如Yoast SEO啟動後,前往該外掛,按下設定。

安裝好的Yoast SEO外掛
安裝好的Yoast SEO外掛

安裝好的Yoast SEO外掛提出了建議,嚴重 SEO 問題:你阻擋了搜尋引擎機器人的搜尋了以及您還是使用 WordPress 預設的標語,不如留空更好。管理者就可以針對這兩個問題點選連結,進行修正。

Yoast SEO
Yoast SEO

接著我們可以到頁面去,點選剛剛新增的「首頁」來看看如何進行SEO設定。通常我們可以先進行標題(title)以及描述(description)這兩個值,這是針對每個頁面、文章都應該要設置的。

SEO設定
SEO設定

我們經常在搜尋結果中,發現的資料,其實就是蒐尋引擎去抓取的數值。

搜尋結果
搜尋結果

Yoast SEO還會在可讀性分析、焦點關鍵字部分提出一些建議與問題,你只要依照建議,一一改進,就能夠讓這個頁面有良好的seo基礎,進而增加被搜尋的排名分數,當然搜尋排名還有很多分數是需要爭取的。

Yoast SEO提出的問題
Yoast SEO提出的問題

25.WordPress其他應該要先進行的設定

網站標題名稱與標語的基本設定

理想的網站標題名稱,一般來說,網站標題名稱裡面應該要包含你的主要目標SEO關鍵字,那樣對於SEO會比較有優勢。
填上標語,用來補充網站說明,亦可不填,但必須配合SEO一起設定。

WordPress網站標題名稱與標語會成為一部分,這對於SEO有其重要性,因此字數請適當控制,並非越長越好,理想應該控制在15個中文字以內,以免搶了title的其他內容。不過更好的作法是可以透過seo外掛進行每頁的微調。

寫作設定

Wordprss寫作設定
Wordprss寫作設定

WordPress裡面幾乎很少使用到表情符號,且影響效能(通常會特別去除此功能),可以跳過,不要勾選。

自動修正無效的巢狀XHTML語法這裡也不需要勾選,因為動了之後WordPress的外掛程式有可能出現問題。通常不用勾也不會對SEO有太大的影響。預設文章分類和預設文章格式的話也不用動,因為都要一個文章一個文章去調整。

PING服務
Ping服務主要是通知部落格搜尋引擎,告知它你網站內容有更新了,請趕快來收錄我的文章吧!

來到WordPress控制台,點擊左方【設定】並選擇【寫作】,找到「更新服務」,請在下方欄位填上你要通知的部落格搜尋引擎,完成後點擊﹝儲存變更﹞。

Wordpress Ping服務通知
WordPress Ping服務通知

部落格搜尋引擎可以到WordPress官方網站查詢:點這裡

推薦以下幾個常見、常用的搜尋引擎。

http://rpc.technorati.com/rpc/ping
http://blogsearch.google.com/ping/RPC2
http://ping.feedburner.com
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://api.my.yahoo.com/RPC2
http://api.my.yahoo.com/rss/ping
http://rpc.pingomatic.com

添加Ping的網址時,要稍微注意一下加入的數量,不要看到有幾個Ping的網址就加入幾個!通常選擇加入比較常使用或是國外很知名的部落格搜尋引擎;加入太多可能導致文章發佈時變很慢,會增加您空間的系統負擔!

26.WordPress角色權限與新增WP帳號

WordPress角色權限

在WordPress安裝過程,你已建立一個WordPress帳號。此帳號自動被設定為「管理員」角色。「管理員」擁有最高權限。它能新增 / 刪除任何文章、改變網站外觀、功能。

WordPress設計了五種角色設定:訂閱者、寫手、作者、編輯、管理員,這五種角色分別有不同權限,可簡單了解:

訂閱者 Subscriber:「訂閱者」的權限最低,只能管理自己的帳號,通常就是一般會員。

在 設定 > 一般 ,你可調整是否「任何人皆可註冊」,及新帳號的預設角色:
設定-任何人皆可註冊
是否讓任何訪客皆可註冊?

若須嚴格控管留言,你可以要求想留言的訪客,先註冊一個帳號(訂閱者角色),然後再登入你的網站留言。電子商務型的網站,常要求買家註冊一個帳戶。但也有不須帳戶,即可結帳的購物網站。

寫手 Contributor:「寫手」可以撰寫文章。它的權限是新增、編輯、刪除自己「未發表」的文章。
但寫手不能上傳媒體(包含圖片)、不能發表文章、也無法刪除或編輯自己「已發表」的文章。寫手的文章編輯器在寫完後只能「送交審查」,而不能「發表」。

作者 Author:「作者」擁有寫手的權限,外加能夠發表、編輯、刪除自己的文章(即使已發表)。
作者也能夠上傳多媒體(圖片、影音)。

編輯 Editor:「編輯」擁有作者的權限,另外有以下權限:

  • 新增、編輯、刪除頁面
  • 發表、編輯、刪除其他使用者的文章
  • 審核留言
  • 管理分類

管理員 Administrator(簡稱Admin):管理員擁有最高權限,即整個網站的控制權。

新增WP帳號

新增WP帳號可以用來進行網站的協同管理,尤其對一間企業來說,讓更多的員工能夠參與新文章或在電子商務運作中的分權管理都是非常有幫助的功能。

依據WordPress角色權限可以設定不同權限的帳號,若你安裝了一些外掛,例如購物車、訂房系統、SEO系統等,這些外掛也可能新增更多角色權限。

更多的wordpress帳號角色權限
更多的wordpress帳號角色權限

我們來嘗試新增一位使用者,並設定他的角色為「作者」。輸入資料後,點擊「新增帳號」:

wordpress新增一個帳號
wordpress新增一個帳號

新增WP使用者
此範例,我們設定新帳號的角色為「作者」

這樣就新增了一個帳號。你(管理員)可以隨時編輯 / 刪除任何帳號,或更改角色:
當帳號新增後,他會收到標題為「您的使用者名稱和密碼資訊」的Email。請他打開並點擊此連結:

跳轉後,可以重設密碼:

wordpress新帳號導回重設密碼
wordpress新帳號導回重設密碼

請務必記好密碼…

重設密碼後,點擊「登入」,使用者就會抵達WordPress登入頁。