Share Code Tạo Element Danh Mục Bài Viết Mới Xuất Hiện Trong UX Builder Theme Flatsome

Code phía dưới sẽ giúp tạo một cái Element Danh Mục Bài Viết mới xuất hiện trong UX Builder như ảnh trên cho theme Flatsome:
Kết quả sau khi sử dụng ta được

Đây là code, code này sẽ chèn vào functions.php của child-theme nhé!

// Đă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 . '"]');
        }
    }
}

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 đã đánh giá!

Share Code tạo Element Danh Mục Bài Viết mới xuất hiện trong UX Builder Theme Flatsome

Tinh Cầu

Để lại một bình luận Hủy

Tinh Cầu

Share plugin thay đổi email chính và email user nhanh cho WordPress

Tổng hợp bộ mã icon của theme Flatsome mới nhất cập nhật liên tục

Download theme Flatsome Auto Update 2025

Share plugin tạo các nút liên hệ đẹp, đơn giãn dễ dùng cho WordPress

Để lại một bình luận Hủy