WordPress 中新增自訂 shortcode(短代碼)的簡單方法

寫文章的時候,常常會需用到重複的格式或功能,比方說常用字串,或著很常在我文章分段落出現的紫色框框,如果每次要使用都要重複的打或著編寫程式碼那也太累人了,WordPress 的 shortcode 功能就是用來處理解決這項煩惱,設定好以後就可以在寫文章的編輯器裡按兩下就輕易增加。

為什麼要自己寫呢?

WordPress 的 shortcode 功能套件在官網一搜尋一大把,什麼樣的功能都有,直接安裝套件就好了,為什麼要自己寫呢?

  • 這功能非常簡單寫,而且設定一次就一勞永逸了。
  • 因為常用的 shortcode 就那幾個,不需要為了幾個短代碼安裝拖慢速度的套件。
  • 當然,最重要的,你可以透過短代碼做自己想要的,而不是使用別人幫你設定好的。
那就開始動手吧!

shortcode(短代碼)的程式碼要放在 WordPress 理你所使用 theme(主題)的  functions.php 和 style.css 中, 以下我將要放在 functions 中的程式碼分成三個部份並舉例說明比較好理解。

(一)short code 功能開始:

function tozi($atts, $content=null){
    return '<div id="css_notice">'.$content.'</div>'; 
} 
add_shortcode('ia_notice','tozi'); 
add_action('admin_head','html_quicktags'); 
function tobi($atts, $content=null){ 
return '<div id="css_tips">'.$content.'</div>'; } 
add_shortcode('ib_tips','tobi'); 
add_action('admin_head','html_quicktags');

第一部份可以看做成 shortcode 的格式,第一行 function 後面的 tozi 是功能的命名,隨便命名,不要重複就好了。

第二行 return 後面第一個 '' 裡面放的是按這功能要做什麼,比方說我這邊放的是:

'<div id="css_notice">

就是當我使用「ia_notice」這個短代碼時就從 css 樣式中引入 css_notice 樣式。接著 .$content. 不用動,那是取得你文字被框起來的部份,後面第二個 '' 是告訴程式結尾的短碼是什麼。

第四行裡第一個 " 裡放的 ia_notice  是簡碼的用法(之後在編輯器裡打的),後面一樣是 function 的名稱。接下來要放第二個簡碼以此類推就行了。

(二)將 shortcode 功能設定成標籤

    function html_quicktags() {
        $output = "<script type='text/javascript'>\n
        /* <![CDATA[ */ \n";
        wp_print_scripts( 'quicktags' );
        $buttons[] = array(
                'name' => 'ia_notice',
                'options' => array(
                        'display_name' => '綠色提醒框',
                        'open_tag' => '\n[ia_notice]',
                        'close_tag' => '[/ia_notice]\n',
                        'key' => ''
     ));
        $output = "<script type='text/javascript'>\n
        /* <![CDATA[ */ \n";
        wp_print_scripts( 'quicktags' );
        $buttons[] = array(
                'name' => 'ib_tips',
                'options' => array(
                        'display_name' => '灰色提醒框',
                        'open_tag' => '\n[ib_tips]',
                        'close_tag' => '[/ib_tips]\n',
                        'key' => ''
     ));

第一行是添加將 shortcode 功能設定成編輯器標籤開始,接下來照著格式複製,只要改第六行 name 改成 shortcode 的名稱,第八行 display_name 改成此 shortcode 要在編輯器顯示的名稱,比方說我這邊用的「綠色提醒框」。第九、第十行分別是標籤的開始與結束,同樣照著格式改名稱即可。

(三)加上迴圈,完成 shortcode 功能加入編輯器

    /*把 shortcode 標籤貼上編輯器*/         
        for ($i=0; $i <= (count($buttons)-1); $i++) { $output .= "edButtons[edButtons.length] = new edButton('ed_{$buttons[$i]['name']}' ,'{$buttons[$i]['options']['display_name']}' ,'{$buttons[$i]['options']['open_tag']}' ,'{$buttons[$i]['options']['close_tag']}' ,'{$buttons[$i]['options']['key']}' ); n"; } $output .= "n /* ]]> */ n
// ]]></script>"; echo $output; }

這部份的程式碼就是完成迴圈,直接複製貼上即可,到目前為止 functions.php 的部份就大功告成了!只剩下最後為 shortcode 添加 css 樣式的部份。

(四)幫 shortcode 添加 css 樣式

打開 wordpress 裡所使用的 theme 目錄下的 style.css,把指定的樣式添加上去即可,比方說我前面舉例用的 ia_notice、ib_tips 分別的樣式:

#css_notice{color:#7da33c;background:#ecf2d6;border:1px solid #aac66d;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px;}

#css_tips{color:#777;background:#eaeaea;border:1px solid #ccc;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px;}

就這麼簡單就搞定了。安裝成功以後就可以在後台編輯器看到剛才新增的兩個標籤了。

wordpress-add-shortcode.jpg


本篇用於舉例的 shortcode 原始碼來自樂趣公園,不過他好像把原始碼那篇文刪掉了。

 

 

You may also like...

Top