[Thủ thuật] Thêm Danh mục vào Title ux builder flatsome

  • Admin
    Mình hok giỏi viết lách, cho nên đi thẳng vấn đề luôn nhé…

    Hôm nay lại rãnh, nên viết bài chia sẽ cho anh em các thêm một list Danh mục vào ux Title, mình chỉ hướng dẫn cách làm chung thôi nhé, khi các bạn thực hành nhiều sẽ nắm rõ cấu trúc, cách build 1 ux của FS. Cho nên, sau này các bạn muốn tuỳ biến override trong child-theme hay đóng thành plugins thì tuỳ nhé (cái này mình hok hướng dẫn) 😉

    Vào vấn đề chính luôn nhé, đầu tiên nói về cấu trúc thư mục build theme của FS, các bạn để ý cây thư mục (hình bên dưới) nhé

    [Thủ thuật] Thêm Danh mục vào Title ux builder flatsome Screen12

    FS xây dựng 1 UX Builder đề nằm trong đường dẫn inc/builder/shortcodes

    Bây giờ mình muốn thêm 1 Option cho ux builder là TITLE ==> mở title.php & thêm cho mình đoạn mã sau

    [Thủ thuật] Thêm Danh mục vào Title ux builder flatsome Screen10

    Ra quản trị ux builder, chọn 1 title & xem kết quả

    [Thủ thuật] Thêm Danh mục vào Title ux builder flatsome Screen11

    OK. Vậy là phần backend đã xong.


    Để hiện thị được ra ngoài front-end, ngay kế bên TITLE của thì các bạn phải thực hiện đúng file hiện thị của chúng năng đó, vậy chúng ta vào đường dẫn wp-content\themes\flatsome\inc\shortcodes tìm đến file titles_dividers.php & thêm đoạn code bên dưới (thêm trước đoạn code return section-title nhé)

    Code:
    if ( isset( $atts[ 'hdevvn_cat_ids' ] ) ) {
      $ids = explode( ',', $atts[ 'hdevvn_cat_ids' ] );
      $ids = array_map( 'trim', $ids );
      $parent = '';
      $orderby = 'include';
    } else {
      $ids = array();
    }

    $args = array(
      'include'    => $ids,
      'pad_counts' => true,
      'child_of'  => 0,
    );

    $product_categories = get_terms( 'product_cat', $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.'">
                <image src="'.$image.'"/>
                <h5>'.$category->name.'</h5>
              </a>
          </li>
        ';
      }
    }

    Đoạn code chúng ta thực hiện:

    Dòng code 1-8: lấy ID category trong quản trị (ux mà chúng ta tạo & chọn category hiện thị đó)
    Dòng code 16: Get category
    Dòng code 18-30: Lấy những thông tin cần thiết muốn hiện thị & đặt cho nó 1 bến là $hdevvn_html_show_cat
    Bây giờ muốn in nó ra thì thay thế đoạn return bằng đoạn sau:

    Code:
    return '<div class="container section-title-container" '.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.$atts['text'].$small_text.'</span>
      <span class="hdevvn-show-cats">'.$hdevvn_html_show_cat.'</span>
      <b></b>'.$link_output.'</' . $tag_name .'></div><!-- .section-title -->';

    Thêm style cho nó, cho dể nhìn

    Code:
    .hdevvn-show-cats{
      border: none !important;
    }
    span.hdevvn-show-cats li{
        display: block;
        width: 74px;
        float: left;
        margin: 0 8px;
    }
    span.hdevvn-show-cats li a{
      font-size: 11px;
    }

    nguồn : hdev.ooo


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
Thông tin tác giả
Admin
ACP
Bài viết :
380
Points :
732
Like :
109
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<