Tiếp phần 1, phần này chúng ta sẽ hoàn thành chức năng này ra ngoài front-end (người dùng)
Để 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é)
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:
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
.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; }