文章翻譯自：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' );