文章翻譯自：http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-WordPress-content-editor/

本工作室實測。

很多網站開發人員，使用 WordPress 建設網站，但經常碰到使用的客戶沒有一點點 html 知識的，所以得經常為客戶提供更新或更改服務。 TinyMCE 編輯器在後臺編輯的時候，僅僅提供了一些簡單的功能，比如列表、加粗、顏色等，但是如果需要做出佈局比較複雜的文章，則需要一定的 Html 知識。

本教程將會教會你，怎樣讓不懂一點點 html 知識的客戶也能夠在後臺的編輯器中新增各種複雜的佈局內容的文章，比如多列、圖文混排等等。

效果：

建立一個已定的佈局

實際上在這裡我們要做的就是給 WordPress 編輯器插入一個已經寫好的一個佈局的 html 程式碼，我們可以透過 WordPress 的'default_content'過濾器來個文章內容的編輯器設定一個預設的內容 (這個內容就是文章佈局的 Html 程式碼) 。

後臺程式碼

新增以下程式碼到你的主題的 functions.php 檔案中，當我們在後臺點選新建文章的時候，編輯器中預設就插入了兩個 div，class 類名分別為 content-col-main 和 content-col-side，我將使用 wp3.8.1 twentyfourteen 主題測試。

  1. add_filter( 'default_content', 'custom_editor_content' );   
  2. function custom_editor_content( $content ) {   
  3.     $content = '   
  4.         <div class="content-col-main">   
  5.         This is your main page content   
  6.         &nbsp;   
  7.         </div>   
  8.         <div class="content-col-side">   
  9.         This is your sidebar content   
  10.         &nbsp;   
  11.         </div>';   
  12.     return $content;   
  13. }  

注意事項：

1. 上面程式碼中的 default_content 過濾器只有在新建文章的時候觸發，對於已經存在的文章或者頁面無效。

2. 上面程式碼中的&nbsp; 是空格的 html 實體名稱，不是必須的。

新增完上面的程式碼後，後臺點選新建文章，視覺化模式下可以看到兩行字，文字模式下則可以看到我們設定的預設佈局程式碼，如圖：

這個時候還沒有任何效果，所以接下來給編輯器內部的佈局增加 css 樣式。

新增以下程式碼到主題的 functions.php 檔案。注意，下面的程式碼是給主題的編輯器新增自定義樣式支援，很多主題都已經有這個功能了，所以請先搜尋以下程式碼

  1. add_editor_style( 'editor-style.css' );  

上面程式碼中的 add_editor_style() 函式，用於給後臺的編輯器增加一個 css 樣式檔案，所以接下來在主題資料夾下新建一個 editor-style.css(twentyfourteen 主題已經新增此功能支援，樣式檔案為 css/editor-style.css 所以我就不新建了)，然後在 css 檔案中新增如下 css 程式碼

  1. body {   
  2.    background: #f5f5f5;   
  3. }   
  4.   
  5. .content-col-main {   
  6.    float:left;   
  7.    width:66%;   
  8.    padding:1%;   
  9.    border: 1px dotted #ccc;   
  10.    background: #fff;   
  11. }   
  12.   
  13. .content-col-side {   
  14.    float:right;   
  15.    width:29%;   
  16.    padding:1%;   
  17.    border: 1px dotted #ccc;   
  18.    background: #fff;   
  19. }   
  20.   
  21. img { /* Makes sure your images stay within their columns */  
  22.    max-width: 100%;   
  23.    width: auto;   
  24.    height: auto;   
  25. }  

新增程式碼之後，效果如下圖

到這裡，一個兩列布局的文章模板已經到你的編輯器中了，你可以更改錢嗎 default_content 過濾器中的預設內容和 editor-style.css 檔案來新增樣式，建立一個更加複雜的，符合你需求的模板。

如下

給特定的文章型別建立特定的佈局模板

上面的程式碼直接應用到你的所有內容：文章、頁面、自定義文章型別... 所有會顯示 TinyMCEbian 編輯器的地方。這恐怕不是我們想要的，接下來的內容將讓你可以給不同的或者特定的內容增加布局。

  1. add_filter( 'default_content', 'custom_editor_content' );   
  2. function custom_editor_content( $content ) {   
  3.     global $current_screen;   
  4.     if ( $current_screen->post_type == 'page') {   
  5.         $content = '   
  6.         // TEMPLATE FOR YOUR PAGES   
  7.         ';   
  8.     }   
  9.     elseif ( $current_screen->post_type == 'posttype') {   
  10.         $content = '   
  11.         // TEMPLATE FOR YOUR CUSTOM POST TYPE   
  12.         ';   
  13.     }   
  14.     else {   
  15.         $content = '   
  16.         // TEMPLATE FOR EVERYTHING ELSE   
  17.         ';   
  18.     }   
  19.     return $content;   
  20. }  

上面的程式碼示例給不同的文章型別輸出不同的預設佈局程式碼，請根據實際需求更改上面的程式碼。

同樣的，也可以給不同的文章型別載入不同的 css 檔案。示例程式碼如下

  1. function custom_editor_style() {   
  2.     global $current_screen;   
  3.     switch ($current_screen->post_type) {   
  4.         case 'post':   
  5.             add_editor_style('editor-style-post.css');   
  6.             break;   
  7.         case 'page':   
  8.             add_editor_style('editor-style-page.css');   
  9.         break;   
  10.         case '[POSTTYPE]':   
  11.             add_editor_style('editor-style-[POSTTYPE].css');   
  12.         break;   
  13.     }   
  14. }   
  15. add_action( 'admin_head', 'custom_editor_style' );  

當然，還有第二種方法，你也可以透過以下方法來為不同的文章型別載入不同的 css,

  1. function custom_editor_style() {   
  2.     global $current_screen;   
  3.     add_editor_style(   
  4.         array(   
  5.             'editor-style.css',   
  6.             'editor-style-'.$current_screen->post_type.'.css'   
  7.         )   
  8.     );   
  9. }   
  10. add_action( 'admin_head', 'custom_editor_style' );