Share Code tạo Element Danh Mục Bài Viết mới xuất hiện trong UX Builder Theme Flatsome
Code phía dưới sẽ giúp tạo một cái Element Danh Mục Bài Viết mới xuất hiện trong UX Builder như ảnh trên cho theme Flatsome:
Kết quả sau khi sử dụng ta được
Đây là code, code này sẽ chèn vào functions.php của child-theme nhé!
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 | // Đăng ký custom element vào UX Builder với danh mục động function flatsome_register_custom_element_danhmuc() { if (function_exists('add_ux_builder_shortcode')) { // Lấy danh sách các danh mục (categories) $categories = get_categories(['hide_empty' => false]); $category_options = []; foreach ($categories as $category) { $category_options[$category->term_id] = $category->name; } add_ux_builder_shortcode('danhmuc', [ 'name' => __('Danh Mục Bài Viết', 'flatsome'), 'category' => __('Custom Elements', 'flatsome'), 'info' => __('Hiển thị danh sách bài viết theo danh mục.', 'flatsome'), 'options' => [ 'id' => [ 'type' => 'select', 'heading' => __('Chọn Danh Mục', 'flatsome'), 'options' => $category_options, 'default' => '', ], 'limit' => [ 'type' => 'slider', 'heading' => __('Số lượng bài viết', 'flatsome'), 'default' => 5, 'min' => 1, 'max' => 20, ], ], ]); } } add_action('init', 'flatsome_register_custom_element_danhmuc'); // Xử lý render nội dung của element function ux_builder_render_danhmuc($atts, $content = null) { $atts = shortcode_atts([ 'id' => '', 'limit' => 5, ], $atts); return do_shortcode('[danhmuc id="' . esc_attr($atts['id']) . '" limit="' . intval($atts['limit']) . '"]'); } add_shortcode('danhmuc', 'ux_builder_render_danhmuc'); function danhmuc_shortcode($atts) { $atts = shortcode_atts(array( 'id' => '', // ID danh mục 'limit' => 5 // Số lượng bài viết hiển thị ), $atts); $query_args = array( 'cat' => $atts['id'], 'posts_per_page' => $atts['limit'] ); $query = new WP_Query($query_args); if ($query->have_posts()) { ob_start(); // Chèn CSS trực tiếp echo '<style> .danhmuc_posts { display: flex; flex-direction: column; gap: 15px; } .danhmuc_item { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #eee; padding-bottom: 15px; } .danhmuc_thumb { width: 100%; max-width: 120px; height: 80px; flex-shrink: 0; border-radius: 5px; object-fit: cover; } .danhmuc_content { display: flex; flex-direction: row; gap: 15px; } .danhmuc_title { font-size: 100%; font-weight: 600; color: #333; line-height: 1.2; } .danhmuc_title:hover {color: red;} .danhmuc_excerpt { font-size: 90%; color: #666; margin-top: 5px; line-height: 1; } .danhmuc_button { font-size: 80%; color: #fff!important; background-color: #44951E; border: none; border-radius: 99px; padding: 2px 10px; text-decoration: none; display: inline-block; margin-top: 10px; } .danhmuc_button:hover { background-color: green; } </style>'; // Bắt đầu render HTML echo '<div class="danhmuc_posts">'; while ($query->have_posts()) { $query->the_post(); echo '<div class="danhmuc_item">'; echo '<div class="danhmuc_content">'; echo '<img src="' . get_the_post_thumbnail_url(null, 'thumbnail') . '" class="danhmuc_thumb" alt="' . get_the_title() . '">'; echo '<div>'; echo '<a href="' . get_the_permalink() . '" class="danhmuc_title">' . get_the_title() . '</a>'; echo '<div class="danhmuc_excerpt">' . wp_trim_words(get_the_excerpt(), 10, '...') . ' <a href="' . get_the_permalink() . '" class="danhmuc_button">Xem tiếp</a></div>'; echo ''; echo '</div>'; echo '</div>'; // Kết thúc .danhmuc_content echo '</div>'; // Kết thúc .danhmuc_item } echo '</div>'; wp_reset_postdata(); return ob_get_clean(); } else { return '<p>Không có bài viết nào.</p>'; } } add_shortcode('danhmuc', 'danhmuc_shortcode'); // Đăng ký element mới vào UX Builder function register_ux_builder_element_danhmuc() { if (function_exists('ux_builder_register_element')) { ux_builder_register_element('Danhmuc_Element', [ 'name' => __('Danh Mục Bài Viết', 'flatsome'), 'category' => __('Custom Elements', 'flatsome'), 'options' => [ 'id' => [ 'type' => 'textfield', 'heading' => __('ID Danh Mục', 'flatsome'), 'default' => '', ], 'limit' => [ 'type' => 'slider', 'heading' => __('Số lượng bài viết', 'flatsome'), 'default' => 5, 'min' => 1, 'max' => 20, ], ], ]); } } add_action('init', 'register_ux_builder_element_danhmuc'); // Tạo class xử lý shortcode trong UX Builder if (!class_exists('Danhmuc_Element')) { class Danhmuc_Element { public static function render($options) { // Gọi shortcode danhmuc đã tạo $id = isset($options['id']) ? esc_attr($options['id']) : ''; $limit = isset($options['limit']) ? intval($options['limit']) : 5; return do_shortcode('[danhmuc id="' . $id . '" limit="' . $limit . '"]'); } } } |
Bạn có hài lòng với trải nghiệm tìm kiếm thông tin, sản phẩm trên website không?
Cảm ơn bạn đã đánh giá!