Init Embed Posts – Plugin nhúng bài viết nhẹ, đẹp, không cần iframe

Tính năng nổi bật

• Nhúng bài viết hoặc sản phẩm WooCommerce bằng script nhẹ, sử dụng REST API riêng tối ưu hiệu suất
• Không dùng iframe, không cần oEmbed, không phụ thuộc bên thứ ba
• Giao diện thẻ hiện đại, hiển thị đẹp trên mọi nền:
  • Với bài viết: favicon, tên trang, tiêu đề, excerpt, tối đa 5 ảnh preview
  • Với sản phẩm: ảnh đại diện, tên sản phẩm, giá, giá khuyến mãi (gạch giá), nút “Thêm vào giỏ hàng”
• Skeleton loading trong khi chờ tải dữ liệu – trải nghiệm mượt mà, không chớp nháy
• Tự động nhận diện sáng/tối theo theme của website nhúng (auto dark mode)
• Modal UI tích hợp trong trình soạn thảo để lấy mã nhúng nhanh chóng
• Viết hoàn toàn bằng Vanilla JS, không dùng jQuery hay thư viện ngoài
• Trả về dữ liệu JSON cố định, tối ưu cho cache/CDN (ví dụ: Cloudflare)
• Dùng script riêng biệt cho post (init-embed.js) và sản phẩm (init-embed-product.js)
• Hỗ trợ data-type="product" trong đoạn nhúng để nhận diện loại nội dung
• Có thể tự động chèn nút “Nhúng sản phẩm” sau phần meta của sản phẩm (tuỳ chọn bật/tắt)
• Có sẵn hook/filter để developer tùy biến giao diện và dữ liệu theo ý muốn

Hướng dẫn sử dụng

1. Kích hoạt plugin như bình thường
2. Thêm shortcode [init_embed_code] vào bài viết hoặc sản phẩm để hiện nút “Lấy mã nhúng”
3. Click nút → mở modal → chọn tùy chọn → copy đoạn code
4. Dán đoạn code vào bất kỳ website nào bạn muốn hiển thị nội dung

Ví dụ mã nhúng

<!-- Nhúng bài viết -->
<div class="init-embed" data-id="123" data-origin="https://example.com"></div>
<script async src="https://example.com/wp-content/plugins/init-embed-posts/assets/js/init-embed.js?v=1.3"></script>

<!-- Nhúng sản phẩm WooCommerce -->
<div class="init-embed-product" data-id="456" data-type="product" data-cart="Thêm vào giỏ hàng" data-origin="https://example.com"></div>
<script async src="https://example.com/wp-content/plugins/init-embed-posts/assets/js/init-embed-product.js?v=1.3"></script>

Demo: Nhúng bài viết & sản phẩm

Bạn có thể nhúng bài viết hoặc sản phẩm từ các trang khác một cách đơn giản. Ví dụ nhúng bài viết:

Tương thích và hiệu suất

• Yêu cầu WordPress 5.5 trở lên
• PHP 7.4 trở lên
• Hoạt động tốt trên mọi theme (Astra, Blocksy, Kadence…)
• Không tạo bảng CSDL, không ghi log, không tracking – siêu nhẹ và an toàn

Dành cho Developer

• init_plugin_suite_embed_posts_rest_response: chỉnh sửa JSON trả về khi nhúng bài viết
• init_plugin_suite_embed_products_rest_response: chỉnh sửa JSON trả về khi nhúng sản phẩm WooCommerce
• init_plugin_suite_embed_posts_excerpt: tùy chỉnh nội dung đoạn trích (excerpt) của bài viết nhúng
• init_plugin_suite_embed_products_excerpt: tùy chỉnh nội dung đoạn trích của sản phẩm nhúng
• init_plugin_suite_embed_posts_images: thay đổi danh sách ảnh được nhúng từ nội dung bài viết
• init_plugin_suite_embed_posts_favicon_url: can thiệp URL favicon hiển thị trong khung nhúng
• init_plugin_suite_embed_posts_view_count_keys: tùy chỉnh danh sách meta key dùng để lấy lượt xem từ post meta (ưu tiên theo thứ tự)
• init_embed_insert_locations: quyết định vị trí nút “Lấy mã nhúng” xuất hiện ở frontend

Nếu bạn là developer muốn tích hợp sâu hơn vào theme/plugin của mình, hãy xem series Init Embed Posts toàn tập – nơi tổng hợp toàn bộ hướng dẫn từ cơ bản đến nâng cao.

Bắt đầu ngay

Không cần dùng iframe lỗi thời hay API phức tạp. Init Embed Posts cho phép bạn chia sẻ nội dung WordPress ra bên ngoài một cách nhẹ nhàng, đẹp mắt và hoàn toàn nằm trong tay bạn.