Main Menu

WordPress 外掛 WordPress 教學 網站程式代碼

Code Snippets 外掛教學：9 個實用 WordPress 程式碼片段範例

作者：

最後更新時間：2026-01-02，由 Dean 更新 Not By AI

無論你是 WordPress 新手還老手，都會碰到需要手動修改程式碼的時候，這時你就會需要使用能夠添加程式碼片段的外掛，來幫助你可以再最不消耗資源的狀態下，加入程式碼。

這篇文章是 Code Snippets 教學，會與你分享如何透過這款外掛，將你的程式代碼加入網站中。並且，也會提供常見的 WordPress 程式碼片段範例，讓你在使用上可以更加方便。

Code Snippets 是什麼？為什麼要使用程式碼片段？

Code Snippets Logo

Code Snippets 是一款非常好用的 WordPress 程式代碼外掛，顧名思義就是讓你寫程式碼的外掛。

但為什麼在 WordPress 上需要寫程式碼呢？有幾個原因：

  1. 修復外掛衝突：WordPress 功能能靠不同外掛來達成，但有時外掛間會相互衝突，需要自行添加程式代碼進去，才能做修正。
  2. 減少安裝外掛：你有時可能只需要一款外掛中的一個小功能，不需要安裝整個外掛，吃你網站的效能。這時，你就可以選擇直接寫一段代碼放入網站中，一樣可以達到你想要的功能。
  3. 修改網站外觀：除了功能外，「外觀」也會是很常見會需要做的調整。

一般來說，如果想要在網站上添加程式碼，都會到「佈景主題檔案編輯器」中調整 functions.php 檔：

調整 functions.php 檔

但這就會有個問題，每次佈景主題更新時，你添加的代碼就會被覆蓋過去，也就是你每一次更新完，都還需要手動再加入一次。有時候甚至會忘記要重新手動加入，都是過一陣子發現網站怪怪的，才發現程式碼被洗掉。

而使用像是 Code Snippets 這類型「程式碼片段」外掛，就可以把要新增的程式碼寫上去，它就會自動幫你插入網站中，如此一來就不會在每次更新時被覆蓋。在不需要使用時，也可以手動關閉，整體自由度更提升。

DR.DEAN LOGO
自架一個能提升
200%
諮詢量的網站
領取限量電子書
自架一個能提升200 諮詢量的網站書本

Code Snippets 使用教學

step 1

首先，到 WordPress 後台安裝外掛的地方，搜尋 “Code Snippets”。

找到一個剪刀圖案的 Logo，點選安裝，安裝完成後直接啟用。

安裝並啟用 Code Snippets

step 2

左側選單會看到「程式碼片段」的選項，進入後在上方點選「新增程式碼片段」。

P.S. 預設會自動帶入幾個已經打好的程式碼，看看你用不用得到，用不到的可以直接刪除。

新增程式碼片段

step 3

進入程式碼編輯的頁面：

  • 最上方，先輸入程式碼的名稱。
  • 在中間，可以撰寫你要加入網站的程式碼。
  • 下方，選擇你希望程式碼執行的區域。撇除一些追蹤代碼只執行於前端，不然大多都是選擇「全域執行」。
撰寫並設定程式碼片段

這邊要補充說明一下，網站常見的代碼會有 PHP、HTML、CSS、JavaScript，原本系統只開放能夠免費新增 PHP、HTML 代碼，其他需要升級到 Code Snippets Pro。(在撰寫程式碼欄位的上方有頁籤可以切換)

但是，實務上我們很少會付費，因為如果想要新增像 CSS、JavaScript 這類要額外付費的代碼，我們是能夠直接在編輯 PHP 的區域中，加入幾行程式碼，這樣即便是要付費的代碼，也能夠成功運行。

以下根據不同代碼，提供需要另外添加的程式碼，你只需要將原先要添加的代碼加到其中寫中文字的地方 (記得要在 PHP 編輯區中才能運行)：

加入 HTML 代碼

add_shortcode( 'shortcode_name', function () {

	$out = '<p>在這裡寫 HTML</p>';

	return $out;
} );

加入 CSS 代碼

add_action( 'wp_head', function () { ?>
<style>

	/* 在這裡寫 CSS */

</style>
<?php } );

加入 JavaScript 代碼

add_action( 'wp_head', function () { ?>
<script>

	/* 在這裡寫 JavaScript */

</script>
<?php } );

step 4

編輯好程式碼後，同個頁面往下，你會看到能夠添加：

  • 用途說明：你可以說明這個程式碼是要做什麼的，方便團隊或未來的自己好辨認。
  • 標籤：如果你的代碼很多，建議加入標籤方便管理。

都完成後，點選「儲存設定並啟用」，你就成功新增程式碼片段了。

說明程式碼功能

step 5

回到前台，你會看見剛剛新增的代碼是開啟狀態，代表目前程式碼正在運行中。

未來，如果你想要停用這段代碼，也可以在這邊直接將它關閉，十分方便。

啟用程式碼片段

9 個 WordPress 程式碼片段範例

在網站上加入 GA4 代碼

身為網站經營者，最常會使用到程式碼片段的時機，會是要加入 GA4 代碼，這樣才能追蹤網站數據。

你需要到你的 GA4 後台，取得要加入網站的 Google 代碼，並連著下方這串程式碼，一同新增到 Code Snippets 中。

add_action( 'wp_head', function () { ?>

	/* 填入你的 GA 代碼 */

<?php } );
新增 GA4 追蹤代碼

修改文章 H2、H3 樣式

如果你是剛安裝 WordPress 的人，大多佈景主題預設的 H2 & H3 (副標題 & 子標題) 都特別陽春，讀者在閱讀時不太好分辨不同的段落。

你可以嘗試加入以下的程式碼，調整 H2 & H3 的樣式。但要記得，不要直接貼上下方的代碼，不然你的樣式會跟我一樣。我有在語法後面標上中文，代表每一段代碼所調整的部分，你可以根據你的品牌風格去進行調整。

add_action( 'wp_head', function () { ?>
<style>

 .single-post .entry-content > h2{
   counter-increment: section;   /* 計數變數為 section */
   border-bottom: dotted 3px #848073;  /* 下底線 */
   padding: 18px 0;  /* 內距 */
   line-height: 38px;  /* 行高 */
  }
 .single-post .entry-content > h2:before{
    content: counter(section) "";    /* 指定設定計數變數的內容樣式 */
   color: #ffffff; /* 文字顏色 */
   padding: 9px 21px; /* 上下、左右內距 */
   margin: 0px 0.3rem 0 0; /* 上下、左右外距 */
   font-size: 28px; /* 文字大小 */
   font-weight: 600; /* 文字粗細 */
   background: #cca544; /* 背景顏色 */
   border-radius: 50px; /* 圓角 */
   }
  .single-post .entry-content > h3{
    color: #cca544;
   margin: 24px 0; /* 上下、左右外距 */
   background: #eae7df; /* 背景顏色 */
   padding: 6px 16px; /* 上下、左右內距 */
   border-radius: 50px; /* 圓角 */
  }
</style>
<?php } );
調整 H2 H3 樣式

新增「步驟」樣式

如果你的網站跟我一樣，會撰寫許多「教學型文章」，那麼在文章上呈現「步驟」就會顯得特別重要。

你可以加入以下的程式碼片段，一樣記得樣式要調整。

function step_shortcode( $atts, $content = null ) {
    return '<p class="step">step ' . $content . '</p>';
}
add_shortcode( 'step', 'step_shortcode' );
 
add_action( 'wp_head', function () { ?>
    <style>
	.step{
   		font-weight: 900; /* 字體粗細 */
   		font-size: 1rem; /* 字體大小 */
   		background-color: #cca544;  /* 背景顏色 */
   		padding: 10px 30px;  /* 內距 */
   		display: inline-block;   /* 行內區塊 */
   		margin: 20px 0;  /* 外距離 */
   		border: 5px solid #eae7df;  /* 線框 */
   		border-radius: 50px;  /* 圓角 */
   		color: #eae7df;  /* 文字顏色 */
        }
    </style>
<?php } );

在添加完樣式之後，未來你在你文章編輯的地方，只要輸入：

[step]步驟數[/step]

在文章上就會顯示出好看的步驟樣式。

添加步驟樣式

將檔名自動帶入替代文字&說明文字

如果你跟我一樣是常常在寫文章時，需要上傳大量的圖片，並且又想要維持最佳的 SEO，希望為每個圖片加入「替代文字 Alt Text」，讓搜尋引擎更好判定你每張圖片的意思，那麼你就很適合以下這段代碼。

下方這串代碼，就是幫助你在上傳圖片後，系統自動將「替代文字、媒體說明文字、內容說明」都自動帶入「標題名稱」(也就是你的檔名)。

function abl_mc_auto_image_attributes( $post_ID ) {
  $attachment = get_post( $post_ID );
  
  $attachment_title = $attachment->post_title;
  $attachment_title = str_replace( '-', ' ', $attachment_title ); // Hyphen Removal
  $attachment_title = ucwords( $attachment_title ); // Capitalize First Word
  
  $uploaded_image = array();
  $uploaded_image['ID'] = $post_ID;
  $uploaded_image['post_title'] = $attachment_title; // Image Title
  $uploaded_image['post_excerpt'] = $attachment_title; // Image Caption
  $uploaded_image['post_content'] = $attachment_title; // Image Description
  
  wp_update_post( $uploaded_image );
  update_post_meta( $post_ID, '_wp_attachment_image_alt', $attachment_title ); // Image Alt Text
}
add_action( 'add_attachment', 'abl_mc_auto_image_attributes' );

如此一來，未來你只要在上傳前先把檔名打好，上傳後就會自動帶入，省去一張一張設定的時間。

將檔名自動帶入替代文字&說明文字
DR.DEAN LOGO
自架一個能提升
200%
諮詢量的網站
領取限量電子書
自架一個能提升200 諮詢量的網站書本

允許網站上傳 SVG 檔

WordPress 網站預設只能夠上傳 JPG、PNG 檔，但是你會發現，這兩種檔案格式在上傳時都可能會被壓縮，導致圖片模糊失真。

如果你希望維持圖片品質，那使用「向量檔格式 SVG」會是不錯的選擇，因為這種格式無論放多大都不會失真。

不過，要上傳這種格式的檔案，你需要先加入以下這段代碼：

function smartwp_enable_svg_upload( $mimes ) {
  if ( !current_user_can( 'administrator' ) ) {
    return $mimes;
  }
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  
  return $mimes;
}
add_filter('upload_mimes', 'smartwp_enable_svg_upload');

停用 WordPress 管理工具列

只要你處於登入 WordPress 的狀態，你在瀏覽頁面時，最上方都會出現 WP 管理工具列。

但有時候，你正在調整頁面，需要看見頁面完整樣貌，不希望被上方黑黑一條的工具列干擾，那你就可以加入以下代碼：

add_filter( 'show_admin_bar', '__return_false' );

加入以後，即便在登入狀態，你在瀏覽網頁時，也不會看見 WP 工具列。

停用 WordPress 管理工具列

停用自動更新的郵件通知

如果你網站 SMTP 有設定，應該常常會收到系統寄送的自動更新通知郵件，像是下圖。

停用自動更新的郵件通知

但因為網站的更新往往很頻繁，導致你會常常收到更新通知，久了會有些佔郵箱空間。

如果你不希望繼續收到更新郵件，你可以加入以下代碼 (可以選擇你不想收到的類別加入就行)：

// 停止傳送 WordPress 版本更新郵件
add_filter( 'auto_core_update_send_email', '__return_false' );
 
// 停止傳送 WordPress 外掛更新郵件
add_filter( 'auto_plugin_update_send_email', '__return_false' );
 
// 停止傳送 WordPress 主題更新郵件
add_filter( 'auto_theme_update_send_email', '__return_false' );

不要讓文章回收桶自動清空

當你刪除文章，文章會進入「回收桶」，WordPress 預設在 30 日後會自動清除回收桶。

文章回收桶自動清空

但有時候，我們會希望隨時可以再從回收桶中，把一些突然又需要的文章拿回來，這時你就可以用以下代碼，移除這個自動清除功能：

add_action( 'init', function() {
    remove_action( 'wp_scheduled_delete', 'wp_scheduled_delete' );
} );

停用 WordPress 網站管理員信箱定期驗證

你平時使用 WordPress，一定有看過以下的「管理員電子郵件地址驗證」：

WordPress 管理員信箱定期驗證

這個管理員信箱驗證每過一段時間就會跳出來，如果你希望它不要再出現，可以新增下面這串代碼：

add_filter( 'admin_email_check_interval', '__return_false' );

Code Snippets 跟 WPCode 差別在哪？

提到「程式碼片段外掛」，除了 Code Snippets，WPCode 也是常常會拿出來討論的。兩款都很好用，差異如下：

Code SnippetsWPCode
功能特色免費支援 PHP、HTML，CSS、JavaScript 需付費。
可設定執行範圍（前台/後台）。		免費支援 PHP、HTML、CSS、JavaScript。
支援外部追蹤碼，如 GA、GTM。
能夠設定程式碼的條件邏輯。
內建程式碼片段資料庫。
可直接在 Header、Body、Footer 加入特定代碼。
可將程式碼以短代碼形式嵌入特定區域。
能夠指定程式碼只出現在桌機或行動裝置。
錯誤檢測錯誤檢測功能，避免因程式碼錯誤導致網站壞掉。沒有錯誤檢測，但支援預覽功能，減少錯誤的風險。
管理功能提供啟用&停用程式碼片段功能。
能夠為程式碼片段加入說明與標籤。		提供啟用&停用程式碼片段功能。
能夠為程式碼片段加入說明與標籤。
適用情境需要加入簡單的程式碼片段。需要加入外部追蹤碼、SEO，或進行代碼的條件控制。

總體來說，如果你只是希望簡單加入代碼，使用 Code Snippets 就好；但如果你需要做更細緻的設定，例如將程式碼片段加到特定地方，那麼就比較適合使用 WPCode。

處方箋
限量
領取

我們致力於協助專業工作者打造品牌。
8 年實務經驗，精煉出這些《處方箋》，
想在你卡住時，給你一些有用的方向。

領取限量電子書
自架一個能提升200 諮詢量的網站
專業工作者 5 階段封面 數位工具導航包 1
專業服務者的 5 種網站商業模式拆解
品牌視角內容策略專業工作者必學系統化方法
DR.DEAN LOGO

相關文章

服務/產品
服務/產品

請輸入搜尋關鍵字並按下 Enter 以搜尋

建議先看目錄
→ 文章目錄
返回頂端
自架一個能提升
200%
諮詢量的網站
領取限量電子書