Hướng dẫn thêm nút “Edit Layout with UX Builder” cho Custom Post Type trên Flatsome

Linh 16-11-2025 16-11-2025 234 lượt xem

Trong quá trình xây dựng website với Flatsome, nhiều bạn muốn tùy chỉnh layout riêng cho các Custom Post Type như tour, dịch vụ, portfolio, dự án… bằng UX Builder. Tuy nhiên, mặc định Flatsome chỉ hỗ trợ UX Builder cho các post type cơ bản.

Để làm việc hiệu quả hơn, bạn có thể thêm nút “Edit layout with UX Builder” ngay trên thanh Admin Bar khi đang xem bài viết của CPT. Điều này giúp thao tác chỉnh sửa layout nhanh chóng, tiết kiệm thời gian và giảm rủi ro nhầm lẫn.

Bài viết này sẽ hướng dẫn bạn tạo layout riêng bằng UX Block, sau đó gắn layout vào Custom Post Type, và cuối cùng thêm nút Edit layout ngay trong Admin Bar bằng đoạn code PHP tối ưu.

Vì sao cần thêm UX Builder cho Custom Post Type?

Nhiều website dùng Flatsome thường tạo CPT như:

  • tour (du lịch)
  • product-catalog
  • service
  • project
  • landing pages

Và bạn muốn mỗi bài viết của CPT này sử dụng layout thiết kế bằng UX Builder, thay vì hiển thị layout mặc định.

Lợi ích:

  • Dễ dàng quản lý giao diện từng loại nội dung
  • Thay đổi đồng loạt mà không cần chỉnh từng bài
  • Tích hợp linh hoạt với ACF, MetaBox, shortcode
  • Tối ưu trải nghiệm người dùng & tăng tỷ lệ chuyển đổi

Quy trình tổng quan

Để thêm nút “Edit Layout with UX Builder”, bạn sẽ đi qua 3 bước:

Bước 1: Tạo UX Block làm layout cho CPT

Vào UX Blocks → Add New
→ Thiết kế layout → Publish.
→ Lấy ID Block (VD: 123).

Bước 2: Gắn ID block vào Options (ACF Options hoặc WordPress Options)

Bạn có thể lưu ID block:

  • qua ACF Options
  • hoặc qua update_option() ở bài viết này hướng dẫn gắn qua update_option

Bước 3: Thêm code để hiển thị nút Edit Layout trong Admin Bar

Đoạn code bạn cung cấp đã làm việc này.

Dưới đây là phân tích và bản code hoàn chỉnh.

Code hoàn chỉnh: Thêm UX Builder cho CPT + nút Edit layout

Bạn đặt toàn bộ code vào file:
functions.php hoặc plugin riêng.

update_option(‘flatsome_tour_layout_block’, 28647);
add_action(‘wp_before_admin_bar_render’, function () {
    global $wp_admin_bar, $post;
    if (! is_singular(‘tour’) || ! current_user_can(‘edit_post’, $post->ID)) return;
    $post_types = get_ux_builder_post_types();
    // Add link for editing custom tour layout block
    if (array_key_exists(‘blocks’, $post_types)) {
        // Lấy block layout được gán cho tour
        $tour_layout_id = get_option(‘flatsome_tour_layout_block’); // ID UX Block layout tour
        if (! $tour_layout_id) {
            return;
        }
        $the_post = get_post($tour_layout_id);
        if ($the_post) {
            $wp_admin_bar->add_menu(array(
                ‘parent’ => ‘edit’,
                ‘id’     => ‘edit_uxbuilder_tour_layout’,
                ‘title’  => ‘Edit tour layout with UX Builder’,
                ‘href’   => ux_builder_edit_url($post->ID, $tour_layout_id),
            ));
        }
    }
});
add_action(‘init’, function () {
    if (function_exists(‘add_ux_builder_post_type’)) {
        add_ux_builder_post_type(‘tour’);
    }
});

Giải thích

1. Kiểm tra đang xem CPT và có quyền chỉnh sửa

if (! is_singular('tour') || ! current_user_can('edit_post', $post->ID)) return;

2. Kiểm tra UX Builder hỗ trợ post type

$post_types = get_ux_builder_post_types();

3. Lấy ID UX Block layout

Bạn gán ID UX Block trực tiếp:

$tour_layout_id = get_option('flatsome_tour_layout_block');

4. Thêm nút vào Admin Bar

Khi mở bài viết tour, bạn sẽ thấy:

📌 Edit tour layout with UX Builder

Nút sẽ mở đúng UX Builder cho block layout mà bạn đã chỉ định.

5. Kích hoạt UX Builder cho CPT

add_ux_builder_post_type('tour');

Nếu muốn kích hoạt cho nhiều CPT:

add_ux_builder_post_type('service');
add_ux_builder_post_type('project');
add_ux_builder_post_type('landing');

Mở rộng: Gắn block layout bằng ACF Options

Nếu muốn quản lý layout linh hoạt hơn:

→ Tạo field ACF Options: tour_layout_block
→ Gắn ID block qua UI
→ Lấy bằng:

$tour_layout_id = get_field('tour_layout_block', 'option');

Gợi ý SEO từ khóa liên quan

Bạn có thể tối ưu bài viết với các từ khóa:

  • edit layout custom post type Flatsome
  • UX Builder custom post type
  • Flatsome UX Block tutorial
  • thêm UX Builder cho CPT
  • tùy chỉnh layout tour Flatsome
  • edit layout CPT WordPress

Kết luận

Việc thêm nút “Edit Layout with UX Builder” cho Custom Post Type giúp bạn quản lý và chỉnh sửa giao diện nhanh chóng, đặc biệt hữu ích khi làm website du lịch, tour, dịch vụ, bất động sản… Bạn có thể dễ dàng mở UX Builder và tùy chỉnh layout chỉ với một cú click.

Có thể bạn quan tâm

Hướng dẫn reset thời gian element Countdown trong flatsome đơn giản
Hướng dẫn thêm nút “Edit Layout with UX Builder” cho Custom Post Type trên Flatsome
Hướng Dẫn Khắc Phục Lỗi “Xung Đột Chỉnh Sửa” Trong UXBuilder Khi Nhiều Người Cùng Sửa Một Bài Viết