文章最後更新於 2022 年 12 月 8 日
要在 WordPress 網站導覽菜單下放置廣告，你的網站必須先通過 Google AdSense 的審查，才能以下的步驟，網站未通過審查者，建議先去 Google AdSense 網站申請，已獲得 放送廣告 的許可。
而 WordPress 網站已通過 Google AdSense 審查的站長，可以繼續往下閱讀。
一、如何在導覽菜單下放置廣告？
步驟一：創建新廣告單元
step 1
首先，你必須先前往 Google AdSense 網站新建一個廣告單元，點擊以下連結前往 Google AdSense。
PS：一般已獲得網站放送廣告的許可的站長，應都已註冊過 Google AdSense 的帳號了，這裡就先省略登入步驟，直接開始創建新廣告單元。
網站名稱：Google AdSense 網站網址：https://www.google.com/adsense/login2?hl=zh_TW
step 2
點擊左半邊的「廣告」選項。
step 3
選擇「按廣告單元」。
step 4
選擇「多媒體廣告」。
step 5
在左上角輸入該廣告的名稱，你可以像我一樣，把名稱改為「導覽菜單下方的廣告」，方便管理。
step 6
輸入完廣告名稱後，點擊右下角的「建立」按鈕。
step 7
點擊左下方的「複製程式碼片段」，一鍵複製廣告程式碼。
步驟二：前往佈景主題檔案編輯器
接下來的步驟需要將你複製下來的廣告程式碼，貼到佈景主題檔案編輯器的 header.php 中。 以下步驟將使用 Astra 佈景主題來演示，大部分佈景主題的設定步驟都差不多，照葫蘆畫瓢即可。
step 1
前往並登錄你的 WordPress 網站後台，點選左半邊選單中的「外觀」>>「佈景主題檔案編輯器」。
step 2
點選右半邊的「header.php」。
step 3
如下圖所示，在代碼 <div id="content" class="site-content"> (內容區塊)和 <div class="ast-container"> (容器區塊) 上方貼上你剛剛複製的廣告代碼。
step 4
貼上代碼後，記得點擊左下角的「更新檔案」按鈕，保存你的設定。
注意 !!! 這裡小翔建議，為你的佈景主題安裝一個子主題，如此，你剛剛所貼上的廣告代碼才不會在主題更新時，被覆蓋消失掉。
step 5
如下圖所示，做完以上步驟後廣告就會出現在你的網站導覽菜單下方，如此就完成了。
但，因你剛剛所添加的廣告是多媒體廣告，廣告版面多少會和你本身的網站外觀不搭，如果想修改廣告大小、並對齊你的網站版面，讓廣告更貼近你的網站，你可以繼續往下看下去。
二、如何讓廣告居中對齊？
想讓在你剛剛貼上的廣告居中對齊，可以使用以下語法：
<center>你的廣告代碼</center>
完成後，回到網站前台，應該可以看到廣告已居中對齊於你的網站。
但是，你會發現，廣告還是太寬、太長了，幾乎佔據了 1/3 的版面。
代碼來源：allusefulinfo.com 網站
三、如何讓廣告依螢幕寬度改變大小？
想讓你的廣告根據螢幕寬度來改變展示大小，可以使用以下語法：
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 1150px; height: 150px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
crossorigin="anonymous"></script>
<!-- 導航菜單欄下的廣告 -->
<ins class="adsbygoogle example_responsive_1"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>以下是代碼語法的介紹環節，首先是修改在不同螢幕寬度時廣告的大小：
.example_responsive_1 { width: 320px; height: 100px; } 代表在預設狀態下，螢幕寬度在 500px 以下時，廣告大小為 320px寬 x 100px高 (可以依自身需要來修改 320px 和 100px 數值)。
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } } 代表在螢幕寬度在 500px 到 799px 之間時，廣告大小修改為 468px寬 x 60px高 (可以依自身需要來修改 468px 和 60px 數值)。
@media(min-width: 800px) { .example_responsive_1 { width: 1150px; height: 150px; } } 代表螢幕寬度在 800px 以上時，廣告大小修改為 1150px寬 x 150px高 (可以依自身需要來修改 1150px 和 150px 數值)。
再來是你必須替換的廣告發布商 ID、廣告單元 ID：
以上的代碼有三處你必需要修改地方，第一個和第二個分別是把 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" 和 data-ad-client="ca-pub-1234567890123456" 中的 ca-pub-1234567890123456 代碼替換為你自己的廣告發布商 ID。
第三個是把 data-ad-slot="8XXXXX1"></ins> 中的 8XXXXX1 代碼替換為你自己的廣告單元 ID。
如下圖所示，黑色的部分就是你需要修改的部分，貼上代碼並更新檔案後，你可以前往網站前台觀看修改後的效果，再依需要來修改廣告展示的長、寬。
完成後，你可以前往網站前台來觀看修改後的效果，廣告應該會照著螢幕的寬度來自動改變大小。
參考文章：如何修改回應式廣告程式碼 (Google AdSense 說明)
四、如何讓廣告在手機和平板螢幕時全屏展示？
一般主流平板、手機螢幕寬度都在 800px 以下，所以我們只需要修改螢幕寬度在 800px 以下時，廣告尺寸為全屏顯示即可。
把 <style> 和 </style> 中的代碼改成以下代碼，此代碼表示在預設狀態下，螢幕寬度在預設情況下時，廣告大小為全屏寬 x 100px高。 並在螢幕寬度 800px 以上時，廣告大小修改為 1150px寬 x 150px高。
<style>
.example_responsive_1 { width: 100%; height: 100px; }
@media(min-width: 800px) { .example_responsive_1 { width: 1150px; height: 150px; } }
</style>五、廣告根據螢幕寬度改變展示大小 + 居中對齊
想讓你的廣告除了可以根據螢幕寬度來改變展示大小，還可以居中對齊於你的網站，可以使用以下語法：
<div align="center">
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 1150px; height: 150px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
crossorigin="anonymous"></script>
<!-- 導航菜單欄下的廣告 -->
<ins class="adsbygoogle example_responsive_1"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>就是在原有的「讓廣告根據螢幕寬度改變展示大小」代碼最上、下方在包一層 <div align="center"> 和 </div> 代碼，如下圖所示。
完成後，前往網站前台，你應該可以看到廣告已經居中對齊於你的網站。
如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。
在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。
有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。
by 小翔