當我們在WordPress中建立或編輯文章時，如果把古騰堡編輯器禁用，我們有兩個內容編輯器可供選擇：TinyMCE視覺化編輯器和WordPress文字編輯器。後者由一個由按鈕增強的文字區域元素組成，提供了一種將HTML程式碼注入文章內容的快速方法。
使用者可以通過單擊右上角的標籤輕鬆地從視覺模式切換到文字模式。WordPress將保留文章內容，但TinyMCE會將特殊字元轉換為相應的HTML實體。出於這個原因，您可能更喜歡
推薦閱讀：深入瞭解WordPress新的古騰堡編輯器（優點和缺點）
在文字編輯器正好說明了文章內容的HTML結構，它賦予了使用者輸入的完全控制權，所以這個文章是關於WordPress的文字編輯器。首先，我們將從開發人員的角度深入探討該主題：我們將檢視Quicktags JS API、quicktags_settings過濾器和wp_editor()函式。
這篇文章的最後一部分專門針對非開發人員。我將向您展示一個外掛，允許使用者從WordPress管理面板快速配置文字編輯器。
比較視覺化和文字編輯器。
WordPress文字編輯器
如果您習慣於在文章中新增大量程式碼，或者您想預覽內容的確切HTML結構，您可能更喜歡準系統文字編輯器，而不是高階視覺化編輯器的易用性。
然而，文字編輯器不僅僅是一個表單元素。編輯器工具欄提供了一組按鈕（稱為快速標籤），允許使用者快速將大量標籤注入 HTML 帖子結構。
預設情況下，WordPress提供以下快速標籤：
- a
- strong
- code
- del
- em
- ol
- ul
- li
- img
- blockquote
- ins
- fullscreen
- lookup
- close
影象顯示了WordPress文字編輯器的預設按鈕
由於Quicktags API，可以覆蓋預設設定。JavaScript API提供了一種簡單的方法來新增自定義按鈕並將程式碼和內容注入編輯器文字區域。該QTags.addButton方法增加一個按鈕，工具欄和定義如下：
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
此方法保留以下引數：
- id ( string ) (required) 是按鈕的HTML id；
- display ( string ) (required) 是HTML值；
- arg1 ( string ) (必需) 是要包含的開始標記或單擊按鈕時要執行的自定義回撥函式；
- arg2 ( string ) (可選) 是結束標籤；
- access_key ( string ) (可選) 是按鈕的快捷鍵；
- title ( string ) (可選) 是HTML標題；
- 優先順序（int）（可選）是一個數字，表示按鈕在工具欄中的位置；
- 例項（字串）（可選）將按鈕限制為特定的Quicktags例項。
現在讓我們假設我們想要新增像Prism這樣的語法高亮器所需的標籤，並且我們想要為編輯器工具欄提供列印以下標記的按鈕：
<pre><code class="language-php"></code></pre> <pre><code class="language-css"></code></pre> <pre><code class="language-html"></code></pre>
要完成此任務，我們需要將以下程式碼新增到外掛的主檔案中：
function my_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>
<script type="text/javascript">
QTags.addButton( 'eg_php', 'PHP', '<pre><code class=\"language-php\">', '</code></pre>', 'p', 'PHP Code', 100 );
QTags.addButton( 'eg_css', 'CSS', '<pre><code class=\"language-css\">', '</code></pre>', 'q', 'CSS Code', 100 );
QTags.addButton( 'eg_html', 'HTML', '<pre><code class=\"language-html\">', '</code></pre>', 'r', 'HTML Code', 100 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );
admin_print_footer_scripts是一個動作鉤子，用於在管理頁面的頁尾中列印指令碼。回撥函式檢查quicktags指令碼是否在使用中，然後列印JS程式碼。此指令碼向管理面板中的Quicktags的任何例項新增了另外三個按鈕，如下圖所示。
影象顯示了我們新的自定義按鈕
向編輯器工具欄新增按鈕相對簡單，但我們可以使用Quicktags API做更多事情。例如，我們可以向QTags.addButton方法傳遞一個回撥函式，當使用者點選相應的按鈕時執行。考慮以下程式碼：
function custom_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>
<script type="text/javascript">
QTags.addButton( 'eg_callback', 'CSS div', css_callback );
function css_callback(){
var css_class = prompt( 'Class name:', '' );
if ( css_class && css_class !== '' ) {
QTags.insertContent('<div class="' + css_class +'"></div>');
}
}
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'custom_quicktags' );
css_callback是一個自定義 JS 函式，當使用者點選自定義按鈕時執行。在我們的示例中，該函式會提示輸入框以允許使用者為div元素設定類名。QTags.insertContent方法將列印指定的字串到編輯器中textarea的。
我們示例的回撥函式會提示一個輸入框，允許使用者設定類名。
到目前為止，由於admin_print_footer_scripts操作，我們一直在管理頁面中向WordPress編輯器新增快速標籤。如果您在站點前端有任何編輯器例項，則應將回撥函式掛鉤到wp_print_footer_scripts操作。
無論如何，在生產中，您應該考慮將JavaScript檔案排入WordPress註冊的指令碼中，如如何將您的資產排入WordPress中所述。GenerateWP的Quicktags Generator是構建自定義快速標籤的一個有用工具。
覆蓋Quicktags設定
Quicktags API提供了一種向工具欄新增新按鈕的方法。由於quicktags_settings過濾器，WordPress也允許我們刪除按鈕。
function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );
回撥函式有兩個引數：$qtInit是一個設定陣列，$editor_id是編輯器的唯一 ID。在我們的示例中，$editor_id預設為“content” ——編輯文章頁面中的編輯器文字區域的ID。
請注意，quicktag列表中的標籤名稱由逗號分隔，後跟空格。
此函式將覆蓋預設設定，也可用於從工具欄中刪除所有按鈕：
function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = ',';
return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );
我們已經為$qtInit陣列的“buttons”元素分配了一個逗號作為值。空字串不會按預期工作，並且不會覆蓋預設設定。
將WordPress編輯器包含在首頁
wp_editor函式從3.3版開始提供，它提供了一種簡單的方法來將WordPress編輯器包含在站點的任何位置。
該函式在wp-includes/general-template.php檔案中定義如下：
wp_editor( $content, $editor_id, $settings = array() );
- $content ( string ) (required) 設定編輯器的初始內容；
- $editor_id ( string ) （必填）為textarea和TinyMCE編輯器設定id屬性（只能包含小寫字母和下劃線）；
- $settings ( array ) （可選）引數陣列。
引數陣列允許為兩個編輯器設定許多配置引數。特定引數可以將設定直接傳遞給Quicktags（請參閱Codex中的完整引數列表）。
例如，您可能希望在頁面模板中包含編輯器。考慮以下示例：
$content = ''; $editor_id = 'mycustomeditor'; $settings = array( 'wpautop' => false, 'media_buttons' => false, 'quicktags' => array( 'buttons' => 'strong,em,del,ul,ol,li,block,close' ), ); wp_editor( $content, $editor_id, $settings );
這幾行程式碼將一個id為“myeditor”的空編輯器和指定的按鈕列印到文字編輯器的工具欄中。
- 該wpautop引數設定為false，這樣的
<p>元素將被用來包裹段落到編輯器。 - 該media_buttons引數設定為false，所以使用者無法上傳媒體檔案。
- 所述quicktags陣列確定按鈕上的文字編輯器工具欄顯示。
對於WordPress文字編輯器，wp_editor()函式和quicktags_settings過濾器之間的主要區別在於該函式適用於編輯器的特定例項。您可以使用它在站點的任何位置包含新的編輯器（如頁面模板），而quicktags_settings過濾器過濾所有現有例項並且不能用於生成新的編輯器例項。
以上示例的完整程式碼可在Gist上找到。
使用AddQuicktag外掛增強WordPress文字編輯器
如果您需要一個工具來快速向WordPress文字編輯器新增按鈕，AddQuicktag就是適合您的外掛。
AddQuicktag允許使用者向WordPress文字編輯器新增自定義按鈕。
該外掛提供了一個可從“設定”選單訪問的選項頁面。在此頁面上，管理員使用者可以新增自定義按鈕和刪除現有按鈕。
AddQuicktag允許專門為文章、頁面和其他啟用編輯器的文字區域（評論、文字小部件等）配置編輯器。
該外掛還將Quicktags新增到視覺化編輯器中。只需選中Visual»選項，視覺化編輯器將顯示帶有自定義按鈕的Quicktags下拉選單。
AddQuicktag選項頁面的第二部分專用於內建快速標籤配置。在本節中，可以刪除特定文字區域中的按鈕。
三個按鈕已從編輯頁面文字編輯器中刪除
最後一部分為編輯器工具欄提供了附加功能。第一行選項增強了預設程式碼按鈕，提供了一個選擇選單，根據所選語言為程式碼標籤設定CSS類。
第二行提供了兩個用於編碼和解碼特殊字元 ( htmlentities ) 的按鈕。
高階AddQuicktag功能
WordPress文字編輯器替代方案和工具
WordPress文字編輯器可能難以理解和使用，而Gutenberg編輯器在自定義選項方面似乎有限。
如果這些編輯器選擇都沒有為您提供您所追求的外觀，那麼研究其他替代方案可能是個好主意。
這是我們推薦的外掛列表，可以幫助您擴充套件WordPress編輯器的功能。
1.高階編輯器工具（TinyMCE Advanced）
此外掛將經典段落塊新增到古騰堡編輯器，它將顯示WordPress使用者熟悉的完整經典工具欄。這允許訪問古騰堡中的文字塊和其他新功能，以及所有經典文字編輯器元素。
經典工具欄上的選單可以根據您的需要重新排列。只需轉到外掛設定並通過拖放按鈕新增或刪除功能。
此外，此外掛允許輕鬆調整表、行和列的大小。但是，請記住，此功能可能會覆蓋特定WordPress網站主題設定的某些樣式。
高階編輯器工具也與經典編輯器外掛相容。因此，也可以在經典編輯器上自定義工具欄選項選單。
2.Ultimate Blocks
Ultimate Blocks是最簡單的外掛之一。它附帶20個額外的部落格和與內容相關的設定，您可以將它們新增到Gutenberg編輯器中。
例如，目錄、倒計時、內容過濾器和推薦是可用於您的專案的一些獨特元素。這些元素也與大多數WordPress主題和其他WordPress外掛相容。
古騰堡提供的高階塊也收到了新的自定義選項。Button 塊獲得更多大小、樣式和按鈕圖示，而Social Share區塊將具有LinkedIn、Pinterest和Reddit的圖示。
如果您在使用Ultimate Blocks外掛方面需要幫助，請隨時訪問支援論壇或他們的Facebook群組。
3. WP Table Builder
WP Table Builder是為您的WordPress網站建立表格的最佳外掛之一。它引入了拖放功能和更直觀的介面。有了這些功能，為價格、多重比較和其他列表建立各種表格將變得簡單快捷。
使用者可以通過七種方式新增到表格中——使用Text 、Image 、List 、 Button 、Star Rating 、Custom HTML和Shortcode 。每個元素都有自己的自定義選項，可以進一步改進您的帖子。
單元格管理的常用設定允許您新增新行/列和合並/拆分單元格。此外，您可以從.CSV和.XML檔案匯入預製表格或匯出使用外掛建立的表格。
在響應能力方面，WP Table Builder可以選擇編輯表格在移動裝置、平板電腦和桌面螢幕上的外觀。此功能不僅可以讓您迎合更多的受眾，還可以讓您的網站適應各種不同的目的。
要獲得其他功能，例如表格模板、完整的列/行復制和邊框顏色，您需要升級。WP Table Builder的高階版起價為39.99美元/年，包括外掛更新和開發團隊的優先支援。
如果您想自己找到問題的解決方案，該外掛還有一個支援論壇。
4. Zedity
Zedity是一個外掛，可以將多媒體內容新增到您的WordPress網站。學習編輯器的工作原理不需要很長時間，因為它為首次使用的使用者提供了教程。
拖放功能使編輯變得輕鬆。因為它是無佈局的，所以使用者可以將內容框放置在頁面的任何位置。從畫廊到資訊圖表，您無需任何程式碼即可直觀地調整這些框。
免費版的Zedity 讓您可以新增來自YouTube和Vimeo的視訊，以及來自SoundCloud和ReverbNation的音訊。除了文字、影象和顏色框外，還有用於自定義指令碼的HTML框，可以輕鬆調整大小和旋轉。
該外掛的高階版還帶有附加功能，如SEO友好標籤、無限顏色、網路/自定義字型和段落間距/對齊，並且需要39美元/年的費用。
安裝此外掛後，您將在經典編輯器工具欄和古騰堡經典塊的右上角找到Zedity按鈕。
5. Content Manager for WordPress
Content Manager for WordPress簡化了複雜頁面和文章的建立。它允許您從WordPress網站的前端編輯和排列頁面佈局。
憑藉其拖放系統和網格管理器，您可以立即擁有設計精美的頁面。佈局也將是響應式的，因此訪問者可以在他們的移動裝置上享受您的網站。
Content Manager for WordPress附帶50多個即用型元素短程式碼。每個簡碼都有自己的使用者友好介面和自定義選項。
因此，在您網站的任何位置新增按鈕、社交圖示和畫廊都不會是一件麻煩事。此外，還提供用於翻轉框、進度條和滑塊的動畫短程式碼。
最重要的是，這個外掛帶有部落格和投資組合模板。它還可以使用 .PO 和 .MO 檔案翻譯成任何語言。
該外掛與WordPress很好地整合並使用AJAX。一次性支付39美元/常規許可證安裝後，您會在WordPress編輯器上找到一個新增短程式碼的按鈕。
小結
如果您是開發人員，您可能會發現向WordPress編輯器新增主題或特定於外掛的功能會很有幫助。Quicktags API和許多過濾器和功能提供了有價值的工具來為我們的產品增加價值。如果您不是開發人員，您也可以配置WordPress編輯器，這要歸功於WordPress外掛目錄中的幾個免費外掛，例如本文中介紹的AddQuicktag外掛。
評論留言