网站文章内容编辑器(Wordpress高级自定义布局的内容编辑器模板的制作技巧，要做到所见即所得)

　　网站文章内容编辑器(Wordpress高级自定义布局的内容编辑器模板的制作技巧，要做到所见即所得)

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

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

　　创建自定义布局

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

　　HTML 布局

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

　　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 条件语句无疑是一个非常实用的语句，大家一定要了解并善用它。我们先来看看下面的代码：

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

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

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

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