强化WordPress的“所见即所得”编辑效果
发布人:一全科技 来源:wordpress.la 发布于:2010-12-21 22:36:00 浏览:869

辽宁12选5走势图表 www.jc1o.cn 虽说WordPress内置的TinyMCE编辑器就是一款所见即所得(WYSIWYG)编辑器,然而我们在后台编辑好的文章和在前台看到的效果,总不十分一致。要让后台编辑结果和前台显示效果实现更高的匹配度,其实也不难。

简单的说,只需要声明新建一个专供供可视化编辑器使用的新CSS文件,如果该CSS文件中的样式与当前主题中CSS文件样式一致,那么我们在编辑器中“见到”的文章,就是在前台“得到”的效果了。

(修改后的效果)

1. 声明可视化编辑器的CSS文件

在functions.php里加上一行代码来声明可视化编辑器的CSS:

// Add CSS to Visual Editor
add_editor_style('css/custom-editor-style.css');

作为参数的文件路径是主题目录的相对路径。请确保在主题文件夹下的指定位置新建这个新的CSS文件。

2. 确保新CSS与原有CSS文件的共有类

新的CSS文件主要负责保存文章样式。文章的HTML标记通常被围在一个container元素中,类似于:

<div class="post">
  <!-- all content for entire post in here -->
</div>

新的CSS文件样式有可能使用上面的类名称来设定文章专用的样式:

.post h1, .post h2, .post h3, .post h4 { font-family: MuseoLight, Georgia, serif;  
font-weight: normal; margin: 0 0 10px 0; }
.post h2 { font-size: 28px; }
.post h2 { padding: 10px 180px 10px 15px;  
background: #237abf url(../images/title-bg.png) repeat-x;  
margin: 0; line-height: 1.3; font-size: 22px; }
.post h2, .post h2 a { color: white; text-shadow: 0 1px 2px #143855; }
.post h2 a:hover { color: #b8e0ff; }
.post h3 { font-size: 20px; padding: 5px 0; margin: 30px 0 15px 0;  
border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.post h4 { font-size: 18px; }
.post p { margin: 0 0 10px 0; }
.post pre { background: #eee; padding: 15px;
overflow:   auto; margin: 0 0 15px 0; border: 1px solid #ddd; }
.post pre code { font-size: 11px; }
.post code { background: #eee;  
font: 12px Monaco, Courier, Monospace; color: #0E304A; }
.post h3 code { font-size: 18px; }
.post acronym, abbr { border-bottom: 1px dotted #514031; cursor: help; }
.post ins { text-decoration: underline; }
.post del { text-decoration: line-through; }
.post a { outline: none; text-decoration: none;  
color: #19517C; background: #eee; border: 1px solid #ddd;  
padding: 1px 3px 2px 3px; -webkit-border-radius: 3px;  
-khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.post a:hover { color: #fff; background: #143855; border: 1px solid #143855; }

(代码中的字体、字号等各项数值仅供参考)

由于可视化编辑器中没有相同的类名称,因此我们不能只是把上面的代码复制并粘贴到新CSS样式文件中,那样并不能奏效。因此我们还需要强制可视化编辑器具有同一个类名。

将下面的代码放入functions.php文件:

// Add body class to Visual Editor to match class used live
function mytheme_mce_settings( $initArray ){
$initArray['body_class'] = 'post';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'mytheme_mce_settings' );

这可能不及引用单个文件来的有效,但至少方便很多。如果你喜欢给不同文件分别设置css样式,当然也可以自己动手。

这样操作完成后,就可以最大程度上地强化“所见即所得”效果了。

文章来源://digwp.com/2010/11/actual-wysiwyg/

译文出处://www.wordpress.la/wordpress-visual-editor-WYSIWYG.html

  • 为什么说一直辛苦劳作的农民没有富起来?而不说一直勤劳的农民没有富起来? 2019-06-15
  • 刘红:关注乳腺健康 做好体检预防工作 2019-06-11
  • 中国伊斯兰教协会“四进”清真寺活动启动 2019-06-05
  • 我国社会组织正成为全球治理体系中的新生力量 2019-06-05
  • 林肯全新Navigator领航员正式上市 售112.80万元起 2019-05-27
  • “川商走进新经济”第一场活动落幕 2019-05-14
  • 还加上制裁伊朗引起价格飙升的石油战 2019-05-14
  • 青海:52个客运站卫生间将全面改造 2019-05-12
  • 依规治党和依法治国结合的典范 2019-05-12
  • 内蒙古水利厅厅长付万惠接受纪律审查和监察调查 2019-05-11
  • 传销就是利用这种劣根性。 2019-05-08
  • 女性之声——全国妇联 2019-04-22
  • 不忘初心继续前进——七集政论专题片 2019-04-21
  • 百姓故事:摔跤吧!女孩 2019-04-16
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-04-16
  • 彩经网杀号定胆 排列五走势图2013 重庆快乐十分娱乐城 腾讯分分彩波动值详解 篮球比赛胜分差规则 斯诺克排名赛四强 湖北快3几点开始 排列五开奖直播在哪 天才二肖中特 稳赚包平特一肖三期必中一期 中国福利彩票3d丹东全图||www.awmrjs.com.cn/ 图表走势一中彩大数据 福彩试机号 体彩6+1第18127期 新疆11选5中奖规则