WordPress3.3 编辑器自定义按钮添加新方法

Mark文一篇,原文见 @ihacklog 博文(1 & 2)。

如果你使用了WP3.3,即可以用以下方法快捷方便的在后台HTML编辑器中加入自定义按钮,不必再在更新一下在 /wp-includes/js/quicktags.js 动一次手脚咯。

首先创建一个 my-quicktags.js,丢入以下内容:

QTags.addButton( '<', '<', '&lt;', '' ); //快捷输入<的html代码
QTags.addButton( '>', '>', '&gt;', '' );
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( 'my_id', 'my button', '\n</span>', '</span>\n' );  
//这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),\n表示换行。

然后把此js丢入主题文件夹,再在主题 functions.php 中加入代码:

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

O了,进后台编辑器HTML模式下瞅瞅呗~

主机格调
  1. :roll: 没想到我也能坐沙发!

  2. 帅哥
    一月 18, 2012 17:15:17 #3

    上条打错拉。

  3. 郑永
    一月 18, 2012 21:59:21 #5

    主题又换了,这个还行,之前那个没多大意思,呵呵。

    • 之前那个是工作为稳定情绪防止折腾用滴~

  4. 小闇
    一月 19, 2012 03:22:3 #6

    還是愛用插件呀 編輯起來也很方便

    • 这个方法最初也是提取自插件~

  5. Whypha
    一月 19, 2012 12:34:12 #8

    为折腾而奋起。。。

    • 嗯,我也当记录下,不用改源程序就不怕升级咯~

  6. 围观过,都不怎么用编辑器按钮 写完了事 :eek:

    • 这按钮是为快捷排版功能插入需要滴~

  7. mp3
    一月 20, 2012 13:03:13 #12

    新主题不能根据浏览器窗口大小自动排版,非要我最大化才能显示完。

    • 牧风
      一月 20, 2012 22:40:22

      那就涉及到响应布局了而且ie6.7都不支持

      • 呵呵,我还没做,IE无视好久了……

    • 恩,现在做一下这个自适应~

  8. Maplews
    一月 21, 2012 01:53:1 #13

    加多了布局会很糟糕么 :?:

  9. DickWu
    一月 21, 2012 09:11:9 #14

    木木。你的邻居页面木有了。要手动输入http://immmmm.com/links才能看见他们。。

    • 页面模板还没做好,SO……

      • 吼吼~我把你这个页面当成书签页的。都是牛人啊!

  10. heson
    一月 21, 2012 10:27:10 #15

    :twisted: 新年大家都换主题啊·················· :mrgreen:

  11. zoe
    一月 21, 2012 14:24:14 #16

    :mrgreen: 这个很实用啊。。收藏收藏。

  12. 咚门
    一月 21, 2012 14:42:14 #17

    放假回家好几个人都换主题了,果然是新年了。
    这主题看到了河河那个影子。当初他说是你做的我着实惊讶了下。

    • 多彩的那款?也是从tumblr扒来的~

  13. Whypha
    一月 21, 2012 18:33:18 #19

    在简洁方面应该是极致了,我想

  14. 言冬
    一月 21, 2012 19:15:19 #20

    表示此主题有些部位在IE8下也可耻的悲剧了 :!:

  15. 咚门
    一月 22, 2012 15:49:15 #21

    除夕又来了。
    祝新年快乐,越来越帅,把你学校的少女全给俘获了,嘿嘿。

  16. 煎豆
    一月 23, 2012 13:58:13 #22

    就是3.3之后原来那种修改quicktags.js貌似不起作用~~这个方法可以用。。。 :mrgreen:

  17. 小七
    一月 23, 2012 18:35:18 #23

    很不错的办法

  18. 老谢
    一月 24, 2012 14:48:14 #24

    果断收走,木木新春快乐~!

  19. Agui
    二月 8, 2012 15:19:15 #25

    我想问一下,你用的是虚拟主机吗?如果是的话您能推荐一下用什么虚拟主机好些吗?

    • 我不是,不过之前一直用衡天主机~

  20. sunsick
    二月 15, 2012 18:31:18 #27

    好方法,shortcode不用动手打了

  21. bolo
    四月 16, 2012 17:18:17 #29

    我囧,wp提供了hook用来修改编辑器按钮的

    • 吼吼~bolo也有out的时候哈~

      • bolo
        四月 16, 2012 18:22:18

        不是我out,是我觉得这种方法不好,根本没有必要修改源文件

        • 哦,那怎么好些,好久没看折腾文了~

          • bolo
            四月 17, 2012 23:10:23

            迟点我在博客写一下吧,哈哈

发表评论

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

*


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">