Thêm danh mục vào Title trong UX Builder Flatsome

Đăng ngày: 01/06/2019 bởi PhuocIT | Tổng 204 Lượt Xem

Đầu tiên mình xin cảm ơn anh Hung Bun đã có bài chia sẽ khá hay về bài viết này. Bài viết của anh thực hiện trên theme gốc của flatsome nhưng nhu cầu của mọi người là viết ra child theme để khi update nó không mất đi nên em xin phép copy và làm lại bài này nha 😀

Vì lý do một element của ux builder không thể custom lại bằng cách viết vào child theme, bắt buộc chúng ta phải tạo 1 element trong file functions.php của child theme.

Các bạn mở file wp-content\themes\flatsome-child\functions.php và dán đoạn code sau vào cho mình:

Tạo element mới 

  1. function ttit_add_element_ux_builder(){
  2. add_ux_builder_shortcode(‘title_with_cat’, array(
  3. ‘name’ => __(‘Title With Category’),
  4. ‘category’ => __(‘Content’),
  5. ‘info’ => ‘{{ text }}’,
  6. ‘wrap’ => false,
  7. ‘options’ => array(
  8. ‘ttit_cat_ids’ => array(
  9. ‘type’ => ‘select’,
  10. ‘heading’ => ‘Categories’,
  11. ‘param_name’ => ‘ids’,
  12. ‘config’ => array(
  13. ‘multiple’ => true,
  14. ‘placeholder’ => ‘Select…’,
  15. ‘termSelect’ => array(
  16. ‘post_type’ => ‘product_cat’,
  17. ‘taxonomies’ => ‘product_cat’
  18. )
  19. )
  20. ),
  21. ‘style’ => array(
  22. ‘type’ => ‘select’,
  23. ‘heading’ => ‘Style’,
  24. ‘default’ => ‘normal’,
  25. ‘options’ => array(
  26. ‘normal’ => ‘Normal’,
  27. ‘center’ => ‘Center’,
  28. ‘bold’ => ‘Left Bold’,
  29. ‘bold-center’ => ‘Center Bold’,
  30. ),
  31. ),
  32. ‘text’ => array(
  33. ‘type’ => ‘textfield’,
  34. ‘heading’ => ‘Title’,
  35. ‘default’ => ‘Lorem ipsum dolor sit amet…’,
  36. ‘auto_focus’ => true,
  37. ),
  38. ‘tag_name’ => array(
  39. ‘type’ => ‘select’,
  40. ‘heading’ => ‘Tag’,
  41. ‘default’ => ‘h3’,
  42. ‘options’ => array(
  43. ‘h1’ => ‘H1’,
  44. ‘h2’ => ‘H2’,
  45. ‘h3’ => ‘H3’,
  46. ‘h4’ => ‘H4’,
  47. ),
  48. ),
  49. ‘color’ => array(
  50. ‘type’ => ‘colorpicker’,
  51. ‘heading’ => __( ‘Color’ ),
  52. ‘alpha’ => true,
  53. ‘format’ => ‘rgb’,
  54. ‘position’ => ‘bottom right’,
  55. ),
  56. ‘width’ => array(
  57. ‘type’ => ‘scrubfield’,
  58. ‘heading’ => __( ‘Width’ ),
  59. ‘default’ => ,
  60. ‘min’ => 0,
  61. ‘max’ => 1200,
  62. ‘step’ => 5,
  63. ),
  64. ‘margin_top’ => array(
  65. ‘type’ => ‘scrubfield’,
  66. ‘heading’ => __( ‘Margin Top’ ),
  67. ‘default’ => ,
  68. ‘placeholder’ => __( ‘0px’ ),
  69. ‘min’ => 100,
  70. ‘max’ => 300,
  71. ‘step’ => 1,
  72. ),
  73. ‘margin_bottom’ => array(
  74. ‘type’ => ‘scrubfield’,
  75. ‘heading’ => __( ‘Margin Bottom’ ),
  76. ‘default’ => ,
  77. ‘placeholder’ => __( ‘0px’ ),
  78. ‘min’ => 100,
  79. ‘max’ => 300,
  80. ‘step’ => 1,
  81. ),
  82. ‘size’ => array(
  83. ‘type’ => ‘slider’,
  84. ‘heading’ => __( ‘Size’ ),
  85. ‘default’ => 100,
  86. ‘unit’ => ‘%’,
  87. ‘min’ => 20,
  88. ‘max’ => 300,
  89. ‘step’ => 1,
  90. ),
  91. ‘link_text’ => array(
  92. ‘type’ => ‘textfield’,
  93. ‘heading’ => ‘Link Text’,
  94. ‘default’ => ,
  95. ),
  96. ‘link’ => array(
  97. ‘type’ => ‘textfield’,
  98. ‘heading’ => ‘Link’,
  99. ‘default’ => ,
  100. ),
  101. ),
  102. ));
  103. }
  104. add_action(‘ux_builder_setup’, ‘ttit_add_element_ux_builder’);

Hiển thị nó ra front nè:

  1. function title_with_cat_shortcode( $atts, $content = null ){
  2. extract( shortcode_atts( array(
  3. ‘_id’ => ‘title-‘.rand(),
  4. ‘class’ => ,
  5. ‘visibility’ => ,
  6. ‘text’ => ‘Lorem ipsum dolor sit amet…’,
  7. ‘tag_name’ => ‘h3’,
  8. ‘sub_text’ => ,
  9. ‘style’ => ‘normal’,
  10. ‘size’ => ‘100’,
  11. ‘link’ => ,
  12. ‘link_text’ => ,
  13. ‘target’ => ,
  14. ‘margin_top’ => ,
  15. ‘margin_bottom’ => ,
  16. ‘letter_case’ => ,
  17. ‘color’ => ,
  18. ‘width’ => ,
  19. ‘icon’ => ,
  20. ), $atts ) );
  21. $classes = array(‘container’, ‘section-title-container’);
  22. if ( $class ) $classes[] = $class;
  23. if ( $visibility ) $classes[] = $visibility;
  24. $classes = implode(‘ ‘, $classes);
  25. $link_output = ;
  26. if($link) $link_output = ‘<a href=”‘.$link.‘” target=”‘.$target.‘”>’.$link_text.get_flatsome_icon(‘icon-angle-right’).‘</a>’;
  27. $small_text = ;
  28. if($sub_text) $small_text = ‘<small class=”sub-title”>’.$atts[‘sub_text’].‘</small>’;
  29. if($icon) $icon = get_flatsome_icon($icon);
  30. // fix old
  31. if($style == ‘bold_center’) $style = ‘bold-center’;
  32. $css_args = array(
  33. array( ‘attribute’ => ‘margin-top’, ‘value’ => $margin_top),
  34. array( ‘attribute’ => ‘margin-bottom’, ‘value’ => $margin_bottom),
  35. );
  36. if($width) {
  37. $css_args[] = array( ‘attribute’ => ‘max-width’, ‘value’ => $width);
  38. }
  39. $css_args_title = array();
  40. if($size !== ‘100’){
  41. $css_args_title[] = array( ‘attribute’ => ‘font-size’, ‘value’ => $size, ‘unit’ => ‘%’);
  42. }
  43. if($color){
  44. $css_args_title[] = array( ‘attribute’ => ‘color’, ‘value’ => $color);
  45. }
  46. if ( isset( $atts[ ‘ttit_cat_ids’ ] ) ) {
  47. $ids = explode( ‘,’, $atts[ ‘ttit_cat_ids’ ] );
  48. $ids = array_map( ‘trim’, $ids );
  49. $parent = ;
  50. $orderby = ‘include’;
  51. } else {
  52. $ids = array();
  53. }
  54. $args = array(
  55. ‘taxonomy’ => ‘product_cat’,
  56. ‘include’ => $ids,
  57. ‘pad_counts’ => true,
  58. ‘child_of’ => 0,
  59. );
  60. $product_categories = get_terms( $args );
  61. $hdevvn_html_show_cat = ;
  62. if ( $product_categories ) {
  63. foreach ( $product_categories as $category ) {
  64. $term_link = get_term_link( $category );
  65. $thumbnail_id = get_woocommerce_term_meta( $category>term_id, ‘thumbnail_id’, true );
  66. if ( $thumbnail_id ) {
  67. $image = wp_get_attachment_image_src( $thumbnail_id, $thumbnail_size);
  68. $image = $image[0];
  69. } else {
  70. $image = wc_placeholder_img_src();
  71. }
  72. $hdevvn_html_show_cat .= ‘<li class=”hdevvn_cats”><a href=”‘.$term_link.‘”>’.$category>name.‘</a></li>’;
  73. }
  74. }
  75. 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>
  76. <span class=”hdevvn-show-cats”>’.$hdevvn_html_show_cat.‘</span><b></b>’.$link_output.‘</’ . $tag_name .‘></div><!– .section-title –>’;
  77. }
  78. add_shortcode(‘title_with_cat’, ‘title_with_cat_shortcode’);

Thêm một chút CSS :

  1. .hdevvn-show-cats{
  2. border: none !important;
  3. }
  4. span.hdevvn-show-cats li{
  5. display: block;
  6. width: auto;
  7. float: left;
  8. margin: 0 8px;
  9. }
  10. span.hdevvn-show-cats li a{
  11. font-size: 11px;
  12. }

Leech đi đâu nhớ ghi nguồn tại Phước IT Blog - PhuocIT.Com nhé!
Cái gì cũng có cái giá của nó. Tôn trọng người khác , người khác sẽ tôn trọng lại bạn!

Bình Luận Bài Viết

Cùng Chuyên Mục

Chuyên Mục Về ADMIN

PhuocIT

Để thành công
Trước tiên ta phải tin là ta có thể
" Kinh doanh? Rất đơn giản; đó là tiền của người khác! "

Chuyên Mục

Facebook Page

Kênh Youtube Của Blog

Các Bạn Hãy Bỏ Ra 1s Theo Dõi Kênh Youtube Của Blog Nhé !!

Quảng Cáo - Ads

PhuocIT.Com
PhuocIT.Com
© 2017 By PhuocIT.Com - Blog Cá Nhân Chia Sẻ Kiến Thức Về Công Nghệ Thông Tin Author : PhuocIT