Free WordPress Themes Himalayas
在 WordPress Themes – 佈景主題安裝與推薦這篇文章跟大家分享了幾個關於一頁式佈景主題的特色,max 個人非常喜歡這一類式樣設計的佈景主題,簡潔大方的編排方式,平滑順暢的捲動方式,多種行動裝置支援,網站功能介紹集中在首頁,可以讓訪客感受專業的網站設計,最重要的是操作容易,這對於初接觸 WordPress 的朋友來說真的是最好的一個禮物了。接著就以 Free WordPress Themes Himalayas 這個免費佈景主題來做範例,一步一步的設定介紹,讓大家可以清楚看到一個網站的建置過程,由簡單到專業設計呈現,其實並沒有想像中的那麼困難。
安裝 Himalayas 佈景主題
在控制台的外觀/佈景主題/新增佈景主題,請輸入 Himalayas(圖一),安裝完成後請啟用佈景主題。在開始建置網頁前,也請記得先切換使用子佈景主題。這樣子在往後的維護與升級上比較容易管理,也可以避免因為修改設計失誤時造成網站無法開啟的錯誤。
Himalayas 佈景主題區塊說明
Himalayas 的DEMO網頁,可以在 http://demo.themegrill.com/himalayas/ 看到完整展示,這類型一頁式網頁的設計,可以看到相關的功能都建置在同一個頁面上,透過上方的功能選單,直接捲動到功能區塊,很適合內容不常更新的網站使用。接著就跟大家說明一下整個網站功能架構(圖二)(圖三)(圖四)。
- 區塊1 上方選單,將網站想要呈現的功能介紹都集中在這裡,訪客透過選單可以不需要跨頁就可以找到需要的資訊。
- 區塊2 Slider,這是一個動態展示區塊,也可以稱做特色文章展示,展示內容儘量選擇可以提升訪客興趣的頁面。規劃給 Slider 使用的頁面也要預先建置好(*1),Himalayas 佈景主題 支援4篇 Slider頁面。
- 區塊3 About Us,關於自己網站的描述內容,因此需要建置關於網站(About Us)的頁面(*2)。
- 區塊4 Call to Action,這一個區塊可以解釋作希望訪客採取行動的表現區塊,例如希望訪客參加註冊,消費購買這一類的行為。區塊8 跟這裡的定義是相同的,差別在於 Call to Action 文字與按鈕編排位置不同。
- 區塊5 Our Service,這個區塊顯示的是網站要提供的服務內容,抓取的資料是頁面內容,服務內容的頁面需要先行建置好(*3)。預設是6篇服務頁面,當然篇數是可以調整自行設定的,原則上依據版面的編排美觀,建議是3的倍數。
- 區塊6 PORTFOLIO,這個區塊可以做為作品展示區塊,可以提供業績案例之類的資料,抓取的一樣是頁面的內容,所以PORTFOLIO頁面內容也請先建置好(*4)。預設的PORTFOLIO頁面內容是8篇頁面,當然也是可以自行調整,同樣的因應版面美觀所需,建議是4的倍數。
- 區塊7 Blog,部落格區塊,可以來顯示網站的最新內容或是新訊息,預設顯示的是3篇文章,一樣可以自行調整篇數與選擇顯示文章的分類(*5)。
- 區塊9 Our Team,我的團隊內容來自頁面,因此想要呈現的團隊成員頁面內容需要先行建置好(*6)。預設顯示3位成員,一樣的是可以自行調整數量的。
- 區塊10 Contact Us,聯絡我們頁面需要事先建置,採用的是 Contact Form 7 外掛程式建置的聯絡頁面內容與簡碼(*7)。
- 區塊11 Footer Sidebar,這裡是下方小工具區塊,共有左中右三個區塊。可以放置想要加強的資訊區塊,例如文字區塊可以顯示公司聯絡地址電話等等。
- 區塊12 Footer Layout,頁尾佈局顯示的是網站版權宣告,社群網站連結之類的資訊。
開始建置網站
前一段的說明如果清楚也依序建置好相關頁面後,接下來的建置就可以事半功倍了。另外需要注意的是每一篇需要的頁面,都需要記得新增特色圖片(圖五),這樣子首頁的呈現效果才會有圖片顯示。區塊1 上方選單,我們移到後面在述,先從區塊2開始。
區塊2 Slider Setting,在控制台/外觀/自訂/Himalayas Slider Options/Slider Settings, Enable the slider 請勾選,啟用 Slider 展示功能。Slider1/Slider2/Slider3/Slider4 請分別勾選已經建置好的 Slider 頁面(*1)(圖六)。
區塊3 About Us,在控制台/外觀/自訂/小工具/Front Page Sidebar,新增小工具(圖七),加入TG: About Widget(圖八),About Us 區塊設定資料(圖九)。
- About Section ID: 請填入字串或是文字,也請將這組文字記下來,在建置上方選單時會用到。
- Title: 請填寫標題,例如關於網站或是 About Us。
- Description: 簡單描述這個區塊的說明。
- Page: 請選擇事先建置好的關於頁面(About Us)(*2)。
- Button Text: 按鈕文字,這裡建立按鈕的目的是可以增加連結的功能,可以是情況建置或是留空白。
- Button Redirect Link: 這一欄填入的是上方按鈕所需要的連結網址,如果有建置按鈕才需要填入連結。
- Button Icon Class: 可以顯示 Font Awesome 圖形,測試效果不顯著,所以跳過留白,不會影響頁面展示效果。
區塊4 Call to Action,繼續新增小工具,TG: Call To Action Widget(圖十)。TG: Call To Action Widget 設定(圖十一)。
- Background Color:這裡可以選擇區塊背景顏色。
- Image:想要使用背景圖片的話,可以在這裡選擇。
- Call to Action Main Text:區塊的主要描述文字,也可以視為標題文字。
- Call to Action Additional Text :區塊的附加描述文字內容。
- Button Text:區塊按鈕顯示文字,例如:立刻參加或是立即訂購…可以自行參考網站需求設定。
- Button Redirect Link :按鈕連結網址。
- Choose the layout :這裡有兩種版型可以選擇,呈現的效果就是區塊4與區塊8。
區塊5 Our Service,繼續新增小工具,TG: Service Widget(圖十二),這個區塊顯示網站的服務內容,關於服務內容的頁面需要先行建置,建置服務內容頁面時,模版請選擇Service Template,特色圖片也請建立好,至於文章摘要部分請自行決定輸入內容,填入的內容會顯示在首頁的Our Service(我們的服務)區塊(圖十三),服務內容頁面建置好以後,就可以設定TG: Service Widget(圖十四)。
- Service Section ID:填入資料並且記下來這裡的設定,上方選單建置時會用到。
- Title:服務區塊標題。
- Description:服務區塊的簡單描述。
- Number of pages to display:預設是6篇服務頁面,也可以自行修改設定。
區塊6 PORTFOLIO,繼續新增小工具,TG: Portfolio(圖十五),Portfolio 頁面內容,也是一樣必須事先建置好,建置時模版請選擇 Portfolio Template(圖十六)同樣的特色圖片與文章摘要欄位編輯時不要忘記。Portfolio 頁面確實建置好以後就可以進行 Portfolio 設定(圖十七)。
- Portfolio Section ID:填入資料並且記下來這裡的設定,上方選單建置時會用到。
- Title:作品展示區塊標題。
- Description:作品展示區塊的簡單描述。
- Number of pages to display:預設是8篇Portfolio頁面,也可以自行修改設定。
區塊7 Blog,繼續新增小工具,TG: Featured Posts(圖十八),TG: Featured Posts 設定(圖十九)。
- Featured Post Section ID:同樣的填入資料並且記下來這裡的設定,建置上方選單時會用到。
- Background Color:背景顏色選擇。
- Image:是否選擇使用背景圖片,在這裡選擇。
- Title:Blog 區塊的標題設定。
- Description:Blog 區塊的簡單說明描述。
- Number of posts to display:預設是展示3篇文章,Show latest Posts 顯示最新文章。
- Select category:或是選擇特定分類的文章顯示。
- Button Text:按鈕文字設定,這裡建議可以填入例如閱讀更多(View All),可以顯示更多文章的意思。
- Button Redirect Link:網站Blog 的網址,這樣訪客如果有興趣閱讀更多的文章,可以找到連結。
區塊8與區塊4建置方式相同,這裡就不重複說明。
區塊9 Our Team,建置方式一樣的繼續新增小工具,TG: Our Team Widget(圖二十),Our Team 頁面請先建置好,建置時模版請選擇 Our Team Template(圖二十一),頁面建置好以後,就可以進行TG: Our Team 設定(圖二十二)。
- Our Team Section ID:這裡填入資料並且記下來設定,建置上方選單時會用到。
- Background Color:背景顏色選擇。
- Background Image:選擇使用背景圖片。
- Title:Our Team 區塊的標題設定。
- Description:Our Team 區塊的說明描述。
- Number of pages to display:預設是展示3篇 our Team 頁面。
區塊10 Contact Us,建置與我們聯絡區塊,請新增小工具,TG: Contact Us Widget(圖二十三),聯絡頁面前面文章提到,是透過 Contact Form 7 這個外掛程式來建置的。因此,我們可以取得一組簡碼(Shortcode)(圖二十四),聯絡頁面建置好記下簡碼(Shortcode),接著進行TG: Contact Us Widget 設定(圖二十五)。
- Contact Section ID:這裡填入資料並且記下來設定,建置上方選單時會用到。
- Title:標題可以自行填入,例如與我們聯絡。
- Description:這裡可以輸入一些聯絡資訊,例如地址電話或是電郵…等等。
- Select a Contact page:請點選建置好的聯絡頁面。
- Shortcode:建置聯絡頁面時,外掛程式提供的簡碼(Shortcode)。
區塊11 Footer Sidebar,這個區塊的建立在小工具,Footer Sidebar One/Footer Sidebar Two/Footer Sidebar Three 這三個區塊(圖二十六),可以自行加入想要呈現的功能(圖二十七)。
區塊12 Footer Layout,最後這一個區塊的建立是在控制台的外觀/自訂/Himalayas Design Options/Footer Layout Options,有兩種式樣可以選擇,可以自行挑選喜歡的式樣(圖二十八)(圖二十九)(圖三十)。
區塊1 上方選單,文章到這裡,整個網頁的架構就算已經完成,最後剩下一個重要的建置那就是上方選單,這個選單最大的目的就是可以實現這個一頁式網站的主要導引。接著我們就開始進行上方選單的製作。
- 到控制台的外觀/選單/建立選單(圖三十一),選單名稱可以自行填入例如上方選單。
- 使用自訂連結,並且將它拉到選單結構內,這裡我們以About Us 做範例,連結網址請輸入關於我們頁面的完整網址,後面記得加上#ID,ID就是前面文章一直提到要大家記下來的那個ID,這裡就是指About Section ID,導覽命名:是指上方選單想要出現的文字,可以自行填入,在這裡我們範例是About Us(圖三十二)。接著依序將Our Service/Portfolio/Blog/Our Team/Contact Us 一併在選單結構內建置完畢,選單設定的地方,請點選 Primary Menu (主選單的意思),完成後點選儲存選單
以上完成
為了讓步驟可以清楚表達,提升大家閱讀的效果,文章內容圖片比較多,也謝謝大家耐心閱讀。整個佈景主題安裝設計步驟完成以後,相信任何佈景主題的安裝或是設定都難不倒各位了。