Shortcode 武装你的wordpress

2013-09-26 4940点热度 6条评论

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>';
}

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

Shortcode
Shortcode

Jalena

原创内容,转载请注明出处! 部分内容来自网络,请遵守法律适用!

文章评论

  • harlan

    你那天是不是让我给你调那个框框的css呢?

    2013-09-29
    • Jalena

      @harlan 你给我整个嘛,不一定非要这个,table做也行

      2013-09-29
  • Taks

    那个下载样子好丑

    2013-09-27
    • Jalena

      @Taks 没办法哈,CSS能力有限!

      2013-09-27
      • Taks

        @Jalena 你这个博客的邮件通知是咋个弄的哦,好高级!

        2013-09-27
        • Jalena

          @Taks 网上有很多代码啊,你可以去百度找找,不过需要有mail组件支持

          2013-09-27