最後更新日期:2020 年 3 月 27 日

本篇文章會教你如何使用程式碼片段(Code Snippets)來自訂WordPress語法,並且提供6個實用的程式碼片段範例教學,不僅可以改善外觀樣式,更能提高工作效率以及方便管理!

許多人可能像我一樣,每篇文章會有一個固定的結尾(CTA),或是常常使用一些固定的文字樣式(CSS),甚至想要自己修改主題或是外掛,都可以透過程式碼片段(Code Snippets)這個外掛來完成

因此在這篇文章,我會教你如何使用Code Snippets,以及提供我常使用的6個程式碼片段程式碼給你參考使用。

想要知道WordPress有哪些好用的主題或是外掛,可以關注我這篇文章:2019年WordPress推薦主題與外掛,最新優惠持續更新中!

【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學
【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學

什麼是程式碼片段?

程式碼片段(Code Snippet)本身的定義是:一段可重複利用的程式碼

我們在寫程式時,可能在很多個部分都使用到同一段程式,這時候就會讓程式變得冗長,所以會將這些內容獨立出來並加以定義成一個新的程式碼,我們就稱作程式碼片段。

程式碼片段可以把可重複使用的程式碼分割儲存,方便除錯與加速開發。

在許多編譯器的環境裡,內建了許多程式碼片段,而在WordPress也有人做出相對應的外掛:Code Snippets,提供我們方便加入自己的程式碼。

 

為什麼要使用程式碼片段?

使用程式碼片段是為了讓我更好管理這些程式碼,我不需要因為換主題而重新寫一次語法,也不用一直寫重複性的文字。

程式碼片段提供了我一個方便管理所有客製化的程式碼,也可以匯出匯入到別的網站

我自己常在用的程式碼片段,可以分為下面幾種類型:

1. 每篇文章都會使用的文字

我在每篇文章的結尾,都會有一段固定的文字,希望大家幫忙分享,或是有問題可以留言,以及訂閱我的部落格。

這些文字如果要每篇打的話,萬一我想要改內容就必須一篇一篇改,但若我使用程式碼片段,我只需要打Shortcode ,像是 [end] 這樣的方式,就可以顯示這些文字了。

假設未來要改變內容,只要更改程式碼片段,就可以改變所有文章的內容。

2. 文章內會使用的固定樣式

有看我其他篇文章的人就知道,我有時候會有步驟教學(Step1 , Step2…),或是一段粉紅色區塊的結論,這也是我透過程式碼片段完成的樣式。

我一樣可以透過Shortcode來顯示我要的樣式,就不需要再使用其他外掛來製作那些區塊了!

3. 更改整個網頁的樣式

假設要更改整個網頁的字型或是標題樣式,通常很多文章都會建議在外掛的編輯CSS或是style.css裡面更改,但是這種方式會造成一個問題,就是更換主題的時候,這些設定就會跟著消失。

但如果透過程式碼片段來更改,不論是什麼主題,都可以一直保留這些樣式,不會隨著主題被替換掉。

4. 更改外掛或主題的設定

有時候對於外掛的功能有稍微的不滿,或是對外掛或是主題的樣式想要做調整,也可以透過程式碼片段來更改。

如果在外掛或是主題本身改的話,很有可能造成外掛本身有問題或是更新失敗等等問題。

5. 更改WordPress安全性設定

WordPress本身的框架提供了很多可變更性,像我就移除了WordPress的登入入口,改成WordPress.com的第三方登入。

 

如何安裝及使用程式碼片段

STEP 1

在WordPress後台,點選安裝外掛,搜尋Code Snippets,看到剪刀圖案的就是了,然後點選立即安裝,接著按啟用

搜尋Code Snippets
搜尋Code Snippets

STEP 2

啟用之後,左邊就會看到程式碼片段的欄位,點近來就會看到有四個範例,分別是新增HTML、CSS、JavaScript、php語法的範例。

程式碼片段內建範例
程式碼片段內建範例

STEP 3

首先做一個示範,點選HTML 短代碼範例,就會進來編輯程式碼的頁面,這個範例是新增一個Shortcode,然後Shortcode的名字是shortcode_name,接著點選左下角的儲存設定並啟用。

使用方法是在文章中打 [shortcode_name] ,就會顯示下面 $out 的文字:”在這裡撰寫網站專屬 HTML 短代碼內容”。

編輯程式碼
編輯程式碼

STEP 4

接著去編輯文章做測試,在文章內打 [shortcode_name] ,然後儲存草稿查看。

在文章中新增Shortcode
在文章中新增Shortcode

STEP 5

到文章查看,發現剛剛在程式碼片段的文字顯示出來了!

這樣就是一個簡單的程式碼片段新增Shortcode的範例。

文章顯示Shortcode設定的文字
文章顯示Shortcode設定的文字

 

STEP 6

如果要提供給其他的WordPress網站使用,就只要按匯出,會存成一個json格式的文件,在另一個網站按下匯入,就可以輕鬆轉移程式碼片段。

STEP 7

如果要新增程式碼的話,就點選新增程式碼片段,把程式碼貼上去就好,也可以多加解釋,防止未來忘記功能。

 

6個程式碼片段範例教學

把所有連結改成開啟新分頁

功能介紹

一般寫文章的時候,我建議大家把所有的連結都用新分頁開啟,才不會讓網頁的跳出率太高。

但是以我而言,我很常在插入連結的時候,忘記勾選以新分頁開啟,導致有一陣子的跳出率突然變高。

所以我寫了這個程式碼片段,他可以幫你把所有非你的網域的連結改成用新分頁開啟,即使圖片也是一樣。

我要強調一點的就是這是針對非你的網域,舉個例子來說,我的網域是 johntool.com,如果連結是 johntool.com/2019-vpn-recommend/,這樣就無法以新分頁開啟。

但是透過這個功能,就只需要針對你的網域的連結特別設定新分頁開啟就好,大幅降低了遺漏的可能性。

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
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 } );

畫面

連結改為新開分頁
連結改為新開分頁

 

更改整個網站的字型與標題樣式

功能介紹

這個程式碼片段主要是在改我的網站的樣式,將整個網站的字型改成思源黑體,還有調整我的h2、h3、h4的標題樣式。

如果想要更針對標題樣式有怎麼樣的變化,可以參考這篇文章:【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
add_action('wp_head',function(){ ?>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
        body {font-family: 'Noto Sans TC', sans-serif;}/*思源黑體*/
                                
        .entry-content h2
        {
            background-color:#eeeeee; /* 背景顏色 #eeeeee */
            border-left:5px solid orange; /*左側框線寬度(5px)、顏色(green)*/
            padding:5px;/*內距(5px)*/
            vertical-align:middle; /*垂直置中*/
            font-weight:bold; /*粗體*/
        }
                                
        .entry-content h3
        {
            color: #ff5050; /*文字顏色*/
            font-weight:bold; /*粗體*/
        
        }
                                
        .entry-content h4
        {
            color: #933fff; /*文字顏色*/
            font-weight:bold; /*粗體*/
        }
                                
    </style>
<?php });

畫面

更改網站字型與標題樣式
更改網站字型與標題樣式

 

h2樣式
h2樣式

 

h3樣式
h3樣式

 

h4樣式
h4樣式

補充

如果你發現語法套用上去沒有用的話,是因為佈景主題的設計,造成結構不同。

可以嘗試將 .entry-content 移除,以 h2 而言,就變成以下程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
h2 {
background-color:#eeeeee; /* 背景顏色 #eeeeee */
border-left:5px solid orange; /*左側框線寬度(5px)、顏色(green)*/
padding:5px;/*內距(5px)*/
vertical-align:middle; /*垂直置中*/
font-weight:bold; /*粗體*/
}

 

在文章中加入Step的樣式

功能介紹

我的文章中常常會有很多圖文教學,我就會使用Step1, Step2, Step3讓大家容易閱讀,但是如果每次都要調整樣式就太麻煩了。

所以我透過Shortcode的方式,讓我在文章中可以快速寫好Step的樣式,使用方法為:

Step使用方式
Step使用方式

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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: #cececeb5;
        padding: 10px 30px;
        display: inline-block;
        margin: 20px 0;
        text-transform: uppercase;
        font-weight:bold;
        }
    </style>
<?php } );

畫面

Step的樣式
Step的樣式

 

Step樣式呈現
Step樣式呈現

 

在文章中加入固定文字

功能介紹

我在文章的結尾,都會有一個固定結尾,請大家幫忙分享跟訂閱電子郵件。

但是如果在每篇文章都複製貼上,未來就不容易修改,所以用Shortcode來呈現,使用方法為:

ending使用方式
ending使用方式

如此一來,未來我要修改內容,只要更改這邊的程式碼,就可以一次更改所有文章。

程式碼

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

畫面

文章結尾文字
文章結尾文字

 

文章結尾文字呈現
文章結尾文字呈現

2019/11/24 補充:

上面的方法需要在文章內加入 [ending] 才會顯示!

如果你不想要每篇文章都這樣加,還有更懶惰的方法。

在這段程式碼的後面,加入以下語法:

1
2
3
4
5
6
7
8
9
function the_content_ending( $content ){
    if( is_single() ){
        $content .= do_shortcode( '[ending]' );
    if( function_exists( 'wp_get_related_posts' ) )
        $content .= wp_get_related_posts();
    }
    return $content;
}
add_filter( 'the_content', 'the_content_ending', 11, 1 );

這樣每篇文章結尾就會自動出現了!


 

更改摘要長度

功能介紹

在WordPress中,預設的摘要長度是55個字,但是這是指英文字,中文因為編碼的關係,呈現的字數會小於55個字。

有外掛專門處理這件事情,但是透過程式碼片段,可以很輕易地完成,畢竟能少裝一個外掛就少裝一個。

程式碼

1
2
3
4
function new_excerpt_length($length) {
    return 100; /*這裡可以任意更改你要的數字,慢慢調整找出最適合的*/
}
add_filter('excerpt_length', 'new_excerpt_length');

畫面

摘要長度設定
摘要長度設定

 

設定WordPress安全性

功能介紹

1. 隱藏WordPress版本資訊

WordPress預設的情形下,在網頁中的程式碼,可以看到WordPress的版本資訊,但是其實這是不安全的。

如果某個版本有安全性漏洞,駭客可以很輕易的得到你的網站版本資訊,找出相對應的漏洞。

2. 隱藏登入錯誤訊息

WordPress的登入畫面一開始的預設情形是會告訴你帳號錯誤或是密碼錯誤,這樣可以讓攻擊者更容易猜出密碼。

所以要隱藏這樣的訊息,統一改成一致的錯誤訊息。

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
/*移除WordPress版本資訊*/
remove_action( 'wp_head', 'wp_generator' ) ;
remove_action( 'wp_head', 'wlwmanifest_link' ) ;
remove_action( 'wp_head', 'rsd_link' ) ;
// remove version from rss
add_filter('the_generator', '__return_empty_string');
/*隱藏登入畫面錯誤訊息*/
function no_errors_please(){
    return 'GET OFF MY LAWN !! RIGHT NOW !!';
}
add_filter( 'login_errors', 'no_errors_please' );

畫面

WordPress 安全
WordPress 安全

程式碼片段參考資源

程式碼片段可以做的事情非常非常多,我沒辦法在這裡一一列出來,所以我推薦幾個可以參考的網站以及學習的方式。

程式碼片段學習

1. WordPress.org Codex

這是WordPress官方網站,也是我的首推,可以看看程式碼片段以及Shortcode的產生方式。

2. GenerateWP

這個網站有非常多資源,可以在這邊看到別人寫好的程式碼片段,不論是作為學習方式或是實際到網站使用都很不錯。

3. 10 Useful Code Snippets for WordPress Users

這是我在學習的時候,搜尋到的部落格,他有舉10個例子,大家也可以參考參考。

程式語言學習

程式碼片段幾本上是由HTML、CSS、JavaScript、php 組合而成。

上面的網站頂多只是可以拿來應用,如果要自己寫一些功能還是必須要了解這幾種語言。

因此我也推薦不錯的線上課程跟書籍,可以供大家參考學習。

1. 建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

這堂課就包辦了上面所說的全部語言,而且可以跟著實作出實際的網站,很適合新手學習。

建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站
建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

2. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

這本書教了非常實用的前端技能,我相信大家一開始使用程式碼片段,主要都會是改網站的樣式,也就是CSS。

此外,要改CSS之前,一定要先學會HTML,才能看得懂網頁結構,才會知道要怎麼改。

所以我很推薦這本書,有非常多的範例可以直接套用!

學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)
學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

3. PHP 網頁程式設計「超」入門

這本書就像他的名字一樣「超入門」,裡面用了非常大量的圖解來教學,而且是全彩的,讓學程式不再這麼的無聊又難看。

學會php的框架跟用法後,基本上可以看得懂整個WordPress的底層運作模式。

所以如果是想要自己寫一些功能,甚至是自己做外掛、主題的人,一定要學會這本書的內容。

PHP 網頁程式設計「超」入門
PHP 網頁程式設計「超」入門

 

結論

WordPress外掛的數量越多,會讓網站的速度越慢,造成SEO排名的下降,所以能少用外掛就盡量少用,或是自己寫程式碼片段。

 

我推薦程式碼片段(Code Snippets)的三個原因:

1. 降低外掛的使用數量,許多功能可以自己簡單實作。

2. 最佳更改WordPress程式碼的方式,不會因為換主題或是換外掛而消失(不建議更改functions.php或是style.css)。

3. 容易管理,也可以很輕易地匯入匯出。

 

這篇文章涉及了許多程式碼,我不確定在過程中有沒有什麼疏漏,所以如果程式碼不如預期的話,麻煩在下面留言跟我說一聲,我會馬上修改。

如果你有想製作的程式碼片段,卻又做不出來,可以看看本站服務,在我的能力許可內,我可以提供程式碼片段客製化服務。