网站文章内容编辑器(Wordpress高级自定义布局的内容编辑器模板的制作技巧，值得收藏！)

　　网站文章内容编辑器(Wordpress高级自定义布局的内容编辑器模板的制作技巧，值得收藏！)

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

　　今天给大家介绍一下WordPress高级自定义布局的内容编辑器模板的制作技巧。要做到所见即所得，那么我们就要在内容编辑器中添加预设内容和排版布局，然后结合我们的样式。该表可以轻松实现此功能。

　　创建自定义布局

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

　　HTML 排版布局

　　WordPress的这个default_content过滤器只能在新创建的文章或页面中使用，之前发布的文章或页面将不起作用。所以不用担心会影响已发布的 文章。

　　CSS 样式

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

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

　　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;

}

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

　　现在我们切换到我们的背景并点击新的 文章（或页面）内容编辑器区域以自动添加我们刚刚创建的 HTML 结构：

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

　　通过这个，我们可以简单的在我们的内容编辑器中自动添加一些简单的布局结构，这将为我们以后的内容编辑带来很多便利。

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

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

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

　　只需将上面的代码添加到您的functions.php 文件中。这里的editor-style-[POSTTYPE].css会根据你的文章的类型自动创建对应的样式表文件，比如announcement:bulletin，editor-style-bulletin.css会自动导入。

　　说到自动获取文章类型，然后输出对应的文章类型样式表，也可以使用下面的代码调用方式，自动获取对应的文章类型，属于到日志、或页面、或公告、视频、相册等。一切都留给后台自动判断。个人觉得相比上面if语句判断引用对应的文章类型，这种实现方式更灵活，效率更高，代码也更简洁。当然，选择哪种实现方式，每个人都可以根据自己的模板来选择，最适合的就是最好的。

　　好吧，接下来如何折腾你的 Wordpress 内容编辑器，这取决于你。这里介绍的想法只是想法，创新和实践还是要靠大家。欢迎大家一起讨论...