Bạn muốn nhúng PDF và các tài liệu khác trong WordPress?
Trong bài viết hôm nay mình sẽ chia sẻ cách nhúng PDF và các tài liệu khác trong WordPress một cách chuyên nghiệp.
Chúng ta sẽ sử dụng plugin Embed Any Document Plus để giải quyết vấn đề này.
Giới thiệu plugin Embed Any Document Plus
Embed Any Document Plus là plugin WordPress tốt nhất để nhúng file PDF và các file tài liệu khác trong WordPress. Plugin này cũng là cách cải thiện trải nghiệm của khách truy cập trang web của bạn.
Họ có thể đọc trực tuyến file PDF và các tài liệu khác mà không cần cài đặt plugin cho trình duyệt, cũng như không cần tải file về máy tính.
Với plugin này, bạn có thể dễ dàng nhúng tài liệu được lưu trữ từ Dropbox, Google Drive và Box.com. Chức năng của plugin có lẽ giống như các trang chia sẻ tài liệu trực tuyến như Scribd và SlideShare.
Các định dạng file được hỗ trợ:
- Microsoft Word (docx, docm, dotm, dotx)
- Microsoft Excel (xlsx, xlsb, xls, xlsm)
- Microsoft PowerPoint (pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm)
- Adobe Portable Document Format (pdf)
- Text files (txt)
- TIFF Images (tif, tiff)
- Adobe Illustrator (ai)
- Scalable Vector Graphics (svg)
Plugin này có 2 phiên bản: phiên bản miễn phí trên WordPress.org với chức năng ít hơn và phiên bản đầy đủ bán trên Codecanyon với giá $24.
Cách nhúng PDF và các tài liệu khác trong WordPress
Đầu tiên bạn cài đặt và plugin Embed Any Document Plus. Sau khi plugin được kích hoạt, bạn đi tới Settings -> Embed Any Document Plus để cấu hình plugin.
Như trong hình ảnh, bạn nhìn thấy 2 tab General Settings và Cloud Settings.
Ở tab General Settings, bạn nhìn thấy nhiều tùy chọn cho phép bạn thay đổi kích thước khung hiển thị tài liệu, có hiển thị nút Download hay không, text của nút Download, và có thể hiển thị kích thước file hay không.
Những tùy chọn này bạn có thể thay đổi cho từng tài liệu được nhúng.
Chuyển sang Tab Cloud Setting. Ở đây bạn sẽ cầu hình plugin để kết nối với các dịch vụ lưu trữ đám mây bao gồm Dropbox, Google Drive, và Box.com. Nhiệm vụ của bạn là vào từng dịch vụ và sinh ra API key. Sau đó bạn sao chép API Key được sinh ra vào đây. Và click vào nút Save Changes sau khi hoàn thành
Cách lấy Droxbox API Key
Bạn cần tạo App ‘Drop-ins’ trong Droxbox để lấy API key. Làm theo bước sau để lấy API Key
Đầu tiên, bạn cần click vào link này.
Ở phần Choose an API, bạn chọn tùy chọn Dropbox API.
Ở phần Choose the type of access you need, bạn chọn Full Drop box
Tiếp theo, nhập vào tên cho app
Click vào cái checkbox để chấp thuận điều khoản của Dropbox API và click vào nút Create App.
Ở màn hình tiếp theo, bạn cần bổ sung trang web của bạn ở phần Chooser/Saver domains.
Bây giờ bạn sẽ copy App Key và paste và phần API key ở màn hình cấu hình của plugin.
Lấy Google Drive API
Lấy Google Drive API là phần phức tạp và lằng nhằng nhất. Bạn cần 2 thông tin để plugin hoạt động với Google Drive bao gồm Client ID cùng với API key.
Đầu tiên, bạn click vào link này.
Tiếp theo, bạn click vào nút ‘Create Project’.
Nhập vào tên project và click vào nút Create
Click vào nút liên kết Credential ở phần sidebar bên trái
Click vào tab OAuth consent, nhập vào product name và click vào nút Save. Các trường khác bạn để trống.
Bây giờ bạn chuyển sang tab Credentials. Click vào nút Dropdown box ‘Create Credentials” và chọn OAuth Client ID
Chọn Web Application như là kiểu ứng dụng, nhập vào địa chỉ website của bạn ở phần Authorized Javascript origins và click vào nút Create
Bây giờ bạn có Client ID được tạo. Tiếp theo bạn cần tạo API key. Bạn lại click vào nút ‘Create credentials” và click vào ‘API Key’.
Một hộp thoại thông báo API key đã được tạo, bạn click vào Restrict Key.
Ở màn hình Key Restriction bạn chọn HTTP referrers (web site) và nhập vào thông tin website theo định dạng *.yourdomain.com/*. Click vào nút Save để lưu lại thông tin cấu hình.
Click vào nút Library ở sidebar bên trái.
Tìm kiếm Google Drive API và click vào nó và Enable lên
Quay trở lại, tìm kiếm “Google Picker API và Enable lên.
Bây giờ bạn copy Client ID và API key từ Credentials và paste chúng vào phần Cloud Settings của plugin trong WordPress Admin
Lấy API key của Dropbox.com
Cách lấy API key của Drobox.com tương đối đơn giản.
Click vào link này.
Đăng nhập vào tài khoản Box.com
Nhập vào tên app và click vào nút ‘Create Application’
Ở màn hình tiếp theo, bạn sẽ nhìn thấy API key.
Cách nhúng tài liệu
Plugin đã tích hợp chức năng nhúng tài liệu ngay trong màn hình post editor. Ở đây bạn sẽ nhìn thấy nút Add Document.
Click vào đó, bạn sẽ nhìn thấy 5 cách bạn nhúng tài liệu.
Upload Document.
Tùy chọn này cho phép bạn có thể tải tài liệu từ máy tính của bạn lên host. Ngay khi bạn tải lên bạn click vào nút Insert. Plugin sẽ tự động sinh ra shortcode và chèn vào bài viết.
Add from URL
Cách nhúng tài liệu này cũng giống như nhúng hình ảnh từ các trang web khác vào bài viết của bạn. Bạn chỉ cần paste vào URL của tài liệu và click vào nút Add URL.
Add from Dropbox
Nếu bạn có muốn nhúng tài liệu lưu trữ trong Drobox, click vào Add from DropBox. Lúc này bạn chỉ cần tìm tài liệu bạn muốn chèn.
Add from Drive
Ở thời điểm bài viết này, mặc dù mình đã làm theo đúng hướng dẫn của plugin, Nhưng khi chọn Add From Drive vẫn bị lỗi ‘The API developer key is invalid.’ rất khó chịu. Cách fix tạm thời là bạn mở file ead.js (nằm trong /wp-content/plugins/embed-any-document-plus/js) và comment dòng code này.
Hiện tại plugin Drivr Lite của chính tác giả này, anh ấy cũng đã comment dòng code trên. Không hiểu sao ở plugin trả tiền lại chưa thấy động tĩnh gì.
Ngay khi lỗi trên được fix, bạn sẽ nhìn thấy màn hình chọn file từ Google Drive để nhúng vào bài viết. Như bạn thấy, bạn có thể upload file trực tiếp lên Google Drive rồi nhúng vaofo bài viết. Hoặc bạn có thể chọn theo kiểu file. Giao diện hỗ trợ chức năng tìm kiếm nên bạn có thể dễ dàng tìm kiếm tài liệu bạn cần.
Một điểm bạn cần lưu ý:
Tài liệu của bạn cần phải public để có thể view trên website của bạn. Nếu không bạn sẽ nhìn thấy lỗi 403.
Các public tài liệu trong Google Drive
Mở tài liệu bạn cần public. Click vào nút Share ở góc bên trái.
Một hộp thoại xổ ra, bạn click vào nút Get shareable link
Tiếp theo, bạn chọn More.
Ở phần Link sharing, bạn click vào On - public on the web. Và click vào nút Save để lưu lại thiết lập của bạn.
Add from Box.com
Giống như các dịch vụ đám mây trên, nếu bạn có tài liệu trong Box.com, click vào Add from Box.com. Chọn tài liệu bạn muốn. Thế là xong
Lời kết
EmbedAnyDocument là plugin tốt nhất giúp bạn xây dựng trang chia sẻ tài liệu. Nó tạo ra trải nghiệm người dùng tuyệt vời khi có thể xem trực tiếp các tài liệu như pdf, excel ngay trong website của bạn.
Điểm ấn tượng là nó hỗ trợ nhiều dịch vụ lưu trữ đám mây phổ biến. Do vậy bạn không cần tiêu tốn dung lượng host để lưu trữ tài liệu. Plugin sẽ kết nối tài liệu trên các dịch vụ đám mây như Google Drive, Drobox và Drive và hiển thị một khung đọc đẹp mắt.
Nếu bạn còn biết plugin nào hay có chức năng tương tự, hãy chia sẻ trong phần comment bên dưới.
Yêu thích viết blog.