三、Shortcode 短代碼 Enclosing 型態

更新日期:2014-10-23

前兩個教學都是以 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>';
}

 
 

所有 Shortcode 相關文章

一、Shortcode 短代碼在 wordpress 的運用介紹
二、Shortcode 短代碼增加屬性的方法
三、Shortcode 短代碼 Enclosing 型態

發佈留言