應該很少人會想到要如何在 WordPress 建立頁尾吧,因為很多頁尾Footer的設定過程都不是太順利,不然就是功能太少。

我相信很多人的網站都沒有好好重視頁尾Footer 這塊。

在這篇文章中,我會介紹 4 種可以建立 WordPress 頁尾Footer 的方法,以及我自己最推薦的方法。

【聲明 】這篇文章有聯盟行銷合作,如果你透過以下連結購買東西,廠商會提供一點佣金來支持我的網站,讓自由黑客能繼續經營下去。放心!完全不會增加你額外費用,你也能用我提供的折扣碼獲得優惠。這些商品我都親自使用過才真心推薦,更多資訊請到聯盟聲明

4 種方式設定你的 WordPress 頁尾

我要來介紹 4 種可以設定你的 WordPress 頁尾的方法,

我這邊所說的頁尾不單單只是放上聯絡資訊、法律聲明的這種資訊頁面。而是可以完全自訂你的網站頁尾要放置的內容&設計。

說到設計,下面介紹的方法有些需要讓你自行設計版面,但我最愛使用的方式就是透過 Thrive Theme Builder 來點一點拉ㄧ拉就可以呈現好看又有用的頁尾了。

下面就讓我來一一介紹...

方法ㄧ:編輯 HTML CSS 設定

困難度:5/5

如果你對於 HTML、CSS 語法熟悉,或是你覺得比較喜歡直接透過語法來更改頁尾樣式,那你可以直接編輯 HTML 。

要修改網站的頁尾 HTML 步驟如下:

WordPress 控制台 > 外觀 > 佈景主題編輯器

WordPress>外觀>佈景主題編輯器

在佈景主題編輯器的右側欄位,點擊佈景主題頁尾 (footer.php),就可以編輯頁尾內容了。

WordPress 編輯 HTML 區域

優點

這個方法的最大好處就是,任何一個 WordPress 佈景主題都可以編輯,但隨著佈景主題的複雜度,就會有可能會不小心改一改把網站玩壞了。


如果你是一個懂程式語法的人,這個方法絕對是適合你的。當你有一個完全是靠程式語法寫出來的網站,這就是編輯網站頁尾的唯一方式了。

缺點

最大缺點,你需要有程式語法相關的知識&經驗。所以最好就是交給你的網頁設計師,因為只要一不注意,就有可能會破壞你的網站。破壞也還好,慘的是不知道做錯了什麼,該如何回復。

即使你非常了解要如何編輯這些程式語法,這個過程可能也不會太有趣,每個 WordPress 佈景主題都有一些不一樣的地方。


如果你是個需要視覺化的人,這個方法就超級不適合你。對我來說就是這樣,我沒辦法立即看到我腦海中想到的畫面呈現,基本上就沒辦法製作。

除非你是一名專業工程師,編輯 WordPress 程式語法基本上就會是一個緩慢的過程。

方法二:使用 WordPress 佈景主題設定

困難度:3/5

使用 WordPress 佈景主題是有些人會使用的方式。WordPress 的某些佈景主題有提供一些有限的方式來設定頁尾。也就是依照佈景主題的製作者限制你可以編輯的程度,最終的樣式還是回歸到他當初設計的版面,而不是照你自己的想要的樣子來呈現。一種被限制住的感覺。

要更改佈景主題的設定到:

WordPress 控制台 > 外觀 > 自訂

WordPress-佈景主題自訂設定

但並不是所有佈景主題都有提供自定義頁尾 (Footer)。

舉例 WordPress 佈景主題 Twenty Twenty & Astra 就是實際案例,下圖可以看到只有 Astra 可以編輯頁尾 ( Footer ) 的選項,Twenty Twenty 就無法。

WordPress佈景主題-Footer比較

像 Astra 是一種比較商業性的佈景主題,雖然它有選項讓你設定頁尾(Footer),但能夠設定的選項也不多。

下圖是 Astra 可以設定頁尾(Footer)的選項

佈景主題-Astra 調整頁尾的選項

優點

對於一般大眾,透過 WordPress 佈景主題來設定,完全可以節省很多時間,因為你不用去研究程式語法 HTML、CSS 。

它也提供了一種很直觀視覺化的設定方式,按個按鈕、調個數值顏色就可以。

缺點

我覺得使用佈景主題來設定網站頁面,只是佈景主題的設計師讓你可以享受自己設計網頁的想像,但其實最終呈現出來的,都是設計師設計好的。


佈景主題設計並不是真正的設定你的網站,如果裡面能夠設定的選項並沒有開放,甚至沒有,最後我們還是需要更改 HTML & CSS 程式語法。


這種感覺就好像只是滿足消費者可以自己動手玩的慾望,但其實你的網站還是被佈景主題操控著。

方法三:WordPress 頁尾小工具

困難度:3/5

WordPress 的頁尾小工具提供了簡便自定義頁尾的選項,你只需要把想要的工具拖拉到頁尾(Footer)即可。

WordPress 頁尾小工具的位置在:

WordPress 控制台 > 外觀 > 小工具

WordPress-小工具

這個頁尾小工具一樣是由佈景主題來操控著,因此你使用不同的佈景主題,就會有不同的小工具區域可以使用。

你把你需要的小工具拖拉到不同的頁尾(Footer )中,再回到網站去瀏覽成果。

頁尾Footer-小工具
Footer-小工具更改成果

這種頁尾(Footer)設定的方式看似快速方便,只需要拖拉就好,但非常受限於佈景主題和它提供的小工具。

如果你只是想要在頁尾(Footer)增加最新文章列表,這可能是很快速的方式,因為很簡單。但對於任何想要增加網站轉換率的相關事情,這些小工具又都太侷限了。

優點

缺點

我在測試頁尾小工具時最讓我無法接受的就是,拖拉工具到頁首後,還要回到網站重新整理才能看到實際長怎樣。


另外一點,使用頁尾小工具幾乎不可能進行網站版面的設計。當然可能可以付費升級到進階版版,讓你可以更改顏色或一些選項,但就如此而已。


這一點,既是小工具的優點也是缺點。


如果你想要更改樣式(字體、顏色、排版),還是需要更改 WordPress 的 HTML,不只需要工程師的知識還需要設計師的美感。


小工具設定後,通常會影響全部的網站,而無法在特定頁面上呈現不同的版面,進一步帶來轉換率。

方法四:透過 Thrive Theme Builder 一鍵設定

困難度:2/5

接下來要介紹的這個方法我覺得非常適合像我這種,不懂程式語法,但又想要有好看的網站以及增加轉換率,看似貪心但其實完全是可以達到的成果。

為什麼要使用 Thrive Theme Builder :

  • ​看到的畫面就是你網站的畫面
  • 直接拖拉新增想要的元素
  • 不會有被限制住的功能

下面我使用的工具是 Thrive Theme Builder ,實際上這應該是編輯 WordPress 頁尾(Footer)最簡單、最快和最強大的方式了。

我覺得你可能會想我在誇大事實,下面讓我展示給你看就知道了

從各式專業模版選擇頁尾 (Footer)樣式

Thrive Theme Builder 提供了大量的頁尾 (Footer)模板,可讓一開始的新手快速使用,你只需要選擇一個最適合你網站的模板,就可以節省你的時間&經歷。

雖然說是模板,但你仍然可以自己定義你想要的頁尾(Footer)

Thrive-theme-builder 頁尾模板

目前 Thrive Theme Builder 提供了 27 種有設計感的頁尾 (Footer),你不用擔心找不到你心目中完美的頁尾,因為你可以把這些模板當作是一個版型,你再自行去發揮你的創意去更動。

Thrive Theme Builder 頁尾模板

自行更改頁尾樣式

我自己的使用方式會先選擇一個模板,之後再去更動單獨的元素。

因為在裡面自己加入元素的方式非常方便,可以使用拖拉區塊的方式就能輕鬆增加元素。

直接視覺化呈現給你看

你所看到的製作版面就是你的網站會呈現的樣貌。這一點我覺得很重要,這代表我們不用每執行一個步驟,就要到網頁重新整理頁面才會出現所做的改變。

使用 Thrive Theme Builder 編輯 WordPress 頁尾 (Footer),就跟你真實網站所呈現出來的一模一樣。

使用Thrive Theme Builder編輯WordPress頁腳與編輯實時網站差不多,

如果需要改變文字內容,直接點選就可以改變了。

thrive-theme-builder-footer-example

如果需要改變欄位寬度,拖拉就好了。

Thrive-theme-builder-footer-example2

結論

網站頁尾(Footer)是一個很容易被忽略的區塊,我想他們容易被忽略,可能也是因為對一般人來說要更動的過程太複雜又無法呈現他們想要的。

上面分享了 4 種可以編輯 WordPress 頁尾的方式,當然我最推薦的就是使用 Thrive Theme Builder。

如果你有任何想要了解討論的,歡迎在下方留言給我

thrive theme builder logo

$67 / 一個網站

FREELANCE HACKER 評價​


Ikea Kew


我是自由黑客創辦人,分享自由工作、部落格經營、影像製作。
曾是 36k 低薪上班族,想要跳脫現況打造自己的事業,在 2020年離職炒掉老闆,成為影像自由工作者,同時全職經營部落格事業。
我親身經歷從普通人打造一人事業,想要與你分享我如何做自己熱愛的事,在網路上賺錢!

Ikea 簽名

其他人正在看....

歡迎留言

您的電子郵件位址將不會被公開。必填欄位已標記

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}