用WordPress的所见即所得编辑器TinyMCE可以进行一些简单的排版,但对于分栏等复杂的排版,如果完全不懂CSS和HTML知识,就会有力不从心的感觉。本文介绍通过一个插件让WordPress编辑器进行更复杂的排版的方法。

背景

新浪博客是的排版工具非常好用,点击插入模板就有很多预定义的模板可供选择,插入到文章中,会有虚线来区分模板的不同区域,如下图所示,本文希望在WordPress编辑器中也引入类似的排版方式。

新浪博客——排版工具

新浪博客——排版工具

新浪博客——插入预定义模板
新浪博客——插入预定义模板

开始前的准备

本文介绍如何实现类似新浪博客的分栏工具方法,需要用到的工具有

  1. 插件TinyMCE Templates——为WordPress编辑器添加插入预定义模板的按钮,并可以生成预定义模板
  2. 分栏代码——参考这里
  3. editor-style.css——给tinyMCE编辑器增加编辑器样式的文件,使用它给分栏增加一些分隔符

Step1. 安装TinyMCE Templates插件,创建分栏模板

在WordPress后台搜索TinyMCE Templates安装,或者直接下载TinyMCE Templates,将文件解压后放到plugins目录下启用均可。

安装好后,菜单中多出Template一项,里面可以查看已经定义的模板或者增加新模板。

首先,增加一个两栏的模板,点击Add New,并在编辑器(HTML模式下)中放入如下代码

<div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-half">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
&nbsp;

div中的内容自己随便写,只是预定义的文字占位符而已,后面加上一个&nbsp;,方便插入下一个模板,编辑好以后保存,就创建了一个新的模板。

TinyMCE Template——创建自定义模板
TinyMCE Template——创建自定义模板

用相同的方法分别创建三栏、四栏、五栏和六栏的代码

TinyMCE Template——创建两栏-六栏的分栏模板
TinyMCE Template——创建两栏-六栏的分栏模板

Step 2. 给主题增加分栏样式

将下面的css代码拷贝到主题的style.css中

/* Column Classes
------------------------------------------------------------ */
 
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
    float: left;
    margin: 0 0 20px;
    padding-left: 3%;
}
 
.one-half,
.three-sixths,
.two-fourths {
    width: 48%;
}
 
.one-third,
.two-sixths {
    width: 31%;
}
 
.four-sixths,
.two-thirds {
    width: 65%;
}
 
.one-fourth {
    width: 22.5%;
}
 
.three-fourths {
    width: 73.5%;
}
 
.one-fifth {
    width: 17.4%;
}
 
.two-fifths {
    width: 37.8%;
}
 
.three-fifths {
    width: 58.2%;
}
 
.four-fifths {
    width: 78.6%;
}
 
.one-sixth {
    width: 14%;
}
 
.five-sixths {
    width: 82%;
}
 
.first {
    clear: both;
    padding-left: 0;
}

Step 3. 增加编辑器的分栏样式

为了在编辑器中直观的看到分栏效果,将分栏样式同样添加到editor-style.css(该文件应该放在主题根目录下,如果没有,创建一个)。

首先,请确保主题的functions.php中有如下代码

add_editor_style();

这段代码会制定编辑器调用主题目录下的editor-style.css,也可以自定义一个样式表,详细内容请参考官方文档,使用实例请参考任意一个WordPress默认主题,比如twentyeleven

将下面的代码添加到editor-style.css中

/* Column Classes
------------------------------------------------------------ */
 
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
    float: left;
    margin: 0 0 20px;
    padding: 10px 0 10px 3%;
    border:1px dotted #EEEEEE;
}
 
.one-half,
.three-sixths,
.two-fourths {
    width: 47%;
}
 
.one-third,
.two-sixths {
    width: 30%;
}
 
.four-sixths,
.two-thirds {
    width: 64%;
}
 
.one-fourth {
    width: 22%;
}
 
.three-fourths {
    width: 73%;
}
 
.one-fifth {
    width: 17%;
}
 
.two-fifths {
    width: 37%;
}
 
.three-fifths {
    width: 58%;
}
 
.four-fifths {
    width: 78%;
}
 
.one-sixth {
    width: 14%;
}
 
.five-sixths {
    width: 81%;
}
 
.first {
    clear: both;
    padding-left: 0;
}

这段代码跟放到主题中的代码稍有区别,第一段中增加了border和padding属性,只是为了让编辑器中的栏目区分更加明显,由于增加了border,影响了分栏的宽度,所以每一栏的宽度也适当减小,适应编辑器查看,不会影响前台的最终效果。

实际效果

这时,尝试编辑一篇文章或页面,在编辑器中可以找到插入预定义的模板的按钮

编辑器——插入预定义模板
WordPress编辑器——插入预定义模板

在文章中插入两栏的模板和六栏的模板,效果如下

在编辑器中插入两栏和五栏模板
在编辑器中插入两栏和五栏模板

前台效果
前台看到的分栏效果(示例主题:Twentytwelve)

结语

除了分栏模板,还可以创建如新浪博客中所见的更复杂的模板,使用文字占位符和图片占位符展示示例内容,用户只需要替换文字和图片即可,这样,当页面内容非常复杂的时候,不需要借助custom field或short code来帮助排版,而是使用最直观的方式,增加了用户的体验度。

7条留言

  1. 那个插件有代码版的么?

  2. 我也觉得新浪的排版工具非常不错,不知道wordpress下能否实现其全部功能

    1. 新浪排版工具是不错,只可惜是table布局,有点不合潮流了。现在,我倾向于使用ET Page Builder和Advanced Custom Fields这两个插件管理CMS内容,可以轻松制作复杂的布局,而且是div+css的,比新浪排版排版工具更直观,更灵活,功能也丰富多了,而且ET Page Builder可以随意扩展module,很适合给完全不懂HTML的人用。

  3. […] 创建复杂页面布局的一种方法是使用预定义好的模版,在文章《WordPress TinyMCE编辑器排版方法》中介绍了WordPress插件TinyMCE Templates,借助这款插件,用户可以自制预定义的模版并保存,布局页面时直接调用模版,替换内容就可以。使用Dreamwaver等工具可以创建出复杂的模版,更换内容不是件难事。 […]

  4. wp-favorite-posts
    这个插件,
    假如有很多用户收藏文章,怎么显示最近被收藏的5篇文章?

    1. 没法显示,这个插件是基于cookie的,并没有涉及任何数据库操作

评论功能已关闭