• 售前

  • 售后

热门帖子
入门百科

WordPress高级自定义结构的内容编辑器(TinyMCE)模板

[复制链接]
阿豆学长长ov 显示全部楼层 发表于 2021-8-15 20:13:37 |阅读模式 打印 上一主题 下一主题
WordPress的编辑器TinyMCE是一个非常强盛的工具,对于网页设计师来说,使用WordPress的编辑器TinyMCE是没什么困难的,但是对于那些不怎么相识HTML的人来说却用起来不是那么的得心应手;假如我们把内容编辑器做到所见即所得,预先把内容编辑器的排版布局都做出来,而我们用户只要在相对应的区域直接输入内容就行了。那上面所说的题目就可以很容易的办理,而且同样也可以提高我们编辑内容的服从。
本日就为各人介绍下Wordpress高级自界说布局的内容编辑器模板的制作本领,要做到所见即所得,那么我们得在内容编辑器内自界说添加预设内容和排版布局,再联合我们样式表就可以容易的实现这个功能。

创建自界说布局排版布局分为两部门,一个是HTML的排版布局,另一个是CSS的样式表界面。
HTML排版布局

复制代码代码如下:
<?php
   add_filter( 'default_content', 'custom_editor_content' );
   function custom_editor_content( $content ) {
   $content = '
      <div class="content-col-main">
      这里是重要内容区域
      <p style="color:#999;">觉唯前端 http://www.jiawin.com</p>
      </div>
      <div class="content-col-side">
      这里是侧边栏内容区域
      <p style="color:#999;">觉唯前端 http://www.jiawin.com</p>
      </div>   
   ';
   return $content;
   }
?>

WordPress的这个default_content过滤器只能作用在新创建的文章或者页面内里,之前已经发布出来的文章或者页面都不会起作用。所以不消担心会影响到发布的文章。

CSS样式设计接下来我们为这个布局布局引入一个样式表:

复制代码代码如下:
<?php
   add_editor_style( 'editor-style.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布局了:

这个就是一个简单的布局,你可以根据你的网站,编辑default_content和styles.css内里的内容以及布局布局。下面是根据我(觉唯前端)本身的网站,做个示例给各人看看:

通过这里,我们就可以简单的为我们的内容编辑器主动添加一些简单的布局布局,这将为我们的以后的内容编辑的时候带来很多的方便。
自界说差别文章范例的布局模版上面的代码就是制作一个高级自界说布局内容编辑器模版的一个最基本的思绪,但照旧有一些范围性的,例如我需要我的post文章和page页面分别主动添加差别的HTML代码,,那该怎么延伸办理呢?着实我们可以在custom_editor_content()函数上面加上if条件语句,Wordpress的if条件语句无疑是一个实用性很强的语句,我们要懂的善用。先来看看下面的代码:

复制代码代码如下:
<?php
   add_filter( 'default_content', 'custom_editor_content' );
      function custom_editor_content( $content ) {
         global $current_screen;
         if ( $current_screen->post_type == 'page') {
            $content = '
               // 界说page页面模版
            ';
         }
         elseif ( $current_screen->post_type == 'POSTTYPE') {
            $content = '
                // 界说post文章模版
            ';
         }
         else {
            $content = '
               // 界说除了page、post以外的模版
            ';
         }
         return $content;
       }
?>

上面的代码就实现了在差别的文章范例内容编辑器内里主动添加差别的HTML代码,讲到这里,也行你也会想到,那我也可以在差别的文章范例内容编辑器使用差别的样式文件表?通过自界说差别的样式表制作出多样化个性化的布局模版出来?是的,我们按照上面的思绪也可以本身界说差别的文章范例内容编辑器分别引用差别的样式文件表:

复制代码代码如下:
<?php
   function custom_editor_style() {
      global $current_screen;
      switch ($current_screen->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文件即可。这里的“ editor-style-[POSTTYPE].css ”会根据你文章的范例主动创建相对应的样式表文件,例如公告:“ bulletin ”,则会主动引入“ editor-style-bulletin.css ”。
说到主动获取文章范例然后输出相对应的文章范例样式表,也可以用下面的代码调用方式来主动获取相对应的文章范例,是属于日记呢、照旧页面、或者照旧公告、视频、相册等等。齐备交给后台主动判断。个人感觉,相对于上面的if语句来判断引用相对应文章范例来说,这种实现方式更加的机动,服从更高,代码更简便的特点。当然选择哪一种实现方法,各自可以根据本身的模版各自选择,最符合的才是最好的。

复制代码代码如下:
<?php
   function custom_editor_style() {
     global $current_screen;
     add_editor_style(
         array(
           'editor-style.css',
           'editor-style-'.$current_screen->post_type.'.css'
         )
     );
   }
   add_action( 'admin_head', 'custom_editor_style' );
?>

好了,接下来要怎么折腾你的Wordpress内容编辑器,看你们的了。在这里介绍的只是思绪,创新实践照旧靠各人。欢迎各人一起来探究……

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作