欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

WordPress高級自定義布局的內(nèi)容編輯器(TinyMCE)模板

  發(fā)布時間：2012-12-13 08:51:57   作者：佚名   我要評論
WordPress的編輯器TinyMCE是一個非常強(qiáng)大的工具，對于網(wǎng)頁設(shè)計師來說，使用WordPress的編輯器TinyMCE是沒什么困難的，但是對于那些不怎么了解HTML的人來說卻用起來不是那么的得心應(yīng)手

WordPress的編輯器TinyMCE是一個非常強(qiáng)大的工具，對于網(wǎng)頁設(shè)計師來說，使用WordPress的編輯器TinyMCE是沒什么困難的，但是對于那些不怎么了解HTML的人來說卻用起來不是那么的得心應(yīng)手；如果我們把內(nèi)容編輯器做到所見即所得，預(yù)先把內(nèi)容編輯器的排版布局都做出來，而我們用戶只要在相對應(yīng)的區(qū)域直接輸入內(nèi)容就行了。那上面所說的問題就可以很輕易的解決，而且同樣也可以提高我們編輯內(nèi)容的效率。
今天就為大家介紹下Wordpress高級自定義布局的內(nèi)容編輯器模板的制作技巧，要做到所見即所得，那么我們得在內(nèi)容編輯器內(nèi)自定義添加預(yù)設(shè)內(nèi)容和排版布局，再結(jié)合我們樣式表就可以輕易的實現(xiàn)這個功能。

wordpress-editor-1

創(chuàng)建自定義布局

排版布局分為兩部分，一個是HTML的排版布局，另一個是CSS的樣式表界面。

HTML排版布局

復(fù)制代碼
代碼如下:

<?php
add_filter( 'default_content', 'custom_editor_content' );
function custom_editor_content( $content ) {
$content = '
<div class="content-col-main">
這里是主要內(nèi)容區(qū)域
<p style="color:#999;">覺唯前端 http://www.jiawin.com</p>
</div>
<div class="content-col-side">
這里是側(cè)邊欄內(nèi)容區(qū)域
<p style="color:#999;">覺唯前端 http://www.jiawin.com</p>
</div>
';
return $content;
}
?>

WordPress的這個default_content過濾器只能作用在新創(chuàng)建的文章或者頁面里面，之前已經(jīng)發(fā)布出來的文章或者頁面都不會起作用。所以不用擔(dān)心會影響到發(fā)布的文章。

CSS樣式設(shè)計

接下來我們?yōu)檫@個結(jié)構(gòu)布局引入一個樣式表：

復(fù)制代碼
代碼如下:

<?php
add_editor_style( 'editor-style.css' );
?>

我們需要另外建一個樣式表文件，命名為：editor-style.css，里面的示例代碼如下：

復(fù)制代碼
代碼如下:

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;
}

這里需要注意的是樣式表文件的路徑，按照這個例子是放在主題的目錄下面的，即和style.css同個文件夾。
現(xiàn)在我們切換到我們的后臺，點擊新建一篇文章（或者頁面）內(nèi)容編輯器區(qū)域就會自動添加剛剛我們創(chuàng)建的HTML結(jié)構(gòu)了：

wordpress-editor-2

這個就是一個簡單的布局，你可以根據(jù)你的網(wǎng)站，編輯default_content和styles.css里面的內(nèi)容以及布局結(jié)構(gòu)。下面是根據(jù)我（覺唯前端）自己的網(wǎng)站，做個示例給大家看看：

wordpress-editor-3

通過這里，我們就可以簡單的為我們的內(nèi)容編輯器自動添加一些簡單的布局結(jié)構(gòu)，這將為我們的以后的內(nèi)容編輯的時候帶來很多的方便。

自定義不同文章類型的布局模版

上面的代碼就是制作一個高級自定義布局內(nèi)容編輯器模版的一個最基本的思路，但還是有一些局限性的，例如我需要我的post文章和page頁面分別自動添加不同的HTML代碼，,那該怎么延伸解決呢?其實我們可以在custom_editor_content（）函數(shù)上面加上if條件語句，Wordpress的if條件語句無疑是一個實用性很強(qiáng)的語句，我們要懂的善用。先來看看下面的代碼：

復(fù)制代碼
代碼如下:

<?php
add_filter( 'default_content', 'custom_editor_content' );
function custom_editor_content( $content ) {
global $current_screen;
if ( $current_screen->post_type == 'page') {
$content = '
// 定義page頁面模版
';
}
elseif ( $current_screen->post_type == 'POSTTYPE') {
$content = '
// 定義post文章模版
';
}
else {
$content = '
// 定義除了page、post以外的模版
';
}
return $content;
}
?>

上面的代碼就實現(xiàn)了在不同的文章類型內(nèi)容編輯器里面自動添加不同的HTML代碼，講到這里，也行你也會想到，那我也可以在不同的文章類型內(nèi)容編輯器使用不同的樣式文件表？通過自定義不同的樣式表制作出多樣化個性化的布局模版出來？是的，我們按照上面的思路也可以自己定義不同的文章類型內(nèi)容編輯器分別引用不同的樣式文件表：

復(fù)制代碼
代碼如下:

<?php
function custom_editor_style() {
global $current_screen;
switch ($current_screen->post_type) {
case 'post':
add_editor_style('editor-style-post.css');
break;
case 'page':
add_editor_style('editor-style-page.css');
break;
case '[POSTTYPE]':
add_editor_style('editor-style-[POSTTYPE].css');
break;
}
}
add_action( 'admin_head', 'custom_editor_style' );
?>

把上面的代碼加到你的functions.php文件即可。這里的“ editor-style-[POSTTYPE].css ”會根據(jù)你文章的類型自動創(chuàng)建相對應(yīng)的樣式表文件，例如公告：“ bulletin ”，則會自動引入“ editor-style-bulletin.css ”。

說到自動獲取文章類型然后輸出相對應(yīng)的文章類型樣式表，也可以用下面的代碼調(diào)用方式來自動獲取相對應(yīng)的文章類型，是屬于日志呢、還是頁面、或者還是公告、視頻、相冊等等。一切交給后臺自動判斷。個人感覺，相對于上面的if語句來判斷引用相對應(yīng)文章類型來說，這種實現(xiàn)方式更加的靈活，效率更高，代碼更簡潔的特點。當(dāng)然選擇哪一種實現(xiàn)方法，各自可以根據(jù)自己的模版各自選擇，最合適的才是最好的。

復(fù)制代碼
代碼如下:

<?php
function custom_editor_style() {
global $current_screen;
add_editor_style(
array(
'editor-style.css',
'editor-style-'.$current_screen->post_type.'.css'
)
);
}
add_action( 'admin_head', 'custom_editor_style' );
?>

好了，接下來要怎么折騰你的Wordpress內(nèi)容編輯器，看你們的了。在這里介紹的只是思路，創(chuàng)新實踐還是靠大家。歡迎大家一起來探討……

相關(guān)文章

最新評論