致力于打造一个优秀的建站资源共享学习平台!

爱站窝四川

wordpress进阶教程(三十八):wordpress后台编辑器分区域编辑

爱站窝查看全部>>

人气389

文章翻译自:http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in--content-editor/

本工作室实测。

很多网站开发人员,使用wordpress建设网站,但经常碰到使用的客户没有一点点知识的,所以得经常为客户提供更新或更改服务。TinyMCE在后台编辑的时候,仅仅提供了一些简单的功能,比如列表、加粗、颜色等,但是如果需要做出布局比较复杂的文章,则需要一定的Html知识。

本教程将会教会你,怎样让不懂一点点html知识的客户也能够在后台的编辑器中添加各种复杂的布局内容的文章,比如多列、图文混排等等。

效果:wordpress进阶教程(三十八):wordpress后台编辑器分区域编辑

创建一个已定的布局

实际上在这里我们要做的就是给wordpress编辑器插入一个已经写好的一个布局的html代码,我们可以通过wordpress的'default_content'过滤器来个文章内容的编辑器设置一个默认的内容(这个内容就是文章布局的Html代码)。

后台代码

添加以下代码到你的主题的functions.php文件中,当我们在后台点击新建文章的时候,编辑器中默认就插入了两个div,class类名分别为 content-col-main和content-col-side,我将使用wp3.8.1 twentyfourteen主题测试。

  1. add_filter( 'default_content', 'custom_editor_content' );
  2. function custom_editor_content( $content ) {
  3.     $content = '
  4.         <div class="content-col-main">
  5.         This is your main page content
  6.         &nbsp;
  7.         </div>
  8.         <div class="content-col-side">
  9.         This is your sidebar content
  10.         &nbsp;
  11.         </div>';
  12.     return $content;
  13. }

注意事项:

1.上面代码中的default_content过滤器只有在新建文章的时候触发,对于已经存在的文章或者页面无效。

2.上面代码中的&nbsp;是空格的html实体名称,不是必须的。

添加完上面的代码后,后台点击新建文章,可视化模式下可以看到两行字,文本模式下则可以看到我们设置的默认布局代码,如图:wordpress进阶教程(三十八):wordpress后台编辑器分区域编辑

这个时候还没有任何效果,所以接下来给编辑器内部的布局增加css样式。

添加以下代码到主题的functions.php文件。注意,下面的代码是给主题的编辑器添加自定义样式支持,很多主题都已经有这个功能了,所以请先搜索以下代码

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

上面代码中的add_editor_style()函数,用于给后台的编辑器增加一个css样式文件,所以接下来在主题文件夹下新建一个editor-style.css(twentyfourteen主题已经添加此功能支持,样式文件为 css/editor-style.css 所以我就不新建了),然后在css文件中添加如下css代码

  1. body {
  2.    background: #f5f5f5;
  3. }
  4. .content-col-main {
  5.    float:left;
  6.    width:66%;
  7.    padding:1%;
  8.    border: 1px dotted #ccc;
  9.    background: #fff;
  10. }
  11. .content-col-side {
  12.    float:right;
  13.    width:29%;
  14.    padding:1%;
  15.    border: 1px dotted #ccc;
  16.    background: #fff;
  17. }
  18. img { /* Makes sure your images stay within their columns */
  19.    max-width: 100%;
  20.    width: auto;
  21.    height: auto;
  22. }

添加代码之后,效果如下图wordpress进阶教程(三十八):wordpress后台编辑器分区域编辑到这里,一个两列布局的文章模板已经到你的编辑器中了,你可以更改钱吗default_content过滤器中的默认内容和editor-style.css文件来添加样式,创建一个更加复杂的,符合你需求的模板。

如下

wordpress进阶教程(三十八):wordpress后台编辑器分区域编辑

给特定的文章类型创建特定的布局模板

上面的代码直接应用到你的所有内容:文章、页面、自定义文章类型...所有会显示TinyMCEbian编辑器的地方。这恐怕不是我们想要的,接下来的内容将让你可以给不同的或者特定的内容增加布局。

  1. add_filter( 'default_content', 'custom_editor_content' );
  2. function custom_editor_content( $content ) {
  3.     global $current_screen;
  4.     if ( $current_screen->post_type == 'page') {
  5.         $content = '
  6.         // TEMPLATE FOR YOUR PAGES
  7.         ';
  8.     }
  9.     elseif ( $current_screen->post_type == 'posttype') {
  10.         $content = '
  11.         // TEMPLATE FOR YOUR CUSTOM POST TYPE
  12.         ';
  13.     }
  14.     else {
  15.         $content = '
  16.         // TEMPLATE FOR EVERYTHING ELSE
  17.         ';
  18.     }
  19.     return $content;
  20. }

上面的代码示例给不同的文章类型输出不同的默认布局代码,请根据实际需求更改上面的代码。

同样的,也可以给不同的文章类型加载不同的css文件。示例代码如下

  1. function custom_editor_style() {
  2.     global $current_screen;
  3.     switch ($current_screen->post_type) {
  4.         case 'post':
  5.             add_editor_style('editor-style-post.css');
  6.             break;
  7.         case 'page':
  8.             add_editor_style('editor-style-page.css');
  9.         break;
  10.         case '[POSTTYPE]':
  11.             add_editor_style('editor-style-[POSTTYPE].css');
  12.         break;
  13.     }
  14. }
  15. add_action( 'admin_head', 'custom_editor_style' );

当然,还有第二种方法,你也可以通过以下方法来为不同的文章类型加载不同的css,

  1. function custom_editor_style() {
  2.     global $current_screen;
  3.     add_editor_style(
  4.         array(
  5.             'editor-style.css',
  6.             'editor-style-'.$current_screen->post_type.'.css'
  7.         )
  8.     );
  9. }
  10. add_action( 'admin_head', 'custom_editor_style' );
TA的作品
  • Mohtml 作品/设计展示自适应wordpress主题 模板兔出品
  • QYKCMS后台软件v4.1.3部分操作界面截图
  • 轻松制作一款与众不同的QYKCMS网站主题
  • 怎样设置可以让QYKCMS系统运行得更快?
  • 使用 Apache .htaccess 文件设置QYKCMS伪静态规则的方法
  • QYKCMS后台管理软件入门级操作视频教程
  • IIS下使用 web.config 文件设置QYKCMS伪静态规则的方法
  • 同一个网站空间使用QYKCMS建立多个独立站点
  • QYKCMS后台管理员密码忘记了怎么办
  • QYKCMS 网站系统4.0 标签大全
查看全部

全部评论: 0

在线咨询
有什么可以帮到你
点击咨询

账号登录

忘记密码

第三方账号快速登录

Q Q 登 录 微 博 登 录

账号注册 已经有账号? 立即登录

发送验证码

第三方账号快速注册

Q Q 登 录 微 博 登 录