WordPress的編輯器TinyMCE是一個(gè)非常強大的工具，對于網(wǎng)頁(yè)設計師來(lái)說(shuō)，使用Wordpress的編輯器TinyMCE是沒(méi)什么困難的，但是對于那些不怎么了解HTML的人來(lái)說(shuō)卻用起來(lái)不是那么的得心應手；如果我們把內容編輯器做到所見(jiàn)即所得，預先把內容編輯器的排版布局都做出來(lái)，而我們用戶(hù)只要在相對應的區域直接輸入內容就行了。那上面所說(shuō)的問(wèn)題就可以很輕易的解決，而且同樣也可以提高我們編輯內容的效率。
今天就為大家介紹下Wordpress高級自定義布局的內容編輯器模板的制作技巧，要做到所見(jiàn)即所得，那么我們得在內容編輯器內自定義添加預設內容和排版布局，再結合我們樣式表就可以輕易的實(shí)現這個(gè)功能。
創(chuàng )建自定義布局
排版布局分為兩部分，一個(gè)是HTML的排版布局，另一個(gè)是CSS的樣式表界面。
HTML排版布局
Wordpress的這個(gè)default_content過(guò)濾器只能作用在新創(chuàng )建的文章或者頁(yè)面里面，之前已經(jīng)發(fā)布出來(lái)的文章或者頁(yè)面都不會(huì )起作用。所以不用擔心會(huì )影響到發(fā)布的文章。
CSS樣式設計
接下來(lái)我們?yōu)檫@個(gè)結構布局引入一個(gè)樣式表：
我們需要另外建一個(gè)樣式表文件，命名為：editor-style.css，里面的示例代碼如下：
body {
background: #f5f5f5;
}
.content-col-main {
float:left;
width:66%;
padding:1%;
border: 1px dotted #ccc;
background: #fff;
}
.content-col-side {
float:right;
width:29%;
padding:1%;
border: 1px dotted #ccc;
background: #fff;
}
img { /* Makes sure your images stay within their columns */
max-width: 100%;
width: auto;
height: auto;
}
這里需要注意的是樣式表文件的路徑，按照這個(gè)例子是放在主題的目錄下面的，即和style.css同個(gè)文件夾。
現在我們切換到我們的后臺，點(diǎn)擊新建一篇文章（或者頁(yè)面）內容編輯器區域就會(huì )自動(dòng)添加剛剛我們創(chuàng )建的HTML結構了：
這個(gè)就是一個(gè)簡(jiǎn)單的布局，你可以根據你的網(wǎng)站，編輯default_content和styles.css里面的內容以及布局結構。下面是根據我（覺(jué)唯前端）自己的網(wǎng)站，做個(gè)示例給大家看看：
通過(guò)這里，我們就可以簡(jiǎn)單的為我們的內容編輯器自動(dòng)添加一些簡(jiǎn)單的布局結構，這將為我們的以后的內容編輯的時(shí)候帶來(lái)很多的方便。
自定義不同文章類(lèi)型的布局模版
上面的代碼就是制作一個(gè)高級自定義布局內容編輯器模版的一個(gè)最基本的思路，但還是有一些局限性的，例如我需要我的post文章和page頁(yè)面分別自動(dòng)添加不同的HTML代碼，,那該怎么延伸解決呢?其實(shí)我們可以在custom_editor_content（）函數上面加上if條件語(yǔ)句，Wordpress的if條件語(yǔ)句無(wú)疑是一個(gè)實(shí)用性很強的語(yǔ)句，我們要懂的善用。先來(lái)看看下面的代碼：
上面的代碼就實(shí)現了在不同的文章類(lèi)型內容編輯器里面自動(dòng)添加不同的HTML代碼，講到這里，也行你也會(huì )想到，那我也可以在不同的文章類(lèi)型內容編輯器使用不同的樣式文件表？通過(guò)自定義不同的樣式表制作出多樣化個(gè)性化的布局模版出來(lái)？是的，我們按照上面的思路也可以自己定義不同的文章類(lèi)型內容編輯器分別引用不同的樣式文件表：
把上面的代碼加到你的functions.php文件即可。這里的“ editor-style-[POSTTYPE].css ”會(huì )根據你文章的類(lèi)型自動(dòng)創(chuàng )建相對應的樣式表文件，例如公告：“ bulletin ”，則會(huì )自動(dòng)引入“ editor-style-bulletin.css ”。
說(shuō)到自動(dòng)獲取文章類(lèi)型然后輸出相對應的文章類(lèi)型樣式表，也可以用下面的代碼調用方式來(lái)自動(dòng)獲取相對應的文章類(lèi)型，是屬于日志呢、還是頁(yè)面、或者還是公告、視頻、相冊等等。一切交給后臺自動(dòng)判斷。個(gè)人感覺(jué)，相對于上面的if語(yǔ)句來(lái)判斷引用相對應文章類(lèi)型來(lái)說(shuō)，這種實(shí)現方式更加的靈活，效率更高，代碼更簡(jiǎn)潔的特點(diǎn)。當然選擇哪一種實(shí)現方法，各自可以根據自己的模版各自選擇，最合適的才是最好的。
好了，接下來(lái)要怎么折騰你的Wordpress內容編輯器，看你們的了。在這里介紹的只是思路，創(chuàng )新實(shí)踐還是靠大家。歡迎大家一起來(lái)探討……
來(lái)源：覺(jué)唯前端
聯(lián)系客服
