Shortcode 武装你的wordpress

WordPress 从 2.5 版本开始增加了一个类似 BBCode 标签的 Shortcode API，可以使用它在日志的内容中来给日志内容添加各种功能。Shortcode 这个接口非常容易使用，并且功能非常强大。

简单说 WordPress Shortcode 指的是一些使用[]包含的短代码，WordPress会识别这些短代码并根据短代码的定义输出为特定的内容。

最近觉得wordpress这个博客应该来折腾一下，遂研究了一下这个东西，特意折腾出来了这个东西，当然这只是很简单的一个东西，大家可以参考自己折腾。。

以下下是定义一个下载链接的框,将如下代码添加到主题的function中即可.

add_shortcode( 'download', 'shortcode_download' );
function shortcode_download( $atts, $content = null ) {
 global $post;
 extract( shortcode_atts( array(
 'name' => ' ', // 文件名称
 ), $atts ) );
 return '<a href='.$content.' class="download">' .$name. '</a>';
}

再将如下代码添加至主题的css里面

/* ----------------------------------------------------------------------
 下载框
---------------------------------------------------------------------- */
.download-box {background-color: #004080;padding: 5px;width: 400px;border: 2px solid #CCC; display:block;}
.download-box-text {font-size: 1.2em;line-height: 1.4em;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #ccc;}
.download-box-link {}

这个功能可以使用我们用download这个代码来创建一个带风格的下载框。

下面是个测试

[download name="test"]http://www.baidu.com[/download]
CSS实在太烂。将就看~

功能是出来了，但是每次要手动来输入也很麻烦，毕竟长时间不用也容易遗忘到底有多少短码，所以我们要增加一个短码的选择框。

// ------------ 添加简码选择按钮接口 -----------------------
add_action('media_buttons','shortcode_select',11);
function shortcode_select(){
    global $shortcode_tags;
    $exclude = array("wp_caption", "embed");
//    echo ' <select id="shortcode_select"><option>Shortcode</option>';
    echo ' <select id="shortcode_select">';
    foreach ($shortcode_tags as $key => $val){
            if(!in_array($key,$exclude)){
            $shortcodes_list .= '<option value="['.$key.'][/'.$key.']">'.$key.'</option>';
            }
        }
     echo $shortcodes_list;
     echo '</select>';
}

// ------------ 添加简码选择功能至编辑器 ---------------------
add_action('admin_head', 'button_list');
function button_list() {
        echo '<script type="text/javascript">
        jQuery(document).ready(function(){
           jQuery("#shortcode_select").change(function() {
                          send_to_editor(jQuery("#shortcode_select :selected").val());
                          return false;
                });
        });
        </script>';
}

最后附上一个简码选择图。