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