Nhúng nhiều bài viết chỉ với một đoạn script
Để hiển thị nhiều bài viết đã được nhúng, bạn chỉ cần đặt nhiều thẻ <div class="init-embed" data-id="..."> và gọi file init-embed.js một lần duy nhất.
<div class="init-embed" data-id="123" data-origin="https://example.com"></div>
<div class="init-embed" data-id="456" data-origin="https://example.com"></div>
<div class="init-embed" data-id="789" 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.0"></script>
Script sẽ tự động quét tất cả các thẻ nhúng và hiển thị đầy đủ nội dung tương ứng. Không cần gọi lại script cho từng bài viết.
Đồng bộ dark mode động với nội dung nhúng
Plugin đã tự động nhận diện dark mode khi tải lần đầu. Tuy nhiên, nếu trang của bạn có cơ chế chuyển dark mode bằng JavaScript (không reload trang), bạn có thể đồng bộ giao diện các embed theo thời gian thực bằng cách theo dõi class của thẻ <html>:
document.addEventListener('DOMContentLoaded', () => {
function syncDarkMode() {
const isDark = document.documentElement.classList.contains('uk-light'); // tùy class của bạn
document.querySelectorAll('.init-embed').forEach(wrapper => {
wrapper.setAttribute('data-theme', isDark ? 'dark' : 'light');
});
}
syncDarkMode();
const observer = new MutationObserver(syncDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
});
Đây là một tuỳ chọn nâng cao, chỉ nên sử dụng nếu bạn cần đồng bộ theme động trong các tình huống đặc biệt như dark mode toggle.
Viết CSS tuỳ chỉnh riêng nếu cần
Các card nhúng đều có class .init-embed, bạn có thể viết CSS riêng để tùy chỉnh màu sắc, font chữ, bo góc, kích thước hình ảnh, hiệu ứng hover,…
.init-embed {
border-radius: 8px;
background-color: #f9f9f9;
}
.init-embed[data-theme="dark"] {
background-color: #1e1e1e;
color: white;
}
Lưu ý khi nhúng sản phẩm
Nếu bạn đang nhúng sản phẩm thay vì bài viết, thẻ embed sẽ sử dụng class init-embed-product thay vì init-embed. Plugin sẽ tự động nhận diện loại dữ liệu và hiển thị đúng giao diện.
Do đó, nếu bạn đang dùng JavaScript để đồng bộ dark mode hoặc muốn viết CSS tùy chỉnh, đừng quên áp dụng tương tự cho class .init-embed-product.
.init-embed-product[data-theme="dark"] {
background-color: #1e1e1e;
color: white;
}
Kết luận
Init Embed Posts không chỉ nhanh và nhẹ, mà còn cho phép bạn tùy chỉnh tối đa tại trang đích. Dù bạn nhúng nhiều bài viết, cần đồng bộ dark mode động, hay muốn áp dụng phong cách giao diện riêng, plugin đều hỗ trợ tốt mà không cần sửa code gốc.
Hãy tận dụng sự linh hoạt này để giữ giao diện trang của bạn luôn nhất quán và tối ưu trải nghiệm người dùng.
Bình luận