第 7章：不可不知的WordPress進階功能 

 

7.1  發表一篇完整的文章 

  7.1.1除了內容之外 

  7.1.2利用 WordPress 的內建編輯器 

  7.1.3發表充滿圖文影音的文章 

  7.1.4功能標籤初體驗：進階的發文控制功能

 

 

7.1發表一篇完整的文章 

 

發表文章人人都會，但是想要發表一篇「完整」的文章，可就難得多了。何謂完

整的文章呢？筆者的意思是指文章會經過排版的修飾、圖文影像的輔助…等等，

讓讀者可以很清楚地閱覽你精心發表的文章。而WordPress自帶的編輯器功能剛

好可以滿足大家的需求，要知道，完整的文章並非只靠文字就能形成，還需要圖、

影片、聲音、連結、以及其他工具的輔佐才能達到最好的效果。 

 

7.1.1除了內容之外 

 

發表一篇文章，除了圖文等內容之外，大家不要忘記WordPress其實也很像一個

排版系統，部落客不僅要管理內容，更需要管理文章呈現的方式(就是排版)，以

及一個WordPress Blog 所呈現的服務及功能等，我們就來看看。 

 

 

 

WordPress 中的編輯器本身就具有簡單的排版功能，可以對一篇文章做位置、圖

文大小、顏色字型等設定。但其功能實在是太基本了，因此在WordPress中，可

以讓使用者能用 HTML及 CSS的方式再來調整整個版面的配置。在本部分的其它

章節，我們會有更詳細的說明。 

 

 

 

此外，作為一個 CMS系統，WordPress除了提供基本的操作及管理工具之外，更

提供了許多強大的程式碼，WordPress有內建的「Template Tag」可以使用，它是

由 php撰寫而成，這個東西可說是本書最大的重點！「Template  Tag」標籤，是

WordPress 內建，用來控制佈景主題功能的重大元素。坊間的 WordPress 書籍或

網站很少提到這些好用的標籤，但如果你熟悉了這些標籤，成為WordPress達人

的路就好走多了，我們會在本書的稍後以及章節中，穿插並完整說明這些功能。 

 

 

#圖 0701  製做一篇圖文並茂的文章是必要的 

 

 

 

 

7.1.2  利用 WordPress 的內建編輯器 

 

每個人都希望在寫文章的時候，可以不用辛苦的手動輸入 HTML來排版文章。如

果可以像一般文書軟體(如.Microsoft  Word)點幾個按鈕就出現自己想要的格式，

那該有多好！這個想法一直被廣泛流傳，因此有了「所見即所得編輯器

(WYSIWYG)」的誕生，如同字面上的意思，表示你在這個編輯器上看到的一切格

式，就等同於你發文後呈現給讀者的樣子。此外WordPress也提供了一般的 HTML

編輯器給大家使用，以下是這兩種編輯器的介紹： 

 

 

 

 

目前 WordPress 後台所使用的所見即所得編輯器是「TinyMCE」這套程式。當我

們第一次進入後台，到了新增文章的頁面時，你也許會嚇一大跳，難道大名鼎鼎

的WordPress所使用的編輯器是這麼陽春的東西嗎？只有簡單的一列按鈕，實在

不能滿足我們發文的慾望！如果你有這種想法請別擔心，我們馬上呼叫出

TinyMCE 編輯器隱藏的功能，只要點選編輯器最左邊的按鈕(快捷鍵：Alt+ Shift+ Z)

就可以將隱藏的編輯器功能打開。 

 

 

 

#圖 0702  點選前只有一排簡易的功能 

 #圖 0703  點選後就會開啟更多功能 

 

 

TinyMCE 編輯器的每個按鈕，都有對應到特別的圖示，滑鼠移到按鈕上也會有說

明，同時也會顯示快捷鍵的資訊。所以每一個按鈕的每個功能都寫的很詳細，以

方便大家使用，例如點選「B」這個按鈕，就會將你反白的文字變成粗體的格式。 

 

#圖 0704  粗體的呈現效果 

 

 

 

 

#框(WordPress小常識) 

 

‐繼續閱讀功能‐ 

而筆者要特別提出的一個按鈕功能，是「插入繼續閱讀標籤  (快捷鍵：Alt+ Shift+ 

T)  」。這個功能可以讓你自己選擇你要在文章的哪個斷點停住，讀者必須點選繼

續閱讀的連結才能看到更多的內容，使用此功能的好處之一是文章版面不會拖得

太長，最重要的是可以增加文章之間的黏度，因為在單篇文章裡頭的設計可以更

加多元化，吸引更多讀者閱覽。 

 

至於使用的方法也非常簡單，只要在你想要斷點的地方插入此按鈕，就可以看到

首頁出現繼續閱讀的連結資訊。 

 

#圖 0705  點選按鈕插入 more 標籤 

 

 

 

#圖 0706  回到首頁就會看到你插入的標籤位置 

 

 

 

 

###框 

 

#框(WordPress小常識) 

 

‐行高問題‐ 

使用 TinyMCE 編輯器斷行時，常會遇到行與行之間，空格過大的問題，這時候

你不妨採用「Shift+ Enter」的方式替文章作斷行，就可以解決此問題。此方法適

用於每一種所見即所得編輯器喔。 

 

###框 

 

 

 

在編輯器的上方，我們還會看到一個 HTML的標籤，點選之後編輯器會自動幫你

把文章轉成 HTML 語言，這是為了考慮到還是有人使用 HTML 編輯的習慣。在

HTML模式裡，也內建了常用到的標籤讓我們使用。 

 

 

 

假設你要使用WordPress寫一些程式碼、網頁語法的資訊，而程式碼的樣式又要

跟一般文章有所區分，就可以使用「code」標籤，註明你這種語法是 code 型態，

WordPress 會自動幫你把被 code 包覆的程式碼註記起來。但要特別注意的地方，

在於如果你使用了「code」標籤，就不能再切回預覽(所見即所得編輯器)觀看效

果，否則你辛苦打的程式碼會被編輯器吃掉而消失不見。所以筆者建議大家，假

設你要在文章輸入程式碼，可以有以下兩種選擇，一個是從一開始就使用 HTML

編輯器，就不會有語法被吃掉的困擾；或是你也可以先使用所見即所得將文章都

編排好，程式碼留到最後一個步驟再輸入。 

 

程式碼的樣式，可以透過 css做更改，此部分會在下一章節做說明。至於 TinyMCE

編輯器如果你覺得功能還是太少，我們同樣可以為它做擴充，此部分會在第 9

章介紹到。 

 

7.1.3發表充滿圖文影音的文章 

 

WordPress 的媒體功能，許多部落客都不太常用，主要原因是因為使用WordPress

的部落客幾乎都是花錢買虛擬主機自己架設，如果將一堆影片、圖片放在自己的

空間，可能會有流量過高的問題。其次是WordPress2.3 版時上傳媒體常會出錯，

不過好在新版 2.8.2 已經解決了上傳錯誤的問題。所以如果你不擔心流量會不會

 

 

影響主機效能，不妨試試看使用WordPress的媒體工具來上傳檔案。 

 

 

 

在WordPress後台，點選左方選單的「媒體」→「新增」連結，就可以上傳電腦

裡頭的檔案了。WordPress 可接受的上傳格式非常多，包含圖片、音樂、影像、

字型、壓縮檔…等等，假設上傳成功，會要你填寫此檔案的基本資料，此步驟可

以省略不寫，但如果你希望可以把媒體檔案做的完整一點，最好還是詳細撰寫。 

 

#圖 0707  上傳成功會跳到的資料畫面 

 

 

所有上傳後的檔案，都可以在「媒體」→「媒體庫」的地方觀看。此外，也可以

對檔案進行以下動作： 

 

#項(可對檔案進行的動作) 

 

編輯：即為圖 7‐7的檔案編輯畫面。  刪除：可以刪除選定的檔案。  查看：會秀出你的檔案在WordPress底下呈現的樣子  關聯檔案：如果文章有使用到該檔案，則會在關聯欄位顯示此文章的連結。   

 

 

 

###項 

 

 

 

將檔案上傳至媒體庫後，接下來要了解如何在發表文章的同時，將你媒體庫的檔

案也一起發佈在文章裡頭。使用方法非常的簡單，我們回到發表文章的頁面，在

「上傳/插入」的旁邊有四個按鈕，依序是插入圖片、影片、聲音、媒體，依照

你要插入的檔案類型選擇即可。 

 

#圖 0708  點選插入圖片的按鈕 

 

#圖 0709  跳出上傳以及插入圖片的視窗 

 

 

 

 

7.1.4功能標籤初體驗：進階的發文控制功能 

 

有時候我們逛WordPress部落格，會看到一些文章有分頁目錄的功能，就像看書

一樣可以讓讀者想點哪一頁就點哪一頁。這個功能是 WordPress 內建的進階技

巧，雖然說是進階，但其實是只要插入一句代碼就可輕鬆擁有的功能。 

 

#圖 0710  文章目錄功能範例 

 

 

 

 

 

 

要實現此功能並不難，發表文章時，切換到 HTML模式，在想要分頁的地方插入

即可。 

 

因為 TinyMCE 編輯器沒有內建插入此功能的按鈕，所以我們必須要轉換到 HTML

編輯器手動加入，但是這跟在 7.1.2 提到的插入程式碼功能不同，你不用擔心切

換到 TinyMCE 編輯器語法會被吃掉。他在 TinyMCE 編輯器顯示的方法，跟

「」一樣，都是會出現一個橫條列。 

 

#圖 0711  插入程式碼位置範例 

 

 

 

 

 

 

如果你不想要每次使用目錄功能都要手動輸入代碼，那可以考慮在 TinyMCE 編

輯器裡頭加入此代碼： 

 

#項(在 TinyMCE 編輯器加入程式代碼) 

 

1、首先打開你的 WordPress 目錄，找到「\wp‐admin\includes\post.php」這個檔

案(建議使用 Emeditor 或是 Notepad++等軟體編輯)。 

 

#圖 0712  打開 post.php 檔案 

 

 

 

 

2、大約在 1275 行的地方，在「'wp_more',」的後面加入「'wp_page',」。注意逗

號也要保留。 

 

#圖 0713  加入 wp_page語法 

 

 

 

 

3、接著儲存檔案並上傳，就會看到 TinyMCE編輯器多了一個插入分頁符號的按

鈕。 

 

#圖 0714  插入繼續閱讀標籤右邊多了一個按鈕 

 

 

 

 

###項 

 

 

 

如果你不想要每次使用目錄功能都要手動輸入代碼，那可以考慮在 HTML編輯器

裡頭加入此代碼： 

 

#項(在 HTML編輯器中加入代碼) 

 

1、首先打開你的WordPress目錄，找到「wp‐includes\js\quicktags.dev.js」這個檔

案(建議使用 Emeditor 或是 Notepad++等軟體編輯)。 

 

#圖 0715  打開 quicktags.dev.js 檔案 

 

 

 

 

2、大約在 131行以及 140行的地方，分別刪除「/*」以及「*/」。 

 

#圖 0716  刪除頭尾的「/*」，「*/」代碼 

 

 

 

 

3、接著打開「wp‐includes\js\ quicktags.js」，搜尋以下程式碼： 

 

#程 

 

;edButtons[edButtons.length]=new 

edButton("ed_more","more","","","t",‐1) 

 

###程 

 

#圖 0717  搜尋代碼 

 

 

 

 

4、在他的後面加入以下程式碼： 

 

#程 

 

;edButtons[edButtons.length]=new 

edButton("ed_page","page","","","t",‐1) 

 

###程 

 

#圖 0718  加入代碼 

 

 

 

 

5、再來搜尋以下程式碼： 

 

#程 

 

;j.Buttons[j.Buttons.length]=new 

edButton(a+"_more","more","","","t",‐1) 

 

###程 

 

#圖 0719  搜尋代碼 

 

 

 

 

6、找到之後，在後面加入以下程式碼： 

 

#程 

 

;j.Buttons[j.Buttons.length]=new 

edButton(a+"_page","page","","","t",‐1) 

 

###程 

 

#圖 0720  加入代碼 

 

 

 

 

7、儲存上傳後，再回到 HTML 編輯器觀看，就會發現 more 旁邊多了一個 page

的按鈕，點下會就會自動幫你加入的代碼。 

 

#圖 0721 more 右邊多了一個 page 按鈕 

 

 

 

 

###項 

 

 

假設你已經加入了的代碼，但前台文章卻沒有顯示此功能，那可

能是你目前使用的佈景主題沒有加上此模板標籤，這時候你可以自己手動加入該

標籤。只要點選你的WordPress資料夾，並找到「wp‐content\themes\」，開啟主題裡面的 single.php，在「」下

方插入「」即可。 

 

#圖 0722插入程式碼位置範例 

 

 

 

 

#框(WordPress小常識) 

 

‐什麼是模板標籤‐ 

模板標籤就是第七章一開始提到的「Template tag」，而「」

以及「」都是所謂的模板標籤，就是用來控制WordPress

佈景主題的許多功能，更多的模板標籤應用，會在第九章有詳細說明。 

 

###框 

 

」標籤也有很多參數可以運用，如果你想要針對各個

參 數 作 設 定 ， 可 以 改 用 這 種 寫 法 ： 「 」 

 

不過上面這種寫法的樣式變化幅度較小，因為只有使用「

…

」標籤做控

制，如果你希望樣式可以再自由一些，可以改用 div圖層來控制。 

 

 

 

要使用 div 圖層控制的話，可以寫成：