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

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

　　WordPress编辑器TinyMCE是一个非常强大的工具。对于网页设计师来说，使用WordPress编辑器TinyMCE并不困难，但对于那些不太了解html的人来说，这并不那么方便；如果我们制作内容编辑器WYSIWYG，我们可以提前制作内容编辑器的布局，我们的用户只需要在相应的区域直接输入内容。上述问题很容易解决，也可以提高编辑内容的效率

　　今天，我想介绍WordPress高级定制版面内容编辑器模板的制作技巧。为了实现所见即所得，我们必须在内容编辑器中自定义并添加预设内容和排版布局，然后结合我们的样式表来轻松实现此功能

　　创建自定义布局

　　布局分为两部分，一部分是HTML的布局，另一部分是CSS的样式表界面

　　HTML布局

　　WordPress_u;Content filter的默认值只能用于新创建的文章或页面，而以前发布的文章或页面将不起作用。所以不要担心会影响k7的发布@

　　CSS风格设计

　　接下来，我们将介绍此结构布局的样式表：

　　我们需要创建另一个名为editor-style.css的样式表文件。其中的示例代码如下所示：

　　身体{

　　背景:#f5

　　}

　　.content col main{

　　浮动：左

　　宽度：66%

　　填充：1%

　　边框：1px点#ccc

　　背景：#fff

　　}

　　.内容列{

　　浮动：对

　　宽度：29%

　　填充：1%

　　边框：1px点#ccc

　　背景：#fff

　　}

　　img{/*确保您的图像位于其列中*/

　　最大宽度：100%

　　宽度：自动

　　高度：自动

　　}

　　请注意，样式表文件的路径位于主题目录下，即与style.css位于同一文件夹中

　　现在我们切换到我们的背景，单击Createanewarticle文章（或page），我们刚刚创建的HTML结构将自动添加到编辑器区域：

　　这是一个简单的布局。您可以根据需要编辑默认值网站_content and styles.css中的内容和布局结构。以下是基于我自己的网站的示例：

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

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

　　上面的代码是制作高级自定义布局内容编辑器模板的最基本思想，但它仍然有一些限制。例如，我需要我自己的post文章和page pages会自动添加不同的HTML代码，那么如何扩展它呢？实际上，我们可以在自定义编辑器中完成这项工作，将if条件语句添加到content（）函数中。WordPress的if条件语句无疑是一个非常实用的语句。我们应该理解并充分利用它。让我们看看下面的代码：

　　上述代码可以在不同文章类型的内容编辑器中自动添加不同的HTML代码。在这一点上，您也会认为我也可以在不同的文章类型的内容编辑器中使用不同的样式文件表？通过定制不同的样式表来创建多样化和个性化的布局模板？是的，我们也可以根据上述思路定义不同的文章类型的内容编辑器，并参考不同的样式文件表：

　　将上述代码添加到functions.php文件中。这里，“编辑器样式-[posttype].CSS”将根据您的文章type自动创建相应的样式表文件。例如，“公告”将自动引入“编辑器样式公告.CSS”

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

　　好吧，这取决于你如何搞乱你的WordPress内容编辑器。这里介绍的只是想法，创新实践仍然取决于每个人。欢迎讨论