Newspaper|WordPress主題教學

Newspaper|WordPress主題教學目的:

1.介紹Newspaper佈景主題各種特色功能

2.了解Newspaper在WordPress後台中如何匯入Demo網站

歡迎回到鵠學苑—WordPress網頁設計超詳細攻略–Newspaper | WordPress主題教學,在眾多 WordPress 付費主題裡,其實各有各自的特色,說的明白一些,每個主題所適合的網站類型不盡相同,有的佈局簡約,排版清楚,適合做短期活動網頁;有的網頁元素效果明顯,佈局複雜而華麗,適合建構形象官網;也有功能眾多,能清楚地描述商品明顯的優勢及特點,適合拿來做商務網站。雖然說每一個付費主題都說可以製作不同類型的網站,但一定還是會有側重功能的那一面,所以在主題推薦教學的這一個系列中,不斷的強調選到對的主題,是多麽重要的一件事情。

而這一篇教學要介紹的Newspaper,就是功能性主題的其中一種,什麼叫功能性主題呢?意思就是,這個主題在設計的時候,”主要”就是以某個種類的網站為方向,所以在這個方面會表現得特別強大。Newspaper取意為報紙,就是非常適合設計部落格攝影作品影片製作美術畫廊等需要大量佈局網格來展示作品的網站,但要是你問Newspaper適不適合電子商務網站,按照筆者的觀點,Newspaper也是相當合適,不過要看是哪種的類型。並且這個主題有一個大的特點同時也是相當重要的功能,內建投放廣告!如果說主題不具有投放廣告的功能,就必須透過像 Q2W3 Fixed Widget 小工具 固定側邊欄  這樣的 WordPress 外掛功能來呈現廣告區塊效果,而在樣式設定上也要透過寫入程式碼的方式來設定廣告區塊的樣式,而Newspaper在佈景主題的設定頁面中就具有在站內許多位置都可以投放廣告,而且可以使用選項的方式來對廣告區塊做基本設定。基於以上的理由,相信還在找尋適合主題的你,是不是迫不及待想認識Newspaper這個主題了呢?接下來跟著鵠學院的腳步,讓我們開始了解Newspaper這個簡約卻又令人驚豔的 WordPress 佈景主題吧!

Newspaper 佈景主題下載

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

 

• 介紹Newspaper佈景主題各種特色功能

第一步:在 envatomar 的首頁,左方下拉式選單中選擇 Theme & Template ,在搜尋框中輸入Newspaper以搜尋主題,在結果頁中點選Newspaper圖片可以進入主題介紹頁面。

Newspaper
Newspaper

第二步:Newspaper的售價是 59 美金,相對於可以投放廣告的收益來說(前提是網站內容要有深度才能帶來流量),並不算太貴。點擊 Newspaper (連結直達Demo網站)的圖片或者下方 Live Preview 的按鈕,可以進入到範例網站頁面。
Newspaper

第三步:Newspaper的範例網站版型分類相當簡單,只有如圖中三個選項,雖然數量少但都具有很強的功能針對性,讓使用者一眼就知道 Blog 中有哪些版型具有怎樣的特色可以挑選。
Newspaper
第四步:透過小工具的運用,可以為文章、畫作、照片、影片等做一個完整的分類展示,讓使用者可以快速的挑選想要觀看的分類,而不會在站內迷路。Newspaper
第五步:超過 14 種的文章排版樣式,無論是強調最想呈現的使用者觀看的文章或著建立流暢的文字閱讀流程,都可以在Newspaper中自由編輯進而實現。
Newspaper
第六步:智慧型文章列表,按照日期發佈時間將最新文章放在醒目之處,具有特色圖片的文章類型將以縮略圖顯示在頁面上,提高使用者對於作品興趣進而增加點擊率。
Newspaper
第七步:使用Newspaper將不必再煩惱品牌標誌、廣告、特色圖片位置上的衝突,在主題選項中能透過完全客製化的設定,合理安排所有想呈現給使用者的元素。Newspaper
第八步:網格的製作將不再如同配角般被遺忘在角落,三分之二版面甚至全版面的網格樣式將在Newspaper中得以完美實現,最大限度的展示喜愛的作品。
Newspaper
第九步:在Newspaper中以讓文章標題、摘要、日期、作者完整的呈現,巧妙的文章區塊排版方式讓使用者能一眼看盡所有精選的文章,而不需要點選分頁等待網站重新載入的時間。
Newspaper
第十步:在移動設備上所有的作品將會自動適應螢幕解析度大小,以最佳而不失真的比例讓圖片、文字等完整的顯示。
Newspaper
第十一步:Newspaper支援市面上所有主流的社交應用軟體,讓網站的作品透過分享獲得更多的關注。也具有天氣功能,如同真正的電子新聞報一般的準確。
Newspaper

第十二步:支援 Instagram 小工具讓旅行的即時動態能與網站同步更新,而不必開啟網站後台做新增,也支援貨幣匯率顯示。
Newspaper

第十三步:以作品的標籤為依據做一個完整分類的展示,每一張圖片都可以寫上內容描述以及版權聲明的文字,更能透過輪播不同的角度以增強圖片的連貫性。
Newspaper

第十四步:Newspape能實現將熱門的分類作品放置在網站中最顯眼的的位置,提高使用者在網站中對於內容的集中度及喜好度。另外在移動設備上可以建立適合小螢幕操作點選的網站選單,提高使用者造訪網站的意願。
Newspaper

第十五步:多張圖片可以”燈箱( lightbox)“放大內容焦點的方式在螢幕上輪播,讓瀏覽者能對內容留下深刻印象,單獨區塊的作者資訊卡讓讀者對於作品出處能有更加深入的了解。
Newspaper
第十六步:廣告小工具有者高度自由的編輯度,自行定義位置及內容並且不必透過寫入程式語言就能輕鬆實現,支援影片播放列表讓使用者能快速觀看想了解的資訊。Newspaper

• 了解Newspaper在WordPress後台中如何匯入Demo網站

第一步:在Newspaper安裝後(如何安裝佈景主題可以參考鵠學苑的教學文章 WordPress主題選用)可以在後台工具列找到Newspaper的選項,點擊進入後找到安裝外掛( Install demos )的分頁標籤,就會進入下圖畫面,這裡我以 food 的範例網站來做教學。Newspaper
第二步:點擊要匯入的範例網站後會跳出如下圖的提醒文字框,詢問是否確定要匯入範例網站所有的資料,並且建議如果網站內有重要的資料比如訂單、文章、商品、留言等建議先行為網站備份再實施範例網站版型的匯入。點擊 yes 後就會直接開始匯入版型,見圖二。
Newspaper
Newspaper
第三步:安裝完畢之後會有提示,如果對於安裝的版型不滿意,在該版型的選項上也有解除安裝的按鈕可以點選,特別題醒,在重新安裝任何一個範例網站版型之前,一定要先將舊的版型解除安裝,否則很容易會導致網站前端顯示的問題。Newspaper
第四步:如果在右邊白底的範例網站清單中點選匯入版型,將會連範例圖片、影片、留言、訂單、商品等媒體資料全部匯入,而在右邊區塊中可以自己選擇是否要全部匯入所有內容,可以依據自己的需求去做操作。
Newspaper
第五步:回到網站前端可以看到範例網站的版型已經完成,此時就可以進入頁面後台開始編輯網頁了。
Newspaper
第六步:在Newsmag中的 Theme panel 選項可以找到如下圖中 ADS 的圖示,這裡可以插入廣告代碼到頁首、頁尾、側邊欄等位置,並且可以自定義廣告區塊大小以及顯示方式,比對其他付費主題需要以添加程式碼的方式而言,這樣的功能無疑是相當便利且不容易造成網站出錯的。
Newspaper
結語:

在前言有提到Newspaper究竟適不適合製作電子商務網站?這個答案其實是要看電商網站的走向,如果說商家的商品的品牌種類眾多且需要精打細算的折扣功能,銷售通路包含到外離島甚至到國外都有,那實在不建議使用Newspaper當作建構電商網站的佈景主題,對於眾多的商品網站內部更需要的是諸如流暢的結帳過程,簡短而切中要害的商品說明,更要多附加像願望清單,購物車這樣爭取每一筆交易且讓消費者能更加便利購物的外掛程式,與其他大型付費主題相較起來,Newspaper能做到的實在有限。

但如果銷售的商品是需要強調商品的特色,進而製造話題及曝光率讓消費者會不斷的關注,甚至透過比價讓主打商品能夠在價格壓低的狀況下脫穎而出,那Newspaper簡約而明顯的設計,就相當適合設計電商網站。不過總結來說,Newspaper最適合的還是部落格網站,無論是影音還是圖文類型,都能充分地表達出作品的美感,為網站流量帶來加分的效果!今天的教學到這裡告一段落了,不要忘記持續關注鵠學苑的最新文章,每週都會定期發佈最新有關 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