Thêm widget giá vàng trực tiếp vào WordPress

Nếu bạn vận hành blog tài chính, trang bán vàng hoặc trang danh mục đầu tư trên WordPress, bạn có thể thêm giá vàng trực tiếp mà không cần plugin, API key hay PHP. Trình cấu hình widget giá vàng tạo sẵn một iframe. Chỉ cần dán vào block Custom HTML hoặc widget HTML của Elementor.

Cấu hình widget

Mở goldprice.dev/widgets/gold-price. Bạn không cần đăng ký hay tạo API key. Chọn tiền tệ, đơn vị (ounce troy hoặc gram), tuổi vàng, giao diện và ngôn ngữ. Trang sẽ tạo iframe tương ứng để bạn sao chép.

Nếu không cần tùy chỉnh, đây là iframe mặc định cho USD, ounce troy, vàng 24K, giao diện tự động và tiếng Anh:

<iframe src="https://goldprice.dev/embed/xau?currency=USD&unit=oz&karat=24&theme=auto&locale=en" title="Live gold price" width="360" height="190" loading="lazy" style="border:0;width:100%;max-width:360px" referrerpolicy="strict-origin-when-cross-origin"></iframe>

Widget tự làm mới mỗi 60 giây. Widget được lưu trữ trên goldprice.dev nên API key không bao giờ xuất hiện trong mã nguồn trang của bạn.

Cài bằng block Custom HTML của Gutenberg

1. Mở bài viết hoặc trang trong trình chỉnh sửa block.
2. Thêm block Custom HTML bằng cách tìm "Custom HTML" trong danh sách block.
3. Dán đoạn iframe vào block.
4. Chuyển sang Preview để kiểm tra, sau đó xuất bản.

WordPress tự lưu trữ thường cho phép quản trị viên lưu iframe. Nếu bạn đăng nhập bằng vai trò biên tập viên hoặc cộng tác viên không có quyền unfiltered_html, WordPress sẽ xóa thẻ <iframe> khi lưu và block trở thành trống. Xem tài liệu Custom HTML block của WordPress để biết cách cấp quyền. Cách đơn giản nhất là nhờ quản trị viên dán block hoặc cấp quyền unfiltered_html cho vai trò đó.

Thêm vào sidebar hoặc khu vực template

Block Custom HTML cũng dùng được ngoài nội dung bài viết. Trong Appearance → Widgets, thêm widget Custom HTML vào sidebar hoặc footer rồi dán iframe. Nếu dùng block theme, hãy thêm block Custom HTML vào một template part trong Site Editor. Widget sẽ hiển thị tại vị trí đó và tự làm mới.

Cài bằng Elementor

1. Mở trang bằng Elementor.
2. Kéo widget HTML vào trang.
3. Dán iframe vào khung mã của widget HTML.
4. Cập nhật trang.

Widget HTML của Elementor hiển thị trực tiếp mã đánh dấu, bao gồm iframe. Xem hướng dẫn widget HTML của Elementor để biết khi nào nên dùng nó thay cho các lựa chọn nhúng khác.

Các tùy chọn của widget

Trình cấu hình đặt các lựa chọn này thành query parameter trong src của iframe. Giá trị không hợp lệ sẽ quay về mặc định, vì vậy lỗi gõ không làm hỏng widget.

Bạn hiếm khi cần tự tạo URL này. Chọn các tùy chọn trên trình cấu hình rồi sao chép iframe được tạo.

Nếu widget không hiển thị

Khoảng trống ở vị trí iframe trên WordPress tự lưu trữ. Nguyên nhân thường là thiếu quyền unfiltered_html: trình chỉnh sửa đã xóa thẻ khi lưu. Hãy thêm lại block bằng tài khoản quản trị viên hoặc kiểm tra nội dung đã lưu trong chế độ xem mã.

Không hiển thị trên WordPress.com. Các gói miễn phí và cấp thấp của WordPress.com không cho phép iframe tùy chỉnh trong block Custom HTML. Bạn cần gói có tính năng lưu trữ phù hợp. Xem trang hỗ trợ Custom HTML của WordPress.com để biết gói nào hỗ trợ.

Widget tải được nhưng bị cắt. Thẻ cần chiều rộng tối thiểu 320px và chiều cao 190px. Nếu sidebar hoặc cột nội dung hẹp hơn, hãy đặt widget trong khu vực toàn chiều rộng.

Khi nào nên dùng API

Iframe hỗ trợ tiền tệ, đơn vị, tuổi vàng, giao diện và ngôn ngữ nhưng vẫn là một thẻ có bố cục cố định. Nếu bạn muốn đặt giá trong giao diện riêng, cần thiết kế khác hoặc muốn lấy dữ liệu lịch sử cho biểu đồ, hãy dùng API và tự xây phần hiển thị. Công cụ quy đổi giá vàng là một ví dụ hoạt động với nhiều tiền tệ và đơn vị.

Giấy phép và ghi nguồn

Iframe chính thức được nhúng miễn phí trên trang cá nhân và thương mại nếu không bị sửa đổi và phần ghi nguồn vẫn hiển thị. Xóa thương hiệu hoặc trình bày widget như nguồn dữ liệu của riêng bạn cần thỏa thuận Enterprise riêng. Dữ liệu API thô dùng trong sản phẩm của bạn tuân theo giấy phép thương mại từ gói Pro. Xem đầy đủ tại Điều khoản dịch vụ và hướng dẫn ghi nguồn.