0%

正威網路行銷工作室,專注於基隆、台北與全台客製化網頁設計,提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
地址基隆市仁二路 220 號 5 樓
追蹤我們

WordPress 文章自動插入廣告:開頭、結尾與第 N 段後的程式碼寫法

平板上的數位行銷網路圖示

想在每篇文章的開頭和結尾放廣告,最直覺的做法是打開主題的 single.php 把廣告代碼貼進去。問題是主題一更新,single.php 就被覆蓋,廣告跟著消失;區塊主題更是根本沒有 single.php 可以改。

比較好的做法是用 the_content 這個 filter,在文章內容輸出時自動把廣告加上去,換主題、更新主題都不受影響。

程式碼要放在哪裡?

下面的 PHP 程式碼都加在子主題的 functions.php,或用 Code Snippets 外掛新增。詳細說明請看 WordPress functions.php 實用程式碼整理。動手前記得先備份網站。

基本寫法:文章開頭與結尾放廣告

PHP
/**
 * 廣告代碼:把廣告商給的整段代碼,貼在註解的位置
 */
function ahwei_ad_top() {
    ob_start(); ?>
    <div class="post-ad">
        <!-- 文章開頭的廣告代碼貼在這裡 -->
    </div>
    <?php return ob_get_clean();
}

function ahwei_ad_bottom() {
    ob_start(); ?>
    <div class="post-ad">
        <!-- 文章結尾的廣告代碼貼在這裡 -->
    </div>
    <?php return ob_get_clean();
}

/**
 * 在文章開頭、結尾加上廣告
 */
add_filter( 'the_content', 'ahwei_post_ads', 20 );
function ahwei_post_ads( $content ) {
    // 只在單篇文章的本文加
    if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() || get_the_ID() !== get_queried_object_id() ) {
        return $content;
    }

    return ahwei_ad_top() . $content . ahwei_ad_bottom();
}

說明:

  • 廣告代碼放在 ?> 和 <?php 之間,是一般的 HTML 區域,廣告商給的整段代碼直接貼上就好,不用擔心引號造成 PHP 語法錯誤。
  • is_singular( 'post' ) 等判斷,讓廣告只出現在單篇文章的本文,不會跑到首頁、分類列表,或同一頁其他文章的摘要裡。
  • 使用 Google AdSense 時,同一頁有好幾個廣告位置,adsbygoogle.js 那一行載入程式只要出現一次就夠了,其他位置放廣告單元本身的代碼即可。

進階:插在第 N 段後面

讀者常常不會看到文章最後,在內文中間放一個廣告,被看到的機會比較高。先加上這個「在第幾段後面插入」的小工具:

PHP
function ahwei_insert_after_paragraph( $insertion, $paragraph_number, $content ) {
    $closing_p  = '</p>';
    $paragraphs = explode( $closing_p, $content );

    foreach ( $paragraphs as $index => $paragraph ) {
        if ( trim( $paragraph ) ) {
            $paragraphs[ $index ] .= $closing_p;
        }
        if ( $paragraph_number === $index + 1 ) {
            $paragraphs[ $index ] .= $insertion;
        }
    }

    return implode( '', $paragraphs );
}

function ahwei_ad_middle() {
    ob_start(); ?>
    <div class="post-ad">
        <!-- 文章中間的廣告代碼貼在這裡 -->
    </div>
    <?php return ob_get_clean();
}

再把前面的 ahwei_post_ads() 整段換成這個版本(包含 add_filter 那一行,同一個函式出現兩次網站會出錯):

PHP
add_filter( 'the_content', 'ahwei_post_ads', 20 );
function ahwei_post_ads( $content ) {
    if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() || get_the_ID() !== get_queried_object_id() ) {
        return $content;
    }

    // 不放廣告:設了 hide_ads 自訂欄位的文章
    if ( get_post_meta( get_the_ID(), 'hide_ads', true ) ) {
        return $content;
    }

    // 管理員、編輯自己看文章時不顯示,也避免誤點自己的廣告
    if ( current_user_can( 'edit_posts' ) ) {
        return $content;
    }

    // 超過 6 段的文章,在第 3 段後面再放一個
    if ( substr_count( $content, '</p>' ) > 6 ) {
        $content = ahwei_insert_after_paragraph( ahwei_ad_middle(), 3, $content );
    }

    return ahwei_ad_top() . $content . ahwei_ad_bottom();
}
  • 段落是用 </p> 來計算的,引言、清單裡的段落也會被算進去,位置可能跟你想的差一兩段,實際看一下再調整數字。
  • 短文章不放中間的廣告,避免一篇短短的文章塞了三個廣告。

排除特定文章

有些文章不適合放廣告,例如公告、合作邀約、隱私權政策。上面的程式碼會跳過有 hide_ads 自訂欄位的文章:

  1. 在文章編輯畫面,從右上角的「選項 → 偏好設定」裡開啟「自訂欄位」。
  2. 回到文章,在下方的自訂欄位新增名稱 hide_ads、值填 1,更新文章即可。

想讓整個分類都不放廣告,把那一行判斷改成 if ( get_post_meta( get_the_ID(), 'hide_ads', true ) || in_category( 'announcement' ) ) {,announcement 換成分類的代稱。

預留廣告空間,避免版面跳動

廣告通常比文章晚載入。沒有預留空間的話,讀者正在看的文字會突然被往下推,這種「版面位移」很惱人,也是 Google 評估網頁體驗的指標之一(Core Web Vitals 的 CLS)。

用 CSS 先把位置留好,順便標示「廣告」讓讀者分得清楚:

CSS
.post-ad {
  margin: 2em 0;
  min-height: 280px; /* 依廣告實際高度調整 */
  text-align: center;
}

.post-ad::before {
  content: "廣告";
  display: block;
  margin-bottom: 0.5em;
  font-size: 12px;
  color: #888;
}

不寫程式的做法

  • AdSense 自動廣告:在 AdSense 後台開啟自動廣告,由 Google 決定廣告的位置與數量,網站只要加上一段代碼(也可以用 Google 官方的 Site Kit 外掛設定)。
  • 廣告管理外掛:例如 Ad Inserter、Advanced Ads,可以在後台設定廣告位置、要排除哪些文章或分類,不用寫程式。
  • 使用 AdSense 的網站,記得依照 AdSense 後台的說明,在網站根目錄放好 ads.txt。

放廣告的小提醒

  • 不要放太多:廣告比內容還多,讀者很快就會離開。
  • 不要讓廣告看起來像內容:把廣告做得像文章連結或下載按鈕,會誤導讀者,也可能違反廣告聯播網的政策。
  • 注意網站速度:廣告程式會拖慢網頁載入,放廣告之後記得測一下速度,加速的方法請看 WordPress 網站加速完整攻略。

延伸閱讀

廣告收入和閱讀體驗之間的平衡,是內容網站需要長期調整的功課。正威網路行銷是 25 年經驗的基隆網頁設計工作室,也提供 Google 關鍵字廣告與 SEO 搜尋引擎優化服務,歡迎來聊聊。

分享這篇文章

返回文章列表更多「Wordpress代碼教學」文章

發表留言

還沒有人留言,歡迎第一個分享你的想法或問題。留言經審核後才會顯示,Email 不會公開。

讓我們一起打造
您的專屬網站!