WordPress 中新增自訂 shortcode（短代碼）的簡單方法

by · Published

寫文章的時候，常常會需用到重複的格式或功能，比方說常用字串，或著很常在我文章分段落出現的紫色框框，如果每次要使用都要重複的打或著編寫程式碼那也太累人了，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 原始碼來自樂趣公園，不過他好像把原始碼那篇文刪掉了。

 

 

 

Tags:

You may also like...

Top