fbpx
首頁 » WordPress » WordPress 外掛 » 【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學

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

最後更新日期: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/,這樣就無法以新分頁開啟。

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

程式碼

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

畫面

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

 

h2樣式
h2樣式

 

h3樣式
h3樣式

 

h4樣式
h4樣式

補充

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

可以嘗試將 .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的樣式,使用方法為:

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: #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使用方式

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

程式碼

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

畫面

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. 容易管理,也可以很輕易地匯入匯出。

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

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



WordPress 線上課程推薦

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

WP 全方位架站攻略

從 0 開始建立部落格

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

查看站長之路

WordPress 架站推薦

新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!

高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!

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

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



WordPress 學習書籍推薦

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

WordPress 無敵架站手冊
WordPress 無敵架站手冊

書籍介紹

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

推薦原因

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

購買 WordPress 無敵架站手冊

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

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

書籍介紹

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

推薦原因

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

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

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

打開網路就有錢 呂明璋(工具王阿璋)


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

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

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

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

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

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

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

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

贊助我一杯咖啡

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

by Johntool-工具王阿璋

 

 

在〈【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學〉中有 61 則留言

  1. 想更改標題樣式下載了Code Snippets
    不過在更改CSS時左邊都出現XXX然後錯誤
    詢問阿璋應該怎麼排解呢?
    謝謝阿璋

  2. wow !!
    此篇實在是太強大了 ~
    已拍手拍滿 !!
    另外想請教一下阿璋,
    如果要在文章結尾文字裡,部分字需要變粗體字,
    可以加那些程式碼在裡面呢?

    在麻煩你了,非常感謝 !!!

  3. 很棒的教学文章,有一步步看下去,也有把代码加入进去,回头看看效果。最后我想问一下,对于[step]1[/step],如果想改成类似步骤1或者其他的格式,应该如何去更改呢?谢谢分享,很实用。

    1. 我有改一個是這樣,除了中文字以外,其他都是版主的設定:
      function step_shortcode( $atts, $content = null ) {
      return ‘這裡改成你要的步驟或其他想要顯示的文字,如果不要文字的話,就留空白 ‘ . $content . ”;
      }
      add_shortcode( ‘step’, ‘step_shortcode’ );

      add_action( ‘wp_head’, function () { ?>

      .step{
      background-color: #E9E3DD;
      padding: 5px 25px;
      display: inline-block;
      margin: 15px 0;
      text-transform: uppercase;
      font-weight:bold;
      }

      <?php } );

  4. 阿璋你好,我按照步驟設定好全站文字之後,成功改了字型,唯獨我的文章標題和網站選單字樣沒有變,請問是因為佈景主題的關係嗎?

      1. h2和h3不是文章裡的大小標題嗎?把括弧往上移了,還是不行耶,文章名稱和選單還是沒有變,如果不能解決是不是就要換主題了?
        抱歉,還有一個問題
        想請問網站的字體要怎麼變大呢?

        1. 你可以提供你的語法給我看看。
          不過照你的需求,我還是建議你換一個可變性比較高的主題。
          我的語法基本上就是參考,算是滿通用的,但還是有少數主題會沒辦法適用。

          1. 語法就是用阿璋提供的哦,沒關係~我再看看其他主題好了~謝謝。
            然後如果要改網站字體大小、行高也是新增程式碼片段嗎?要怎麼輸入語法呢?

  5. 站長你好,我有用你教的 [更改整個網站的字型與標題樣式] ,但是發現自行沒有變更,也試過你教其他人的方式,還在網路上找其他的字型連結試過,試了一整個上午都無法變更字型為思源黑體,以下是目前程式碼片段

    add_action(‘wp_head’,function(){ ?>

    @import url(‘https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap&subset=chinese-traditional’);
    body {font-family: ‘Noto Sans TC’, sans-serif;}/*思源黑體*/

    <?php });

    附上我的網頁,能幫我看一下嗎? 還是我選的佈景主題的緣故?
    https://findboardgame.com/

    還有我已經有做閱讀全文的標示,為何在首頁沒有顯示摘要,這跟選用的佈景主題有關嗎?

  6. 阿璋前輩你好,謝謝你的STEP樣式教學,非常受用!
    我想要將STEP的那組代碼延伸應用在段落裡的某幾個選定的文字中,有點像是HighLight的概念。
    比如說像是下面這樣:
    我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是具有背景色+上下左右2px的padding的High Light文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字。

    上面那個段落中,『我是具有背景色+上下左右2px的padding的High Light文字』,這段文字我想把他們加上背景色,並且padding上下左右都是1px,所以我用『STEP』的代碼去修改如下:
    function BGtext_shortcode( $atts, $content = null ) {
    return ” . $content . ”;
    }
    add_shortcode( ‘BGtext’, ‘BGtext_shortcode’ );

    add_action( ‘wp_head’, function () { ?>

    .BGtext{
    background-color: #E9E3DD;
    padding:1px;
    display: inline-block;
    }

    <?php } );

    再將這組ShortCode
    [BGtext]我是具有背景色+上下左右2px的padding的High Light文字[/BGtext]
    放在區塊編輯器的段落文字中,雖然說背景色與上下左右1px的padding都有正確被套用,但是排版會變成這樣:和前面的文字換行了!
    我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,
    我是具有背景色+上下左右2px的padding的High Light文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字。

    請教前輩這是代碼中有什麼地方需要調整嗎?還是說這種樣式不是套用這個代碼?

    1. 你是把全部文字都放在區塊內嗎?
      不知道妳在編輯器中,有沒有換行不同的區塊,如果要用做出你要的樣子,就不能按到換行哦,全部要連續打在同一個區塊!

      1. 前輩好,
        謝謝你的回覆。
        我把同一段的文字放在一個區塊裡,沒有換行,像是這樣:
        我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,[BGtext]我是具有背景色+上下左右2px的padding的High Light文字[/BGtext],我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字,我是段落中的文字。

        1. 這種狀況滿麻煩的,因為 p 會換行,但不用 p 的話,你 css 會沒有位置可以設定。
          你的需求狀況可以用 TinyMCE Advanced 來解決哦!
          應該就是類似螢光筆重點的文字吧?

          1. 真的太感謝你了,用CSS樣式搭配文字(Big Data)果然奏效了!
            其實就是想要一個畫重點的效果,但是區塊與經典編輯器裡面預設的Mark只有亮黃色,實在不太喜歡,再加上希望能夠為這個mark底色設定padding…
            真的很謝謝你,解決了這一年來一直想要的樣式,讚讚讚!!!

  7. 你好,我在使用更改整個網站的字型與標題樣式

    發現我首頁小工具那邊的標題也跟著變成H2的顏色耶!!

    請問是怎麼回事?

  8. 您好,
    在修改「更改摘要長度」,用相同的步驟其他的都可以完成,但在修該文摘長度時卻一直無法修改,文章直接呈現全文的狀態。
    請問哪裡錯了?

  9. 版大~請問您文章中一開始教的『程式碼片段新增Shortcode的範例』,內容提到→『新增一個Shortcode,在文章中打 [shortcode_name] 』,然後最後就會顯示『在這裡撰寫網站專屬 HTML 短代碼內容』這段文字。那請問這樣的技巧是要針對何種情況下要作用的呢?? 不太了解,看完只是覺得不知道該用在甚麼地方? 謝謝解答

  10. 阿璋您好,
    想問一下在這篇文章中「設定WordPress安全性」的程式碼片段
    您提供的程式碼片段
    跟畫面中的有點不太一樣
    請問是要用您提供的程式碼為主,還是畫面中的為主呢?

發表迴響

返回頂端