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

PHP, WordPress, WordPress 外掛, WordPress 程式碼, 精選文章 / 2019 年 5 月 18 日

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

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

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

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

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

【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，看到剪刀圖案的就是了，然後點選立即安裝，接著按啟用。

STEP 2

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

STEP 3

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

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

STEP 4

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

STEP 5

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

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

STEP 6

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

STEP 7

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

6個程式碼片段範例教學

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

功能介紹

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

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

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

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

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

程式碼

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個實際範例教學。

程式碼

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

畫面

補充

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

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

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的樣式，使用方法為：

程式碼

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

畫面

在文章中加入固定文字

功能介紹

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

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

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

程式碼

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

畫面

2019/11/24 補充：

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

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

在這段程式碼的後面，加入以下語法：

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個字。

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

程式碼

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

畫面

設定WordPress安全性

功能介紹

1. 隱藏WordPress版本資訊

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

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

2. 隱藏登入錯誤訊息

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

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

程式碼

/*移除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' );