Nội dung bài viết này là chúng ta sẽ tạo một UX Builder hiển thị title đơn giản có icon đầu title (dùng fontawesome) theo các style css khác nhau, hiển thị danh mục sản phẩm woocommerce.
B1: Khai báo một UX riêng như sau
Trong function.php khai báo hàm như sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 |
// ------------Tao custom block ------------------------- function tp_ux_builder_element_title(){ add_ux_builder_shortcode('tp_ux_builder_title', array( 'name' => __('Tiêu đề'), 'category' => __('Content'), 'priority' => 1, 'options' => array( 'title_type' => array( 'type' => 'select', 'heading' => 'Loại tiêu đề', 'default' => 'Mặt định', 'options' => array( '1' => 'Type 1', '2' => 'Type 2', '3' => 'Type 3', '4' => 'Type 4', ), ), 'icon_type' => array( 'type' => 'select', 'heading' => 'Chọn icon', 'default' => 'building', 'options' => array( "fas fa-baseball-ball" => "baseball-ball", "fas fa-basketball-ball" => "basketball-ball", "fas fa-bath" => "bath", "fas fa-battery-empty" => "battery-empty", "fas fa-battery-full" => "battery-full", "fas fa-battery-half" => "battery-half", "fas fa-battery-quarter" => "battery-quarter", "fas fa-battery-three-quarters" => "battery-three-quarters", "fas fa-bed" => "bed", "fas fa-beer" => "beer", "fab fa-behance" => "fab behance", "fab fa-behance-square" => "fab behance-square", "fas fa-bell" => "bell", "far fa-bell" => "far bell", "fas fa-bell-slash" => "bell-slash", "far fa-bell-slash" => "far bell-slash", "fas fa-bezier-curve" => "bezier-curve", "fas fa-bible" => "bible", "fas fa-bicycle" => "bicycle", "fas fa-biking" => "biking", "fab fa-bimobject" => "fab bimobject", "fas fa-binoculars" => "binoculars", "fas fa-biohazard" => "biohazard", "fas fa-birthday-cake" => "birthday-cake", "fab fa-bitbucket" => "fab bitbucket", "fab fa-bitbucket" => "fab bitbucket", "fab fa-bitcoin" => "fab bitcoin", "fab fa-bity" => "fab bity", "fab fa-black-tie" => "fab black-tie", "fab fa-blackberry" => "fab blackberry", "fas fa-blender" => "blender", "fas fa-blender-phone" => "blender-phone", "fas fa-blind" => "blind", "fas fa-blog" => "blog", "fab fa-blogger" => "fab blogger", "fab fa-blogger-b" => "fab blogger-b", "fab fa-bluetooth" => "fab bluetooth", "fab fa-bluetooth-b" => "fab bluetooth-b", "fas fa-bold" => "bold", "fas fa-bolt" => "bolt", "fas fa-bomb" => "bomb", "fas fa-bone" => "bone", "fas fa-bong" => "bong", "fas fa-book" => "book", "fas fa-book-dead" => "book-dead", "fas fa-book-medical" => "book-medical", "fas fa-book-open" => "book-open", "fas fa-book-reader" => "book-reader", "fas fa-bookmark" => "bookmark", "far fa-bookmark" => "far bookmark", "fas fa-border-all" => "border-all", "fas fa-border-none" => "border-none", "fas fa-border-style" => "border-style", "fas fa-bowling-ball" => "bowling-ball", "fas fa-box" => "box", "fas fa-box-open" => "box-open", "fas fa-box-tissue" => "box-tissue", "fas fa-boxes" => "boxes", "fas fa-braille" => "braille", "fas fa-brain" => "brain", "fas fa-bread-slice" => "bread-slice", "fas fa-briefcase" => "briefcase", "fas fa-briefcase-medical" => "briefcase-medical", "fas fa-broadcast-tower" => "broadcast-tower", "fas fa-broom" => "broom", "fas fa-brush" => "brush", "fab fa-btc" => "fab btc", "fas fa-bug" => "bug", "fas fa-building" => "building", "far fa-building" => "far building", "fas fa-bullhorn" => "bullhorn", "fas fa-bullseye" => "bullseye", "fas fa-burn" => "burn", "fab fa-buromobelexperte" => "fab buromobelexperte", "fas fa-bus" => "bus", "fas fa-bus-alt" => "bus-alt", "fas fa-business-time" => "business-time", "fab fa-buysellads" => "fab buysellads", "fas fa-calculator" => "calculator", "fas fa-calendar" => "calendar", "far fa-calendar" => "far calendar", "fas fa-calendar-alt" => "calendar-alt", "far fa-calendar-alt" => "far calendar-alt", "fas fa-calendar-check" => "calendar-check", "far fa-calendar-check" => "far calendar-check", "fas fa-calendar-day" => "calendar-day", "fas fa-calendar-minus" => "calendar-minus", "far fa-calendar-minus" => "far calendar-minus", "fas fa-calendar-plus" => "calendar-plus", "far fa-calendar-plus" => "far calendar-plus", "fas fa-calendar-times" => "calendar-times", "far fa-calendar-times" => "far calendar-times", "fas fa-calendar-week" => "calendar-week", "fas fa-camera" => "camera", "fas fa-camera-retro" => "camera-retro", "fas fa-campground" => "campground", "fab fa-canadian-maple-leaf" => "fab canadian-maple-leaf", "fas fa-candy-cane" => "candy-cane", "fas fa-cannabis" => "cannabis", "fas fa-capsules" => "capsules", "fas fa-car" => "car", "fas fa-car-alt" => "car-alt", "fas fa-car-battery" => "car-battery", "fas fa-car-crash" => "car-crash", "fas fa-car-side" => "car-side", "fas fa-caravan" => "caravan", "fas fa-caret-down" => "caret-down", "fas fa-caret-left" => "caret-left", "fas fa-caret-right" => "caret-right", "fas fa-caret-right" => "caret-right", "fas fa-caret-square-down" => "caret-square-down", "far fa-caret-square-down" => "far caret-square-down", "fas fa-caret-square-down" => "caret-square-down", "far fa-caret-square-down" => "far caret-square-down", "fas fa-caret-square-left" => "caret-square-left", "far fa-caret-square-left" => "far caret-square-left", "fas fa-caret-square-left" => "caret-square-left", "far fa-caret-square-left" => "far caret-square-left", "fas fa-caret-square-right" => "caret-square-right", "far fa-caret-square-right" => "far caret-square-right", "fas fa-caret-square-up" => "caret-square-up", "far fa-caret-square-up" => "far caret-square-up", "fas fa-caret-up" => "caret-up", "fas fa-carrot" => "carrot", "fas fa-cart-arrow-down" => "cart-arrow-down", "fas fa-cart-plus" => "cart-plus", "fas fa-cash-register" => "cash-register", "fas fa-cat" => "cat", "fab fa-cc-amazon-pay" => "fab cc-amazon-pay", "fab fa-cc-amex" => "fab cc-amex", "fab fa-cc-apple-pay" => "fab cc-apple-pay", "fab fa-cc-diners-club" => "fab cc-diners-club", "fab fa-cc-discover" => "fab cc-discover", "fab fa-cc-jcb" => "fab cc-jcb", "fab fa-cc-mastercard" => "fab cc-mastercard", "fab fa-cc-paypal" => "fab cc-paypal", "fab fa-cc-stripe" => "fab cc-stripe", "fab fa-cc-visa" => "fab cc-visa", "fab fa-centercode" => "fab centercode", "fab fa-centos" => "fab centos", "fas fa-certificate" => "certificate", "fas fa-chair" => "chair", "fas fa-chalkboard" => "chalkboard", "fas fa-chalkboard-teacher" => "chalkboard-teacher", "fas fa-charging-station" => "charging-station", "fas fa-chart-area" => "chart-area", "fas fa-chart-bar" => "chart-bar", "far fa-chart-bar" => "far chart-bar", "fas fa-chart-line" => "chart-line", "fas fa-chart-pie" => "chart-pie", "fas fa-check" => "check", "fas fa-check-circle" => "check-circle", "far fa-check-circle" => "far check-circle", "fas fa-check-double" => "check-double", "fas fa-check-square" => "check-square", "far fa-check-square" => "far check-square", "fas fa-cheese" => "cheese", "fas fa-chess" => "chess", "fas fa-chess-bishop" => "chess-bishop", "fas fa-chess-board" => "chess-board", "fas fa-chess-king" => "chess-king", "fas fa-chess-knight" => "chess-knight", "fas fa-chess-pawn" => "chess-pawn", "fas fa-chess-queen" => "chess-queen", "fas fa-chess-rook" => "chess-rook", "fas fa-chevron-circle-down" => "chevron-circle-down", "fas fa-chevron-circle-left" => "chevron-circle-left", "fas fa-chevron-circle-right" => "chevron-circle-right", "fas fa-chevron-circle-up" => "chevron-circle-up", "fas fa-chevron-down" => "chevron-down", "fas fa-chevron-left" => "chevron-left", "fas fa-chevron-right" => "chevron-right", "fas fa-chevron-up" => "chevron-up", "fas fa-child" => "child", "fab fa-chrome" => "fab chrome", "fas fa-church" => "church", "fas fa-circle" => "circle", "far fa-circle" => "far circle", "fas fa-circle-notch" => "circle-notch", "fas fa-city" => "city", "fas fa-clinic-medical" => "clinic-medical", "fas fa-clipboard" => "clipboard", "far fa-clipboard" => "far clipboard", "fas fa-clipboard-check" => "clipboard-check", "fas fa-clipboard-list" => "clipboard-list", "fas fa-clock" => "clock", "far fa-clock" => "far clock", "fas fa-clone" => "clone", "far fa-clone" => "far clone", "fas fa-closed-captioning" => "closed-captioning", "far fa-closed-captioning" => "far closed-captioning", "fas fa-cloud" => "cloud", "fas fa-cloud-download-alt" => "cloud-download-alt", "fas fa-cloud-meatball" => "cloud-meatball", "fas fa-cloud-moon" => "cloud-moon", "fas fa-cloud-moon-rain" => "cloud-moon-rain", "fas fa-cloud-rain" => "cloud-rain", "fas fa-cloud-showers-heavy" => "cloud-showers-heavy", "fas fa-cloud-sun" => "cloud-sun", "fas fa-cloud-sun-rain" => "cloud-sun-rain", "fas fa-cloud-upload-alt" => "cloud-upload-alt", "fab fa-cloudscale" => "fab cloudscale", "fab fa-cloudsmith" => "fab cloudsmith", "fab fa-cloudversify" => "fab cloudversify", "fas fa-cocktail" => "cocktail", "fas fa-code" => "code", "fas fa-code-branch" => "code-branch", "fab fa-codepen" => "fab codepen", "fab fa-codiepie" => "fab codiepie", "fas fa-coffee" => "coffee", "fas fa-cog" => "cog", "fas fa-cogs" => "cogs", "fas fa-coins" => "coins", "fas fa-columns" => "columns", "fas fa-comment" => "comment", "far fa-comment" => "far comment", "fas fa-comment-alt" => "comment-alt", "far fa-comment-alt" => "far comment-alt", "fas fa-comment-dollar" => "comment-dollar", "fas fa-comment-dots" => "comment-dots", "far fa-comment-dots" => "far comment-dots", "fas fa-comment-medical" => "comment-medical", "fas fa-comment-slash" => "comment-slash", "fas fa-comments" => "comments", "far fa-comments" => "far comments", "fas fa-comments-dollar" => "comments-dollar", "fas fa-compact-disc" => "compact-disc", "fas fa-compass" => "compass", "far fa-compass" => "far compass", "fas fa-compress" => "compress", "fas fa-compress-alt" => "compress-alt", "fas fa-compress-arrows-alt" => "compress-arrows-alt" ), ), 'text_1' => array( 'type' => 'textfield', 'heading' => 'Tiêu đề chính', 'default' => 'Nhập tiêu đề chính ...', 'auto_focus' => true, ), 'text_2' => array( 'type' => 'textfield', 'heading' => 'Tiêu đề phụ', 'default' => 'Nhập tiêu đề phụ ...', 'auto_focus' => true, ), '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' ) ) ), ), )); } add_action('ux_builder_setup', 'tp_ux_builder_element_title'); |
B2: Tạo các shortcode ứng với UX Builder vừa khai báo trên như sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
function tp_ux_builder_title_func($atts){ extract(shortcode_atts(array( 'title_type' => 'L1', 'icon_type' => 'building', 'text_1' => 'Nhập tiêu đề chính ...', 'text_2' => 'Nhập tiêu đề phụ ...', ), $atts)); ob_start(); //lay category 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 ); $cat_html = ""; if ( $product_categories ) { foreach ( $product_categories as $category ) { $cat_html.= '<a href="'.get_term_link( $category ).'">'.$category->name.'</a>'; } } switch ($title_type) { case '1': echo '<div class="clearfix cf-t1-header"> <h3 class="cf-t1-left-title pull-left"><i class="'.$icon_type.'"></i>'.$text_1.'</h3> <div class="cf-t1-right-link pull-right"> '.$cat_html.' <a href="#">Xem tất cả »</a> </div> </div> '; break; case '2': break; case '3': break; case '4': break; default: echo do_shortcode('[title style="bold" text="'.$text_1.'" icon="icon-menu" class="tp-title-1"]'); break; } return ob_get_clean(); } add_shortcode('tp_ux_builder_title', 'tp_ux_builder_title_func'); |
B3: CSS cho title
Mình chỉ viết CSS cho title style đầu tiên thôi nhé các style khác các bạn có thể tham khảo thêm trong bài viết css đẹp cho title.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/** Css cho title **/ .cf-t1-header { border-bottom:solid 1px #0056a8; } .cf-t1-left-title { width:auto; background:#0056a8; color:#fff; padding:3px 10px; font-size:18px; position:relative; margin:0; } .pull-left { float:left; } .pull-left { margin-left:0 !important; } .cf-t1-left-title a { color:#fff; } .cf-t1-left-title:after { border:18px solid transparent; border-left-color:#0056a8; border-bottom-color:#0056a8; position:absolute; top:0; left:100%; content:""; } .pull-right { float:right; } .pull-right { margin-right:0 !important; } .cf-t1-right-link a:first-child { margin-left:0; } .cf-t1-right-link a { color:#555; font-size:14px; margin-left:15px; } .cf-t1-right-link a.cf-t1-more, .cf-t1-right-link a:hover { color:#0056a8; } .cf-t1-right-link a.cf-t1-more:after { content:"f101"; font-family:FontAwesome; margin-left: 4px; } .fa, .fas { padding-right: 10px; } |
B3: kéo thả và sử dụng bình thường trong ux builder của Flatsome
Đoạn code chủ yếu là minh họa cách sử dụng và vận hành là chủ yếu, các bạn có thể phát triển và đóng gói lại cho tiện sử dụng.
