╃苍狼山庄╃╃苍狼山庄╃

Clang出品,
必属精品!

WordPress为后台文章编辑器添加自定义按钮和短代码

添加自定义按钮

用wordpress写文章时,发现 html编辑状态时的按钮太少,寻思着如何添加。
其实这些在官方文档中都已经介绍有方法了,添加短代码,添加编辑器按钮。
不需要额外创建.js文件,直接把脚本写入主题目录下的 function.php 文件即可。
将下面的代码添加到主题目录的 function.php 文件的最后一个 ?> 之前

// 添加自定义编辑器按钮
function appthemes_add_quicktags() {
?>
<script type="text/javascript">
  if ( typeof QTags != 'undefined' ) {
    QTags.addButton( 'hr', 'hr', '<hr />', '' ); //添加分隔线
    QTags.addButton( 'h1', 'h1', '<h1>', '</h1>' ); //快捷输入h1标签
  }
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
?> // function.php 文件的最后一个 ?>


需要添加多个按钮时,按照第5、6行代码继续增加就可以。
按钮参数含义如下:

QTags.addButton( '按钮的ID', '显示的名称', '点一下输入的内容', '再点一下输入的内容(此留空则一次输入全部内容)' ); //添加分隔线

更多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' );

然后在自定义按钮处添加此高亮框的短代码:

QTags.addButton( 'normalbox', 'normalbox', '[normalbox]', '[/normalbox]' ); //普通高亮框

 

[normalbox]效果如本句高亮,文字内容可以根据需要自行修改。[/normalbox]

本原创文章未经允许不得转载 | 当前页面:╃苍狼山庄╃ » WordPress为后台文章编辑器添加自定义按钮和短代码

评论

文章评论已关闭!