iT邦幫忙

1

WordPress教學 :24個後台課程(含安裝+主題推薦)

WordPress教學全文,請看:WordPress教學 :24個後台課程(含安裝+主題推薦)

還在找 WordPress教學 ,後台課程教學 .. 想要一次學會?下載安裝 WordPress 佈景主題+外掛,卻不知道哪個好用?

1. 網站架設教學?

https://ithelp.ithome.com.tw/upload/images/20191224/20110874lTxlELmkpz.png

首先需要了解,網站架設的 3 個重點,這是網站組成的要素,我們先依序完成:)

  1. 購買網址(申請門牌)
  2. 申請主機(申請主機)
  3. 網頁設計(搭建房子)

詳細全文看這,帶你網址申請+虛擬主機申請+系統操作,快速完成:
網站架設 :17 篇不藏私教學流程(網頁製作+費用推薦)

在這裡,我也和大夥兒分享,一些網友朋友們常問的問題,如下:

如何挑選好網址?

網址如何挑選的好,你可能有些疑問,但其實 .. 把握這些原則,基本上就是好網址!

  1. 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。
    例:蘋果 – https://www.apple.com/tw/

  2. 去除www:目前大部分新網址都不太會在前面加上www,這是比較舊式的用法。

  3. .com優先:.com是大多數人的直覺印象,主要方便好記,增加搜尋率。

  4. 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

有哪家虛擬主機商,對 WordPress 有良好的支援?

https://ithelp.ithome.com.tw/upload/images/20191225/20110874S3aStMcLMd.jpg

SiteGround 除了是間老牌+穩定的公司,也是 WordPress.org(官方)推薦的虛擬主機,除了有速度超快的硬體設備,在軟體服務上,介面使用也超順手!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874k1aWRmL3EH.png

這邊列出 SiteGround 幾個特色,不管是用哪種費用方案,都擁有下面項目:

  • 虛擬主機速度快:所有的 SG 主機,都對速度進行高度優化,他們配備了超快速硬碟 SSD ,確保你網站速度,跟飛的一樣!
  • 優質客戶服務:SG 提供超棒的客戶支持服務,24/7 的電話服務,也支持即時聊天,協助解決問題。
  • 免費的 SSL 和 CDN:SSL(安全加密)的重要性,相信不用再多說,連 CDN(快取+分散風險) 也提供免費服務 .. 實在狂 ..
  • 多個服務器位置:SG 在全球有多個數據中心,亞洲地區有新加坡據點,連線起來就是快!
  • WordPress 支持:WP 官方認證的主機,絕對不是蓋的,如:速度、SEO等 .. 都有大幅度的提升,也提供多種實用軟體,方便網站管理。
  • Site Tools 介面:SG 推出了新的後台介面,取代原來舊舊的 Cpanel 畫面,同時也增加了新功能。
  • 還有其他優點 :)

除了這些優點,SiteGround 的使用者,用戶體驗也相當良好,在不同社團、社群,都給予極正面的評價!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874ZZXojvvH86.png

造成 WordPress 網站速度變慢,不外乎 3 種狀況:

  • 虛擬主機速度慢
  • 佈景主題效能不好
  • WordPress 外掛裝太多,或是爛外掛

若是 WordPress 佈景主題+外掛影響效能,移除就好,滿 EASY,也是最多人使用的方式!

但 .. WordPress 虛擬主機對網頁的影響,才是關鍵殺手(也是最多人忽略的)!

所以後來,才決定使用多人推薦的 SiteGround ,開啟我的部落格之旅!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874cYVBMThci1.png

點我前往 SiteGround 的 WP 虛擬主機

這章節,如果有照著文章走,應該也順利申請好網址+WordPress 虛擬主機+簡單的網站設計了吧!


2. 一般設定

https://ithelp.ithome.com.tw/upload/images/20191224/20110874zYTeWqCNgA.png

WordPress 網站架設完成後,我們直接登入後台,開始我們的教學!

兩個重要的路徑位置(要記得唷):

  • wordpress 前台: 你的網址.com
  • wordpress 後台: 你的網址.com/wp-admin

首先,我們先到 設定 > 一般 ,更改「 網站標題、網站說明、網站語言 」。

預設 WordPress 語言是英文,先把它調成「 繁體中文 」,方便我們後續操作!

https://ithelp.ithome.com.tw/upload/images/20191224/20110874YijjZBkkhf.png

設定完成後,點擊頁面下方的「 儲存設定 」就順利更改,網站標題+描述+語言調整囉:)

額外小教學

WordPress 有關文章+頁面標題,在 Google 上呈現的方式,如下:

WordPress教學 網站,你不能錯過的課程(文章標題)– 小犬程式(網站標題)

建議「 網站標題 」字數不要太長,不然會影響到未來文章標題,可取名的長度。

因為太長的字,在 Google 搜尋結果上,都會以省略號符號表示唷!


3. 佈景主題安裝

https://ithelp.ithome.com.tw/upload/images/20191224/20110874rcGC4I0a0C.png

WordPress 有成千上萬的佈景主題,可以供你挑選,有簡單免費版 or 多功能付費版,都應有盡有:)

選擇佈景主題,有幾件事情,可能需要多加留意,才能選到好的主題,方便未來操作:

  • 多人使用+評價推薦良好的。
  • 後台好操作+開放性高的主題。
  • 效能好的主題。
  • 持續維護更新版本的。

這邊先使用 WordPress 官方的免費佈景主題,方便教學。

首先前往 外觀 > 佈景主題,這頁會列出目前已安裝的佈景主題,然後點選 安裝佈景主題,前往主題安裝頁面。

https://ithelp.ithome.com.tw/upload/images/20191224/20110874fPeBaQDwNw.png

然後使用搜尋框,搜尋 Twenty Fifteen 主題,並點擊 啟用,如下圖:

當然 .. 在這頁,你會看到超多種佈景主題,這些未來都可更換,先照著教學前進吧!

https://ithelp.ithome.com.tw/upload/images/20191224/20110874Nl3HzGg0Yy.png

上傳佈景主題 」按鈕(上圖橘色區塊),可用來上傳第三方主題。

等待主題安裝+啟用完成,再回到前台看一下,會發現 WordPress教學 的部落格主題,已經更換完成啦!

https://ithelp.ithome.com.tw/upload/images/20191224/201108747Ac5dNqeST.png


4. 文章網址設定

https://ithelp.ithome.com.tw/upload/images/20191224/20110874B9Eoe8zGeo.png

WordPress 預設的文章網址,前面會帶有時間+日期等 .. 字元,但除了增加網址識別難度外,也不利於 SEO 優化。

所以呢,在開始新增文章前,我們先來調整一下預設的「 永久連結設定 」,讓它更人性化一點。

前往** 設定 > 永久連結**,選擇 文章名稱 的網址類型,然後 儲存設定

https://ithelp.ithome.com.tw/upload/images/20191224/20110874sF2Z6Z1WvO.png

這樣一來,之後文章的命名就更簡單扼要了:)


5. 文章管理

https://ithelp.ithome.com.tw/upload/images/20191224/201108743ObmWjy2rg.png

WordPress 的文章管理,相比其他 CMS 系統,是比較簡單且容易上手:)

這章節,我會帶大夥兒新增+發佈一篇 WordPress教學 文章範例,如果順利完成了,也代表你學得更多了!

首先前往 全部文章 > 新增文章,開始我們的文章編輯。

https://ithelp.ithome.com.tw/upload/images/20191224/20110874yup6vACKpu.png

小提醒:所有新增的文章,都會在這裡出現唷,也可以批次操作:)

接下來,我們下一個標題,和隨意寫個內容,最後點擊 發佈,完成這篇文章。

https://ithelp.ithome.com.tw/upload/images/20191224/20110874BsU4QKa3S9.png

然後前往網站前台,就會看到第一篇 WordPress教學 文章,已經出現啦!

https://ithelp.ithome.com.tw/upload/images/20191224/20110874QGHnV3F6WZ.png

我們把文章用的更完整一些,一樣回到文章編輯區,我們來調整 網址連結、文章分類、精選圖片、內容摘要、留言等 ..

https://ithelp.ithome.com.tw/upload/images/20191224/201108749DKPiHJllU.png

  • 網址連結:文章網址連結修改,建議英文為主。
  • 文章分類:尚無其他分類,若之後有新分類,這邊就會出現。

若都調整完成,可以點擊 更新 ,文章就會順利更新完畢囉!

https://ithelp.ithome.com.tw/upload/images/20191224/20110874uf0o1SSNmH.png

  • 精選圖片:文章封面,可以上傳好看的圖
  • 內容摘要:尚無其他分類,若之後有新分類,這邊就會出現。
  • 留言開放:這篇文章是否開放留言。

最後,我們回到前台看一下,有沒有變化?恩 .. 是不是看起來美多了呢!

https://ithelp.ithome.com.tw/upload/images/20191224/20110874EWJcb7LYf3.png

學會如何發表一篇文章後,恭喜已經踏出了重要的一步了!

下一章節,會帶大夥兒學習使用 WordPress 的區塊編輯器,讓你編輯文章的功力,可以更上一層樓:)


6. 區塊編輯器

https://ithelp.ithome.com.tw/upload/images/20191225/20110874Pq4FTJorN8.png

WordPress 官方在 5.0 發佈時,就把區塊編輯器的概念,正式引用進來,其中最有名的是 Gutenberg 古騰堡,來看看如何運作吧:)

新增圖片

我們試著在上一篇教學的文章中,加入張圖片美化一下,首先點擊 左上方加號 > 圖片

小分享:若找不到區塊,可以善用「 搜尋區塊(搜尋框)」,方便找尋唷:)

https://ithelp.ithome.com.tw/upload/images/20191225/20110874WXv7P9mKB9.png

再來點擊 上傳,上傳你的圖片(也可以直接用拖拉方式),接著你就會看到圖片出現了:)

小分享:已經上傳過的圖片,可以直接到「 媒體庫 」選擇,就不用重複上傳。

https://ithelp.ithome.com.tw/upload/images/20191225/20110874m6dkahhv4b.png

再來我們可以調整一下圖片的細節,讓它變得更完整,如下圖:

https://ithelp.ithome.com.tw/upload/images/20191225/20110874gIvtTd6TaI.png

圖片上傳,功能區塊介紹

  • 功能列表:有置中對齊、加上圖片連結、更多功能等 ..
  • 圖片描述:增加描述文字、粗體、加文字連結。
  • SEO 優化:增加圖片替代文字。
  • 尺寸調整:自訂圖片尺寸大小。

新增列表

依樣畫葫蘆,這次我們新增一個清單列表。

https://ithelp.ithome.com.tw/upload/images/20191225/20110874u2IdYxWvn9.png

會看到一個簡單的清單列表出現囉!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874Nqb0l7Cnx3.png

清單列表功能:圓點列表、數字列表、字體加粗、文字連結等 .. (上圖綠色框)

移動區塊

若是想把區塊上下移動,更換位置,要如何操作呢?

只要在區塊左邊的工具列,點選上下箭頭,或是中間點點,直接上下拖拉,都可以移動區塊唷!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874Cau9UwqvyL.png

看一下成果,會發現更換位置成功,是不是很 EASY 呢 :)

多種區塊功能,一次展示

WordPress 的區塊功能超級多,有些因為版面限制,還沒擷取完。

https://ithelp.ithome.com.tw/upload/images/20191225/20110874rCn3U3U5uZ.png

若是有固定區塊,想要重複使用(不想每次都設計一次),也可以把它做成 可重複使用區塊,並幫他取個名字 ,如下圖:

https://ithelp.ithome.com.tw/upload/images/20191225/201108744g1J2bqX3c.png

像我把剛剛設計的清單列表,取名「 自訂清單列表 」,之後在 可重複使用 的選項裡,就會出現讓我們未來重複使用啦!

https://ithelp.ithome.com.tw/upload/images/20191225/201108744Z0qq9hRyM.png

閱讀全文設定

有些 WordPress 佈景主題,在文章顯示方式上,對過長的文章並不會自動省略,會導致畫面過長,並不美觀,這時就需要 閱讀全文 這個功能。

來示範一下要如何新增,如下:

https://ithelp.ithome.com.tw/upload/images/20191225/20110874mZxWNwjlNT.png

https://ithelp.ithome.com.tw/upload/images/20191225/20110874XrdIUjVxRK.png

加入完成後,我們回到 前台首頁 看一下,文章是不是更簡單扼要了呢!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874iYpAF67iHb.png

學到這裡,有沒有發現區塊編輯器其實很有趣呢!

它比過去傳統編輯器,能做到的事情更多,整體功能元件也美化的更漂亮了!

接下來教大夥兒,如何在 WordPress教學 中「 新增分類 」,其實很容易學習唷:)


7. 分類+選單管理

https://ithelp.ithome.com.tw/upload/images/20191225/20110874m1jsokDBnd.png

在前幾章教學範例,有教大夥兒如何新增文章。

在這章,我們來學習如何「 新增分類+選單,把文章放置指定分類中,並讓他在選單中顯示 」!

首先前往 文章 > 分類 ,依序輸入名稱、代碼(分類網址名稱)、內容描述,最後點擊 新增分類

https://ithelp.ithome.com.tw/upload/images/20191225/201108740A01fd8tBs.png

接著,回到之前新增的文章中,會發現右區塊的分類選項,多了一個 文章內容 選項。

把它打勾(確認放置指定分類下),然後更新文章。

https://ithelp.ithome.com.tw/upload/images/20191225/20110874rAVy89uy5o.png

再來,我們希望前台選單,能找到剛新增的分類,所以前往 外觀 > 選單,進行選單調整,如下:

https://ithelp.ithome.com.tw/upload/images/20191225/20110874ooCkQ22XjM.png

簡單 4 步驟,完成選單類別:

  • 前往「外觀 > 選單」,進行選單調整。
  • 「新增選單項目」選擇「分類」,找到我們剛新增好的分類,打勾後點擊「新增至選單」。
  • 「選單結構」內的分類,可以上下拖移排序,也可以排父子階層。
  • 都完成後,點擊「儲存選單」,更新完成。

最後,我們回到前台看一下,會發現 .. 一切有變化!

https://ithelp.ithome.com.tw/upload/images/20191225/20110874y37rBzPAFW.png

如此一來,在點擊分類後,我們剛新增好的文章,就會在這分類下順利地出現了,一切都這麼的美妙:)

在這裡,由於篇幅關係,只列出了其中幾個課程,若想學習更多,可以點下面連結前往學習,祝大家使用 WordPress 順利唷:)

WordPress教學全文,請看:WordPress教學 :24個後台課程(含安裝+主題推薦)


尚未有邦友留言

立即登入留言