Cách Lấy Shortcode – Emebed Template Elementor Để Dùng Nhiều Nơi (Không Cần Plugin)

Bài viết này hướng dẫn cách tái sử dụng một template Elementor ở nhiều nơi trên website mà không cần plugin, giúp bạn chỉ cần chỉnh sửa một lần, mọi vị trí khác sẽ tự động cập nhật — giải pháp hiệu quả cho người dùng Elementor Free.

Bạn đang dùng Elementor Free và muốn tạo một bảng giá hoặc khối giao diện dùng lại ở nhiều nơi bằng shortcode? Elementor không cung cấp sẵn tính năng đó trong bản miễn phí. Tuy nhiên, chỉ cần vài dòng code đơn giản, bạn có thể hiển thị bất kỳ template nào bằng shortcode mà không cần cài thêm plugin!

Trong bài viết này, mình sẽ hướng dẫn bạn cách hiển thị shortcode template Elementor trong admin và cách tự tạo shortcode để sử dụng template ở bất kỳ đâu. Hoàn toàn nhẹ, dễ hiểu và chuẩn SEO.

Cách gọi Template trong Elementor Free

1. Vấn đề thường gặp với Elementor Free

• Bạn tạo bảng giá hoặc section đẹp trong Elementor.
• Nhưng lại không thể dùng lại template đó ở nơi khác (bài viết, trang khác, widget…).
• Elementor Pro có tính năng “Global Widget” nhưng bạn đang dùng bản Free.
• Không có shortcode sẵn để nhúng template vào bất kỳ chỗ nào.

👉 Giải pháp: Tự tạo một shortcode hiển thị template bằng ID!

2. Cách lấy shortcode template qua ID

• Trong phần Elementor Templates (Thư viện giao diện), bạn sẽ thấy cột “Shortcode” như sau:

Shorcode template Elelemtor copy và dùng bất cứ đâu

[wpshare247_template id="123"]

• Bạn có thể copy shortcode này dán vào bất kỳ đâu:
  • Bài viết
  • Trang
  • HTML widget
  • Code tùy chỉnh
• Nội dung từ Elementor Template sẽ được hiển thị đúng như thiết kế.

2.1. Mở functions.php (hoặc tạo plugin riêng)

Bạn có 2 lựa chọn:

• Chèn trực tiếp vào file functions.php của theme con ( bài viết này hướng dẫn ).
• Hoặc tạo một plugin nhỏ nếu muốn giữ code riêng.

2.2. Dán đoạn code sau vào:

/*[wpshare247_template id="123"]*/

if (!class_exists('WPS247_Elementor_Shortcode')) {
    class WPS247_Elementor_Shortcode {

        public function __construct() {
            // Hook vào admin để thêm cột
            add_filter('manage_elementor_library_posts_columns', [$this, 'add_shortcode_column']);
            add_action('manage_elementor_library_posts_custom_column', [$this, 'render_shortcode_column'], 10, 2);

            // Đăng ký shortcode
            add_shortcode('wpshare247_template', [$this, 'render_template_shortcode']);

            // Thêm JS copy shortcode vào admin footer
            add_action('admin_footer', [$this, 'print_admin_js']);
        }

        // Thêm cột mới trong admin template
        public function add_shortcode_column($columns) {
            $columns['wpshare247_shortcode'] = 'Shortcode';
            return $columns;
        }

        // Hiển thị shortcode trong cột
        public function render_shortcode_column($column, $post_id) {
            if ($column === 'wpshare247_shortcode') {
                $shortcode = '[wpshare247_template id="' . esc_attr($post_id) . '"]';
                echo '<span class="wps247-copy-shortcode" data-shortcode="' . esc_attr($shortcode) . '" style="cursor:pointer; color:#2271b1;" title="Click để copy">'
                    . esc_html($shortcode) .
                    '</span><br/>✅ Nhấp vào shortcode để Copy';
            }
        }


        // Hàm xử lý shortcode thực sự
        public function render_template_shortcode($atts) {
            $atts = shortcode_atts([
                'id' => '',
            ], $atts);

            if (empty($atts['id'])) return '';

            if (!did_action('elementor/loaded')) {
                return '<!-- Elementor not loaded -->';
            }

            $content = \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($atts['id']);
            return $content ?: '<!-- Không tìm thấy template -->';
        }

        // In JS vào admin footer để xử lý copy
        public function print_admin_js() {
            // Kiểm tra có phải đang ở trang quản lý Elementor Templates hay không
            if (isset($_GET['post_type']) && $_GET['post_type'] === 'elementor_library') : ?>
                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        const shortcodeEls = document.querySelectorAll('.wps247-copy-shortcode');
                        shortcodeEls.forEach(el => {
                            el.addEventListener('click', function () {
                                const shortcode = this.dataset.shortcode;
                                navigator.clipboard.writeText(shortcode).then(() => {
                                    this.style.color = '#0a0';
                                    this.innerText = '✔ Đã copy!';
                                    setTimeout(() => {
                                        this.innerText = shortcode;
                                        this.style.color = '#2271b1';
                                    }, 1500);
                                }).catch(err => {
                                    alert('Không thể copy: ' + err);
                                });
                            });
                        });
                    });
                </script>
            <?php endif;
        }

    }

    new WPS247_Elementor_Shortcode();
}

2.3. Kiểm tra kết quả

• Truy cập WP-Admin > Templates > Saved Templates (hoặc Thư viện Elementor).
• Bạn sẽ thấy cột “Shortcode” hiển thị như: [wpshare247_template id="123"]
• Copy đoạn shortcode đó, dán vào bài viết, trang hoặc widget HTML bất kỳ.

3. Cách gọi template trong 1 template khác Elementor

Chúng ta vẫn dùng code trong functions.php

add_action('elementor/widgets/register', function($widgets_manager) {
    if (!class_exists('\Elementor\Widget_Base')) return;


    class WPSHARE247_Template_Embed_Widget extends \Elementor\Widget_Base {
        public function get_name() {
            return 'wpshare247_template_embed';
        }

        public function get_title() {
            return 'Template Embed (WPSHARE247)';
        }

        public function get_icon() {
            return 'eicon-post';
        }

        public function get_categories() {
            return ['general'];
        }

        protected function register_controls() {
            $this->start_controls_section('section_content', ['label' => 'Chọn Template']);

            $this->add_control('template_id', [
                'label' => 'Template',
                'type' => \Elementor\Controls_Manager::SELECT2,
                'options' => $this->get_elementor_templates(),
                'label_block' => true,
            ]);

            $this->end_controls_section();
        }

        protected function render() {
            $template_id = $this->get_settings_for_display('template_id');
            if ($template_id && did_action('elementor/loaded')) {
                echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($template_id);
            } else {
                echo '<div style="color:red;">Không thể hiển thị template.</div>';
            }
        }

        private function get_elementor_templates() {
            $options = [];
            $templates = get_posts([
                'post_type' => 'elementor_library',
                'posts_per_page' => -1,
            ]);
            foreach ($templates as $template) {
                $options[$template->ID] = $template->post_title;
            }
            return $options;
        }
    }

    
    //---------
    $widgets_manager->register(new \WPSHARE247_Template_Embed_Widget());
});

Lưu ý quan trọng

• Template phải được thiết kế bằng Elementor.
• Bạn không cần Elementor Pro, chỉ dùng bản Free vẫn hoạt động tốt.
• Shortcode này hiển thị chính xác giao diện như trong Elementor editor.
• Có thể tái sử dụng một bảng giá, khối testimonial, form, FAQ ở nhiều nơi mà chỉ cần chỉnh 1 chỗ.

Xem Video Hướng Dẫn Chi Tiết

4. Top Plugin Free giúp tái sử dụng Template Elementor

4.1. Elementor – Header, Footer & Blocks Template

• Chức năng chính: Tạo các khu vực như header/footer/bảng giá tùy chỉnh bằng Elementor và tái sử dụng ở nhiều nơi.
• Ưu điểm: Hỗ trợ nhúng qua hook, tương thích với theme phổ biến như Astra, GeneratePress…

Ultimate Addons for Elementor (Formerly Elementor Header & Footer Builder)

4.2. Anywhere Elementor (Lite)

• Chức năng chính: Tạo template và nhúng vào bất kỳ nơi nào bằng shortcode, tương tự cách bạn đang làm thủ công.
• Lưu ý: Có bản Pro nhưng bản Free đã đủ cho nhu cầu nhúng cơ bản.

AnyWhere Elementor

4.3. Essential Addons for Elementor (Free)

• Chức năng chính: Cung cấp rất nhiều widget mới, trong đó có EA Template Element – giúp tái sử dụng template dễ dàng.

Essential Addons for Elementor – Popular Elementor Templates and Widgets

Nếu bạn không biết code hoặc muốn giải pháp nhanh, các plugin như Anywhere Elementor (Lite) hoặc Elementor – Header Footer Blocks là lựa chọn rất đáng thử. Tuy nhiên, nếu bạn cần hiệu năng cao và ít phụ thuộc, thì cách viết shortcode thủ công như bài hướng dẫn vẫn là giải pháp tối ưu.