WordPress高级自界说结构的内容编辑器模板

[复制链接]
查看499 | 回复0 | 2038-1-19 11:14:07 | 显示全部楼层 |阅读模式
  WordPress的编辑器TinyMCE是一个非常强盛的工具,对于网页计划师来说,利用WordPress的编辑器TinyMCE是没什么困难 的,但是对于那些不怎么相识HTML的人来说却用起来不是那么的得心应手;假如昨们把内容编辑器做到所见即所得,预先把内容编辑器的排版结构都做出来,而 昨们用户只要在相对应的地区直接输入内容就行了。那上面所说的题目就可以很容易的办理,而且同样也可以进步昨们编辑内容的服从。
  本日就为各人先容下Wordpress高级自界说结构的内容编辑器模板的制作本领,要做到所见即所得,那么昨们得在内容编辑器内自界说添加预设内容和排版结构,再联合昨们样式表就可以容易的实现这个功能。
  
          源码多多:WordPress高级自界说结构的内容编辑器模板
  创建自界说结构
  排版结构分为两部门,一个是HTML的排版结构,另一个是CSS的样式表界面。
  HTML排版结构
  
  WordPress的这个default_content过滤器只能作用在新创建的文章大概页面内里,之前已经发布出来的文章大概页面都不会起作用。以是不消担心会影响到发布的文章。
  CSS样式计划
  接下来昨们为这个布局结构引入一个样式表:
  
  昨们必要别的建一个样式表文件,定名为:editor-style.css,内里的示例代码如下:
  body { background: #f5f5f5; } .content-col-main { float:left;  width:66%; padding:1%; border: 1px dotted #ccc; background: #fff; }  .content-col-side { float:right; width:29%; padding:1%; border: 1px  dotted #ccc; background: #fff; } img { /* Makes sure your images stay  within their columns */ max-width: 100%; width: auto; height: auto; }
  这里必要留意的是样式表文件的路径,按照这个例子是放在主题的目次下面的,即和style.css同个文件夹。
  如今昨们切换到昨们的背景,点击新建一篇文章(大概页面)内容编辑器地区就会主动添加刚刚昨们创建的HTML布局了:
  
          源码多多:WordPress高级自界说结构的内容编辑器模板
  这个就是一个简朴的结构,你可以根据你的网站,编辑default_content和styles.css内里的内容以及结构布局。下面是根据我(觉唯前端)本身的网站,做个示例给各人看看:
  
          源码多多:WordPress高级自界说结构的内容编辑器模板
  通过这里,昨们就可以简朴的为昨们的内容编辑器主动添加一些简朴的结构布局,这将为昨们的以后的内容编辑的时间带来许多的方便。
  自界说差别文章范例的结构模版
  上面的代码就是制作一个高级自界说结构内容编辑器模版的一个最根本的思绪,但照旧有一些范围性的,比方我必要我的post文章和page页面分别自  动添加差别的HTML代码,,那该怎么延伸办理呢?实在昨们可以在custom_editor_content()函数上面加上if条件语  句,Wordpress的if条件语句无疑是一个实用性很强的语句,昨们要懂的善用。先来看看下面的代码:
  post_type == 'page') { $content = ' // 界说page页面模版 '; } elseif (  $current_screen->post_type == 'POSTTYPE') { $content = ' //  界说post文章模版 '; } else { $content = ' // 界说除了page、post以外的模版 '; } return  $content; } ?>
  上面的代码就实现了在差别的文章范例内容编辑器内里主动添加差别的HTML代码,讲到这里,也行你也会想到,那我也可以在差别的文章范例内容编辑器   利用差别的样式文件表?通过自界说差别的样式表制作出多样化个性化的结构模版出来?是的,昨们按照上面的思绪也可以本身界说差别的文章范例内容编辑器分别  引用差别的样式文件表:
  post_type) { case 'post': add_editor_style('editor-style-post.css');  break; case 'page': add_editor_style('editor-style-page.css'); break;  case '[POSTTYPE]': add_editor_style('editor-style-[POSTTYPE].css');  break; } } add_action( 'admin_head', 'custom_editor_style' ); ?>
  把上面的代码加到你的functions.php文件即可。这里的鈥
楼主热帖

21

主题

29

帖子

113

积分

网站编辑

Rank: 8Rank: 8

积分
113