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

最後更新日期：2024 年 7 月 7 日

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

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

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

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

什麼是程式碼片段？

程式碼片段(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' );

畫面

程式碼片段參考資源

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

程式碼片段學習

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 建立網站

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

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

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

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

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

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

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

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

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

 

結論

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

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

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

WordPress 線上課程推薦

阿璋正在籌備 WordPress 線上課程，如果有興趣的人，歡迎點擊下方連結。

WP 全方位架站攻略

從 0 開始建立部落格

站長之路手把手教你如何透過部落格開始賺錢，內容包含 WordPress、部落格經營、網路行銷，帶你成為一個成功的部落格站長！

查看站長之路

WordPress 架站推薦

新手架站：【架站教學】專門為WordPress打造的主機？WPWebHost 完整教學！

高流量網站：【架站教學】新手快速架站教學，使用Cloudways架設WordPress網站！

新手必看： WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整！

學習更多：查看我是如何透過 WordPress 架設部落格，賺取人生第一桶金！

WordPress 學習書籍推薦

WordPress 無敵架站手冊：架站新手都想擁有:教你打造個人專屬網站

書籍介紹

這本書教你從零開始建立起一個全功能的WordPress網站，從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具，從入門到進階的教學都很完整。

推薦原因

這本書原作者是波蘭人，原文是英文，後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少，這本不僅是中文書，內容又非常完整，絕對是學習WordPress的首選書籍！

購買 WordPress 無敵架站手冊

WordPress Plugins百大外掛精選(火力加強版)

書籍介紹

這本書教你從基礎架站、備份保存到各式各樣的外掛主題，讓你想裝什麼就裝什麼，建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹，只要你想的到的功能幾乎都在裡面，匯集了讀者們一直喜愛的外掛程式介紹，並且添加了最新的外掛程式，更貼近現在的讀者需求。

推薦原因

這本書作者是免費資源網路社群的作者 Pseric，他的網站知名度非常的高，也是透過 WordPress 架設而成，因此對於外掛的理解，絕對是數一數二。

購買 WordPress Plugins 百大外掛精選(火力加強版)

支持阿璋的新書《打開網路就有錢》，裡面分享許多自媒體以及投資理財的知識，非常適合網路創業者以及想要增加額外收入的上班族閱讀。




如果你對幣圈資訊有興趣，可以訂閱此電子報：幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群：Crypto Mind 加密腦

推坑阿璋超愛的商品，歡迎加入團購群：阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢：站長之路

更多相關社群連結：工具王阿璋社群列表

本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。

如果我的文章對你有幫助，歡迎贊助我一杯咖啡！

本站所有內容皆為阿璋個人經驗分享，如有涉及投資請謹慎評估，阿璋不做任何投資建議。



文章引用請來信索取授權，否則將保留法律追訴權。

by Johntool-工具王阿璋