Code Snippets 外掛

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

文章最後更新於 2022 年 2 月 10 日

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

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

Code Snippets 外掛介紹

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

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

屏幕截圖:Code Snippets 外掛頁面

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

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

小翔 Code Snippets 使用心得

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

但這裡你必須了解,程式碼片段外掛是用來補足你 WordPress 網站內建功能的不足之處的。

舉例:像是 WordPress 的 佈景主題,如果在自訂無法支援修改你要的樣式,你可以另外使用 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」。

搜尋 Code Snippets

step 3

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

啟用 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 的步驟樣式,以下為實際效果圖:

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樣式

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

[step]1[/step]

使用方法:

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

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

此代碼可替每一篇文章中的 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 } );

畫面:

在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> 之間的這段文字即是你要顯示在文章底部的固定文字,可以依自身需求修改文字內容。

畫面:

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

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

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

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

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

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

程式碼:

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

畫面:

複製貼上程式碼

結語

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

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


0 0 選票
文章評分

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

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論