Wordpress高级自定义布局的内容编辑器模板的制作技巧

　　Wordpress高级自定义布局的内容编辑器模板的制作技巧

　　WordPress高级自定义布局内容编辑器模板来源：绝微前端作者：绝微前端日期：2012-11-24

　　WordPress 编辑器 TinyMCE 是一个非常强大的工具。对于网页设计师来说，使用 Wordpress 的编辑器 TinyMCE 并不难，但对于那些不太了解 HTML 的人来说，它的用处不大。便利;如果我们让内容编辑器所见即所得，内容编辑器的布局是预先做好的，我们的用户只需要在相应的区域直接输入内容即可。上面提到的问题都可以轻松解决，也可以提高我们内容编辑的效率。

　　今天介绍Wordpress高级自定义布局内容编辑器模板的制作技巧。要实现所见即所得，那么我们就必须在内容编辑器中自定义添加预设内容和布局布局，然后结合我们的样式表就可以轻松实现这个功能。

　　

　　创建自定义布局

　　排版布局分为两部分，一是HTML排版布局，二是CSS样式表界面。

　　HTML 排版布局

　　add_filter('default_content','custom_editor_content');

　　function custom_editor_content( $content) {

　　$content ='

　　这是主要内容区域

　　绝味前端

　　这是侧边栏内容区域

　　绝味前端

　　';

　　返回 $content;

　　}

　　Wordpress 的default_content 过滤器只能作用于新创建的文章 或页面，文章 或之前发布过的页面将不起作用。所以不用担心文章 的发布。

　　CSS 样式设计

　　接下来我们为这个结构布局介绍一个样式表：

　　add_editor_style('editor-style.css');

　　我们需要创建另一个样式表文件，命名为：editor-style.css，里面的示例代码如下：

　　身体{

　　背景：#f5f5f5;

　　}

　　.content-col-main {

　　浮动：左；

　　宽度：66%;

　　填充：1%;

　　边框：1px 虚线 #ccc;

　　背景：#fff;

　　}

　　.content-col-side {

　　浮动：右；

　　宽度：29%;

　　填充：1%;

　　边框：1px 虚线 #ccc;

　　背景：#fff;

　　}

　　img {/* 确保您的图片保留在其列内 */

　　最大宽度：100%;

　　宽度：自动；

　　高度：自动；

　　}

　　这里需要注意的是样式表文件的路径。按照这个例子，放在theme目录下，和style.css是同一个文件夹。

　　现在我们切换到我们的后台，点击新建文章文章（或页面）内容编辑区会自动添加我们刚刚创建的HTML结构：

　　

　　这是一个简单的布局。你可以根据你的网站编辑default_content和styles.css中的内容和布局结构。以下是基于我自己的网站（绝微前端），给大家举个例子：

　　

　　有了这个，我们就可以简单的自动给我们的内容编辑器添加一些简单的布局结构，这会给我们以后的内容编辑带来很多方便。

　　自定义不同的文章类型的布局模板

　　以上代码是制作高级自定义布局内容编辑器模板的最基本思路，但仍有一些局限性。例如，我需要自动将不同的 HTML 添加到我的 post文章 和页面页面。代码，我们如何扩展解决方案？实际上，我们可以在 custom_editor_content() 函数中添加一个 if 条件语句。 Wordpress 的 if 条件语句无疑是一个非常实用的语句，我们需要了解并善用它。我们先来看看下面的代码：

　　add_filter('default_content','custom_editor_content');

　　function custom_editor_content( $content) {

　　全局 $current_screen;

　　if ($current_screen->post_type =='page') {

　　$content ='

　　//定义页面页面模板

　　';

　　}

　　elseif ($current_screen->post_type =='POSTTYPE') {

　　$content ='

　　//定义post文章模版

　　';

　　}

　　其他{

　　$content ='

　　// 定义页面和帖子以外的模板

　　';

　　}

　　返回 $content;

　　}

　　以上代码实现了在不同文章类型内容编辑器中自动添加不同HTML代码。说到这个你也会想，那我也可以添加不同的文章类型的内容编辑器使用不同的样式文件表？通过自定义不同的样式表来创建多样化和个性化的布局模板？是的，我们也可以根据上面的思路定义不同的文章类型的内容编辑器来分别引用。不同样式的文件表：

　　function custom_editor_style() {

　　全局 $current_screen;

　　开关（$current_screen->post_type）{

　　case'post'：

　　add_editor_style('editor-style-post.css');

　　中断；

　　案例'页面'：

　　add_editor_style('editor-style-page.css');

　　中断；

　　case'[POSTTYPE]':

　　add_editor_style('editor-style-[POSTTYPE].css');

　　中断；

　　}

　　}

　　add_action('admin_head','custom_editor_style');

　　将上述代码添加到您的functions.php 文件中。这里“editor-style-[POSTTYPE].css”会根据你的文章类型自动创建相应的样式表文件，比如公告：“bulletin”，它会自动引入“editor-style-bulletin.css” .

　　说到自动获取文章类型并输出对应的文章样式表，还可以使用下面的代码调用方法自动获取对应的文章类型，是日志，还是页面，或者公告、视频、相册等，一切都是由后台自动判断的。个人认为，与上述判断文章类型对应的引用的if语句相比，这种实现方式更加灵活、高效，并且具有代码更加简洁的特点。当然，选择哪种实现方式，大家可以根据自己的模板来选择，最适合的就是最好的。

　　function custom_editor_style() {

　　全局 $current_screen;

　　add_editor_style(

　　数组(

　　'editor-style.css',

　　'editor-'.$current_screen->post_type.'.css'

　　)

　　);

　　}

　　add_action('admin_head','custom_editor_style');

　　好的，接下来如何折腾您的 Wordpress 内容编辑器取决于您。这里提出的想法只是想法，创新和实践仍然取决于每个人。欢迎大家讨论...