如何给wordpress的编辑器添加一个自定义按钮，并且实现插入功能

后台文章编辑框添加按钮，可以通过下面的代码实现 。把这个代码放到主题functions.php文件里。

创新互联从2013年创立，先为东阳等服务建站，东阳等地企业，进行企业商务咨询服务。为东阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

//增强编辑器开始 ，将代码放到function.php文件中

function add_editor_buttons($buttons) {

$buttons[] = 'fontselect';

$buttons[] = 'fontsizeselect';

$buttons[] = 'outdent';

$buttons[] = 'indent';

$buttons[] = 'copy';

$buttons[] = 'paste';

$buttons[] = 'cut';

$buttons[] = 'backcolor';

return $buttons;

}

add_filter("mce_buttons_3", "add_editor_buttons");

具体添加哪些按钮，可参照下面这些。wordpress编辑器按钮调用的Key：

1.剪切（cut）复制（copy）粘贴（paste）撤销（undo）重做（redo）居中（justifycenter）

2.加粗（bold）斜体（italic）左对齐（justifyleft）右对齐（justfyright）

3.两端对齐（justfyfull）插入超链接（link）取消超链接（unlink）插入图片（image）

4.清除格式（removeformat）下划线（underline）删除线（strikethrough）

5.锚文本（anchor）新建文本（newdocument）

6.字体颜色（forecolor）字体背景色（backcolor）

7.格式选择（formmatselect）字体选择（fontselect）字号选择（fontsizeselect）

8.样式选择（styleselect）无序列表（bullist）编号列表（numlist）

9.减少缩进（outdent）缩进（indent）帮助（wp_help）

10打开HTML代码编辑器（code）水平线（hr）清除冗余代码（cleanup）

11.上标（sub）下标（sup）特殊符号（charmap）插入more标签（wp_more）

12.插入分页标签（wp_page）

13.隐藏按钮显示开关（wp_adv）

14.隐藏按钮区起始部分（wp_adv_start）

15.隐藏按钮区结束部分（wp_adv_end）

16.拼写检查（spellchecker）

怎样给wordpress文章编辑器添加分页按钮

1、首先给WordPress文章编辑器添加显示分页按钮，默认没有添加，并没有看到该按钮，如下图所示

2、修改 /wp-includes 目录下的 class-wp-editor.php 文件，在标签'wp_more',后面添加以下代码'wp_page',即可。

3、此时，你就可以在后台写文章及编辑文章页面的文本编辑器上看到一个跟 more 标签按钮相似的图标，这个便是插入分页的按钮。

4、然后再你的一篇长篇文章中，某个段落之前插入一个分页符，即把光标定位到要分页的位置，然后点击下分页按钮，就会自动插入一个分页符。

5、在主题模板文件 single.php 中找到类似下面这行代码。

?php the_content(); ?

在这行代码后面添加如下所示的代码，即可实现简单的分页功能。

/br?php wp_link_pages(array('before' = 'div class="fenye"文章分页：', 'after' = '', 'next_or_number' = 'next', 'previouspagelink' = '上一页', 'nextpagelink' = "")); ?

?php wp_link_pages(array('before' = '', 'after' = '', 'next_or_number' = 'number', 'link_before' ='span', 'link_after'='/span')); ?

?php wp_link_pages(array('before' = '', 'after' = '/div', 'next_or_number' = 'next', 'previouspagelink' = '', 'nextpagelink' = "下一页")); ?

7、最后，添加这个分页的一些样式，在主题模板文件中的style.css文件最后添加如下样式：

/*文章分页*/

.fenye{text-align:center;margin:0px auto 10px;}

.fenye span{background-color:#C73503;color:#fff;font-weight: bold;margin:0px 1px;padding:3px 6px;text-decoration:none;border:1px solid #D2D2D2;}

.fenye a{text-decoration:none;}

.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;}

.fenye a:hover span{background-color:#c73503;color: #fff;}

如何给WordPress可视化编辑器添加更多按钮

在上图中，我们可以看到，我们给wordpress文章编辑器添加了2个百度广告按钮，我们只需要发表文章时，在需要显示广告的地方点击一下这个百度按钮，就会在那里添加短代码 ，而不需要再像以前一样要一个一个地输入字符了。这种效果只需2部就可以实现。

1、将下面的代码放到主题的functions.php文件中：

function baidu_button() {//判断用户是否有编辑文章和页面的权限if ( ! current_user_can(‘edit_posts’)  ! current_user_can(‘edit_pages’) ) {return;}  //判断用户是否使用可视化编辑器if ( get_user_option(‘rich_editing’) == ‘true’ ) {

add_filter( ‘mce_external_plugins’, ‘add_plugin’ );add_filter( ‘mce_buttons’, ‘register_button’ );}}add_action(‘init’, ‘baidu_button’);

function register_button( $buttons ) {array_push( $buttons, “|”, “baidu1″ ); //添加 一个baidu1 按钮array_push( $buttons, “|”, “baidu2″ ); //添加 一个baidu2 按钮

return $buttons;}function add_plugin( $plugin_array ) {

//baidu2按钮的js路径$plugin_array[‘baidu1′] = get_bloginfo( ‘template_url’ ) . ‘/js/baidu1.js';

//baidu2按钮的js路径$plugin_array[‘baidu2′] = get_bloginfo( ‘template_url’ ) . ‘/js/baidu2.js';

return $plugin_array;}

上面的代码，我们添加了2个百度按钮。效果如上图。

2、在主题文件夹的js文件夹里添加baidu1.js和baidu2.js2个JS文件，在这2个js文件中分别添加如下代码：

baidu1.js文件

/*给wordpress编辑器添加自定义按钮*/

(function() {tinymce.create(‘tinymce.plugins.baidu1′, { //注意这里有个baidu1init : function(ed, url) {ed.addButton(‘baidu1′, { //注意这一行有一个baidu1title : ‘百度广告-1′,image : url+’/baidu.jpg’, //注意图片的路径 url是当前js的路径onclick : function() {ed.selection.setContent(‘【baidu1】’);

}});},createControl : function(n, cm) {return null;},});tinymce.PluginManager.add(‘baidu1′, tinymce.plugins.baidu1);})();

baidu2.js文件

/*给wordpress编辑器添加自定义按钮*/

(function() {tinymce.create(‘tinymce.plugins.baidu2′, { //注意这里有个baidu1init : function(ed, url) {ed.addButton(‘baidu2′, { //注意这一行有一个baidu1title : ‘百度广告-2′,image : url+’/baidu.jpg’, //注意图片的路径 url是当前js的路径onclick : function() {ed.selection.setContent(‘【baidu2】’);

}});},createControl : function(n, cm) {return null;},});tinymce.PluginManager.add(‘baidu2′, tinymce.plugins.baidu2);})();

然后在这个js文件夹里添加一个百度图标，图片名称为baidu.jpg ，这样就可以了。

注：需要把js代码中的【baidu】各【baidu2】这2个中文中括号修改成英文的中括号。否则会出错哦。

这里没有添加百度广告代码，这个在前面的章节中已经介绍过如何添加，所以这里就不多说了。

怎么在wordpress网站添加关注我的新浪微博按钮

你好，

方法/步骤

一、直接通过百度搜索微博关注按钮或通过新浪开发平台官方网打开新浪微博开放平台并找到微博关注按钮。

二、给Wordpress博客添加微博关注按钮需要二步。第一步，输入要关注的用户的昵称，配置微博关注按钮样式。第二步，给Wordpress博客添加微博关注按钮需要的代码。

三、

部署代码第1步：在HTML标签中增加XML命名空间，这段代码需要添加到Wordpress博客主题文件的header.php文件中，添加位置!DOCTYPE html之后之前，通常添加到上面一行即可。

部署代码第2步：在HEAD头中引入WB.JS，这段代码也需要添加到Wordpress博客主题文件的header.php文件中，添加位置之后之前，通常添加到前一行即可。

部署代码第3步：在需要部署微博关注按钮的位置粘贴WBML代码，这段代码的添加位置至关重要，因为你添加代码的位置就是展示微博关注按钮的位置。

这段代码在Wordpress博客中的添加位置取决于博主个人的的需求和意愿，添加位置通常随博主个人的喜好而定。

四、举个例子说明，我想给Wordpress博客的文章作者的上面添加微博关注按钮，因此我可以这样做，文章作者一般文章详情页，文章详情页的代码在single.php文件，因此我只需把部署代码第三步的代码添加到single.php文件中作者名称那行代码的前面行即可。