WordPress Advanced Custom Layout Content Editor template

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

WordPress Editor TinyMCE is a very powerful tool, for web designers, the use of WordPress editor TinyMCE is not difficult, but for those who do not know much about HTML is not so handy; If we do what we see in the Content editor, we can make the layout of the content editor in advance, and our users just enter the content directly in the corresponding area. The problems mentioned above can be easily solved and can also improve the efficiency of our editorial content.

Today to introduce the WordPress advanced custom layout of the Content editor template production techniques, to do what you can see, then we have to customize the Content editor to add preset content and layout layouts, combined with our style sheet to achieve this function easily.

Create a custom layout

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

HTML Layout

<?php add_filter (' default_content ', ' custom_editor_content '); function Custom_editor_content ($content) {$content = ' <div class= ' Content-col-main ' > This is the main content area <p style= " Color: #999; > Feel-only front-end http://www.jiawin.com</p> </div> <div class= "Content-col-side" > This is the sidebar content area <p style= " Color: #999; > Awareness only front-end http://www.jiawin.com</p> </div> '; return $content; }?>

WordPress's default_content filter only works on newly created articles or pages, and the articles or pages that have been published previously will not work. So don't worry about the articles that will affect the release.

CSS style design

Next we introduce a style sheet for this structural layout:

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

We need to build another style sheet file, named: Editor-style.css, which has the following sample code:

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 throaty your Images stay within misspelling columns * * max-width:100%; Width:auto; Height:auto; }

The note here is the path to the stylesheet file, which is placed below the subject's directory, which is the same folder as Style.css.

Now that we switch to our background, clicking on a new article (or page) Content Editor area will automatically add the HTML structure we just created:

This is a simple layout where you can edit the contents of Default_content and Styles.css as well as the layout structure according to your website. The following is based on my own web site, to do an example for you to see:

Here, we can simply automatically add some simple layout structure for our content editor, which will bring a lot of convenience to our later content editing.

Customize layout templates for different article types

The code above is one of the most basic ideas for making an advanced custom Layout content Editor template, but there are some limitations, such as I need my post article and page page to automatically add different HTML code separately, how can I extend the solution? Actually, we could be in custom_. Editor_content () function plus if conditional statement, WordPress If conditional statement is undoubtedly a very practical statement, we have to understand the use. Let's take a look at the following code:

Post_type = = ' page ') {$content = '//define page page template ';} elseif ($current _screen->post_type = = ' Posttype ') {$content = '///define PO St article template '; else {$content = '//definition except page, post template ';} return $content; }?>

The code above realizes the automatic addition of different HTML code in the different article type content editor, and as you can imagine, I can also use different style file tables in different article type content editors. Create a variety of personalized layout templates by customizing different style sheets? Yes , we can also define different article types according to the above ideas. The Content editor refers to different style file tables, respectively:

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. The "Editor-style-[posttype].css" here will automatically create the corresponding stylesheet file according to the type of your article, for example, "kong-based" will automatically introduce "Editor-style-bulletin.css".

When it comes to automatically get the article type and then output the corresponding article type style sheet, you can also use the following code to call the way to automatically get the corresponding article type, whether it belongs to the log, or pages, or announcements, videos, albums and so on. Everything to the background automatic judgment. Personal feeling, relative to the above if statement to determine the reference to the article type, this implementation is more flexible, more efficient, the code more concise characteristics. Of course, choose which implementation method, each can according to their own template choice, the most suitable is the best.

Post_type. CSS)); } add_action (' Admin_head ', ' Custom_editor_style ');?>

OK, then how to toss your WordPress content editor, look at you. Here is the introduction of ideas, innovative practice or rely on everyone. Welcome everyone to discuss ...

Source: Jue Front

www.jiawin.com/wordpress-layout-editor/