• Speedtest Internet
  • Test Code
  • Nén CSS
  • Chuyển đổi định dạng Webp
  • Mã Hóa URL
  • Shorturl
  • Login
Blog thủ thuật máy tính f4vnn
No Result
View All Result
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS
No Result
View All Result
Blog thủ thuật máy tính f4vnn
Home Tips Source

Thêm Category vào Title trong UX Builder theme Flatsome

Blog Tips f4vnn by Blog Tips f4vnn
10/05/2021
Reading Time: 7 mins read
# QUÀ TẶNG VÀ KHUYẾN MẠI
  • Đăng ký tên miền tên miền .com chỉ 199k: TẠI ĐÂY
  • Hosting giá rẻ chất lượng cao chỉ 49k/tháng: TẠI ĐÂY
  • Cloud VPS giá rẻ chất lượng cao chỉ 120k/tháng: TẠI ĐÂY
  • Website giá rẻ chỉ 2.388k: TẠI ĐÂY

  • Nội dung chính

    • Thêm Category vào Title trong UX Builder theme Flatsome
      • # Thêm element mới 
      • # Hiển thị Title with Category vào UX builder
      • # Thêm CSS làm đẹp
    • # Cách sử dụng
    • Kết luận

    Thêm Category vào Title trong UX Builder theme Flatsome: Đối với một trang Web bán hàng với nhiều Category con và sử dụng trong UX Builder thì nó không đươc tích hợp vào trong Element nếu ai không biết sử dụng code thì sẽ rất khó để thêm vào. Mình lang thang trên mạng thấy có bác chia sẻ đoạn Functions này thấy rất tuyệt nên muốn chia sẻ lại cho các bạn gà code như mình nhé.

    Thêm Category vào Title trong UX Builder theme Flatsome

    Thêm Category vào Title trong UX Builder theme Flatsome

    Việc thêm nó vào Element cúng khá đơn giản các bạn cứ làm theo các bước dưới đây để thêm nó nhé, còn Css thì các bạn có thể tùy biến hoặc dùng luôn Css chia sẻ trong bài viết nhé.

    CÓ THỂ BẠN QUAN TÂM:
    – Tổng hợp các đoạn code hay dùng cho theme bán hàng Flatsome
    – Chia sẻ code làm bảng thông báo đẹp cho WordPress
    – Tạo thanh thông báo bằng HTML và CSS cho WordPress

    # Thêm element mới 

    Trong Element của Ux Builder nó không thể custom lại bằng cách viết vào child theme, nên bắt buộc chúng ta phải tạo một Element trong file functions.php của child theme.

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

    # Hiển thị Title with Category vào UX builder

    Đoạn code sau đây sẽ giúp thêm một Element với tên “Title with Category” vào trong UX builder, khi các bạn chỉnh sửa trang bằng UX builder có thể dùng được Element này. Đoạn code bên dưới các bạn thêm vào functions.php của child theme.

    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 CSS làm đẹp

    Đã hoàn thành việc thêm Category vào Title trong UX Builder theme Flatsome, tuy nhiên, Tiêu đề có danh mục con hiển thị ra bên ngoài lúc này chưa được đẹp, việc còn lại của chúng ta là CSS lại cho nó đẹp hơn nhé!

    .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;
    }
    .hdevvn-show-cats {
        display: none;
    }

    # Cách sử dụng

    Khi các bạn muốn thêm Tiêu đề kèm các link danh mục thì vào phần sửa trang with Ux Builder, các bạn phải gõ chữ “title…” vào khung search bạn chọn Title with Category.

    Kết luận

    Hiện tại rất nhiều theme được làm Title theo định dạng này vì nó khá đẹp và hiện được nhiều Category trên thanh này. Hy vọng với cách thêm Category vào Title trong UX Builder theme Flatsome mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn. Chúc bạn thành công.

    Bài Viết Cùng Chuyên Mục
    Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL
    Tags: Add Category to Title in UX Builder of the Flatsome themeFlatsomeHow to Add Category to Title in UX Builder of the Flatsome themeThêm Category vào Title trong UX BuilderThêm Category vào Title trong UX Builder của theme Flatsome
    ShareTweetPin1Share1ShareShare

    Related Posts

    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    10/01/2023
    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    06/01/2023

    Chia sẻ Theme WordPress Wap Game chuyển từ html sang wordpress cực mượt

    14/12/2022

    Hướng dẫn cách sửa lỗi Another Update Is Currently In Progress trên WordPress

    21/08/2022

    Chia sẻ giao diện làm trang web download dành cho wordpress

    15/06/2022

    Hướng dẫn cách cài đặt WordPress trên Windows 10

    06/12/2021
    Next Post
    Hướng dẫn cách tự động tải xuống các tập Podcast mới trên IOS 14.5

    Hướng dẫn cách tự động tải xuống các tập Podcast mới trên IOS 14.5

    Cách kiểm tra Tường lửa Windows có đang chặn cổng hay không

    Cách kiểm tra Tường lửa Windows có đang chặn cổng hay không

    ☊ BLOG NGHE NHẠC DJ

    slide-dj24h

    Receive updates of our latest tutorials.

    By signing up, you agree to our Privacy Policy.

    Facebook logoTwitter logoLinked-in logo

    ✪ TÌM KIẾM NHANH TRÊN GOOGLE

    Mẹo để tìm kiếm nhanh cách sửa lỗi bạn vào Google gõ tên lỗi + từ khóa f4vnn!

    ☷ BÀI VIẾT MỚI NHẤT

    7 tiện ích mở rộng ChatGPT cho Chrome bạn có thể sử dụng

    7 tiện ích mở rộng ChatGPT cho Chrome bạn có thể sử dụng

    02/02/2023
    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    10/01/2023
    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    06/01/2023
    Hướng dẫn sửa lỗi System Idle Process chiếm CPU cao trên Windows 11

    Hướng dẫn sửa lỗi System Idle Process chiếm CPU cao trên Windows 11

    23/12/2022
    Chia sẻ Theme WordPress Wap Game chuyển từ html sang wordpress cực mượt

    Chia sẻ Theme WordPress Wap Game chuyển từ html sang wordpress cực mượt

    14/12/2022

    ☷ BÀI VIẾT XEM NHIỀU

    • Chuyển từ Google Slides sang PowerPoint và ngược lại 35.2k views
    • Làm thế nào để dừng Fixing Stage 1 trong Windows 10 30.3k views
    • Sửa lỗi Run-time error 1004 không thể chạy Macro trong Excel 17.6k views
    • Sửa lỗi A JavaScript error occurred in the main process trên Windows 10 16.6k views
    • Cách sửa lỗi Runtime Error 1004 trong Microsoft Excel 13.6k views
    • Cách sửa lỗi Bad Image 0xc000012f trong Windows 10 11.9k views
    Blog thủ thuật máy tính f4vnn

    © 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

    Giới thiệu & Bạn bè

    • Chính sách
    • Quy định
    • About Us
    • DMCA
    • Nhạc DJ24h
    • Truyện Ma
    • Vocal

    Follow Us

    No Result
    View All Result
    • Trang chủ
    • TIPS COMPUTER
      • WINDOWS
      • SERVER
      • OFFICE
      • SOFTWARE
      • GAME
      • INTERNET
      • SECURITY
    • TIPS MAC – IOS
    • TIPS MOBILE
    • TIPS SOURCE
      • TIPS WORDPRESS
      • TIPS BLOGSPOT
      • OTHER SOURCE
    • TIPS OTHER
    • REVIEWS
    • LYRICS

    © 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

    Welcome Back!

    Login to your account below

    Forgotten Password?

    Retrieve your password

    Please enter your username or email address to reset your password.

    Log In