WordPress第二課 – 建置你的網站單元

第一次使用WordPress的人都要摸索整個管理介面一番, 梁爸是程式人員背景, 所以上手跟理解比較容易, 以下將說明WordPress的主要建構元素, 方便大家容易了解及操作。

一.WordPress主要元素有:

1. 頁面 (page) – 就是一個空白的單元頁,
通常會用在如: 聯絡我, 關於我們, 產品介紹, 公司簡介, 故事等靜態單元。

2. 文章 (Article) – 有日期的文章, 可勾每篇文章的"分類"及"標籤".
通常應用在:日誌,開箱文,教學文章..可以一直動態增加到前台單元頁面列表裡的。

3. 分類 (category)
每一篇文章只能勾一個分類.如果你的文章可以分類得很清楚,不會有跨分類的情形如:屬於教學,又屬於開箱。

4. 標籤 (Tag)
每一篇文章可以勾多個標籤 ,所以當你有一篇文章是屬於教學,又屬於開箱時,就可以用"標籤"的方式來作分類用。

5.媒體: 圖片、影片、檔案….等等都是, 你可以上傳要呈現的照片到媒體單元裡. 之後再插入到文章或頁面裡.

二.了解以上的元素後,接下來就是規劃一下你的網站希望提供什麼功能?

1. 日誌   (由很多文章組成)
2. 公司介紹 (由5~10個靜態頁面組成)
3. 公司介紹+日誌  (由5個頁面組成 + 多篇文章)

以梁爸網站的選單網址上來看:
WX
(頁面)   https://liangdaddy.com/142-2/
(標籤)   https://liangdaddy.com/tag/職場/
(分類)   https://liangdaddy.com/Category/test1

你可以發現有以上規則, 沒錯, 選單可以讓你:
1.指定頁面 – 如: 與我們聯絡, 公司簡介的page
2.指定分類 – 自動列出屬於"某分類"的文章列表.   (梁爸的文章有時都跨分類, 所以沒用到此功能)
3.指定標籤 – 自動列出屬於"某標籤Tag"的文章列表. (梁爸選單上都是用此功能)
4.外部連結 – 指定自定的http:// 連結

有了以上的概念後, 接下來進入主題會比容易懂.
若您還沒申請帳號, 請先參考梁爸另一篇
https://liangdaddy.com/2018/10/18/wordpress%E7%AC%AC%E4%B8%80%E8%AA%B2-%E7%94%B3%E8%AB%8B%E5%85%8D%E8%B2%BB%E5%B8%B3%E8%99%9F/

三. 開始操作管理   
1.一進來管理介面, 左邊是功能區, 右邊是內容,
你可以照著如下圖右邊畫面的引導步驟來練習操作w7

2. 將左選單拉到最低下的樣子.(最後一個是"設定")
w8
3. 我們先來練習建一個"靜態頁面"(還記得這個元素的用途嗎?)
在左選單按"網站頁面"=>【新增】後, 會看下面的編輯畫面. 跟word文書很像,
你可以在上方輸入大標題如: 公司簡介,
篇輯框裡, 你就試著用編排word的方式輸入一些文字、段落, (+)新增來插入圖片…等

如果您沒有看到下圖頁面設定"特色圖片"的功能.的話. 可以按一下右上方的"1圖示.
特色圖片是固定出現在文章跟頁面最上方的大圖, 增加視覺效果.
(因為目前是頁(PAGE), 所以右邊沒有"分類"跟"TAG"可以選)

頁面有"層級"之分, 最上層表示是會出現在"選單"的第一層;
若此頁面有下一頁的話(或有其他頁面歸在此頁面下) ,
那麼選單就會出現子頁面的標題, 如此也可以建構出有層級的功能選單喔!
w9-page

4.以下是示意插入圖片後的樣子, 編輯時會自動存檔, 我們不用去按"儲存"鈕".
如果文章完成了, 可以按右上角的"發表…", 就可以在前端看到這一頁的內容了.
 PS.您的文章或頁面, 都要按"發表.."才會正式出現在前端讓網友看到喔!

w10-page

5.接下來我們來練習如何建立"文章", 建立文章之前, 我們先回到主畫面, 按下圖,1,2,3順序
您就會看到"分類"及"標籤"的管理介面, 請自行點進去各別建一下:
如: 分類1, 分類2,  及  TAG1, TAG2
wx1.jpg

6.接下來, 回到主畫面, 然後選左選單的"文章"【新增】
會看到以下畫面, 編輯功能跟"頁面"很像.w11-article

按一下右邊的功能列, 你會發現有"分類與標籤"可以選. 這裡面的項目就是您在第5步建立的.
一樣試著輸入一些文字, 然後按"發表"

w20
恭喜你, 到目前為止您已經學會"頁面"跟"文章"的操作了.
接下來是重頭戲了, 來設定你網站的"風格"跟"選單"……

四. 網站選單及風格

1.回到主選單, 選左選單的"個人化"->"自訂"->"選單",您會看到如下畫面, 選單可以自己決定是否要有"社群連結", 選點"Primary"
w16

2.接下來您會看到目前預設的選單內容,
簡介 -> 頁面
聯絡 -> 頁面    ,
我們按一下"新增項目"
w17
3.展開如下圖, 請點一下"分類"或"標籤", 然後按(+) ,就會在選單出現"分類1″, 這樣就代表這個單元是抓屬於"分類1″的文章呈現.

w18

4.同樣步驟, 我們再按"新增項目"->"標籤"->"TAG2″->(+) , 在選單中加入一個TAG2的標籤. 如下圖

w19

然後再按"發表", 以上就完成了文章型的單元建置喔!
5.接下來我們到前台看一下效果.
在瀏覽器輸入你申請的wordpress網址 http://xxx.wordpress.com, 如下二張圖, 第二張是選單.

w22w23

介紹到此您應該已經了解Wordpress的建置流程了.
接下來是"風格", WordPress有內建一些"免費"的主題可以選,
請回到主選單.  =>個人化=>佈景主題, 右邊就會出現很多主題, (付費&免費), 您可以選看看免費的進去後, 按"啟用". 然後再到前台網址看一下效果.

w21

下面是套用其中一個主題的結果, 選單變成在上方, 不是隱藏在右上角. 這樣子方便網友一目了然我們的服務項目及內容.
w24

以上介紹完畢, 剩下就留給您自己練習囉.

補充: 如果您不小心把聯絡頁(表單)刪了, 沒關係, 只要再到頁面或文章裡按(+)表單, 就可以再產生囉.

w_contact

以上供您參考.  謝謝

 

One comment

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.