WordPress为文章编辑器添加自定义按钮

技巧达人 2022-10-17

2056 36
签名:这个人很懒,什么也没有留下!
最新回复 (36)
  • 冰羽 2022-10-16
    17
    刀云有你更美好
    签名:这个人很懒,什么也没有留下!
  • 夏叔 2022-10-14
    16
    拿走看看
    签名:这个人很懒,什么也没有留下!
  • dchb 2022-10-14
    15
    谢谢大佬
    签名:这个人很懒,什么也没有留下!
  • qdocbwo 2022-10-14
    14
    哈哈,不错哦
    签名:这个人很懒,什么也没有留下!
  • 没事你说呢 2022-10-14
    13
    看看
    签名:这个人很懒,什么也没有留下!
  • syuuko 2022-10-14
    12
    不错
    签名:这个人很懒,什么也没有留下!
  • 夏叔 2022-10-14
    11
    感谢
    签名:这个人很懒,什么也没有留下!
  • 帅到那hi样 2022-10-14
    10
    楼主牛逼
    签名:这个人很懒,什么也没有留下!
  • 134679258 2022-10-14
    9
    大佬
    签名:这个人很懒,什么也没有留下!
  • 1354909073 2022-10-14
    8
    楼主牛逼
    签名:这个人很懒,什么也没有留下!
  • 1216187983 2022-10-14
    7
    签名:这个人很懒,什么也没有留下!
  • 雄起19 2022-10-14
    6
    赞一个
    签名:这个人很懒,什么也没有留下!
  • 可可 2022-10-14
    5
    签名:这个人很懒,什么也没有留下!
  • xxxxxxxx 2022-10-14
    4
    刀云有你
    签名:这个人很懒,什么也没有留下!
  • 874536830 2022-10-10
    3
    大佬
    签名:这个人很懒,什么也没有留下!
  • 技巧达人 2022-10-17
    2

    添加自定义按钮

    wordpress写文章时,发现 html编辑状态时的按钮太少,寻思着如何添加。

    其实这些在官方文档中都已经介绍有方法了,添加短代码,添加编辑器按钮。

    不需要额外创建.js文件,直接把脚本写入主题目录下的 function.php 文件即可。

    将下面的代码添加到主题目录的 function.php 文件的最后一个 ?> 之前。

    // 添加自定义编辑器按钮 /////////////////
    function appthemes_add_quicktags() {
    ?>
    <script type="text/javascript">
    QTags.addButton( 'hr', 'hr', 'n<hr />n', " ); //添加分隔线
    QTags.addButton( 'h1′, 'h1′, 'n<h1>', '</h1>n' ); //快捷输入h1标签
    </script>
    <?php
    }
    add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
    ?>
    

    其中的

    QTags.addButton( 'hr', 'hr', 'n<hr />n', ' ' ); //添加分隔线
    

    就是自定义按钮。

    上句一共有四对引号,分别是【按钮的ID】、【显示名称】、【点一下输入的内容】、【再点一下输入的内容】(此留空则一次输入全部内容)
    如图,JV也添加了自己常用的按钮,快把自己喜欢的按钮添加上去吧。
    2014-06-30_shortcode-btn

    更多Quicktags API的用法,请参考官方文档:http://codex.wordpress.org/Quicktags_API

    添加短代码shortcode

    之前我经常把自定义按钮和短代码混淆,其实最好是先添加短代码然后再用自定义按钮调用才是最好的,
    不然就得把样式直接写在自定义按钮上。短代码可以参照以下格式,添加到主题目录的functions.php里面。
    //普通高亮框
    function normalbox($atts, $content=null, $code="") {
        $return = '<span class="normalbox" style="-moz-box-shadow:1px 1px 2px  #999 inset;-webkit-box-shadow:1px 1px 2px #999 inset;box-shadow:1px 1px 2px #999 inset;margin:0 2px 0 2px;border:1px solid #bbb;border-radius:3px;background-color:#fff;padding:0px 5px 1px 5px;text-shadow:0 1px 3px #999;text-align:center;font-size:14px;height-line:14px;">';
        $return .= $content;
        $return .= '</span>';
        return $return;
    }
    add_shortcode('normalbox' , 'normalbox' );
    效果如本句高亮,可以根据需要自行修改。
    签名:这个人很懒,什么也没有留下!
返回