北极寒流 » 网络资源 » 为WordPress编辑器添加可视化/HTML文章分页按钮三种方法 - 2014.10.29

为WordPress编辑器添加可视化/HTML文章分页按钮三种方法

为WordPress编辑器添加分页按钮的目的在于给WordPress的长文章实现分页效果。一般来说,WordPress的文章分页都是采用“<!--nextpage-->”标签来实现的,不过即使是习惯html写作的朋友,如果经常性的要手动输入“<!--nextpage-->”也许会觉得比较麻烦。今天分享的就是直接为WordPress编辑器添加一个分页按钮,方便点一下按钮即可实现文章分页,方便快捷。

不过为WordPress编辑器添加分页按钮分两种情况。因为WordPress的后台编辑器是分可视化和文本(Html)状态的。

1,添加可视化分页按钮。

function add_more_buttons($buttons) {
$buttons[] = 'backcolor'; //背景色
$buttons[] = 'wp_page'; //添加分页
return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");

上述代码加到主题的functions.php中即可实现可视化的分页以及背景色选择按钮。

这里提醒一下,最后一行add_filter里的mce_buttons_3参数是定义编辑按钮的位置,这里表示的是添加到第三行,如果要添加到第一行,更改为mce_buttons即可。

另外一种方法,同样是把代码插入functions.php

/**
 * 在 WordPress 编辑器添加“下一页”按钮
 * http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html
 */
add_filter('mce_buttons','wpdaxue_add_next_page_button');
function wpdaxue_add_next_page_button($mce_buttons) {
	$pos = array_search('wp_more',$mce_buttons,true);
	if ($pos !== false) {
		$tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
		$tmp_buttons[] = 'wp_page';
		$mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
	}
	return $mce_buttons;
}

2、添加html状态下的分页按钮。如果你习惯在html状态写文章,那么下面的代码就适合你了(同样是插入functions.php中)。

//添加HTML编辑器按钮
add_action('admin_print_footer_scripts', 'my_quicktags' );
function my_quicktags() {
?>
<script type="text/javascript">
// 四对引号,分别是按钮ID、显示名、点一下输入内容、再点一下关闭内容,\n表示换行
QTags.addButton( 'hr', 'hr', '\n<hr />\n', '' ); //快捷输入一个hr分隔线
QTags.addButton( 'sup', 'sup', '<sup>', '</sup>' ); //添加上标
QTags.addButton( 'sub', 'sub', '<sub>', '</sub>' ); //添加下标
QTags.addButton( 'largetext', 'largetext', '<span style="font-size:18px;">', '</span>' ); //添加18像素文字
QTags.addButton( 'nextpage', 'nextpage', '<!--nextpage-->', '' ); //添加下一页
</script>
<?php
}

部分不需要的功能,大家可以自行删除。