WP & SEO
  • WordPress
    • WordPress懶人包
    • WordPress SEO
    • WordPress外掛
    • WordPress主機
    • WordPress佈景主題
    • 網站速度優化
    • WordPress精選文章
  • SEO
    • SEO工具
    • 網站索引
    • WordPress SEO
    • SEO元素週期表
    • SEO精選文章
  • 自媒體
  • 精選文章
    • WordPress精選文章
    • SEO精選文章
  • Android APP
  • 關於我
無結果
View All Result
  • WordPress
    • WordPress懶人包
    • WordPress SEO
    • WordPress外掛
    • WordPress主機
    • WordPress佈景主題
    • 網站速度優化
    • WordPress精選文章
  • SEO
    • SEO工具
    • 網站索引
    • WordPress SEO
    • SEO元素週期表
    • SEO精選文章
  • 自媒體
  • 精選文章
    • WordPress精選文章
    • SEO精選文章
  • Android APP
  • 關於我
無結果
View All Result
WP & SEO
無結果
View All Result

Home » WordPress » WordPress|部落格 / 雜誌類型付費佈景主題 – JNws購買與使用心得

WordPress|部落格 / 雜誌類型付費佈景主題 – JNws購買與使用心得

by WP & SEO
2020-08-15 - 最新更新時間: 2023-03-20
in WordPress
WordPress|部落格 / 雜誌類型付費佈景主題 – JNws購買與使用心得

Theme Forest正在舉行2023年春季大促,時間至3/31、折扣數約5-7折,可以優惠價格購買JNews、Soledad、Newspaper等熱門佈景主題,請點這個連結查看更多優惠佈景主題!

WordPress絕佳付費佈景主題:JNws

本篇的主角:JNws是我用過五個WordPress部落格 / 雜誌類型付費主題中最優秀的一個,雖然不像Soledad、Newspaper那麼熱門。我也用過Soledad(心得),真心覺得JNews優秀太多了。

我購買JNews的時機點是Theme Forest的Cyber Monday大促銷(通常是11月底、12月初),想購買WordPress付費佈景主題的話,這是個好時機!

JNews功能不會讓人眼花撩亂卻又五臟俱全,而且設定比Soledad簡單多了。接下來,就來看看JNews的特色吧(版本:10.0.4,發佈日:2021 / 11 / 23),不會介紹Page Builder設定。文章目錄:

  • Header / Menu
  • Sidefeed
  • Footer
  • 麵包屑
  • 文章版面設定:針對個別文章調整版型設定、顯示閱讀進度
  • Sponsored Post
  • 分類頁版面
  • 顯示內容更新時間:可在文章顯示最近更新時間
  • 社交軟體分享:支援Line
  • 黑暗模式
  • 視覺化自訂CSS
  • AMP
  • 翻譯功能:可將UI的英文翻譯成中文
  • 安裝注意事項:首頁設定、安裝與更新外掛

在往下看下去之前請注意下列事項:

ADVERTISEMENT
  • 這篇文章是介紹JNews的重點功能、方便判斷是否該購買,不是手把手教學。JNews的教學文件很完整,維護團隊也樂於回答使用上大大小小的問題,如果功能合用就可大膽的買下去,它的操作很平易近人
  • 以下提到的Soledad相關問題都是在2019年2月版本上遇到的,不代表現況。Soledad是熱門版型、更新也很快,最新版的功能請參考它們的說明
  • 本站版型也是JNews,因內容相對單純、主題不多,我沒用太複雜的設定,建議參考Travel with Leo看看JNews可以創作怎樣的網站,也是這篇文章的範本。本站內容是由Travel with Leo的數位行銷內容切出來的!

接下來,就來看看如何調整JNews多項設定吧,大多設定由JNews的設定UI調整(「WordPress主側邊欄」-「JNews」-「Customize Style」),如不是的話會特別說明。

Header / Menu:

Header跟Menu的設定是讓我將JNews列入WordPress付費佈景主題推薦之首的原因之一,一來它的設定功能很多,header區塊最多有三列,可以分別插入需要的元件,如果該列沒有任何元件就會自動隱藏。除了選單還有其他元件,例如:社群網站、搜尋按鈕、購物車、語系切換器、廣告等等,可以滿足絕大多數的需求。

設定路徑是設定UI側邊欄選單的「JNews : Header Option」,重點項目:

左邊側邊欄:上面五個是下列設定,下面則是個別元件的設定(例如logo、social icon等等),這邊不說明

  • Header的版型(Header – Builder & Layout):桌機、手機 / 平板通用
  • 桌機:
    • Header – Desktop Option:Header的顏色、字體大小、與上下元素間的間隔等等
    • Header – Sticky Option:調整常駐選單的出現方式(Menu Following Mode)跟外觀
  • 手機 / 平板:
    • Header – Mobile Option:功能類似Header – Desktop Option,但這邊還可調整常駐選單的出現方式
    • Header – Mobile Drawer Option:手機 / 平板漢堡選單的樣式

右側設定畫面:決定不同的選單內要放那些元件

  • Desktop:分為「Normal Header」跟「Sticky Header」(常駐選單)
  • Phone / Tablet:分為「Mobile Header」跟「Drawer Content」(漢堡選單)
  • 將要放的元素拖放對對應的位置,Phone / Tablet可用的元件比較少
WordPress佈景主題-JNews-Header設定畫面
左邊是側邊欄設定區塊,右邊則是決定header要放哪些元件

之前使用Soledad有個很擾人的設定:Sticky Menu(常駐選單)只能設定在往下滑時出現,可是當網友往下滑時就是想看更多內容,不太需要看到選單,而且這也衍生另一個問題:有設定錨點時,點了之後位置都不對,因為最上面的版位被常駐選單擋住。

JNews的設定方式比較聰明,可以選擇往上滑時才出現常駐選單(Follow when Scroll Up),網友點了文章一開始設定的導覽錨點時就可以跳到正確位置、不會被常駐選單擋住。

設定方式很簡單,在側邊欄點「Header – Desktop Sticky Option」 / 「Header – Mobile Option」(也就是桌機跟手機都能設定),再調整「Menu Following Mode」,往上滑時才出現是「Follow when Scroll Up」。

WordPress佈景主題-JNews-Sticky Menu設定畫面

Sidefeed:

這名詞乍看之下很難理解,它就是….左側或右側的常駐最新文章列表,早期的Time雜誌網站有這設計,目前沒了,應該是太複雜吧,我也沒開啟這功能,會讓版面太亂。如你需要這功能,恭喜你….這也是JNews的內建功能,可以設定出現多少文章、出現在哪一側等等,設定路徑是「JNews – Layout, Color & Theme」 – 「Sidefeed Setting」。

WordPress佈景主題-JNews-Sidefeed設定畫面
左邊那欄就是Sidefeed設定介面,我沒開啟;右邊紫色是預覽畫面

Footer:

Footer也是我覺得JNews用的很不錯的部分,分成「Footer Layout」跟「Footer Option」,設定路徑是設定UI側邊欄選單的「JNews : Footer Option」:

Footer Layout:

已經有預設幾種版型、不用自己從頭想起,可以放logo、選單、社群網站、版權聲明等等,非常方便。如果你選擇三欄或四欄式的排版,就要由「外觀」-「小工具」那邊將要用的元件新增到對應的「Footer Widget」,不是由這邊新增;如果選擇使用自訂版型的Footer,那就要使用Page Builder編輯(看你是啟用Elementor或WP Bakery)!

WordPress佈景主題-JNews-Footer設定
我的footer是用style 4,隱藏secondary footer

Footer Option:

這邊可以設定的選項依你選定的Footer版型而定,可編輯「Footer Copyright」跟「Footer Additional Text」,這兩個區塊可使用基本的html,例如a, b, i跟br,我footer的版權聲明就是用內建功能用出來的。

也可由這裡設定Footer是否啟用黑暗模式跟「Secondary Footer」等等,功能很完善!

WordPress佈景主題-JNews-Footer設定
我的版權聲明是加在「Footer Additional Text」

麵包屑:

JNews另一個貼心的功能就是內建麵包屑功能(Breadcrumb,Google譯為導覽標記),路徑是「JNews : Single Post Option」-「Breadcrumb Setting」,可選擇使用原生、Yoast SEO或者Navxt Breadcrumb,我選後者。文章、分類、標籤等等都可顯示麵包屑,看自己需求!

ADVERTISEMENT

某些版型要自行插入程式碼到佈景主題的function.php才能啟用麵包屑,還要選對位置,對不懂程式語法的人而言很不人性。

Soledad會被我換掉的原因之一就是當文章有兩個分類而且已經有設定主要分類時,麵包屑常常跑出另一個分類,超困擾的,JNews就沒這個問題。我目前是用Yoast SEO的麵包屑,使用時需要於Yoast SEO調整設定,請參考這篇文章。

麵包屑是很重要的網站導覽功能,JNews處理的很不錯

文章版面設定:

JNews的文章版面設定的路徑是「JNews : Single Post Option」-「Single Post Option」,功能也很完整,除了可以調整首圖位置跟樣式,還可選擇想要選擇哪些元件。最特別的就是Pop Post,就是文章右下角會有個小按鈕顯示下一篇文章(所以最新文章不會有這按鈕,沒有比它更新的內容),這邊也是我覺得它用的比Soledad好的地方。

這邊的設定是調整預設設定,但是單篇文章可以自訂版面蓋過預設設定,例如預設設定是像這一篇,但有些文章因為首圖的關係,版面跟預設設定不一樣,例如這一篇。

另一個JNews值得推薦的原因就是開發者很用心維護、會不定時更新版型加入新功能,例如閱讀進度我剛買的時候沒有,是後面加的,也是由文章那邊做設定。

首圖版面設定
側邊欄設定
可決定要顯示那些元素

如果想改變個別文章的版型設定,請由文章編輯頁的「JNews : Single Post Setting」調整,要先如下圖所示開啟Override功能,就可以調整非常多細部設定!這也是我大推JNews主因之一。

「JNews : Single Post Setting」是很常用的功能

Sponsored Post:

經營部落格有點成績後,可能會收到合作邀約、詢問可否在我們的網站曝光內容,如果對方的網站屬性跟內容品質都不錯,不失為增加網站內容的機會,但是….要如何告知讀者這內容來自合作夥伴呢?JNews有內建Sponsored Post功能,讓站主明確的說明文章出處。

我是蠻重視這功能的,因為合作夥伴供稿的寫作風格及口吻可能跟我們的有明顯差異,提示USER該內容來自合作夥伴可以減少違和感。Sponsored Post的設定層級屬於個別文章,在前述的「JNews : Single Post Setting」中可找到「Sponsored Post」,需要的話請由那邊新增。

Sponsored Post是非常貼心的功能

分類頁版面:

JNews的分類頁版面設定路徑是側邊欄的「JNews : Global Template」,Soledad少數優於JNews的功能就是這邊,它的分類頁版型玲瑯滿目,也很容易針對個別分類調整;JNews如果不同的分類要不同的版面,就要另外安裝版型提供的外掛。

不過JNews有個優點:提供常駐版位(Hero Header),就是分類頁上方會固定顯示幾篇文章,我目前沒使用。除了分類頁,Tag列表頁、搜尋結果頁的版面都可以設定。

總之,JNews分類頁的功能也算完整,提供Hero Block、多種版型,也可調整文章摘要的顯示字數、分頁功能的樣式,非常夠用了。

WordPress佈景主題-JNews-設定分類頁版型
可以選擇是否啟用分類頁的「Hero Block」
WordPress佈景主題-JNews-設定分類頁版型
分類頁的版面選擇也不少
WordPress佈景主題-JNews-設定分類頁版型
也可以調整分頁功能的樣式

顯示內容更新時間:

經營部落格很困擾的一點就是文章很長更新,但是大多數的版型只能顯示發布時間、無法顯示最後更新時間,原本JNews也有這問題,後來修正了。

一開始它只能發布時間與最後更新時間擇一顯示,後來調整成可以同時顯示,這也是我愛用這版型的主因:開發團隊非常用心。這功能的設定路徑是:「JNews : Additional Option」-「Post Date Setting」。

前台可顯示文章更新時間是旅遊部落格站主的一大福音

社交軟體分享:

JNews也內建社交軟體分享功能,設定好之後,USER點擊按鈕後便能利用Line、Twitter、Facebook等社交軟體分享文章,但Facebook是指分享到動態,無法分享到Messenger!需安裝並啟用JNews的附加外掛類型Social Share & Counter的「JNews – Social Share」才能用這功能,後面會說明如何安裝版型的附加外掛。

安裝好之後要由版型設定UI完成兩個設定:

  • 在文章哪個區塊顯示分享功能:
    • 路徑在「JNews : Single Post Option」-「Single Post Option」的「Share Position」區塊
    • 分享位置有文章的上方、下方、浮動選單
  • 要啟用哪些社群軟體分享:
    • 路徑在「JNews : Social, Like & View」-「Social Bar, View & Like」的「Share Bar Social Icon」區塊
    • 支援的社交軟體:Facebook(只有動態,沒Messenger)、Line、Whatsapp、Telegram、Wechat等等

我不以這個方式佈署社交媒體分享,以前用的是付費外掛Easy Social Share,後來停用了:

根據我用GTM測試的結果,這功能在桌機版的使用率很低,在手機版上會有人用,但我的手機版瀏覽大多來自AMP網頁,它有自己的社交軟體分享功能,所以….其實在前台啟用這功能的意義不大。

可以設定多個社交軟體
支援的社交軟體非常豐富
呈現在前呈現在前台的方式很多元

黑暗模式:

前陣子黑暗模式(Dark Mode)在行動裝置興起之後,一定有版主好奇如何在網站佈署這種能提高對比的版型呢?這模式也是JNews的內建功能,不過調整的時候要注意….網站許多模組都要同步調整(例如選單、小工具),不然前台會很詭異。我不愛用這模式,下面截圖是預覽畫面。

JNews的黑暗模式長這樣

視覺化自訂CSS外掛 – Yellow Pencil:

Yellow Pencil是JNews的大加分,這個強大的外掛可以讓管理者用視覺化的方式調整網站的CSS,不用再自己研究區塊的class跟id,還要熟悉各種css語法。需先安裝、啟用附加外掛類型Styling Editor的「YellowPencil Pro」才能使用這功能。

使用方式很簡單,先進入要調整css的內容模組(post、page、搜尋結果頁等等),再決定要改哪一個區塊,點了那區塊之後就會顯示可以調整的內容。這邊的css設定都是視覺化、已經寫好元素名稱,只要輸入數字或選項就好。

只要進入要改的模組,選擇要改哪一個區塊,再調整那區塊的元素設定,夠簡單的吧!
點擊想要調整CSS的網址Admin Bar上的Edit Yellow Pencil按鈕就可以開始編輯css

改的時候要注意一件事:是套用到單篇文章還是這邊文章所屬的模組,如果你選擇套用到單篇文章,那就只改到這一篇文章的css,不會改到其他文章的,大多數都是套用到整個模組啦!

然後改了post的css不代表改了page的css,例如….明明post的標題已經改了字體大小跟字型,page還是要改一次,這點就很煩,自己寫custom css還比較快,但是整體而言有Yellow Pencil會大幅加快調整css的進度,而且還能加入一些原本要超熟悉css才能使用的效果。

改的時候要留意是套用到single(單篇文章)還是template(模組)

如果要調整原本設定的css設定也很簡單,在後台的主側邊欄下方可找到Yellow Pencil,由那邊可以一目了然到底有新增哪些css,當然也可以編輯那些設定。

由主側邊欄就可進入Yellow Pencil的設定區域

AMP:

JNews也支援Google AMP頁面,安裝外掛清單上的WordPress AMP跟JNews-AMP後,便可佈署Google AMP頁面。

  • WordPress AMP:Google提供的AMP外掛,用來佈署AMP頁面
  • JNews-AMP:JNews提供的AMP外掛,用途是在AMP頁面正確套用JNews的版面設計

AMP頁面的格式跟一般網頁並不一致,通常它的外觀跟我們套用的佈景主題有差異,JNews可以搭配外掛「JNews-AMP」,讓它可以套用到AMP頁面並通過Google的AMP檢測,好處就是AMP頁面跟一般頁面的視覺統一。

如要達到這個效果,除了兩個外掛都要安裝,應該還要在WordPress AMP中將範本模式設定為過渡模式,比較奇妙的是….AMP網頁結尾是「?amp」。

我目前兩個網站皆已經移除AMP頁面,過往是採用AMP for WP來佈署AMP頁面(相關教學)。

這是我的測試站AMP頁面

翻譯功能:

雖然很多版型都有內建翻譯功能了,還是要誇一下JNews沒有忘記這功能,要先安裝、啟用附加外掛類型Translation的「JNews – Frontend Translation」。由WordPress後台側邊欄的「JNews」 – 「Translate Frontend」就可以新增翻譯了,很簡單(不是由版型設定UI的側邊欄喔)。

WordPress佈景主題-JNews-翻譯功能
JNews的翻譯功能很完整

安裝注意事項:

首頁設定:

關於首頁設定,如果是用Page Builder設計首頁,要先將範本設定成「Landing Page」,再開啟「Page Loop」功能。

Page Loop指的是這個頁面會內建下一頁功能,你不用於Page Builder新增相關模組,而且USER在其他的文章列表頁面(網站的第二頁、第三頁之類的)只會看到文章列表,不會看到Page Builder那些林林總總的模組(可以看我的首頁跟第二頁)。想要使用Page Loop,得先要將範本設定為「Landing Page」。

Soledad並沒有這個功能,每次點了首頁最下方的第二頁、第三頁等等,上方總是出現那些眼花撩亂的模組,很沒必要,不確定是否修正這問題就是了。

WordPress佈景主題-JNews-首頁設定

安裝、更新外掛:

啟用JNews之後不要馬上進行設定,先去主側邊欄的「JNews」 – 「Install Plugin」看看要安裝哪些版型附加外掛。進到這邊會先看到外掛分類,點開之後才是外掛安裝畫面。

這些外掛有些是Required,代表必裝,沒裝的話很多佈景主題功能都無法設定,至於Recommend跟Optional的外掛就看個人需求。想使用前述的翻譯功能、社交分享功能、視覺化編輯CSS,都要先安裝、啟用對應的附加外掛!

原則上….用不到的不要裝,例如我完全不寫食譜內容,就不用安裝相關外掛,我也沒裝Review跟IG外掛,但這篇寫的某些功能就是要安裝這邊的外掛才可使用。

如果外掛是附屬在JNews版型下,版型有更新外掛才可能會更新,如通知列的「JNews- Notification」轉成紅底就要點進去看一下,是否有顯示「Some Plugin Need Update」,有的話點一下就會跳到JNews的外掛安裝頁面並提示哪些外掛需要更新。

我的頁面編輯器是使用WP Bakery,它常常會更新,但是呢….如果系統跳出更新提示,你是無法由WordPress原生的更新功能處理,因為你並沒有單獨購買,無法取得更新時必要的授權碼。想更新它得利用上述的JNews外掛更新功能,等開發者更新版型時有推出新版WP Bakery再更新吧!

WordPress佈景主題-JNews-安裝外掛
安裝好版型後先看看需要安裝哪些外掛,別馬上設定版型
有外掛需要更新時顯示的提示
按下Update就會自動更新再啟用外掛

相關連結:

  • Jnews:購買連結(價格:USD 59)|說明文件(必看)
  • Yellow Pencil購買連結,價格是USD 26(如果買JNews就不用另外買,版型已含這外掛)
  • Theme Forest(我都在這邊買版型或外掛)
  • 其他用過的付費版型:
    • Soledad:使用心得|購買連結(過去使用過,目前都用JNEWS)
    • WoodMart:購買連結(用於親人的型錄網站)
    • Look:購買連結(前公司使用)

FAQ:

JNews上的demo有很多,費用到底如何計算?

JNews的demo只是開發者預先設計的版型、方便使用者直接套用,不須額外付費,只要買版型就可。

購買JNews之後可以使用多久?

完成購買後可以無限期使用、享有半年的更新與客服服務。首購時可以延長更新與客服服務到一年,更新與客服服務到期時需要付費延長才能享有相關服務。

要如何安裝JNews到WordPress網站?

完成購買之後,下載版型的ZIP檔再用上傳檔案的方式安裝版型。關於付費版型的安裝與更新方式請參考Theme Forest使用分享。

一定要套用demo嗎?

如果熟悉版型設定也可以不用套用demo、全部自行設定,我啟用JNews後就沒套用demo。

一定要用Yellow Pencil才可以變更CSS嗎?

JNews依然提供WordPress版型內建的自訂CSS功能,不一定要使用Yellow Pencil才可以變更CSS。

心得:

WordPress五花八門,即使是要花錢的付費版型也讓人眼花撩亂,讓版型挑選成了一大挑戰,如果你跟我一樣經營部落格類型的網站,非常推薦JNews,是我用過五個版型中的佼佼者。

最後一點小提醒:不管用哪個版型,確認合用就盡量不要換,其實換版型蠻麻煩的,而且同類型的版型功能常大同小異。如果不是功能缺失或重大維護問題,建議將精力放在經營內容,不要三天兩頭就換版型。

延伸閱讀:

WordPress懶人包:

  • WordPress架站|註冊網域、安裝網站 / 外掛、設定調整等9大步驟教學
  • WordPress SEO|網域與索引、重點功能、內容編輯等七大主題教學
  • WordPress主機|重點功能要求、主機費用評估、五大主機簡介
  • WordPress速度優化|主機挑選、圖片優化、相關外掛與CDN
  • WordPress推薦外掛|Yoast SEO、WP Rocket、AMP for WP等10大外掛

WordPress外掛:

  • Yoast SEO|WordPress必裝SEO外掛設定教學
  • Redirection|WordPress必裝301轉址外掛設定教學
  • WP Rocket|WordPress必裝快取外掛設定教學與注意事項
  • WPForms|WordPress必裝表單外掛付費版教學
  • AMP for WP|WordPress上線AMP網頁推薦外掛設定與使用心得
  • Jetpack|超多工WordPress推薦外掛設定教學

WordPress主機:

  • Cloudways主機介紹|服務與特色說明、主機選項、計費方式、優缺點分析
  • SiteGround主機介紹|方案與重點功能介紹、教學文章整理
標籤: WordPress佈景主題WordPress精選文章精選文章
上一篇文章

WordPress|速度優化分享 – 主機挑選、圖片優化、相關外掛與CDN

下一篇文章

自媒體經營分享|心理建設篇 – 創造價值、階段性目標、技能累積等七點提醒

WP & SEO

WP & SEO

Hi, 我是Leo,正職是數位行銷,主攻SEO、WordPress、數據分析與內容規劃。以多年自助旅行經驗為基底、WordPress為骨架,打磨SEO與內容行銷專長。曾任KKday SEO經理,以電商平台與WordPress部落格系統穩定提升Google搜尋排名與流量。長期經營「Travel with Leo」作為WordPress與SEO的實驗場!歡迎光臨這個分享SEO、WordPress、自媒體的小天地。聯絡方式: 粉絲頁私訊 | Email 。

下一篇文章
自媒體經營分享|心理建設篇 – 創造價值、階段性目標、技能累積等七點提醒

自媒體經營分享|心理建設篇 – 創造價值、階段性目標、技能累積等七點提醒

無結果
View All Result

最新文章

  • SEO小教室|Ahrefs站長工具介紹:建立方式、連結分析與關鍵字分析簡介 2023-02-19
  • SEO小教室|WordPress網站搬家注意事項:注意事項說明、重點監控項目、推薦參考文件 2023-02-12
  • WordPress|必裝SEO外掛 – 超完整Yoast SEO設定教學(2023年版) 2023-02-08
  • SEO小教室|2022 Google Quality Raters Guidelines補充內容-E-E-A-T說明 2022-12-17
  • WordPress|SEO外掛 – 超完整Rank Math設定與使用教學(2023年版) 2022-11-26

贊助商廣告

分類

  • Android APP
  • SEO
  • WordPress
  • 推薦文章
  • 自媒體
  • WordPress
  • SEO
  • 自媒體
  • 精選文章
  • Android APP
  • 關於我
使用規範:請遵循CC BY-NC 4.0
聯絡我:粉絲頁私訊|Email。

聯盟行銷分潤聲明:本站部分連結屬於導購連結,如您於這些連結完成購買,我將能獲得維持網站營運的小額佣金。

  • WordPress
    • WordPress懶人包
    • WordPress SEO
    • WordPress外掛
    • WordPress主機
    • WordPress佈景主題
    • 網站速度優化
    • WordPress精選文章
  • SEO
    • SEO工具
    • 網站索引
    • WordPress SEO
    • SEO元素週期表
    • SEO精選文章
  • 自媒體
  • 精選文章
    • WordPress精選文章
    • SEO精選文章
  • Android APP
  • 關於我

聯盟行銷分潤聲明:本站部分連結屬於導購連結,如您於這些連結完成購買,我將能獲得維持網站營運的小額佣金。