Code Snippets 外掛

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

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

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

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

Code Snippets 外掛介紹

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

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

32 1
屏幕截圖:Code Snippets 外掛頁面

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

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

小翔 Code Snippets 外掛使用心得

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

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

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

補充:如果你安裝的 WordPress 佈景主題 的自訂中並沒有內建「附加的 CSS」功能,您可以另外安裝 Code Snippets 外掛來彌補這佈景主題的不足,利用這外掛來為網站添加程式碼。
01
佈景主題 > 自訂
02
自訂頁面修改網站功能、樣式

安裝 Code Snippets 外掛

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

安裝外掛

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

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

step 1

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

17 01
外掛 > 安裝外掛

step 2

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

18 2
搜尋 Code Snippets

step 3

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

18 1
啟用 Code Snippets

外掛使用教學

step 1

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

02
新增程式碼片段

step 2

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

03
新增你的程式碼

step 3

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

04
儲存設定並啟用

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 } );

畫面:

06 1
把網站所有「外部連結」改成開啟新分頁
參考文章:如何自訂WordPress語法?6個程式碼片段範例教學

在文章中加入Step樣式

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

07 1
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 } );

畫面:

09 2
在文章中加入Step樣式

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

[step]1[/step]

使用方法:

08 1
短代碼
參考文章:如何自訂WordPress語法?6個程式碼片段範例教學

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

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

4 10
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 } );

畫面:

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

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

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

在文章底部加入固定文字

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

程式碼:

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

畫面:

38 3
複製貼上程式碼到程式碼輸入框

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

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

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

31 5
設定圖片為 “媒體檔案” 來開啟燈箱效果

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

程式碼:

add_action( 'after_setup_theme', function() {
    update_option( 'image_default_link_type', 'file' );
});
程式碼來源:Marcus Kazmierczak (英文)

畫面:

32 4
複製貼上程式碼

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

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

自動填入替代文字、說明文字、內容說明的輸入框中
自動填入替代文字、說明文字、內容說明的輸入框中

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

但圖片替代文字和標題等等的內容對於網站的 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 外掛,就可以替網站增加多種多樣的功能、樣式,對於網站管理的方便、網站性能方面的優化有非常大的幫助。

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


5 1 投票
文章評分

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

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

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

by 小翔

訂閱
通知
guest

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