After WordPress 3.0, there is a new practical function: you can change the style of the default background editor (TinyMCE) to implement an interesting function: directly preview the layout of the log content in the background visual editor mode, and maintain the consistency with the foreground browsing style. You do not need to go to the foreground to view the log editing. WordPress 3.21 default theme Twenty Eleven has integrated this function. The default theme Twenty Eleven has powerful functions and integrates many new WordPress functions. So far, I haven't studied it thoroughly Children's shoes with the theme of WP might as well study more.
Open the default theme TwentyEleven's functions.php, and you will see a clearly commented code: The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
The general meaning of the note in Chinese is: the visual editor matches the style of the theme editor-style. css. The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
The key is this sentence. Take the HotNews Pro theme as an example to easily implement this function. The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
First, create a new file named editor-style.css, copy the following style into it, or download it directly: Editor-style.css file , and put it in the HotNews Pro theme css directory. The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
- body {
- font : 13px 'Microsoft YaHei', Microsoft YaHei Arial , Lucida Grande, Tahoma , sans-serif ;
- color : #000 ;
- text-shadow : 0px 1px 0px #d1d1d1 ;
- width : 700px ;
- }
- ul li{
- list-style : square inside ;
- line-height : 24px ;
- }
- h1 { font-size : 18px ; line-height :185%;}
- h2 { font-size : 16px ; line-height :185%;}
- h3 { font-size : 14px ; line-height :185%;}
- ul,ol,dd, pre ,hr {
- margin : 0 0 10px 0;
- }
- p {
- line-height :185%;
- text-indent :2em;
- margin : 0 0 10px 0;
- }
- blockquote {
- width : 660px ;
- color : #4e6384 ;
- line-height : 23px ;
- margin : 5px auto 5px auto ;
- padding : 10px ;
- clear : both ;
- border : 1px solid #ccc ;
- }
- code {
- width : 660px ;
- font : 12px / 17px tahoma , arial , sans-serif ;
- color : #4e6384 ;
- display : block ;
- margin : 5px auto 5px auto ;
- padding : 10px ;
- border-left : 3px solid #8391A7 ;
- border-right : 1px solid #8391A7 ;
- border-top : 1px solid #8391A7 ;
- border-bottom : 1px solid #8391A7 ;
- }
- blockquote td{
- border-bottom : 1px solid #ccc ;
- padding : 2px ;
- }
- img.centered {
- display : block ;
- margin-left : auto ;
- margin-right : auto ;
- margin-bottom : 10px ;
- }
- img.alignnone {
- margin : 0 0 10px 0;
- display : inline ;
- }
- img.alignright {
- margin : 0 0 10px 10px ;
- display : inline ;
- }
- img.alignleft {
- margin : 0 10px 10px 0;
- display : inline ;
- }
- .aligncenter {
- display : block ;
- margin-left : auto ;
- margin-right : auto ;
- margin-bottom : 10px ;
- }
- .alignright {
- float : right right ;
- margin : 0 0 10px 10px ;
- }
- .alignleft {
- float : left ;
- margin : 0 10px 10px 0;
- }
Next, open the functions.php template file of the HotNews Pro theme and add a sentence: The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
- add_editor_style('/css/editor-style.css');
Third, there is no third. Ha ha, all the transformation is completed! The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
This function has been integrated in the upcoming official version of HotNews Pro 2.7. The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
Since the background editor and the foreground editor are in different style frames, if you want to transform other themes, just copy the styles related to the body in the theme style.css and remove the specific selectors. For example, the style code above can also refer to the editor-style.css in the default theme TwentyEleven, The key is to set the width of the body to be the same as the body of your theme. The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html The article comes from the knowledge that more birds- https://zmingcx.com/change-style-editor-wordpress-preview.html
Most of the articles on this site are original and used for personal learning records, which may be helpful to you, for reference only!