69 00 08

如何在 WordPress 網站導覽菜單下放置 ads 廣告?

文章最後更新於 2022 年 8 月 11 日

要在 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
Google AdSense 登陸

step 2

點擊左半邊的「廣告」選項。

Google AdSense >> 廣告

step 3

選擇「按廣告單元」。

新增廣告單元

step 4

選擇「多媒體廣告」。

新增多媒體廣告單元

step 5

在左上角輸入該廣告的名稱,你可以像我一樣,把名稱改為「導覽菜單下方的廣告」,方便管理。

輸入廣告名稱

step 6

輸入完廣告名稱後,點擊右下角的「建立」按鈕。

建立廣告

step 7

點擊左下方的「複製程式碼片段」,一鍵複製廣告程式碼。

複製廣告程式碼

前往佈景主題檔案編輯器

接下來的步驟需要將你複製下來的廣告程式碼,貼到佈景主題檔案編輯器的 header.php 中。 以下步驟將使用 Astra 佈景主題來演示,大部分佈景主題的設定步驟都差不多,照葫蘆畫瓢即可。

step 1

前往並登錄你的 WordPress 網站後台,點選左半邊選單中的「外觀」>>「佈景主題檔案編輯器」。

外觀 >> 佈景主題檔案編輯器

step 2

點選右半邊的「header.php」。

header.php

step 3

如下圖所示,在代碼 <div id="content" class="site-content"> (內容區塊)和 <div class="ast-container"> (容器區塊) 上方貼上你剛剛複製的廣告代碼。

在內容區塊和容器區塊上方貼上廣告代碼

step 4

貼上代碼後,記得點擊左下角的「更新檔案」按鈕,保存你的設定。

注意 !!! 這裡小翔建議,為你的佈景主題安裝一個子主題,如此,你剛剛所貼上的廣告代碼才不會在主題更新時,被覆蓋消失掉。
更新檔案

step 5

如下圖所示,做完以上步驟後廣告就會出現在你的網站導覽菜單下方,如此就完成了。

但,因你剛剛所添加的廣告是多媒體廣告,廣告版面多少會和你本身的網站外觀不搭,如果想修改廣告大小、並對齊你的網站版面,讓廣告更貼近你的網站,你可以繼續往下看下去。

導覽菜單下方的廣告

如何讓廣告居中對齊?

想讓在你剛剛貼上的廣告居中對齊,可以使用以下語法:

<center>你的廣告代碼</center>
在廣告前、後輸入<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高 (可以依自身需要來修改 320px100px 數值)。

@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } } 代表在螢幕寬度在 500px 到 799px 之間時,廣告大小修改為 468px寬 x 60px高 (可以依自身需要來修改 468px60px 數值)。

@media(min-width: 800px) { .example_responsive_1 { width: 1150px; height: 150px; } } 代表螢幕寬度在 800px 以上時,廣告大小修改為 1150px寬 x 150px高 (可以依自身需要來修改 1150px150px 數值)。

再來是你必須替換的廣告發布商 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。

如下圖所示,黑色的部分就是你需要修改的部分,貼上代碼並更新檔案後,你可以前往網站前台觀看修改後的效果,再依需要來修改廣告展示的長、寬。

根據螢幕寬度改變廣告展示大小的代碼

完成後,你可以前往網站前台來觀看修改後的效果,廣告應該會照著螢幕的寬度來自動改變大小。

桌面螢幕的廣告大小 (800px 以上的螢幕寬度:1150×150 廣告單元。)
平板螢幕的廣告大小 (500px 到 799px 之間的螢幕寬度:468×60 廣告單元。)
行動螢幕的廣告大小 (500px 以下的螢幕寬度:320×100 廣告單元。)
參考文章:如何修改回應式廣告程式碼 (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> 代碼,如下圖所示。

貼上居中對齊代碼

完成後,前往網站前台,你應該可以看到廣告已經居中對齊於你的網站。

廣告在 800px 以上的螢幕寬度為 1150×150 大小 + 居中對齊
0 0 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest

0 評論
在線反饋
查看所有評論
0 Shares
Share
Tweet
Share
Pin