對于wordpress主題開發者來說,客戶的要求可謂是五花八門,他們什么樣的要求都會出現,本章就拿我的一個客戶要求來說事——對方想讓文章發表出來是固定格式的,對方是一家企業客戶,就是說,文章發表出來后,不是普通文章那樣,而是讓這篇文章按固定的布局來顯示,也就是我們今天要講的“讓wordpress主題實現編輯器分區域編輯文章”,怎樣實現文章區域格式化呢？下面就隨高時銀博客來看看吧.

第一步:添加布局代碼。

要想達到效果,我們要在主題的functions.php文件中添加如下代碼:

1. add_filter( 'default_content', 'custom_editor_content' ); 
2. function custom_editor_content( $content ) { 
3. $content = ' 
4. This is your main page content 
5. //Vevb.com 
6. This is your sidebar content 
7.  
8. '; 
9. return $content; 
10. } 

通過上面的代碼,我們給編輯器添加了2個區域,它們分別是content-col-main 和 content-col-side,即上圖中所示的2個區域,但是,要想達到上頭的效果,我們還要為這2個 div 添加它們的CSS樣式.

第二步:添加CSS樣式.

在wordpress主題文件夾下創建一個名為 single-style.css 文件,然后打開它,在里面添加如下代碼:

1. body { background: #f5f5f5; } 
2. .content-col-main { float:left; width:66%; padding:1%; border: 1px dotted #ccc; background: #fff; } 
3. .content-col-side { float:right; width:29%; padding:1%; border: 1px dotted #ccc; background: #fff; } 
4. .content-col-main img, .content-col-side img{ max-width: 100%; width: auto; height: auto; } 

第三步:引用CSS樣式。

在wordpress主題的functions.php文件中調用上面創建 的single-style.css文件,代碼如下:

add_editor_style( 'single-style.css' );

通過上面3步,我們就實現了在wordpress主題的編輯器中區域化編輯文章的功能模塊,就如上圖的效果,但是,雖然后臺編輯器已經實現了這樣的布局,但是,如果這親發布文章出去,前臺是看不到效果的,為什么呢？因為,前臺我們沒有為文章設置樣式,所以,我們還要在前臺也調用上面創建的CSS樣式 文件.

第四步:前臺調用CSS樣式。

直接在wordpress主題的header.php文件中調用上面創建的single-style.css文件,代碼如下:

添加好了以后,前臺的文章展示就會按后臺編輯器的區域編輯來展示了.

這里只是做了一個簡單的案例,你還可以讓文章布局更加的復雜化,就像我那個客戶一樣,文章布局中包括以下內容:產品名稱、產品種類、產品圖片、產品規格、產品功能、產品價格等等.

好了,有關worddpress CMS主題如何格式化文章編輯器就介紹到這里,后續我們會推出更加精彩的文章.