Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
進階客製化 Flatsome 子佈景主題－開闔式選單 (下)
昨天我們提到透過擴充短代碼 (shortcode) 的方式，客製化出可以用查詢參數 _GET 來指定開啟選單項目的開闔式選單 (accordion) 區塊。今天，我們就要讓 Flatsome 內建的 UX Builder 也能夠轉譯出這個功能。
內容目錄
分析上層佈景主題檔案
經過分析後，我們可以發現上層佈景主題將 UX Builder 的核心功能，存放於 inc/builder 下。而用於轉譯短代碼的檔案，則在 inc/builder/shortcodes 之下，我們在裡面可以找到 accordion.php 這個檔案：
PHP
x
add_ux_builder_shortcode( 'accordion', array( 'type' => 'container', 'name' => __( 'Accordion' ), 'image' => '', 'category' => __( 'Content' ), 'template' => flatsome_ux_builder_template( 'accordion.html' ), 'thumbnail' => flatsome_ux_builder_thumbnail( 'accordion' ), 'info' => '{{ title }}', 'allow' => array( 'accordion-item' ), 'presets' => array( array( 'name' => __( 'Default' ), 'content' => ' [accordion] [accordion-item title="Accordion Item 1 Title"][/accordion-item] [accordion-item title="Accordion Item 2 Title"][/accordion-item] [accordion-item title="Accordion Item 3 Title"][/accordion-item] [/accordion] ' ), ), 'options' => array( 'title' => array( 'type' => 'textfield', 'heading' => __( 'Title' ), 'default' => __( '' ), 'auto_focus' => true, ), 'auto_open' => array( 'type' => 'radio-buttons', 'heading' => __('Auto Open'), 'default' => '', 'options' => array( '' => array( 'title' => 'Off'), 'true' => array( 'title' => 'On'), ), ), 'class' => array( 'type' => 'textfield', 'heading' => 'Custom Class', 'full_width' => true, 'placeholder' => 'class-name', 'default' => '', ), ),) );從 accordion.php 這個檔案中，可以了解如何在 UX Builder 中註冊新的區塊。透過 add_ux_builder_shortcode 這個函式，我們可以將註冊過的短代碼置於 UX Builder 中，使它能夠在頁面中轉譯自訂的短代碼。這裡簡單介紹一下幾個引數：
| 名稱 | 說明 |
|---|---|
| type | 底下是否有子項目，有的話則填入 'type' => 'container'。 |
| name | 在 UX Builder 中顯示的名稱。 |
| category | 類型，欲顯示在 UX Builder 的哪個區塊中。因為和 Accordion 是類似的類型，所以維持原本的 ‘content’。 |
| template | 在 UX Builder 中要顯示的樣式範本。為 HTML 格式，後面會提到如何引用 HTML 檔案。 |
| thumbnail | 選填，在 UX Builder 中要顯示的縮圖。後面會補充說明。 |
| info | 要顯示在 UX Builder 中的補充資訊，預設是 {{ title }}，用來擷取下方 options 中的 title 欄位值。 |
| allow | 可新增於此元素的子區塊，因為我們要做的是開闔式選單，因此填寫 'accordion-item'。 |
| presets | 預設內容。在 'content' 將短代碼填入，這樣在新增區塊時，便會自動帶入預設的內容。 |
| options | 其他選項，這部分基本上便按照原本的預設值，不需要額外調整。 |
自訂範本
在前一段中，我們提到 template 與 thumbnail 這兩個引數。因為這兩個引數使用了 flatsome_ux_builder_template 與 flatsome_ux_builder_thumbnail 這兩個方法，因此需要在子佈景主題的 functions.php 中稍加改寫：
PHP
/* * 將上層佈景主題的 flatsome_ux_builder_template 與 flatsome_ux_builder_thumbnail * 複製到 functions.php 中，並裡面的 get_template_directory() 改為 get_stylesheet_directory() * 才能讓子佈景主題使用。 */function flatsome_child_ux_builder_template( $path ) { ob_start(); include get_stylesheet_directory() . '/inc/builder/shortcodes/templates/' . $path; return ob_get_clean();}function flatsome_child_ux_builder_thumbnail( $name ) { return get_stylesheet_directory_uri() . '/inc/builder/shortcodes/thumbnails/' . $name . '.svg';}從上述的程式碼中，我們定義了將範本儲存於「子佈景主題」的 inc/builder/shortcodes/templates 中，而縮圖的 svg 檔則儲存於子佈景主題的 inc/builder/shortcodes/thumbnails 中。
自訂 HTML 範本
我們先將上層佈景主題的 templates 的資料夾中，將 accordion.html 複製到子佈景主題的對應位置，改名為 custom-accordion.html。其內容如下：
HTML
<h3 class="accordion_title {{ shortcode.options.class }}">{{ shortcode.options.title }}</h3><div class="accordion" ng-attr-rel="shortcode.options.open"> <content /></div>這裡是透過 AJAX 的方法，將 shortcode 的選項取出並轉譯到 UX Builder 中。因為我們沒有變更任何選項，因此這裡可以維持原樣。
改寫 custom_accordion 的程式碼
在這次的實作中，我們可以直接將原本 accordion.php 的程式碼直接原封不動的複製到子佈景主題對應的資料夾中，並在 'name'、'template' 與 'presets' 中稍做修改。
PHP
add_ux_builder_shortcode( 'custom_accordion', array( 'type' => 'container', 'name' => __( 'Custom Accordion' ), 'image' => '', 'category' => __( 'Content' ), 'template' => flatsome_child_ux_builder_template( 'custom-accordion.html' ), // 因為沒有縮圖，所以縮圖就先註解掉。 // 'thumbnail' => flatsome_child_ux_builder_template( 'accordion' ), 'info' => '{{ title }}', 'allow' => array( 'accordion-item' ), 'presets' => array( array( 'name' => __( 'Default' ), 'content' => ' [custom_accordion] [accordion-item title="Accordion Item 1 Title"][/accordion-item] [accordion-item title="Accordion Item 2 Title"][/accordion-item] [accordion-item title="Accordion Item 3 Title"][/accordion-item] [/custom_accordion] ' ), ),// 'options' 以下無更動，因此省略。// 以上是 'options'。) );將所有客製化的檔案引入 functions.php 中
我們在上一篇跟這一篇的實作中，總共建立了以下幾個檔案：
- inc/shortcodes/custom-accordion.php (使用者實際上會看到的短代碼)
- inc/builder/shortcodes/custom-accordion.php (UX Builder 轉譯用的短代碼)
- inc/builder/shortcodes/templates/custom-accordion.html (UX Builder 轉譯用的範本)
接著，我們要將這些功能正式套用在子佈景主題中：
PHP
require get_stylesheet_directory() . '/inc/shortcodes/custom-accordion.php';/* 因為要在 UX Builder 啟用後才需要載入轉譯用短代碼， * 因此透過 ux_builder_setup 這個勾點來觸發。 */add_action( 'ux_builder_setup', function(){ require_once get_stylesheet_directory() . '/inc/builder/shortcodes/custom-accordion.php';}結語
今天示範如何將昨天開闔式選單的短代碼，註冊為 UX Builder 的客製化區塊。只要熟悉 add_ux_builder_shortcode 這個函式，便可以大幅提升對 Flatsome 子佈景主題客製化的掌控度。
透過開闔式選單這個相對簡單的例子了解 add_ux_builder_shortcode 的運作方式後，我們可以再進一步處理昨天提到的第二個問題：Flatsome 內建的 Blog Posts 元素無法使用自訂內容製作投影片輪播 (slider)。
