Content editor (TinyMCE) template for advanced custom layout of WordPress

Time:2019-11-30

TinyMCE, the editor of WordPress, is a very powerful tool. For web designers, it is not difficult to use TinyMCE, the editor of WordPress, but it is not so handy for those who don’t know HTML well. If we make the content editor what we see is what we get, we should make the layout of the content editor in advance, Our users just need to input the content directly in the corresponding area. The above problems can be easily solved, and also can improve the efficiency of editing content.
Today, I’d like to introduce the making skills of the content editor template for advanced custom layout of WordPress. In order to achieve what you see is what you get, then we need to add the preset content and layout in the content editor. Combined with our style sheet, this function can be easily realized.

wordpress-editor-1

Create a custom layout

The layout is divided into two parts, one is the layout of HTML, the other is the style sheet interface of CSS.

HTML layout

Copy code

The code is as follows:

<?php
add_filter( ‘default_content’, ‘custom_editor_content’ );
function custom_editor_content( $content ) {
$content = ‘
<div>
This is the main content area
< P style = “color:;” > jueview front end http://www.jian.com</p>
</div>
<div>
This is the sidebar content area
< P style = “color:;” > jueview front end http://www.jian.com</p>
</div>
‘;
return $content;
}
?>

This default [u content filter of WordPress can only be used in newly created articles or pages. Previously published articles or pages will not work. So don’t worry about affecting the published articles.

CSS style design

Next, we introduce a style sheet for this structural layout:

Copy code

The code is as follows:

<?php
add_editor_style( ‘editor-style.css’ );
?>

We need to create another stylesheet file, named editor style.css. The example code is as follows:

Copy code

The code is as follows:

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;
}

Note the path of the stylesheet file. In this case, it is placed under the theme directory, which is the same folder as style.css.
Now we switch to our background, click to create a new article (or page) and the content editor area will automatically add the HTML structure we just created:

wordpress-editor-2

This is a simple layout. You can edit the content and layout structure in default [content and styles.css according to your website. Here is an example to show you according to my website:

wordpress-editor-3

Through this, we can simply add some simple layout structures to our content editor automatically, which will bring a lot of convenience to our later content editing.

Customize layout templates for different article types

The above code is one of the most basic ideas for making a high-level custom layout content editor template, but there are still some limitations. For example, I need to automatically add different HTML codes to my post and page pages respectively. How can I extend it? In fact, we can add if conditional statement and WordPress if to the custom editor’s content() function Conditional statement is undoubtedly a very practical statement, we need to know how to make good use of it. Let’s look at the following code first:

Copy code

The code is as follows:

<?php
add_filter( ‘default_content’, ‘custom_editor_content’ );
function custom_editor_content( $content ) {
global $current_screen;
if ( $current_screen->post_type == ‘page’) {
$content = ‘
//Define page template
‘;
}
elseif ( $current_screen->post_type == ‘POSTTYPE’) {
$content = ‘
//Define post article template
‘;
}
else {
$content = ‘
//Define templates other than page and post
‘;
}
return $content;
}
?>

The above code can automatically add different HTML codes in different article type content editors. Speaking of this, you can also think that I can also use different style file tables in different article type content editors? Create diversified and personalized layout templates by customizing different style sheets? Yes, we can also define different article type content editors to reference different style file tables according to the above ideas:

Copy code

The code is as follows:

<?php
function custom_editor_style() {
global $current_screen;
switch ($current_screen->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’ );
?>

Add the above code to your functions.php file. Here, “editor style – [posttype]. CSS” will automatically create the corresponding style sheet file according to the type of your article, for example, “bulletin”, and “editor style bulletin. CSS” will be introduced automatically.

When it comes to automatically obtaining the article type and then outputting the corresponding article type style sheet, you can also use the following code call mode to automatically obtain the corresponding article type, whether it belongs to the log, page, or announcement, video, album, etc. It’s all up to the backstage to judge automatically. Personal feeling, compared with the above if statement to judge the corresponding article type, this implementation is more flexible, more efficient, and more concise. Of course, which implementation method to choose can be selected according to their own template, and the most appropriate one is the best.

Copy code

The code is as follows:

<?php
function custom_editor_style() {
global $current_screen;
add_editor_style(
array(
‘editor-style.css’,
‘editor-style-‘.$current_screen->post_type.’.css’
)
);
}
add_action( ‘admin_head’, ‘custom_editor_style’ );
?>

Well, how to toss your WordPress content editor next? It’s up to you. What is introduced here is only thinking, and innovation practice depends on everyone. Welcome to discuss