WordPress初级自定义规划的内容编辑器(TinyMCE)模板

2022-01-27 收藏 0 点赞 0 图文教程

WordPress的编辑器TinyMCE是一个十分弱小的工具，关于网页设计师来说，应用WordPress的编辑器TinyMCE是没什么艰难的，然而关于那些不怎样理解HTML的人来说却用起来不是那么的得心应手；假如咱们把内容编辑器做到所见即所得，事后把内容编辑器的排版规划都做进去，而咱们用户只需在**应的区域间接输出内容就行了。那下面所说的成绩就能够很轻易的处理，而且同样也能够进步咱们编辑内容的效率。
明天就为大家引见下Wordpress初级自定义规划的内容编辑器模板的制造技巧，要做到所见即所得，那么咱们得在内容编辑器内自定义增加预设内容和排版规划，再结合咱们款式表就能够轻易的完成这个性能。

创立自定义规划

排版规划分为两局部，一个是HTML的排版规划，另一个是CSS的款式表界面。

HTML排版规划


<?php
   add_filter( 'default_content', 'custom_editor_content' );
   function custom_editor_content( $content ) {
   $content = '
      <p class="content-col-main">
      这里是次要内容区域
      <p style="color:#999;">觉唯前端 http://www.jiawin.com</p>
      </p>
      <p class="content-col-side">
      这里是侧边栏内容区域
      <p style="color:#999;">觉唯前端 http://www.jiawin.com</p>
      </p>    
   ';
   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内容编辑器，看你们的了。在这里引见的只是思绪，翻新理论还是靠大家。欢送大家一同来讨论……

以上就是安达网络工作室关于《WordPress**自定义布局的内容编辑器(TinyMCE)模板》的一些看法。更多内容请查看本栏目更多内容！

打赏