Word Press编辑器增加自定义按钮实现中文段首缩进的方法

分类:WordPress   2012年5月11日   1,304 次浏览   5 条评论  

这两天工作需要,一直对Word Press的中文段落首行缩进的问题进行的研究~~~

方法有如下四种:

1、CSS法,就是在模版的默认CSS文件中,直接对内容的P,增加关键的一行“text-indent:2em”,em的意思就是两个文字的意思,这个比PX像素缩进的方法适应型要强很多。

2、TinyMCE 的插件编写方法,具体可以去Google一下,但是希望做好心理准备,目前就有一位兄台采用这种方法,而且代码量不小。

3、手动用全角空格,这个必须在IE浏览器下使用,而且文章加入“看不见”的空格,对将来的维护不利。

以上三种方法是在Google和百度等搜索引擎上常见的修改方式,都各有各的问题。

1、适应性很不好,而且所有段落,必定首行缩进,有些地方其实不用缩进的,但是,难道发表文章的人还只能写入代码来单独控制?为啥发表文章的时候,需要很多代码量呢?

2、这个方法繁琐累赘不说,而且万一Word Press升级,内部增加的代码之类的东西就泡汤了。

3、手动这个更不用说了,简直倒退回没有Word Press的年代了。

===

下面给出具体的完美的第四种方法:

4、在自己使用的主题内,添加中文段首缩进的快速代码按钮。也就是在Word Press的HTML编辑器中,增加自定义按钮。

步骤如下:

Step 1、在自己的主题内添加一个“my-quicktags.js”文件

内容如下:

QTags.addButton( '<', '<', '<', '' ); //快捷输入<的html代码 
QTags.addButton( '>', '>', '>', '' ); 
QTags.addButton( 'shsj', '首行缩进', "<p style='text-indent:2em'>","</p>\n" );
QTags.addButton( 'hr', 'hr', "n<hr />n", '' ); //快捷输入一个hr横线,点一下即可 
QTags.addButton( 'h1', 'h1', "n<h1>", "</h1>n" ); //快捷输入h1标签 
QTags.addButton( 'h2', 'h2', "n<h2>", "</h2>n" ); 
QTags.addButton( 'h3', 'h3', "n<h3>", "</h3>n" ); 
QTags.addButton( 'firstinded', 'cnFirstLine', "<p style="text-indent:2em"></p>n", "" ); 
//QTags.addButton( 'my_id', 'my button', 'n</span>', '</span>n' );  
//这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、
//再点一下关闭内容(此为空则一次输入全部内容),n表示换行。

Step 2、在自己的主题目录里面的functions.php内找地方添加:

// 自定义HTML编辑器按钮 
add_action('admin_print_scripts', 'my_quicktags'); 
function my_quicktags() { 
	wp_enqueue_script( 
	'my_quicktags', 
	get_stylesheet_directory_uri().'/lib/js/my-quicktags.js', 
	array('quicktags') 
	); 
	}

至此,步骤就结束了。

优点:
1、跟Word Press一定程度的分离,只跟随主题包。
2、手动控制,非常灵活。

===
延伸阅读:
http://andyshare.com/244.html

打 赏如果您觉得这篇文章有用处,请打赏我O(∩_∩)O哈!鼓励我写出更好更多的文章!

5 thoughts on "Word Press编辑器增加自定义按钮实现中文段首缩进的方法"

  1. 沙丘说道:

    CSS法应该最方便吧,不过貌似WP主题一般都很少段首缩进的

  2. 太原论坛说道:

    楼主 学习了 我博客也是这个程序 呵呵

  3. Sola说道:

    老兄,你这不是各种用wp_enqueue_script 囧

    1. linlance说道:

      那时候根本不知道这个函数,多亏你教道啦。

  4. csdsq说道:

    我的怎么搞不定?⊙﹏⊙b汗,晚上回去再试一试~~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注