Thêm danh mục con vào Element Title trong UX Builder của Theme Flatsome

UX Builder của Flatsome có nhẽ là trình kéo thả tạo trang web dễ dàng nhất hiện tại. Sở hữu Element Title, chúng ta mang thể thêm danh mục con (gọi là sub-menu) để điều hướng khách hàng bằng plugin hoặc tiêu dùng code chia sẻ 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 mang thể xem trực tiếp demo cái thme shop 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 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 những đoạn code dưới đây là lưu lại.

Tạo element mới

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 mang 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:

ví như không muốn hiển thị các menu trên trên điện thoại thì thêm đoạn CSS vào Custom CSS Mobile nhé

chúc bạn thành công !

schedule