Enhance WordPress "WYSIWYG" edit effect

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Although WordPress built-in TINYMCE editor is a WYSIWYG (WYSIWYG) editor, however, we edit the article in the background and see the effect in the foreground, always not very consistent. It is not difficult to achieve a higher degree of match between the background edit results and the foreground display effect.

Simply put, just declare a new CSS file for use by a visual editor only, and if the style in the CSS file is the same as the CSS file style in the current theme, then the "see" article in the editor is the effect of "get" in the foreground.

　　

(Modified effect)

1. Declaring a visual editor's CSS file

Add a line of code to the functions.php to declare the CSS for the visual editor:

//Add CSS to Visual Editor


add_editor_style (' css/custom-editor-style.css ');

The file path as a parameter is the relative path of the topic directory. Make sure to create the new CSS file at the specified location under the theme folder.

2. Ensure that the new CSS and the original CSS file common class

The new CSS file is primarily responsible for saving the article style. The HTML markup for an article is usually enclosed in a container element, similar to the following:

<div class= "POST" >


<!--All content for entire post in-->


</div>

The new CSS file style might use the class name above to set the style for the article:

. Post H1,. Post H2,. Post H3,. Post H4 {font-family:museolight, Georgia, serif;


Font-weight:normal; margin:0 0 10px 0; }


. Post H2 {font-size:28px}


. Post H2 {padding:10px 180px 10px 15px;


background: #237abf URL (..   /images/title-bg.png) Repeat-x;


margin:0; line-height:1.3; font-size:22px; }


. Post H2,. Post H2 a {color:white; text-shadow:0 1px 2px #143855;}


. Post h2 a:hover {color: #b8e0ff;}


. Post h3 {font-size:20px; padding:5px 0; margin:30px 0 15px 0;


border-top:1px solid #ccc; border-bottom:1px solid #ccc; }


. Post H4 {font-size:18px}


. Post p {margin:0 0 10px 0;}


. Post Pre {background: #eee; padding:15px;


Overflow:auto; margin:0 0 15px 0; border:1px solid #ddd; }


. Post pre code {font-size:11px;}


. Post code {background: #eee;


font:12px Monaco, Courier, monospace; Color: #0E304A; }


. Post H3 code {font-size:18px;}


. Post acronym, ABBR {border-bottom:1px dotted #514031; cursor:help;}


. Post ins {text-decoration:underline}


. Post del {Text-decoration:line-through}


. Post a {outline:none; text-decoration:none;


color: #19517C; Background: #eee;   border:1px solid #ddd;


padding:1px 3px 2px 3px;   -webkit-border-radius:3px;


-khtml-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }


. Post A:hover {color: #fff; background: #143855; border:1px solid #143855;}

(the font, font size, etc. values in code are for reference only)

Because the visual editor doesn't have the same class name, we can't just copy and paste the above code into a new CSS style file, which doesn't work. So we also need to force the visual editing apparatus to have the same class name.

Put the following code into the functions.php file:

//ADD body class to Visual Editor to match class used live


function Mytheme_mce_settings ($initArray) {


$initArray [' body_class '] = ' post ';


return $initArray;


}


add_filter (' tiny_mce_before_init ', ' mytheme_mce_settings ');

This may not be as effective as referencing a single file, but at least a lot more convenient. If you like to set CSS styles for different files, you can certainly do it yourself.

When this is done, the "WYSIWYG" effect can be enhanced to the greatest extent possible.