好用的 Code Snippets 外掛，N個實用程式碼片段範例教學

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

本篇小翔會教你如何透過單單一個 Code Snippets 程式碼片段外掛，替你的 WordPress 網站增加各種各樣極其實用的小功能。

例如：在文章頁面顯示文章最後更新時間，更改全站文字樣式、顏色及大小，把網站所有連結改成開啟新分頁等等。

目錄隱藏

Code Snippets 外掛介紹
- 小翔 Code Snippets 外掛使用心得
安裝 Code Snippets 外掛
- 安裝外掛
外掛使用教學
N 個實用程式碼片段範例
結語

Code Snippets 外掛介紹

Code Snippets 是一個輕便、易用，且專為在網站上執行 PHP 程式碼片段所設計的解決方案，使用 Code Snippets 外掛後，便不再需要為了為網站添加程式碼，而必須修改使用中的佈景主題的 functions.php 檔案。

亦即，你安裝了該外掛就不需要再使用子主題，該外掛也方便了程式碼與程式碼之間的管理，未來要尋找、查看、以及修改程式碼也比較方便。

WordPress 本身包含許多豐富的外掛可供下載使用，極大豐富了我們網站的功能。但很遺憾的是，外掛一旦下載太多，可能會衍伸出網站效能不佳、外掛與外掛互相衝突等等問題。

而使用 Code Snippets 外掛後，便不再需要為了網站功能去下載外掛，只需新增一個程式碼片段，輸入程式碼，即可為網站添加所需要的功能，且不會占用太多網站空間，從而降低網站速度。使用該外掛，也可以盡量減少發生外掛與外掛衝突的概率。

小翔 Code Snippets 外掛使用心得

Code Snippets 程式碼片段外掛雖然使用起來非常的方便，複製貼上程式碼即可為網站新增多種多樣的功能，甚至還能修改網站任意區域的文字、區塊樣式。

但這裡你必須了解，如：Code Snippets、WPCode 等等的程式碼片段外掛是用來補足你 WordPress 網站內建功能的不足之處、以及方便管理大量程式碼片段的，如果你想為網站添加的程式碼並不多，其實並不需要另外再安裝程式碼片段外掛。你只需要將你想添加的那串代碼，複製並貼上到佈景主題 >> 附加的 CSS 輸入框中即可。

小翔本人之前常常會在附加的 CSS 中添加大量代碼，用來修改、美化網站，但添加的代碼一旦多了，就變得很難管理，想修改以前添加的代碼時，常常會遇到要找一段時間才能找到的問題，而自從使用了 Code Snippets 外掛後，管理代碼就變得非常方便，也不再出現會有找了很久才找到。

補充：如果你安裝的 WordPress 佈景主題 的自訂中並沒有內建「附加的 CSS」功能，您可以另外安裝 Code Snippets 外掛來彌補這佈景主題的不足，利用這外掛來為網站添加程式碼。

安裝 Code Snippets 外掛

首先，你必須要安裝 Code Snippets 外掛，在安裝外掛頁面搜尋「Code Snippets」，找到 Code Snippets 外掛後，請點選「立即安裝」並啟用該外掛。

安裝外掛

以下教學需安裝並啟用 Code Snippets 外掛，不會安裝 WordPress 外掛的可以點擊以下連接前往教學文章學習。文中會教你如何搜尋、安裝、啟用、停用和刪除外掛。

教學文章：外掛安裝教學
文章網址：https://xiaoxiang.blog/how-to-install-the-plug-in/

step 1

開啟 WordPress 後臺管理介面，前往外掛 > 安裝外掛。

step 2

使用關鍵字搜尋外掛，輸入「Code Snippets」。

step 3

找到名稱為「Code Snippets」的外掛，點選 立即安裝，並啟用該外掛。

外掛使用教學

step 1

外掛啟用後，你可以在網站後台左側欄位上，看到多出的「程式碼片段」選單，點選「新增程式碼片段」選項。

step 2

進入新增程式碼片段頁面後，你可以輸入程式碼的標題，以方便未來程式碼的管理，而標題下方大大的輸入框，就是給你輸入程式碼的地方。

step 3

當你標題、程式碼全都輸入完成後，記得在左下角點選「儲存設定並啟用」按紐，網站才會啟用你的程式碼。

N 個實用程式碼片段範例

在這裡，小翔將分享幾個我個人覺得超實用的程式碼，由於目前分享的程式碼數量可能還會在未來增加，所以，網站標題最後暫定為 N 個。

把網站所有「外部連結」改成開啟新分頁

這個程式碼片段，他可以幫你把所有 非你的網域 的連結改成用新分頁開啟，即使圖片也是一樣。如果是站內頁面與頁面之間的連結，就不會觸發，有效降低整個網站的跳出率。

網站跳出率的降低，對於網站的 SEO 有很大的幫助，像 Google、Bing 等等的主流搜尋引擎才不會把你的網站標示為沒價值，從而降低你的網站文章搜索引擎排名。

程式碼：

add_action( 'wp_head', function () { ?>
    <script>
          window.onload = function() {
            var links = document.links;
            for (var i = 0, linksLength = links.length; i < linksLength; i++) {
              if (links[i].hostname != window.location.hostname) {
                links[i].target = '_blank';
              }
            }
          }
    </script>
<?php } );

畫面：

參考文章：如何自訂WordPress語法？6個程式碼片段範例教學

在文章中加入Step樣式

此代碼替網站文章加入了 Step 的步驟樣式，以下為實際效果圖：

程式碼：

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: 400;
        font-style: normal;
        font-size: 1rem;
        background-color: #ffffff;
	/*background-color是背景顏色:#ffffff是白色，顏色可自由更改*/	
        padding: 10px 30px;
        display: inline-block;
        margin: 20px 0;
        text-transform: uppercase;
        font-weight:bold;
	border:1px solid #000000
	/*border是邊界設定:1px是邊界粗細，#000000是改變邊框顏色，這裡是黑色*/	
		
        }
    </style>
<?php } );

畫面：

使用方法為，在編輯文章時使用「短代碼」區塊，並在其中輸入以下程式碼：

[step]1[/step]

使用方法：

參考文章：如何自訂WordPress語法？6個程式碼片段範例教學

在H2標題前插入1、2、3…的數字樣式

此代碼可替每一篇文章中的 H2 標題前依序插入1、2、3…的數字樣式，如下圖所示：

程式碼：

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

body {
counter-reset: section;
/* 重置计数器成0 */
}
		
.entry-content h2:before {
counter-increment: section;		
/* 設定區域裡的內容，這裡以h2在文章裡的次序為內容 */
content: counter(section) "";
/* 設定文字為白色 色碼可替換 */
color: #fff;
/* 設定背景顏色為漸層顏色 色碼可替換 */
background-image: linear-gradient(45deg, #FF9224 0%, #FF8000 1%, #FFA042 100%);
/* 設定區域的影陰大小 */
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
/* 設定區域的圓角大小 */
border-radius: 3px;
/* 設定區域的內部間距 上下 左右 */
padding: 0.25rem 0.85rem;
/* 設定區域的外部間距 上 右 下 左 */
margin: 0 0.8rem 0 0;
}	
	
.entry-content h2 {
/* 設定下方邊框線條樣式 粗細 線條樣式 顏色 */
border-bottom: 2px solid #E8E8E8;
/* 與上方的外部間距 rem:最上層 body 裡設定的字體大小再乘上前面的數字倍數 */
margin-top: 2.4rem;
/* 區域內部間距 上 右 下 左 */
padding: 0 0 0.6rem 0;
/* 字體大小 rem:最上層 body 裡設定的字體大小再乘上前面的數字倍數 */
font-size: 1.7rem;
/* 段落行高 沒寫單位就是直接以這個區域裡設定的字體大小乘上數字位數 */
line-height: 1.6;
}}

</style>
<?php } );

畫面：

假如想要更多變體，例如：在 H3 標題前面也加入固定數字序號、H2 標題前改成一二三文字順序等等，你可以點擊這個連結，前往觀看更多。

參考文章：CSS counter-increment 使用及代碼示例

在文章底部加入固定文字

在網站文章底部加入固定文字，可以在固定文字中附上網站業配文章、線上課程、聯盟文章等等的連結來提高網站收入，增加網站內部的連結。也可以改成在文章底部加入網站簡介、作者簡介等等的資訊，讓更多訪客認識你，提升網站在該主題的權威度。

程式碼：

add_shortcode( 'ending', function () {
    $out = '<p>
    如果對文章內容有任何問題，歡迎在底下留言讓我知道。<br>
    如果你喜歡我的文章，可以按分享按鈕，讓更多的人看見我的文章。<br>
    還沒訂閱部落格的朋友們，記得在右上角填入信箱，收到我最新文章的通知。<br><br>
    by 小翔
    </p>';
    return $out;
} );

<p> 與 </p> 之間的這段文字即是你要顯示在文章底部的固定文字，可以依自身需求修改文字內容。

畫面：

假如你想自訂義固定文字樣式，例如：修改文字背景顏色、新增文字邊框、添加連結文字等等操作，但又不會程式碼，你可以點擊這篇文章連結，該篇文章會教你如何利用 WordPress 內建的區塊編輯器來修改固定文字的文字樣式。

網站圖像默認為”媒體檔案”

假如你有安裝如 Jetpack、WP Featherlight.. 等等含有圖片燈箱 (圖片放大) 功能的外掛，你一定有經歷過在編輯文章/頁面時，必須要一個圖片一個圖片的設定為「媒體檔案」從而來開啟圖片燈箱效果的步驟，否則燈箱功能不會生效，這非常的麻煩，大大增加了工作的時間。

而以下這個程式碼，可以讓圖像以後都默認為「媒體檔案」，省卻了未來必須一個圖像、一個圖像的去設定的過程。

程式碼：

add_action( 'after_setup_theme', function() {
    update_option( 'image_default_link_type', 'file' );
});

程式碼來源：Marcus Kazmierczak (英文)

畫面：

圖片的替代文字、說明文字、內容說明自動修改為上傳時的圖片標題

這個程式碼可以幫助你，每當你上傳圖片到網站上，它便會偵測你所上傳圖片的文件名稱 (標題)，並把該名稱 (標題) 自動填入到圖片的 替代文字、媒體說明文字、內容說明 的輸入框中，如下圖所示。

我們在編輯文章時，往往需要上傳圖片到網站上，但每上傳一張圖片就必須再點開一次圖片的詳細資料頁面，來一個一個修改圖片替代文字、說明文字等等的內容，這對於文章編輯來說是非常的麻煩且沒有效率的。

但圖片替代文字和標題等等的內容對於網站的 SEO 至關重要，可以幫助用戶在 Google/Yahoo/Bing 的圖片搜索中發現您網站的圖片。而有了這個程式碼，你只需要再上傳圖片前就編輯好圖片的檔案名稱，它便會自動幫你填入圖片的替代文字、說明文字、內容說明，這可以大幅縮短編輯文章所需的時間。

注意 !!! 假如沒有一定程式碼基礎，請別隨意修改以下代碼，比如說把 // 後面的英文字修改成中文等等，這可能會造成圖片上傳錯誤。

程式碼：

/**
 * Auto Add Image Attributes From Image Filename 
 *
 * @author Arun Basil Lal
 * @refer https://millionclues.com/?p=3908
 * @plugin https://wordpress.org/plugins/auto-image-attributes-from-filename-with-bulk-updater/
 */
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' );

程式碼來源：Automatically Add Image Caption, Description And Alt Text From Image Title

畫面：

補充：如果你不想使用這程式碼，你也可以選擇使用 Auto Image Attributes From Filename With Bulk Updater 外掛來達到相同的目地，該外掛也是可以自動幫你填入圖片的替代文字、媒體說明文字.. 等等的內容。

結語

只使用單單一個 Code Snippets 外掛，就可以替網站增加多種多樣的功能、樣式，對於網站管理的方便、網站性能方面的優化有非常大的幫助。

缺點是你需要懂得編寫程式碼，但現在搜尋引擎找資料非常方便，程式碼可以上網搜尋一鍵黏貼過來使用，所以這問題並不是非常大。

相關分類 : 更多的 Code Snippets 程式碼片段

5 1 投票

文章評分

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往聯盟計畫聲明（FTC）頁面觀看。

by 小翔

0 Shares

好用的 Code Snippets 外掛，N個實用程式碼片段範例教學

Code Snippets 外掛介紹

小翔 Code Snippets 外掛使用心得

安裝 Code Snippets 外掛

安裝外掛

外掛使用教學

N 個實用程式碼片段範例

把網站所有「外部連結」改成開啟新分頁

在文章中加入Step樣式

在H2標題前插入1、2、3…的數字樣式

在文章底部加入固定文字

網站圖像默認為”媒體檔案”

圖片的替代文字、說明文字、內容說明自動修改為上傳時的圖片標題

結語

關於 WP小翔

網站連結