如何給wordpress的編輯器添加一個自定義按鈕，并且實(shí)現(xiàn)插入功能

后臺文章編輯框添加按鈕，可以通過下面的代碼實(shí)現(xiàn) 。把這個代碼放到主題functions.php文件里。

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為東陽等服務(wù)建站，東陽等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為東陽企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

//增強(qiáng)編輯器開始 ，將代碼放到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編輯器按鈕調(diào)用的Key：

1.剪切（cut）復(fù)制（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.減少縮進(jìn)（outdent）縮進(jìn)（indent）幫助（wp_help）

10打開HTML代碼編輯器（code）水平線（hr）清除冗余代碼（cleanup）

11.上標(biāo)（sub）下標(biāo)（sup）特殊符號（charmap）插入more標(biāo)簽（wp_more）

12.插入分頁標(biāo)簽（wp_page）

13.隱藏按鈕顯示開關(guān)（wp_adv）

14.隱藏按鈕區(qū)起始部分（wp_adv_start）

15.隱藏按鈕區(qū)結(jié)束部分（wp_adv_end）

16.拼寫檢查（spellchecker）

怎樣給wordpress文章編輯器添加分頁按鈕

1、首先給WordPress文章編輯器添加顯示分頁按鈕，默認(rèn)沒有添加，并沒有看到該按鈕，如下圖所示

2、修改 /wp-includes 目錄下的 class-wp-editor.php 文件，在標(biāo)簽'wp_more',后面添加以下代碼'wp_page',即可。

3、此時，你就可以在后臺寫文章及編輯文章頁面的文本編輯器上看到一個跟 more 標(biāo)簽按鈕相似的圖標(biāo)，這個便是插入分頁的按鈕。

4、然后再你的一篇長篇文章中，某個段落之前插入一個分頁符，即把光標(biāo)定位到要分頁的位置，然后點(diǎn)擊下分頁按鈕，就會自動插入一個分頁符。

5、在主題模板文件 single.php 中找到類似下面這行代碼。

?php the_content(); ?

在這行代碼后面添加如下所示的代碼，即可實(shí)現(xiàn)簡單的分頁功能。

/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個百度廣告按鈕，我們只需要發(fā)表文章時，在需要顯示廣告的地方點(diǎn)擊一下這個百度按鈕，就會在那里添加短代碼?，而不需要再像以前一樣要一個一個地輸入字符了。這種效果只需2部就可以實(shí)現(xiàn)。

1、將下面的代碼放到主題的functions.php文件中：

function?baidu_button()?{//判斷用戶是否有編輯文章和頁面的權(quán)限if?(?!?current_user_can(‘edit_posts’)??!?current_user_can(‘edit_pages’)?)?{return;}??//判斷用戶是否使用可視化編輯器if?(?get_user_option(‘rich_editing’)?==?‘true’?)?{

add_filter(?‘mce_external_plugins’,?‘a(chǎn)dd_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是當(dāng)前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是當(dāng)前js的路徑onclick?:?function()?{ed.selection.setContent(‘【baidu2】’);

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

然后在這個js文件夾里添加一個百度圖標(biāo)，圖片名稱為baidu.jpg?，這樣就可以了。

注：需要把js代碼中的【baidu】各【baidu2】這2個中文中括號修改成英文的中括號。否則會出錯哦。

這里沒有添加百度廣告代碼，這個在前面的章節(jié)中已經(jīng)介紹過如何添加，所以這里就不多說了。

怎么在wordpress網(wǎng)站添加關(guān)注我的新浪微博按鈕

你好，

方法/步驟

一、直接通過百度搜索微博關(guān)注按鈕或通過新浪開發(fā)平臺官方網(wǎng)打開新浪微博開放平臺并找到微博關(guān)注按鈕。

二、給Wordpress博客添加微博關(guān)注按鈕需要二步。第一步，輸入要關(guān)注的用戶的昵稱，配置微博關(guān)注按鈕樣式。第二步，給Wordpress博客添加微博關(guān)注按鈕需要的代碼。

三、

部署代碼第1步：在HTML標(biāo)簽中增加XML命名空間，這段代碼需要添加到Wordpress博客主題文件的header.php文件中，添加位置!DOCTYPE html之后之前，通常添加到上面一行即可。

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

部署代碼第3步：在需要部署微博關(guān)注按鈕的位置粘貼WBML代碼，這段代碼的添加位置至關(guān)重要，因?yàn)槟闾砑哟a的位置就是展示微博關(guān)注按鈕的位置。

這段代碼在Wordpress博客中的添加位置取決于博主個人的的需求和意愿，添加位置通常隨博主個人的喜好而定。

四、舉個例子說明，我想給Wordpress博客的文章作者的上面添加微博關(guān)注按鈕，因此我可以這樣做，文章作者一般文章詳情頁，文章詳情頁的代碼在single.php文件，因此我只需把部署代碼第三步的代碼添加到single.php文件中作者名稱那行代碼的前面行即可。