Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to modify the style of the article editor in WordPress, the article is very detailed, has a certain reference value, interested friends must read it!

Customize the style of the story editor

The style of the article for each WordPress theme is different, but the style is consistent when editing the article using the background visual editor.

But WordPress provides an ability to customize styles in the article visual editor, which allows you to customize CSS styles in the WordPress visual editor.

By setting the style of the visual editor to the same as the front end, it is convenient for users to directly preview the results displayed in the front end of the article without having to refresh the typesetting style of debugging articles repeatedly.

To add a custom CSS stylesheet to the article editor, you only need to use the add_editor_style () function.

First create an editor-style.css stylesheet file in the root directory of your theme, and then add to the functions.php file:

/ * WordPress Custom article editor style * http://www.endskin.com/editor-style/*/function Bing_add_editor_style () {add_editor_style ();}

Add_action ('after_setup_theme',' Bing_add_editor_style')

In this way, editor-style.css stylesheets will be introduced in the visual editor, and writing CSS in the editor-style.css file can be directly reflected in the visual editor.

Customize the CSS file

In addition, you can customize the path of the CSS file:

/ * WordPress customizes the style of the article editor * Custom CSS file * http://www.endskin.com/editor-style/*/function Bing_add_editor_style () {add_editor_style ('css/custom-editor-style.css'); / / this invokes the custom-editor-style.css file of the theme directory CSS folder} add_action (' after_setup_theme', 'Bing_add_editor_style')

This invokes the "css/custom-editor-style.css" file of the theme directory.

Import external CSS files

The add_editor_style () function also supports the introduction of external CSS files:

/ * WordPress customizes the style of the article editor * external CSS file * 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'); / / introduces external CSS file} add_action (' after_setup_theme', 'Bing_add_editor_style')

Well, that's it, and by the way, here are two WordPress editor plug-ins:

CKEditor for WordPress plug-in

Introduction to CKEditor for WordPress

CKEditor editor is a very powerful rich text editor for foreigners, and CKEditor for WordPress is a specially customized version for WordPress to replace the default editor. There are two sets of skin options that support adding an editing toolbar for the comment box. With CKFinder file upload control, you can achieve more functions.

CKEditor for WordPress features:

Replace the default WordPress editor with CKEditor

You can add an editing toolbar to the comment box

Special color text can be published through CKEditor (optional)

Built-in file management and upload manager, support CKFinder-- an AJAX file browser

Built-in WordPress "read more" tag (1)

Integration of voting Wp-Polls (3)

Integration of album plug-in NextGEN Gallery (5)

Integration of scoring plug-in GD Star Rating (4)

Integration of Viper's Video Quicktags plug-ins (2)

Integration of WordPress media buttons

Self-configurable output format

Customizable toolbar button

Customizable skin

And others.

KEditor itself has a relatively flexible setting options, you can configure according to your own needs, the following describes the file upload control CKFinder.

Install the CKFinder file upload control

CKEditor also has its own powerful file upload plug-in CKFinder, which enhances the upload function of CKEditor. It is not installed by default. You can visit and download CKFinder PHP version: http://ckfinder.com/download.

Upload the contents of the ckfinder folder to the root directory of "ckfinder" in the CKEditor for wordpress plug-in directory.

Delete the config.php file under the original folder and change ckfinder_config.php to config.php.

At this point, you can visit the backend CKEditor-Upload Options to make relevant settings.

CKEditor and CKFinder downloads

CKEditor for WordPress download: http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

CKFinder download: http://ckfinder.com/download

Kindeditor for WordPress plug-in (in line with Chinese customs)

Kindeditor editor is a simple, efficient, easy-to-use editor developed by Chinese people, with built-in google code prettify, which can insert code easily and quickly. In addition, Pan Xianhai buddies made a WordPress plug-in: Kindeditor for WordPress. The better thing is that you can type with one click, use the built-in picture upload function, insert code highlighting, visually insert summary buttons, and so on.

Kindeditor for WordPress installation and use

1. You can search for Kindeditor online installation in the background plug-in installation interface, or download Kindeditor for WordPress

two。 After the plug-in is enabled, under the setting-Kindeditor setting, you can set whether to enable foreground code highlighting. You can choose some styles.

The above is all the content of the article "how to modify the style of the article editor in WordPress". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.