WordPress高级自定义布局的内容编辑器(TinyMCE)模板-蚂蚁资源

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

WordPress的编辑器TinyMCE是一个非常强大的工具,对于网页设计师来说,使用WordPress的编辑器TinyMCE是没什么困难的,但是对于那些不怎么了解HTML的人来说却用起来不是那么的得心应手

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内容编辑器,看你们的了。在这里介绍的只是思路,创新实践还是靠大家。欢迎大家一起来探讨……

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.antziyuan.com",如遇到无法解压的请联系管理员!

蚂蚁资源 » WordPress高级自定义布局的内容编辑器(TinyMCE)模板

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
该资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与我们无关。 请勿将该软件进行商业交易、转载等行为,该软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
蚂蚁资源
大家都喜欢的资源网站!
  • 49会员总数(位)
  • 801资源总数(个)
  • 8本周发布(个)
  • 8 今日发布(个)
  • 185稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
升级SVIP尊享更多特权立即升级