Trong Ux Builder của Flatssome, đôi khi bạn muốn gọi 1 Menu nào đó, thì thường bỏ menu đó vào widget rồi gọi Widget Area ra. Ở các phiên bản sau , Flatsome có phát triển Element Menu , tuy nhiên phải điền link và text của từng link rất mất công. Ở dưới đây mình đã viết sẵn các Element Menu để giúp mình gọi các Menu ra ngoài nhanh hơn.

Element 1:

Gọi 1 Menu ra bên ngoài. Sẽ thêm 1 Element tên là Menu Danh mục, mình sẽ chọn menu để  hiển thị ra bên ngoài:

function devvn_ux_builder_menu_element(){
    // Lấy danh sách menu có sẵn trong WordPress
    $menu_options = array();
    $menus = wp_get_nav_menus();
    
    if ( ! empty( $menus ) ) { // Kiểm tra nếu có menu
        foreach ( $menus as $menu ) {
            $menu_options[ $menu->term_id ] = $menu->name;
        }
    } else {
        $menu_options[''] = __('No menus found', 'flatsome'); // Thêm tùy chọn nếu không có menu
    }

    // Đăng ký element cho UX Builder
    add_ux_builder_shortcode('devvn_menu', array(
        'name'      => __('Menu danh mục', 'flatsome'),
        'category'  => __('Content', 'flatsome'),
        'priority'  => 1,
        'options' => array(
            'menu_id' => array(
                'type'    => 'select',
                'heading' => __('Select Menu', 'flatsome'),
                'options' => $menu_options, // Hiển thị danh sách menu
                'default' => '',
            ),
         'container_class' => array(
    'type'        => 'textfield',  // Đảm bảo dùng đúng kiểu dữ liệu
    'heading'     => __('Container Class', 'flatsome'),
    'description' => __('Enter a custom class for the container.', 'flatsome'),
    'default'     => '',
    'placeholder' => __('custom-class', 'flatsome'),
),

        ),
    ));
}
add_action('ux_builder_setup', 'devvn_ux_builder_menu_element');


// Tạo shortcode để hiển thị menu được chọn
function devvn_menu_func($atts){
    $atts = shortcode_atts(array(
        'menu_id' => '',
        'container_class' => '',
    ), $atts);

    // Kiểm tra nếu menu ID tồn tại
    if ( ! empty( $atts['menu_id'] ) ) {
        return wp_nav_menu( array(
            'menu'       => $atts['menu_id'],
            'container'  => 'div',
            'container_class' => esc_attr( $atts['container_class'] ),
            'echo'       => false,
        ));
    }

    return 'No menu selected.';
}
add_shortcode('devvn_menu', 'devvn_menu_func');

Element 2:

Sẽ tạo ra 1 element tên Danh mục sản phẩm, khi gọi ra, chọn danh mục sản phẩm cho nó, nó sẽ show danh mục hiện tại và các danh mục con của nó:

unction devvn_ux_builder_product_categories_element(){
    // Đăng ký element cho UX Builder với ô tìm kiếm danh mục sản phẩm
    add_ux_builder_shortcode('devvn_product_categories', array(
        'name'      => __('Danh mục sản phẩm - Dùng cho menu header', 'flatsome'),
        'category'  => __('Content', 'flatsome'),
        'priority'  => 1,
        'options' => array(
            'category_id' => array(
                'type'       => 'select',
                'heading'    => __('Select Product Category', 'flatsome'),
                'full_width' => true,
                'config'     => array(
                    'placeholder' => __( 'Select product category..', 'flatsome' ),
                    'termSelect'  => array(
                        'taxonomies' => array( 'product_cat' ), // Chỉ tìm kiếm danh mục sản phẩm
                    ),
                ),
            ),
            'container_class' => array(
                'type'        => 'textfield',
                'heading'     => __('Container Class', 'flatsome'),
                'description' => __('Enter a custom class for the container.', 'flatsome'),
                'default'     => '',
                'placeholder' => __('custom-class', 'flatsome'),
            ),
        ),
    ));
}
add_action('ux_builder_setup', 'devvn_ux_builder_product_categories_element');


function devvn_product_categories_func($atts){
    $atts = shortcode_atts(array(
        'category_id'     => '',
        'container_class' => '',
    ), $atts);

    // Kiểm tra nếu danh mục sản phẩm được chọn
    if ( ! empty( $atts['category_id'] ) ) {
        $term = get_term( $atts['category_id'], 'product_cat' );

        if ( is_wp_error( $term ) || !$term ) {
            return 'Invalid product category.';
        }

        // Lấy đường dẫn đến trang danh mục sản phẩm
        $category_link = get_term_link($term);

        if ( is_wp_error( $category_link ) ) {
            return 'Invalid category link.';
        }

        // Tạo HTML cho danh mục cha
        $output = '<div class="' . esc_attr( $atts['container_class'] ) . '">';
        $output .= '<a href="' . esc_url( $category_link ) . '" class="parent-category">' . esc_html( $term->name ) . '</a>';

        // Lấy danh sách danh mục con
        $child_categories = get_terms( array(
            'taxonomy'   => 'product_cat',
            'parent'     => $term->term_id, // Lấy danh mục con của danh mục hiện tại
            'hide_empty' => false, // Hiển thị cả danh mục không có sản phẩm
        ));

        if ( ! empty( $child_categories ) && ! is_wp_error( $child_categories ) ) {
            $output .= '<ul class="child-categories">';
            foreach ( $child_categories as $child_category ) {
                $child_category_link = get_term_link( $child_category );
                $output .= '<li><a href="' . esc_url( $child_category_link ) . '" class="child-category">' . esc_html( $child_category->name ) . '</a></li>';
            }
            $output .= '</ul>';
        }

        $output .= '</div>';

        return $output;
    }

    return 'No product category selected.';
}
add_shortcode('devvn_product_categories', 'devvn_product_categories_func');

Elenemt 3:

Sẽ tạo ra element tên là Danh mục con và cháu. Khi thêm và chọn danh mục , nó sẽ hiện ra danh mục con và cháu của danh mục đã gọi:

function devvn_ux_builder_child_categories_element() {
    // Đăng ký element cho UX Builder
    add_ux_builder_shortcode('devvn_child_categories', array(
        'name'      => __('Danh mục con và cháu', 'flatsome'),
        'category'  => __('Content', 'flatsome'),
        'priority'  => 1,
        'options'   => array(
            'category_id' => array(
                'type'       => 'select',
                'heading'    => __('Select Parent Category', 'flatsome'),
                'full_width' => true,
                'config'     => array(
                    'placeholder' => __( 'Select product parent category...', 'flatsome' ),
                    'termSelect'  => array(
                        'taxonomies' => array( 'product_cat' ), // Chỉ tìm kiếm danh mục sản phẩm
                    ),
                ),
            ),
            'container_class' => array(
                'type'        => 'textfield',
                'heading'     => __('Container Class', 'flatsome'),
                'description' => __('Enter a custom class for the container.', 'flatsome'),
                'default'     => '',
                'placeholder' => __('custom-class', 'flatsome'),
            ),
        ),
    ));
}
add_action('ux_builder_setup', 'devvn_ux_builder_child_categories_element');


function devvn_child_categories_func($atts) {
    $atts = shortcode_atts(array(
        'category_id'     => '', // Nhập danh mục cha
        'container_class' => '',
    ), $atts);

    // Kiểm tra nếu danh mục cha được nhập
    if ( ! empty( $atts['category_id'] ) ) {
        $term = get_term( $atts['category_id'], 'product_cat' );

        if ( is_wp_error( $term ) || !$term ) {
            return 'Invalid product category.';
        }

        // Tạo HTML cho danh mục cha
        $output = '<div class="' . esc_attr( $atts['container_class'] ) . '">';

        // Lấy danh sách danh mục con
        $child_categories = get_terms( array(
            'taxonomy'   => 'product_cat',
            'parent'     => $term->term_id, // Lấy danh mục con của danh mục cha
            'hide_empty' => false, // Hiển thị cả danh mục không có sản phẩm
        ));

        if ( ! empty( $child_categories ) && ! is_wp_error( $child_categories ) ) {
            $output .= '<ul class="menu">'; // Thẻ ul với class "menu" cho danh mục con
            foreach ( $child_categories as $child_category ) {
                $child_category_link = get_term_link( $child_category );

                // Lấy danh sách danh mục cháu của từng danh mục con
                $grandchild_categories = get_terms( array(
                    'taxonomy'   => 'product_cat',
                    'parent'     => $child_category->term_id, // Lấy danh mục cháu của danh mục con
                    'hide_empty' => false,
                ));

                // Tạo li cho danh mục con
                $output .= '<li><a href="' . esc_url( $child_category_link ) . '" class="child-category">' . esc_html( $child_category->name ) . '</a>';

                // Nếu có danh mục cháu, thêm ul với class "menu-child"
                if ( ! empty( $grandchild_categories ) && ! is_wp_error( $grandchild_categories ) ) {
                    $output .= '<ul class="sub-menu">'; // Thẻ ul với class "menu-child" cho danh mục cháu
                    foreach ( $grandchild_categories as $grandchild_category ) {
                        $grandchild_category_link = get_term_link( $grandchild_category );
                        $output .= '<li><a href="' . esc_url( $grandchild_category_link ) . '" class="grandchild-category">' . esc_html( $grandchild_category->name ) . '</a></li>';
                    }
                    $output .= '</ul>'; // Đóng ul menu-child
                }

                $output .= '</li>'; // Đóng li của danh mục con
            }
            $output .= '</ul>'; // Đóng ul menu
        }

        $output .= '</div>'; // Đóng container

        return $output;
    }

    return 'No product category selected.';
}
add_shortcode('devvn_child_categories', 'devvn_child_categories_func');