Thêm Danh Mục Con Vào Title Element Trong UX Builder Của Flatsome

Nếu bạn nào đang dùng Flatsome Theme để làm website thì chắc hẳn không lạ gì với các Element của theme này. Vừa qua trên cộng đồng Facebook Bloger Thanhtrungit đã chia sẻ thủ thuật này.

Hôm nay mình xin được mạn phép chia sẻ lại trong mục thủ thuật website để cộng đồng người dùng của Bignet Solutions được ứng dụng.

TẠO ELEMENT MỚI

Như rất nhiều theme khác việc viết trực tiếp trong child theme gần như không hiệu quả, bởi vậy sẽ bắt buộc chúng ta phải tạo ra 1 Element trong file functions.php của child theme.

Lưu ý: Bạn phải tạo 1 file mới tên functions.php trong thư mục child themen nhé. Nếu chưa biết tạo thì có thể xem thêm hướng dẫn ở bài viết: Hướng dẫn tạo child theme cho website wordpress

Sau khi làm xong các bước trên, bạn vào giao diện quản trị theo thứ tự: Giao diện -> Sửa -> Child-Theme -> functions.php và mở file này lên. Ở đây mình đang sử dụng Editor soạn thảo Sublime Text.

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'        => 1,
      ),
      'size' => array(
        'type'    => 'slider',
        'heading' => __( 'Size' ),
        'default' => 100,
        'unit'    => '%',
        'min'     => 20,
        'max'     => 300,
        'step'    => 1,
      ),
      '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');

Thêm xong các bạn Save lại nhé, như vậy là đã thành công khởi tạo.

HIỂN THỊ TITLE WITH CATEGORY VÀO UX BUILDER

Ở trên chúng ta mới chỉ khởi tạo, giờ việc tiếp theo cần làm sẽ là thêm một Element mới với tên “Title with Category” – tên này các bạn đặt tùy ý nhé, vì các bạn tự quản lý website của mình mà.

Việc tạo ra Element này sẽ giúp chúng ta sử dụng tính năng nhanh hơn khi mà được tích hợp sẵn trong UX Builder rồi, chỉ cần bạn kéo thả là xong.

Giờ bạn hãy vào file functions.php lúc nãy và dán đoạn code dưới đây vào rồi lưu lại:

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');

Như thế là chúng ta đã xong chức năng “Thêm Danh Mục Con Vào Element Title Trong UX Builder” của Theme Flatsome rồi nhé.

Ưu điểm: Nhanh – Gọn – Lẹ chỉ với vài dòng code. Kéo thả chức năng thoải mái.

Nhược điểm: Chức năng sẽ không hiển thị ra ngoài quản trị tại phần sửa with Ux Builder, các bạn phải nhập từ “Titlte” trên thanh Search để nó tìm kiếm và hiển thị ra ngoài.

LỜI KẾT

Ở một số bài giới thiệu trước thì có hướng dẫn thêm về CSS nhưng với mình thì cứ để mặc định, bởi hôm nay mình chỉ hướng dẫn thêm tính năng này, style lại cho đẹp các bạn có thể chủ động vào theo đường dẫn: Giao diện -> Tùy biến -> Style – Custom Css để thêm.

Chúc các bạn thành công và có được kiến thức mới. Cùng chia sẻ để mọi người học tập!

Trả lời

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 *