《PHP應用：修改WordPress中文章編輯器的樣式的方法詳解》要點：
本文介紹了PHP應用：修改WordPress中文章編輯器的樣式的方法詳解，希望對您有用。如果有疑問，可以聯系我們。

PHP實戰自定義文章編輯器的樣式
每一個 WordPress 主題的文章樣式都是不一樣的,但是在使用后臺的可視化編輯器編輯文章的時候,樣式卻都是一致的.

PHP實戰但是 WordPress 提供了一個在文章可視化編輯器中自定義樣式的功能,利用這個功能可以在 WordPress 可視化編輯器里自定義 CSS 樣式.

PHP實戰把可視化編輯器的樣式設置成和前端一樣,可以方便用戶直接預覽出文章顯示在前端的結果,不用刷新反復的調試文章排版樣式.

PHP實戰在文章編輯器添加一個自定義的 CSS 樣式表只需要使用 add_editor_style() 函數.

PHP實戰首先在你的主題根目錄創建一個 editor-style.css 樣式表文件,然后在 functions.php 文件里添加：

PHP實戰
/**
  *WordPress 自定義文章編輯器的樣式
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style();
}

PHP實戰add_action( 'after_setup_theme', 'Bing_add_editor_style' );

PHP實戰這樣,editor-style.css 樣式表就會在可視化編輯器里引入了,在 editor-style.css 文件里書寫 CSS 就能直接體現在可視化編輯器上.

PHP實戰

PHP實戰自定義 CSS 文件

PHP實戰除此之外,你還可以自定義 CSS 文件的路徑：

PHP實戰
/**
  *WordPress 自定義文章編輯器的樣式
  *自定義 CSS 文件
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style( 'css/custom-editor-style.css' );//這樣就會調用主題目錄 CSS 文件夾的 custom-editor-style.css 文件
}
add_action( 'after_setup_theme', 'Bing_add_editor_style' );

PHP實戰這樣就會調用主題目錄的 “css/custom-editor-style.css” 文件.

PHP實戰引入外部 CSS 文件

PHP實戰add_editor_style() 函數還支持引入外部的 CSS 文件：

PHP實戰
/**
  *WordPress 自定義文章編輯器的樣式
  *外部 CSS 文件
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style( 'http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css' );//引入外部的 CSS 文件
}
add_action( 'after_setup_theme', 'Bing_add_editor_style' );

PHP實戰
嗯,就是這樣,順帶著再來推薦兩款WordPress編輯器插件：

PHP實戰
CKEditor for WordPress插件
CKEditor for WordPress 簡介

PHP實戰CKEditor編輯器是老外的一款很強大的富文本編輯器,而CKEditor for WordPress 就是專門為 WordPress 定制的版本,用來替換默認的編輯器,有兩套皮膚可選,支持為評論框添加編輯工具欄,配合 CKFinder 文件上傳控件可以實現更多的功能.

PHP實戰CKEditor for WordPress 特色功能：

• 用CKEditor取代默認WordPress編輯器
• 可為評論框添加編輯工具欄
• 通過CKEditor發表可以發表樣式特別的彩色文字(可選)
• 內置的文件管理與上傳管理器,支持CKFinder――一個AJAX文件瀏覽器
• 內置WordPress的“read more”標簽(1)
• 對投票插Wp-Polls的整合(3)
• 對相冊插件NextGEN Gallery的整合(5)
• 對評分插件GD Star Rating的整合(4)
• 對Viper's Video Quicktags插件的整合(2)
• 對WordPress媒體按鈕的整合
• 可自行配置的輸出格式
• 可定制的工具欄按鈕
• 可定制的皮膚

PHP實戰以及其他

PHP實戰

PHP實戰KEditor本身有比較靈活的設置選項,大家可以根據自己的需要配置,下面介紹一下文件上傳控件CKFinder.

PHP實戰安裝 CKFinder 文件上傳控件

PHP實戰CKEditor 還有一個自身的強大的文件上傳插件 CKFinder,增強 CKEditor 的上傳功能,默認沒有安裝,你可以訪問下載CKFinder PHP版本：http://ckfinder.com/download

PHP實戰上傳ckfinder文件夾的內容到CKEditor for wordpress插件目錄下的“ckfinder”的根目錄里.

PHP實戰刪掉原有文件夾下的config.php文件,將ckfinder_config.php改為config.php.

PHP實戰這時訪問后臺 CKEditor - Upload Options 進行相關設置即可.

PHP實戰CKEditor 和 CKFinder 下載

PHP實戰CKEditor for WordPress 下載：http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

PHP實戰CKFinder 下載：http://ckfinder.com/download

PHP實戰
Kindeditor for WordPress插件(符合國人習慣)
Kindeditor 編輯器是國人開發的簡單高效,易于使用的編輯器,內置了google code prettify,可以簡單快速的插入代碼.此外,盤先海 哥們將其制作了一個WordPress插件： Kindeditor for WordPress .比較好的是可以一鍵排版、使用自帶的圖片上傳功能、插入代碼高亮、可視化插入<!-more->摘要按鈕等等.

PHP實戰

PHP實戰Kindeditor for WordPress 安裝使用

PHP實戰1.可以在后臺插件安裝界面搜索 Kindeditor 在線安裝,或者下載 Kindeditor for WordPress

PHP實戰2.啟用插件后,在 設置 - Kindeditor設置下,可以設置是否啟用前臺代碼高亮,可選一些樣式

PHP實戰

PHP實戰體驗

PHP實戰我是在 3.5.1 環境下測試的,發現 Kindeditor for WordPress 似乎是固定了編輯器的寬度,如果你縮小瀏覽器,你會發現,編輯器不會自適應改變大小,導致右邊部分文字直接被掩蓋,希望插件作者可以解決這個問題.

PHP實戰下載 Kindeditor for WordPress

歡迎參與《PHP應用：修改WordPress中文章編輯器的樣式的方法詳解》討論，分享您的想法，維易PHP學院為您提供專業教程。

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/8244.html