WordPress 教學 基礎介紹三(頁面)

WordPress 教學 基礎介紹三(頁面)

WordPress 教學 基礎介紹三(頁面) 教學目的:

1.從WordPress控制台的側邊選單進入頁面操作介面

2.在WordPress頁面內新增頁面及學習將所有頁面上下層分類

大家好~歡迎來到鵠學院~協助您架設網站的好幫手!開始本篇有關 WordPress 教學 基礎介紹三(頁面) 的教學之前,在上一篇 WordPress 教學 基礎介紹二(媒體)應用的文章中,已經跟初心者們已經解說了在WordPress中要如何上傳圖片以及影片,那麽上傳的圖片以及影片,是應用在哪一個區塊呢?這就是在這一篇教學要教導大家的—-頁面。

基本上一個網站無論是部落格或著是商務網站、形象官網等,都必須因內容而區分不同的區塊,如果沒有加以分區,那整個網站將讓人無法以直覺式的瀏覽,讓使用者浪費許多時間在尋找想要的內容上。而頁面( page )的建立,可以說就是將網站設計者想表達給使用者的內容,分類區塊,比如說:商務網站可以區分”公司簡介”、”產品介紹”、”合作夥伴”等,那我們就必須在主頁面( Home Page )上建立不同頁面選單連結,並且在頁面的操作面板中,分別建立這幾個不同的頁面。簡單的說明後,開始建立頁面教程吧!

(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)

WordPress Taiwan 正體中文下載點:https://tw.wordpress.org/releases/

• 從 WordPress 控制台的側邊選單進入頁面操作面板

第一步:在控制台點選頁面,有全部頁面新增頁面,點選全部頁面。

WordPress 教學介紹三(頁面)

第二步:點選全部頁面後,將會出現跟文章面板相同的介面,在這裡的篩選及批次管理的方式跟文章面板一樣(詳細方法請點 WordPress 教學介紹一(文章))。

WordPress 教學介紹三(頁面)

小提醒:在這個頁面的面板上,可以對所有建立的頁面操作編輯或移至回收桶,如果是製作形象官網或商業網站,也可以針對想建立的頁面在這個面板逐一建立,以免遺漏掉想建立的項目。

• 在 WordPress 頁面內新增頁面及學習將所有頁面上下層分類

第一步:在控制台點選頁面,有全部頁面及新增頁面,點選新增頁面。

WordPress 教學介紹三(頁面)

第二步:在新建頁面的面板中,輸入新頁面的名稱,下面操作的部分跟文章面板相同。頁面這個部分內容元素的關聯性較強,比如要建立的頁面是”關於公司”,那在這個頁面圖片應該就會是公司的品牌圖示( Logo ),如果有影片可能就是公司的業務簡介或未來發展,文字的部分就是公司創立的宗旨等等,跟文章比起來有較強的針對內容,局限性也較大。

WordPress 教學介紹三(頁面)

小提醒:在下方較大的紅框左上角有新增媒體的按鈕,點擊後裡面的操作就跟”媒體”的操作方式一樣,可以在頁面中直接上傳想要插入的圖片或影片喔!

第三步:頁面的操作面板右邊有三個區塊,分別為發表、頁面屬性、精選圖片,發表的操作方是在文章的教學中已經說明過了,而精選圖片在頁面中通常不做設定,因為頁面在網站裡的定位是將想表達給使用者的內容,做一個區塊的分門別類,而不是像文章一樣需要精選圖片來表達文章大概敘述的主題或內容。因此在這裡偏重在頁面屬性的教學。

WordPress 教學介紹三(頁面)

1.上層:可以用來將頁面分層,來組織頁面.假設我們可以做一個『派對服裝』的頁面,新增兩個頁面分別命名為”男裝”及”女裝”,將此兩頁面設定在”派對服裝”之下,可以再新增三個頁面,”西裝”、”連身裙”、”洋裝”,這樣就可以將西裝放在男裝分類下,連身裙及洋裝放置在女裝的下層,這樣就可以很快速了解類別好提供觀看者點選。

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

2.模板:可以選擇你需要網頁美編的主題,套用在此頁面,也有很多的客製化主題可以供選擇,選單就會變更成選擇模板後的主題。

3.順序:這裡可以變更在網頁原本選單配置的先後順序,原設定是以英文字母來做排序,但在這可以利用數字將選單配置的順序做變更。

先將洋裝順序設定為 0,連身裙設定為 1,頁面排序為下:

WordPress 教學介紹三(頁面)

WordPress 教學介紹三(頁面)

再將洋裝順序改為 1,連身裙改為 0,頁面的排序將會因為設定數值而改變先後順序。

WordPress 教學介紹三(頁面)

第四步:在前面做的教學文章 WordPress 主題選用 中,已經說明了主題的重要性,而在頁面編輯裡面,除了使用 WordPress 本身的建構器( Builder )來編輯頁面內容外,在一些付費主題中也有針對頁面編輯時另外可以選用的建構器,比如示範的網站就是使用 Avada 這個主題,因此在頁面的面板上就可以使用 Avada 所提供的建構器( FusionBuilder )來實施頁面的製作。

WordPress 教學介紹三(頁面)

結語:

在看完最後一個步驟後,是不是對於用WordPress的建構器或著使用主題建構器的差異性有所疑惑呢?我在這裡簡單的說明,WordPress建構器提供的是比較基本的排版操作,文字段落及圖片影片的位置都較為固定,在網頁上顯示出來的外觀較為簡潔,沒有太多的視覺性設計;而主題建構器則能設定許多不同的版面,比如說在公司簡介頁面的內容分別為沿革歷史、創立宗旨、未來發展三點,在主題建構器中可以使用不同的圖示或滑塊( Slider )視差捲動( Parallax )淡入淡出( Fade )等功能來表現,視覺設計上會比較豐富,而在排版方面也有較為清楚明暸的編輯方式,如果說想進一步了解對於網站頁面內容設計所能使用的方式,可以參考這幾篇教學文章:Timeline Express 時間軸 、WP-dTree 文章以樹狀方式呈現,用文字表達頁面的建構方式,也許初心者們沒辦法有直觀的了解,這兩篇文章是使用 WordPress 外掛在網站頁面中加入不同的效果,相信對於各位初心者會有最直接的幫助。另外也可以去找網站設計公司去看範例的網站或作品 ,在看過後就能夠更加了解這為什麼在主題選用的文章介紹裡我會推薦使用付費主題的原因。

本篇的WordPress頁面基礎介紹就在這裡告一段落,在下一篇將介紹另一個建立網站的重要功能—“迴響”! 希望各位初心者記得準時回到 鵠學苑 上課喔! 我們下次見了!

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top