Shortcode 短代码在 wordpress 的运用介绍


20151103-2

Shortcode 是指在文章编辑中,插入一个以中括号 “[” 和 “]” 包覆的语法,例如 “[show_me_video]”,wordpress 程式看到这些已经短代码时,就会依据所定义的内容做转换输出,和以往使用的 BBCode 非常相似,可以让你编辑文章时更加方便、程式码更简洁。

Shortcode 的定义非常简单,打开佈景的 functions.php
插入以下语法:

function foobar_func( $atts ){
    return "foo and bar";
}
add_shortcode( 'foobar', 'foobar_func' );

当我们在编辑文章时,在适当的位置填入[foobr],当网友看文章时,这一段短代码就会显示为”foo and bar”。

但是当我们想要增加一些变数输出时,我们就必须使用 shortcode_atts 这个函数。

用法:

shortcode_atts( $pairs , $atts, $shortcode );
$pairs: array、必须的。属性的定义值,如果没有输入任何属性时,显示定义值。
$atts: array、必须的。使用者输入的属性值。
$shortcode: string、非必须的。Shortcode 名称。

范例如下

function mylink_func( $atts ) {
    $a = shortcode_atts(
      array( 'link' => '#', 'name' => 'click me'),
      $atts 
    );
   return '<a href="' . $a['link'] . '">' . $a['name'] . '</a>';
}
add_shortcode( 'mylink', 'mylink_func' );

在文章中插入 [mylink link=’http://www.abcde.com’ name=”abcde网站”]
输出就会变成

<a href="http://www.abcde.com">abcde网站</a>

以上是 self-closing 方式呈现,不用写终止标签,像是 html 的 img 元素一样,不用结尾的标签。Shortcode 也有 Enclosing 型态,他的呈现也和一般 html 一样,例如:[my_short_code]中间内容[/my_short_code]。

Enclosing 型态的范例如下:

当你输入:

[my_caption]My Caption[/my_caption]

呈现的是:

<span class="caption">My Caption</span>

程式范例:

function caption_shortcode( $atts, $content = null ) {
    return '<span class="caption">' . $content . '</span>';
}
 add_shortcode( 'my_caption', 'caption_shortcode' );

(我们可以发现到他多了一个传入参数 $content = null )

shortcode 裡面又包一个 shortcode 的处理方式

当你输入:

[my_caption]Caption: [my_shortcode][/my_caption]

依照上面的程式,是不会处理中间的 [my_shortcode],这时候只要稍微修改,加入 do_shortcode 就可以了,
修改范例如下:

function caption_shortcode( $atts, $content = null ) {
    return '<span class="caption">' . do_shortcode($content) . '</span>';
}

若是想要让 shortcode 也能增加属性

[my_caption class="my_class"]Caption: [my_shortcode][/my_caption]

再次修改:

function caption_shortcode( $atts, $content = null ) {
    $a = shortcode_atts(
      array( 'class' => 'def_class' ),
      $atts
    );
return '<span class="'.$a['class'].'">' . do_shortcode($content) . '</span>';
}

评论

还没有评论
    评论 说点什么