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 這個檔案:

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其他選項,這部分基本上便按照原本的預設值,不需要額外調整。
圖中左側的 TITLE 便是透過 info 引數帶入的 {{ title}} 值。

自訂範本

在前一段中,我們提到 templatethumbnail 這兩個引數。因為這兩個引數使用了 flatsome_ux_builder_templateflatsome_ux_builder_thumbnail 這兩個方法,因此需要在子佈景主題的 functions.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。其內容如下:

<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' 中稍做修改。

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 轉譯用的範本)

接著,我們要將這些功能正式套用在子佈景主題中:

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)。

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料