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

第一步:添加布局代碼。

要想達(dá)到效果,我們要在主題的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. } 

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

第二步:添加CSS樣式.

在wordpress主題文件夾下創(chuàng)建一個(gè)名為 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文件中調(diào)用上面創(chuàng)建 的single-style.css文件,代碼如下:

add_editor_style( 'single-style.css' );

通過(guò)上面3步,我們就實(shí)現(xiàn)了在wordpress主題的編輯器中區(qū)域化編輯文章的功能模塊,就如上圖的效果,但是,雖然后臺(tái)編輯器已經(jīng)實(shí)現(xiàn)了這樣的布局,但是,如果這親發(fā)布文章出去,前臺(tái)是看不到效果的,為什么呢？因?yàn)?前臺(tái)我們沒(méi)有為文章設(shè)置樣式,所以,我們還要在前臺(tái)也調(diào)用上面創(chuàng)建的CSS樣式 文件.

第四步:前臺(tái)調(diào)用CSS樣式。

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

添加好了以后,前臺(tái)的文章展示就會(huì)按后臺(tái)編輯器的區(qū)域編輯來(lái)展示了.

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

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