WordPress 五天自學衝刺班 — 部落格篇
第四天:客製化外觀與插入廣告

Soledad 主題選項全攻略+翻譯中文+插入 Google Adsense 廣告

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

今日目標:用 Soledad 來輕鬆客製化網站外觀!

  1. 如何修改頁首的樣式?換LOGO?改選單字體?----------- (7:10 實作)
  2. 如何修改頁尾的樣式?自訂版權聲明?---------------------- (2:02 實作)
  3. 如何編輯社群圖示的連結?------------------------------------- (2:33 實作)
  4. 如何修改網站字型與字體大小?------------------------------- (2:58 實作)
  5. 如何修改網站的顏色?------------------------------------------- (5:34 實作)
  6. 如何翻譯主題字串成中文?------------------------------------- (4:15 實作)
  7. 如何插入 Google AdSense 與圖片廣告?--------- (11:26 觀念+實作)
Soledad 主題範例

第四天的課程要開始囉!

Soledad 的客製化選單超多,沒辦法瞬間搞懂沒關係,請把這頁加入書籤,當作參考書隨時回來複習!😊

如何修改頁首區域 ?

7:10 一定要看喔!幫自己的網站換上一個獨特的 LOGO 圖片吧!

如何替換網站的 LOGO?

  1. 請到 外觀 > 自訂 > Logo and Header Options
  2. 替換電腦螢幕用的 Logo:請到 Upload Logo 處,上傳你的 Logo 圖片。
  3. 替換手機螢幕用的 Logo:請到 Logo for Vertical Mobile Nav 處,上傳你的 Logo 圖片。

如何修改選單的字型與字體大小?(4:15)

  1. 請到 外觀 > 自訂 > Logo and Header Options
  2. 可以跟著影片去修改選單的樣式、字型與字體大小。

如何修改最上方的 Top Bar 的樣式?

  1. 請到 外觀 > 自訂 > Topbar Options 去做相關設定。
  2. 勾選「Enable Top Bar」:啟用與顯示最頁面上方的區域,就可以加入次選單囉!(請參考 第三天 5.)

 

如何修改頁尾區域?

2:02 幫自己換上一張漂亮的照片吧!

頁尾 = 頁尾小工具區 + 版權聲明區。

1. 頁尾小工具區:

  • 請到「 外觀 > 自訂 > Footer Options」去修改頁尾區域的樣式。
  • 如果你不想要顯示頁尾的小工具區域,請勾選「Disable Footer Widget Area」。
  • 頁尾區域裡的「小工具」的內容,要到「外觀 > 小工具」去編輯喔!(請參考第三天 7.)

2. 版權聲明區 (0:48):

  • 版權聲明區的文字與樣式設定也在「 外觀 > 自訂 > Footer Options」的最下面喔!

如何編輯社群圖示的連結?

2:02 幫自己換上一張漂亮的照片吧!

Soledad 主題可以讓你輕鬆插入社群連結,不需要額外的外掛喔!(包含 LINE)

  1. 請到 外觀 > 自訂 > Social Media Options (社群媒體選項) 。
  2. 直接在社群媒體名稱旁邊,填入你的社群連結。
  3. 如果有貼連結的,社群圖示就會自動顯示出來。
  4. 預設的狀態下,社群圖示會顯示在 Topbar 最上方區域、Menu 主選單、Footer 頁尾;如果在某些地方你不希望它顯示,請到 外觀>自訂,點選想設定的區域,可以設定隱藏圖示。

如何修改網站字型與字體大小?

2:58  建議跟著影片做,把內文字體改大一點點,方便讀者閱讀。

Soledad 內建思源黑體 (Noto Sans TC) 喔!不用寫程式!也不用裝外掛!超棒的~

  • 修改標題與內文的字體樣式:請到 外觀 > 自訂> General Options (一般設定)。
  • 修改最上方的次選單的字體樣式:請到 外觀 > 自訂 > Topbar Options
  • 修改主選單的字體樣式:請到 外觀 > 自訂 > Logo and Header Options
  • 其他地方的字體樣式,請到 外觀 > 自訂,點選想設定的區域去找找看喔!

如何修改網站的顏色?

5:34 網站用色少一點,通常看起來會比較整齊乾淨喔!

Soledad 主題可以讓你依照不同的區域,各自進去設定顏色!

Soledad Color Options
Soledad 外觀 > 自訂 中,與顏色相關的設定。

如何翻譯主題字串成中文?

4:15 影片中有大部分的常用翻譯喔!

Soledad 主題有內建的翻譯功能,不需要另外裝外掛,就可以翻譯主題中有用到的字串

  • 請到 外觀 > 自訂 > Quick Text Translation
  • 填入你喜歡的翻譯就可以囉!(也可以參考影片,帶路姬有示範翻譯一些)

如何插入 Google AdSense 與圖片廣告?

11:26 只要堅持下去,持續產出對讀者有幫助的內容,一定有機會可以轉換成被動收入的喔!

Google AdSense 是一項免費服務,讓您輕鬆的在自己的部落格中刊登廣告,向訪客顯示吸引人的相關廣告來賺取收益。

  1. Google AdSense 的說明中心
  2. Google AdSense 的基本概念
  3. 申請前的須知及申請教學
  4. 如果你已經準備好了,可以到這裡開始申請
  5. 記得到上方的說明中心,學習「什麼是廣告單元」及「建立廣告單元」,就可以得到廣告的程式碼囉!

申請好 Google AdSense 帳號後,第一件事是要讓 WordPress 網站與 Google AdSense 服務做好串接

  1. 登入 Google AdSense,你會在首頁得到一串程式碼,請複製備用
  2. 回到 WordPress 後台,請到 外觀 > 自訂 > Logo and Header Options
  3. 找到最下面的「Add Custom Code Inside <head> tag」欄位,把剛剛複製的程式碼貼上,並且發布儲存就完成串接囉!

建立好廣告單元後,你可以得到它的 Google AdSense 程式碼,就可以把它複製、貼到 WordPress 的後台。有兩種方式可以貼入 Google AdSense 廣告:

  1. 外觀 > 小工具,新增「自訂 HTML」小工具到你想放置的位置,把廣告產生的程式碼貼入到「自訂 HTML」小工具內就可以了喔!
  2. 外觀 > 自訂,有許多區域的設定選項裡,都有欄位可以插入 Google Adsense 廣告。例如:General Options (一般設定)、Logo and Header Options (頁首設定)、Homepage Options (首頁設定)、Single Post Options (單一文章頁設定)、Footer Options (頁尾設定)。

插入圖片廣告的方式:

  • 外觀 > 小工具,新增「圖片」小工具到你想放置的位置,上傳一張廣告圖片,並且設定他的連結目標,就完成囉!

 

第四天的課程結束囉!

今天真是辛苦大家了! (也辛苦我了... 😅) 今天的內容,比較像是參考書,大家可以一邊客製化、一邊來這邊找點方向。如果你喜歡帶路姬的教學服務,請大家多分享,讓我有機會可以賺到一點獎金,可以鼓勵我寫更多有價值的教學分享給你們,謝謝你們!。

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

你喜歡這樣的學習方式嗎?

這裡需要你的真實見證! 成功時,別忘了留言告訴我喔!- 網站帶路姬

"Lacinia neque platea ipsum amet est odio aenean id quisque."

— KELLY MURRY
ACME Inc.

"Aliquam congue lacinia turpis proin sit nulla mattis semper."

— JEREMY LARSON
ACME Inc.

"Fermentum habitasse tempor sit et rhoncus, a morbi ultrices!"

— ERIC HART
ACME Inc.

如何編輯社群圖示的連結?

6:43

Avada 有些設定是「全站性」的改變整體的樣式

  • Theme Options > Color: 設定一個主要色系。
  • Theme Options > Page Title Bar: 不管哪種內容類型,每個頁面都會有自己的頁面標題。頁面標題的樣式在這裡設定。
  • Theme Options > Typography:各種「內容」部分的文字相關的設定,像是標題大小、內文字體大小、字體粗細等等。
標籤

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
close-link
Close