安云网 - AnYun.ORG | 专注于网络信息收集、网络数据分享、网络安全研究、网络各种猎奇八卦。
当前位置: 安云网 > WordPress技巧 > wordpress后台编辑器分区域编辑

wordpress后台编辑器分区域编辑

时间:2016-09-05来源:未知 作者:安云网点击:
文章翻译自:http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/ 本工作室实测。 很多网站开发人员,使用wordpress建设网站,但经常碰到使用的客户没有一点点html知识的,所以得经常为客户提供更新或更改服

文章翻译自:http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/ //安云网咨询系统

本工作室实测。 //本文来自安云网

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

//内容来自安云网

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

效果:multi-col-layout-02 //copyright AnYun.ORG

创建一个已定的布局 //copyright AnYun.ORG

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

后台代码 //ANYUN.ORG

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

  1. add_filter( 'default_content', 'custom_editor_content' );   

    //ANYUN.ORG

  2. function custom_editor_content( $content ) {   

    //内容来自AnYun.ORG

  3.     $content = '   

    //本文来自安云网

  4.         <div class="content-col-main">   

    //copyright AnYun.ORG

  5.         This is your main page content    //ANYUN.ORG

  6.         &nbsp;    //copyright AnYun.ORG

  7.         </div>   

    //ANYUN.ORG

  8.         <div class="content-col-side">   

    //本文来自安云网

  9.         This is your sidebar content   

    //内容来自安云网

  10.         &nbsp;    //安云网,anyun.org

  11.         </div>';   

    //内容来自AnYun.ORG

  12.     return $content;    //内容来自安云网

  13. }   //内容来自AnYun.ORG

注意事项:

//安云网咨询系统

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

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

//内容来自AnYun.ORG

添加完上面的代码后,后台点击新建文章,可视化模式下可以看到两行字,文本模式下则可以看到我们设置的默认布局代码,如图:2014032201

//内容来自AnYun.ORG

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

//copyright AnYun.ORG

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

  1. add_editor_style( 'editor-style.css' );   //ANYUN.ORG

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

  1. body {   

    //安云网,anyun.org

  2.    background: #f5f5f5;    //安云网咨询系统

  3. }   

    //内容来自AnYun.ORG

  4.   

    //安云网,anyun.org

  5. .content-col-main {   

    //内容来自安云网

  6.    float:left;    //本文来自安云网

  7.    width:66%;    //内容来自AnYun.ORG

  8.    padding:1%;    //安云网,anyun.org

  9.    border: 1px dotted #ccc;    //本文来自安云网

  10.    background: #fff;   

    //内容来自AnYun.ORG

  11. }   

    //本文来自安云网

  12.   

    //安云网咨询系统

  13. .content-col-side {   

    //本文来自安云网

  14.    float:right;    //本文来自安云网

  15.    width:29%;    //内容来自安云网

  16.    padding:1%;   

    //本文来自安云网

  17.    border: 1px dotted #ccc;    //安云网咨询系统

  18.    background: #fff;   

    //内容来自AnYun.ORG

  19. }   

    //内容来自AnYun.ORG

  20.    //copyright AnYun.ORG

  21. img { /* Makes sure your images stay within their columns */   //内容来自AnYun.ORG

  22.    max-width: 100%;   

    //copyright AnYun.ORG

  23.    width: auto;    //内容来自AnYun.ORG

  24.    height: auto;   

    //copyright AnYun.ORG

  25. }  

    //内容来自AnYun.ORG

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

//本文来自安云网

如下

//本文来自安云网

multi-col-layout-02

//内容来自AnYun.ORG

给特定的文章类型创建特定的布局模板 //内容来自安云网

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

  1. add_filter( 'default_content', 'custom_editor_content' );    //ANYUN.ORG

  2. function custom_editor_content( $content ) {    //本文来自安云网

  3.     global $current_screen;    //本文来自安云网

  4.     if ( $current_screen->post_type == 'page') {   

    //本文来自安云网

  5.         $content = '   

    //内容来自AnYun.ORG

  6.         // TEMPLATE FOR YOUR PAGES   

    //内容来自AnYun.ORG

  7.         ';   

    //安云网咨询系统

  8.     }   

    //安云网,anyun.org

  9.     elseif ( $current_screen->post_type == 'posttype') {   

    //安云网咨询系统

  10.         $content = '   

    //本文来自安云网

  11.         // TEMPLATE FOR YOUR CUSTOM POST TYPE   

    //内容来自AnYun.ORG

  12.         ';    //ANYUN.ORG

  13.     }   

    //内容来自AnYun.ORG

  14.     else {    //安云网,anyun.org

  15.         $content = '   

    //copyright AnYun.ORG

  16.         // TEMPLATE FOR EVERYTHING ELSE   

    //内容来自AnYun.ORG

  17.         ';   

    //ANYUN.ORG

  18.     }   

    //安云网咨询系统

  19.     return $content;    //本文来自安云网

  20. }   //安云网,anyun.org

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

同样的,也可以给不同的文章类型加载不同的css文件。示例代码如下 //安云网,anyun.org

  1. function custom_editor_style() {   

    //安云网咨询系统

  2.     global $current_screen;    //内容来自AnYun.ORG

  3.     switch ($current_screen->post_type) {   

    //安云网咨询系统

  4.         case 'post':    //内容来自AnYun.ORG

  5.             add_editor_style('editor-style-post.css');    //内容来自安云网

  6.             break;   

    //安云网,anyun.org

  7.         case 'page':   

    //ANYUN.ORG

  8.             add_editor_style('editor-style-page.css');   

    //内容来自安云网

  9.         break;   

    //本文来自安云网

  10.         case '[POSTTYPE]':    //内容来自安云网

  11.             add_editor_style('editor-style-[POSTTYPE].css');    //本文来自安云网

  12.         break;    //ANYUN.ORG

  13.     }    //copyright AnYun.ORG

  14. }   

    //内容来自AnYun.ORG

  15. add_action( 'admin_head', 'custom_editor_style' );   //内容来自安云网

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

//内容来自AnYun.ORG

  1. function custom_editor_style() {    //本文来自安云网

  2.     global $current_screen;   

    //copyright AnYun.ORG

  3.     add_editor_style(   

    //copyright AnYun.ORG

  4.         array(    //安云网,anyun.org

  5.             'editor-style.css',   

    //安云网咨询系统

  6.             'editor-style-'.$current_screen->post_type.'.css'   

    //内容来自AnYun.ORG

  7.         )   

    //本文来自安云网

  8.     );    //安云网,anyun.org

  9. }    //copyright AnYun.ORG

  10. add_action( 'admin_head', 'custom_editor_style' );  

    //ANYUN.ORG


//本文来自安云网


//内容来自AnYun.ORG


//内容来自AnYun.ORG


//安云网,anyun.org

from:http://www.ashuwp.com/courses/highgrade/601.html

//安云网咨询系统

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
相关内容
推荐内容