UX Builder của Flatsome có lẽ là trình kéo thả tạo trang web thuận lợi nhất hiện tại. Với Element Title, chúng ta với thể thêm danh mục con (gọi là sub-menu) để điều hướng quý khách bằng plugin hoặc dùng code san sớt cho bạn sau đây. Kết quả sau hoàn thành sẻ được như hình dưới đây hoặc bạn có thể xem trực tiếp demo cái thme cửa hàng hoa tại đây.
Thêm danh mục con vào Element Title trong UX Builder của Theme Flatsome
[caption id="attachment_2255" align="alignnone" width="1024"]
Thêm danh mục con vào Element Title trong UX Builder của Theme Flatsome[/caption]
Anh chị em mở file \wp-content\themes\flatsome-child\functions.php và lần lượt dán đoạn các đoạn code dưới đây là lưu lại.
Tạo element mới
function ttit_add_element_ux_builder()
add_ux_builder_shortcode('title_with_cat', array(
'name' => __('Title With Category'),
'category' => __('Content'),
'info' => ' text ',
'wrap' => false,
'options' => array(
'ttit_cat_ids' => array(
'type' => 'select',
'heading' => 'Categories',
'param_name' => 'ids',
'config' => array(
'multiple' => true,
'placeholder' => 'Select...',
'termSelect' => array(
'post_type' => 'product_cat',
'taxonomies' => 'product_cat'
)
)
),
'style' => array(
'type' => 'select',
'heading' => 'Style',
'default' => 'normal',
'options' => array(
'normal' => 'Normal',
'center' => 'Center',
'bold' => 'Left Bold',
'bold-center' => 'Center Bold',
),
),
'text' => array(
'type' => 'textfield',
'heading' => 'Title',
'default' => 'Lorem ipsum dolor sit amet...',
'auto_focus' => true,
),
'tag_name' => array(
'type' => 'select',
'heading' => 'Tag',
'default' => 'h3',
'options' => array(
'h1' => 'H1',
'h2' => 'H2',
'h3' => 'H3',
'h4' => 'H4',
),
),
'color' => array(
'type' => 'colorpicker',
'heading' => __( 'Color' ),
'alpha' => true,
'format' => 'rgb',
'position' => 'bottom right',
),
'width' => array(
'type' => 'scrubfield',
'heading' => __( 'Width' ),
'default' => '',
'min' => 0,
'max' => 1200,
'step' => 5,
),
'margin_top' => array(
'type' => 'scrubfield',
'heading' => __( 'Margin Top' ),
'default' => '',
'placeholder' => __( '0px' ),
'min' => - 100,
'max' => 300,
'step' => 1,
),
'margin_bottom' => array(
'type' => 'scrubfield',
'heading' => __( 'Margin Bottom' ),
'default' => '',
'placeholder' => __( '0px' ),
'min' => - 100,
'max' => 300,
'step' => một,
),
'size' => array(
'type' => 'slider',
'heading' => __( 'Size' ),
'default' => 100,
'unit' => '%',
'min' => 20,
'max' => 300,
'step' => một,
),
'link_text' => array(
'type' => 'textfield',
'heading' => 'Link Text',
'default' => '',
),
'link' => array(
'type' => 'textfield',
'heading' => 'Link',
'default' => '',
),
),
));
add_action('ux_builder_setup', 'ttit_add_element_ux_builder');
Hiển thị Title with Category vào UX builder
như vậy, dán đoạn code dưới đây vào file function.php của theme/child theme đang kích hoạt. Đoạn code này sẽ giúp hiển thị element với tên gọi Title with Category trong UX builder của Flatsome
function title_with_cat_shortcode( $atts, $content = null )
extract( shortcode_atts( array(
'_id' => 'title-'.rand(),
'class' => '',
'visibility' => '',
'text' => 'Lorem ipsum dolor sit amet...',
'tag_name' => 'h3',
'sub_text' => '',
'style' => 'normal',
'size' => '100',
'link' => '',
'link_text' => '',
'target' => '',
'margin_top' => '',
'margin_bottom' => '',
'letter_case' => '',
'color' => '',
'width' => '',
'icon' => '',
), $atts ) );
$classes = array('container', 'section-title-container');
if ( $class ) $classes[] = $class;
if ( $visibility ) $classes[] = $visibility;
$classes = implode(' ', $classes);
$link_output = '';
if($link) $link_output = '<a href="'.$link.'" target="'.$target.'">'.$link_text.get_flatsome_icon('icon-angle-right').'</a>';
$small_text = '';
if($sub_text) $small_text = '<small class="sub-title">'.$atts['sub_text'].'</small>';
if($icon) $icon = get_flatsome_icon($icon);
// fix old
if($style == 'bold_center') $style = 'bold-center';
$css_args = array(
array( 'attribute' => 'margin-top', 'value' => $margin_top),
array( 'attribute' => 'margin-bottom', 'value' => $margin_bottom),
);
if($width)
$css_args[] = array( 'attribute' => 'max-width', 'value' => $width);
$css_args_title = array();
if($size !== '100')
$css_args_title[] = array( 'attribute' => 'font-size', 'value' => $size, 'unit' => '%');
if($color)
$css_args_title[] = array( 'attribute' => 'color', 'value' => $color);
if ( isset( $atts[ 'ttit_cat_ids' ] ) )
$ids = explode( ',', $atts[ 'ttit_cat_ids' ] );
$ids = array_map( 'trim', $ids );
$parent = '';
$orderby = 'include';
else
$ids = array();
$args = array(
'taxonomy' => 'product_cat',
'include' => $ids,
'pad_counts' => true,
'child_of' => 0,
);
$product_categories = get_terms( $args );
$hdevvn_html_show_cat = '';
if ( $product_categories )
foreach ( $product_categories as $category )
$term_link = get_term_link( $category );
$thumbnail_id = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );
if ( $thumbnail_id )
$image = wp_get_attachment_image_src( $thumbnail_id, $thumbnail_size);
$image = $image[0];
else
$image = wc_placeholder_img_src();
$hdevvn_html_show_cat .= '<li class="hdevvn_cats"><a href="'.$term_link.'">'.$category->name.'</a></li>';
return '<div class="'.$classes.'" '.get_shortcode_inline_css($css_args).'><'. $Tag_name . ' Class="section-title section-title-'.$style.'"><b></b><span class="section-title-main" '.get_shortcode_inline_css($css_args_title).'>'.$icon.$text.$small_text.'</span>
<span class="hdevvn-show-cats">'.$hdevvn_html_show_cat.'</span><b></b>'.$link_output.'</' . $Tag_name .'></div><!-- .section-title -->';
add_shortcode('title_with_cat', 'title_with_cat_shortcode');
Thêm một chút CSS:
.section-title-normal
margin-bottom: 20px;
border-bottom: 0;
border-radius: 5px;
.section-title-normal
background: #e85495;
.section-title-normal b
display: none;
.section-title-normal span
margin-right: 15px;
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 0;
font-size: 20px;
color: white!important;
padding: 10px;
span.hdevvn-show-cats li
display: block;
width: auto;
float: left;
margin: 0 8px;
span.hdevvn-show-cats li a
font-size: 15px;
text-transform: none;
font-weight: 400;
margin-right: 0!important;
padding-left: 10px;
.section-title a
font-size: 14px;
margin-left: auto;
color: white;
margin-right: 10px;
giả dụ không muốn hiển thị những thực đơn trên trên điện thoại thì thêm đoạn CSS vào Custom CSS Mobile nhé
.hdevvn-show-cats
display: none;
chúc bạn thành công !
Cấm dùng các template được chia sẻ trên blog với mục đích thương mại !
THÔNG TIN TÁC GIẢ & DỊCH VỤ:
- Biên tập nội dung: Trần Nhật Sinh
- Địa chỉ: Ân Đức, Hoài Ân, Bình Định
- Nếu bạn muốn đóng ghóp giao diện hoặc yêu cầu gỡ hãy liên hệ với tôi
+ Email : transinh085@gmail.com
+ Zalo: +84 387 913 347 (SMS) - Dịch vụ:
+ Sửa lỗi, nâng cấp template
+ Tối ưu giao diện
+ Cài đặt giao diện