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
// ------------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
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(''.$text_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.
/** 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.
Bài viết mới:
- Những mẹo sử dụng máy tính hiệu quả
- Προσφορές παιχνιδιού και ασφάλειας στην Ελλάδα με το theleonbets-casinos.com για κάθε παίκτη
- Lấy hình đại diện của video Youtube
- Προσοχή στις λεπτομέρειες και αξιοπιστία στο παιχνίδι με το https://the-nine-casinos.com για απαιτητικούς χρήστες
- Làm thế nào xóa hàng loạt các sản phẩm, đơn hàng trong woocommerce
