FlatsomeWordpress

[Flatsome] Tạo ShortCode Tab Title Có Image Icon

1 tuần trước
0

Mặc định theme Flatsome với element “Tab” chỉ có tiêu đề là text thì đôi khi chức năng các bạn cần tab là hình thương hiệu hay icon. Thì hôm nay mình sẽ hướng dẫn các bạn làm element uxbuilder tab image

Bước 1: Copy code vào functions.php của child theme

Các bạn copy và paste toàn bộ code sau đây bỏ vào Giao diện –> Theme File Editor –> chọn sửa file functions.php, sau đó thêm đoạn code này

// Thêm icon image vào tab trong theme Flatsome
function rflatsome_ux_builder_template( $path ) {
    ob_start();
    include get_template_directory() . '/inc/builder/shortcodes/templates/' . $path;
    return ob_get_clean();
}
//
function rflatsome_ux_builder_thumbnail( $name ) {
    return get_template_directory_uri() . '/inc/builder/shortcodes/thumbnails/' . $name . '.svg';
}
//
function muatheme_com_convert_name($str) {
            $str = preg_replace("/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/", 'a', $str);
            $str = preg_replace("/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/", 'e', $str);
            $str = preg_replace("/(ì|í|ị|ỉ|ĩ)/", 'i', $str);
            $str = preg_replace("/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/", 'o', $str);
            $str = preg_replace("/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/", 'u', $str);
            $str = preg_replace("/(ỳ|ý|ỵ|ỷ|ỹ)/", 'y', $str);
            $str = preg_replace("/(đ)/", 'd', $str);
            $str = preg_replace("/(À|Á|Ạ|Ả|Ã|Â|Ầ|Ấ|Ậ|Ẩ|Ẫ|Ă|Ằ|Ắ|Ặ|Ẳ|Ẵ)/", 'A', $str);
            $str = preg_replace("/(È|É|Ẹ|Ẻ|Ẽ|Ê|Ề|Ế|Ệ|Ể|Ễ)/", 'E', $str);
            $str = preg_replace("/(Ì|Í|Ị|Ỉ|Ĩ)/", 'I', $str);
            $str = preg_replace("/(Ò|Ó|Ọ|Ỏ|Õ|Ô|Ồ|Ố|Ộ|Ổ|Ỗ|Ơ|Ờ|Ớ|Ợ|Ở|Ỡ)/", 'O', $str);
            $str = preg_replace("/(Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ)/", 'U', $str);
            $str = preg_replace("/(Ỳ|Ý|Ỵ|Ỷ|Ỹ)/", 'Y', $str);
            $str = preg_replace("/(Đ)/", 'D', $str);
            $str = preg_replace("/(\“|\”|\‘|\’|\,|\!|\&|\;|\@|\#|\%|\~|`|\=|\_|\'|\]|\[|\}|\{|\)|\(|\+|\^)/", '-', $str);
            $str = preg_replace("/( )/", '-', $str);
            return $str;
        }
function rdev_ux_builder_element(){
    add_ux_builder_shortcode('hnitmedia_com_tabs', array(
        'type' => 'container',
        'name' => __( 'Tab with Images' ),
        'image' => '',
        'category' => __( 'Content' ),
        'template' => rflatsome_ux_builder_template( 'tabgroup.html' ),
        'tools' => 'shortcodes/tabgroup/tabgroup.tools.html',
        'info' => '{{ title }}',
        'allow' => array( 'hnitmedia_com_tab' ),
 
        'children' => array(
            'draggable' => false,
            'addable_spots' => array( 'center' ),
        ),
 
        'toolbar' => array(
            'show_children_selector' => true,
            'show_on_child_active' => true,
        ),
 
        'presets' => array(
            array(
                'name' => __( 'Default' ),
                'content' => '
                [hnitmedia_com_tabs title="Tab Title"]
                    [hnitmedia_com_tab title="Tab 1 Title"][/hnitmedia_com_tab]
                    [hnitmedia_com_tab title="Tab 2 Title"][/hnitmedia_com_tab]
                    [hnitmedia_com title="Tab 3 Title"][/hnitmedia_com_tab]
                [/hnitmedia_com_tabs]
            '
            ),
        ),
 
        'options' => array(
 
            'title' => array(
                'type' => 'textfield',
                'heading' => __( 'Title' ),
                'default' => __( '' ),
            ),
 
            'style' => array(
                'type' => 'select',
                'heading' => __( 'Style' ),
                'default' => 'line',
                'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/nav-styles.php' ),
            ),
 
            'type' => array(
                'type' => 'select',
                'heading' => __( 'Type' ),
                'default' => 'horizontal',
                'options' => array(
                    'horizontal' => 'Horizontal',
                    'vertical' => 'Vertical',
                )
            ),
 
            'nav_style' => array(
                'type' => 'radio-buttons',
                'heading' => 'Nav Style',
                'default' => 'uppercase',
                'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/nav-types-radio.php' ),
            ),
 
            'nav_size' => array(
                'type' => 'radio-buttons',
                'heading' => __( 'Size' ),
                'default' => 'medium',
                'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/text-sizes.php' ),
            ),
 
            'align' => array(
                'type' => 'radio-buttons',
                'heading' => 'Tabs Align',
                'default' => 'left',
                'options' => require( get_template_directory(). '/inc/builder/shortcodes/values/align-radios.php' ),
            ),
            'bahavior_group' => array(
                'type' => 'group',
                'heading' => __( 'Behavior' ),
                'options' => array(
                    'event' => array(
                        'type'    => 'radio-buttons',
                        'heading' => __( 'Activate' ),
                        'description' => 'On hover takes effect in non-edit mode.',
                        'default' => '',
                        'options' => array(
                            ''      => array( 'title' => 'On click' ),
                            'hover' => array( 'title' => 'On hover' ),
                        ),
                    ),
                ),
            ),
            'advanced_options' => require( get_template_directory(). '/inc/builder/shortcodes/commons/advanced.php'),
        ),
    ));
    add_ux_builder_shortcode( 'hnitmedia_com_tab', array(
        'type' => 'container',
        'name' => __( 'MT Tab Panel' ),
        'template' => rflatsome_ux_builder_template('tab.html' ),
        'info' => '{{ title }}',
        'require' => array( 'hnitmedia_com_tabs' ),
        'hidden' => true,
        'wrap' => false,
 
        'options' => array(
            'title' => array(
                'type' => 'textfield',
                'heading' => __( 'Title' ),
                'default' => __( 'Tab Title' ),
                'auto_focus' => true,
            ),
           'img'    => array(
                'type'    => 'image',
                'heading' => 'Icon',
                'default' => '',
            ),
            'img_act'    => array(
                'type'    => 'image',
                'heading' => 'Icon Active',
                'default' => '',
            ),
 
        ),
    ) );
}
add_action('ux_builder_setup', 'rdev_ux_builder_element');
 
function hnitmedia_com_tab_func($params, $content = null, $tag = ''){
    $GLOBALS['tabs'] = array();
    $GLOBALS['tab_count'] = 0;
    $i = 1;
 
    extract(shortcode_atts(array(
        'id' => 'panel-'.rand(),
        'title' => '',
        'style' => 'line',
        'align' => 'left',
        'class' => '',
        'visibility' => '',
        'type' => '', // horizontal, vertical
        'nav_style' => 'uppercase',
        'nav_size' => 'normal',
        'history' => 'false',
        'event' => '',
    ), $params));
 
    if($tag == 'hnitmedia_com_tabs_vertical'){
        $type = 'vertical';
    }
 
    $content = do_shortcode( $content );
 
    $wrapper_class[] = 'tabbed-content';
    if ( $class ) $wrapper_class[] = $class;
    if ( $visibility ) $wrapper_class[] = $visibility;
 
    $classes[] = 'nav';
 
    if($style) $classes[] = 'nav-'.$style;
    if($type == 'vertical') $classes[] = 'nav-vertical';
    if($nav_style) $classes[] = 'nav-'.$nav_style;
    if($nav_size) $classes[] = 'nav-size-'.$nav_size;
    if($align) $classes[] = 'nav-'.$align;
    if($event) $classes[] = 'active-on-' . $event;
 
 
    $classes = implode(' ', $classes);
 
    $return = '';
 
    if( is_array( $GLOBALS['tabs'] )){
 
        foreach( $GLOBALS['tabs'] as $key => $tab ){
            if($tab['title']) $id = flatsome_to_dashed($tab['title']);
            $active = $key == 0 ? ' active' : ''; // Set first tab active by default.
            $tabs[] = '<li class="tab'.$active.' has-icon" data-code="'.hnitmedia_com_convert_name($tab['title']).'"><a href="#tab_'.hnitmedia_com_convert_name($id).'">'.flatsome_get_image( $tab['img'], 'thumbnail').flatsome_get_image( $tab['img_act'], 'thumbnail').'<h3>'.$tab['title'].'</h3></a></li>'; //flatsome_get_image( $tab['img'], 'thumbnail')
            $panes[] = '<div class="panel'.$active.' entry-content" id="tab_'.$id.'">'.do_shortcode( $tab['content'] ).'</div>';
            $i++;
        }
        if($title) $title = '<h4 class="uppercase text-'.$align.'">'.$title.'</h4>';
        $return = '
        <div class="'.implode(' ', $wrapper_class).' hnitmedia_com_tabs">
            '.$title.'
            <ul class="'.$classes.'">'.implode( "\n", $tabs ).'</ul><div class="tab-panels">'.implode( "\n", $panes ).'</div></div>';
    }
 
 
    return $return;
}
function hnitmedia_com_ux_tab( $params, $content = null) {
    extract(shortcode_atts(array(
        'title' => '',
        'title_small' => '',
        'img' => '',
        'img_act' => ''
    ), $params));
 
    $x = $GLOBALS['tab_count'];
    $GLOBALS['tabs'][$x] = array(
        'img' => $img,
        'img_act' => $img_act,
        'title' => sprintf( $title, $GLOBALS['tab_count'] ),
        'content' =>  $content
    );
    $GLOBALS['tab_count']++;
}
 
 
add_shortcode('hnitmedia_com_tabs', 'hnitmedia_com_tab_func');
add_shortcode('hnitmedia_com_tabs_vertical', 'hnitmedia_com_tab_func');
add_shortcode('hnitmedia_com_tab', 'hnitmedia_com_ux_tab' );

Bước 2: Thêm code CSS trang trí cho tab

Bạn truy cập Flatsome -> Advanced -> Custom CSS để thêm đoạn code css sau

.hnitmedia_com_tabs > .nav .tab {display:flex;
    margin: 0;
}
.hnitmedia_com_tabs .nav{margin-bottom:15px}
.hnitmedia_com_tabs > .nav .tab a {text-align:center;
   display: inline-block;border:none;
    overflow: hidden;
    position: relative;
    padding: 12px 10px;
    font-size: 15px;
    color: black;
}
.hnitmedia_com_tabs > .nav .tab.active a {
  background: #2196F3;
    border: none;
    box-shadow: none;
}
.hnitmedia_com_tabs .nav-vertical > li + li {
    border-top: 0
}
.hnitmedia_com_tabs > .nav .tab a > img {width:100px;height:100px;
    margin: 0 auto;
}
.hnitmedia_com_tabs > .nav .tab a > img:nth-child(2) {
    display: none;
}
.hnitmedia_com_tabs > .nav .tab.active a > img:nth-child(1) {
    display: none;
}
.hnitmedia_com_tabs > .nav .tab.active a > img:nth-child(2) {
    display: block;
}
.hnitmedia_com_tabs > .nav .tab a:before {
    display: none;
}
.hnitmedia_com_tabs .nav h3 {text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 15px;
    color: black;
    text-align: center;
}
.hnitmedia_com_tabs .nav .active h3 {
    color: #fff;
}
.hnitmedia_com_tabs > .tab-panels {
    width: 100%;
padding:20px;}
.hnitmedia_com_tabs .tab-panels .row {
    margin: 0;
}
.hnitmedia_com_tabs .tab-panels .panel .row .col {
    padding: 0 5px 5px;
}
.hnitmedia_com_tabs .nav.nav-vertical a{border-top: 1px solid #d2d2d2;text-align:center}
.hnitmedia_com_tabs .nav-vertical{margin-bottom:0}
1 tuần trước
0

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button