歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

雅虎:上半年收到多地政府索取數(shù)據(jù)哀求上萬(wàn)次

發(fā)布時(shí)間:2015-05-26 文章來(lái)源:  瀏覽次數(shù):3298
WordPress的編纂器TinyMCE是一個(gè)非常強(qiáng)盛的工具,對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō),使用WordPress的編纂器TinyMCE是沒(méi)什么難題的,但是對(duì)于那些不怎么了解HTML的人來(lái)說(shuō)卻用起來(lái)不是那么的得心應(yīng)手;假如我們把內(nèi)容編纂器做到所見(jiàn)即所得,預(yù)先把內(nèi)容編纂器的排版布局都做出來(lái),而我們用戶只要在相對(duì)應(yīng)的區(qū)域直接輸入內(nèi)容就行了。那上面所說(shuō)的題目就可以很等閑的解決,而且同樣也可以進(jìn)步我們編纂內(nèi)容的效率。
  今天就為大家先容下Wordpress高級(jí)自定義布局的內(nèi)容編纂器模板的制作技巧,要做到所見(jiàn)即所得,那么我們得在內(nèi)容編纂器內(nèi)自定義添加預(yù)設(shè)內(nèi)容和排版布局,再結(jié)合我們樣式表就可以等閑的實(shí)現(xiàn)這個(gè)功能。
  wordpress-editor-1
  創(chuàng)建自定義布局
  排版布局分為兩部門,一個(gè)是HTML的排版布局,另一個(gè)是CSS的樣式表界面。
  HTML排版布局
  <?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;">覺(jué)唯前端 http://5552833.com</p> </div> <div class="content-col-side"> 這里是側(cè)邊欄內(nèi)容區(qū)域 <p style="color:#999;">覺(jué)唯前端 http://5552833.com</p> </div> '; return $content; } ?>
  WordPress的這個(gè)default_content過(guò)濾器只能作用在新創(chuàng)建的文章或者頁(yè)面里面,之前已經(jīng)發(fā)布出來(lái)的文章或者頁(yè)面都不會(huì)起作用。所以不用擔(dān)心會(huì)影響到發(fā)布的文章。
  CSS樣式設(shè)計(jì)
  接下來(lái)我們?yōu)檫@個(gè)結(jié)構(gòu)布局引入一個(gè)樣式表:
  <?php add_editor_style( 'editor-style.css' ); ?>
  我們需要另外建一個(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è)文件夾。
  現(xiàn)在我們切換到我們的后臺(tái),點(diǎn)擊新建一篇文章(或者頁(yè)面)內(nèi)容編纂器區(qū)域就會(huì)自動(dòng)添加剛剛我們創(chuàng)建的HTML結(jié)構(gòu)了:
  wordpress-editor-2
  這個(gè)就是一個(gè)簡(jiǎn)樸的布局,你可以根據(jù)你的網(wǎng)站,編纂default_content和styles.css里面的內(nèi)容以及布局結(jié)構(gòu)。下面是根據(jù)我(覺(jué)唯前端)自己的網(wǎng)站,做個(gè)示例給大家看看:
  wordpress-editor-3
  通過(guò)這里,我們就可以簡(jiǎn)樸的為我們的內(nèi)容編纂器自動(dòng)添加一些簡(jiǎn)樸的布局結(jié)構(gòu),這將為我們的以后的內(nèi)容編纂的時(shí)候帶來(lái)良多的利便。
  自定義不同文章類型的布局模版
  上面的代碼就是制作一個(gè)高級(jí)自定義布局內(nèi)容編纂器模版的一個(gè)最基本的思路,但仍是有一些局限性的,例如我需要我的post文章和page頁(yè)面分別自 動(dòng)添加不同的HTML代碼,,那該怎么延伸解決呢?實(shí)在我們可以在custom_editor_content()函數(shù)上面加上if前提語(yǔ) 句,Wordpress的if前提語(yǔ)句無(wú)疑是一個(gè)實(shí)用性很強(qiáng)的語(yǔ)句,我們要懂的善用。先來(lái)看看下面的代碼:
  post_type == 'page') { $content = ' // 定義page頁(yè)面模版 '; } elseif ( $current_screen->post_type == 'POSTTYPE') { $content = ' // 定義post文章模版 '; } else { $content = ' // 定義除了page、post以外的模版 '; } return $content; } ?>
  上面的代碼就實(shí)現(xiàn)了在不同的文章類型內(nèi)容編纂器里面自動(dòng)添加不同的HTML代碼,講到這里,也行你也會(huì)想到,那我也可以在不同的文章類型內(nèi)容編纂器 使用不同的樣式文件表?通過(guò)自定義不同的樣式表制作出多樣化個(gè)性化的布局模版出來(lái)?是的,我們按照上面的思路也可以自己定義不同的文章類型內(nèi)容編纂器分別 引用不同的樣式文件表:
  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 ”會(huì)根據(jù)你文章的類型自動(dòng)創(chuàng)建相對(duì)應(yīng)的樣式表文件,例如公告:“ bulletin ”,則會(huì)自動(dòng)引入“ editor-style-bulletin.css ”。
  說(shuō)到自動(dòng)獲取文章類型然后輸出相對(duì)應(yīng)的文章類型樣式表,也可以用下面的代碼調(diào)用方式來(lái)自動(dòng)獲取相對(duì)應(yīng)的文章類型,是屬于日志呢、仍是頁(yè)面、或者仍是 公告、視頻、相冊(cè)等等。一切交給后臺(tái)自動(dòng)判定。個(gè)人感覺(jué),相對(duì)于上面的if語(yǔ)句來(lái)判定引用相對(duì)應(yīng)文章類型來(lái)說(shuō),這種實(shí)現(xiàn)方式更加的靈活,效率更高,代碼更 簡(jiǎn)潔的特點(diǎn)。當(dāng)然選擇哪一種實(shí)現(xiàn)方法,各自可以根據(jù)自己的模版各自選擇,最合適的才是最好的。
  post_type.'.css' ) ); } add_action( 'admin_head', 'custom_editor_style' ); ?>
  好了,接下來(lái)要怎么折騰你的Wordpress內(nèi)容編纂器,看你們的了。在這里先容的只是思路,立異實(shí)踐仍是靠大家。歡迎大家一起來(lái)探討……

上一條:阿里旅行欣欣旅游已下架違...

下一條:支付協(xié)會(huì)禁止會(huì)員網(wǎng)上賣P...