HomeHướng dẫn WordPress

Cách nhúng PDF và các tài liệu khác trong WordPress

Like Tweet Pin it Share Share Email

vps vultr 728

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

nhúng tài liệu trong WordPress 35

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úng tài liệu trong WordPress 1

Như trong hình ảnh, bạn nhìn thấy 2 tab General Settings 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

nhúng tài liệu trong WordPress 2

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

nhúng tài liệu trong WordPress 3

Ở màn hình tiếp theo, bạn cần bổ sung trang web của bạn ở phần Chooser/Saver domains.

nhúng tài liệu trong WordPress 4

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.

nhúng tài liệu trong WordPress 5 c

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úng tài liệu trong WordPress 6

Nhập vào tên project và click vào nút Create

nhúng tài liệu trong WordPress 7

Click vào nút liên kết Credential ở phần sidebar bên trái

nhúng tài liệu trong WordPress 8

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.

nhúng tài liệu trong WordPress 9

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

nhúng tài liệu trong WordPress 10

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

nhúng tài liệu trong WordPress 11

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’.

nhúng tài liệu trong WordPress 12

Một hộp thoại thông báo API key đã được tạo, bạn click vào Restrict Key

nhúng tài liệu trong WordPress 30

Ở 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.

nhúng tài liệu trong WordPress 26

Click vào nút Library ở sidebar bên trái.

húng tài liệu trong WordPress 21

Tìm kiếm Google Drive API và click vào nó và Enable lên

nhúng tài liệu trong WordPress 22

Quay trở lại, tìm kiếm “Google Picker API Enable lên.

nhúng tài liệu trong WordPress 23

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

nhúng tài liệu trong WordPress 14

Ở màn hình tiếp theo, bạn sẽ nhìn thấy API key.

nhúng tài liệu trong WordPress 15

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.

nhúng tài liệu trong WordPress 16

Click vào đó, bạn sẽ nhìn thấy 5 cách bạn nhúng tài liệu.

nhúng tài liệu trong WordPress 17

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.

nhúng tài liệu trong WordPress 18

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.

nhúng tài liệu trong WordPress 19

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.

nhúng tài liệu trong WordPress 20

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.

nhúng tài liệu trong WordPress 36

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.

nhúng tài liệu trong WordPress 28

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.

nhúng tài liệu trong WordPress 31

Một hộp thoại xổ ra, bạn click vào nút Get shareable link

nhúng tài liệu trong WordPress 32

Tiếp theo, bạn chọn More.

nhúng tài liệu trong WordPress 33

Ở 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.​

nhúng tài liệu trong WordPress 34

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

nhúng tài liệu trong WordPress 20

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.

getresponse_300x250

Đăng ký 30 ngày sử dụng miễn phí. Không ràng buộc. Không cần cung cấp thẻ visa. Xem cách đăng ký.

Bình luận (0)

Trả lời

Mình rất vui khi bạn đã quyết định để lại comment. Chú ý tất cả comment đều được kiểm duyệt cẩn thận nên đừng cố spam hoặc quảng cáo. Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Name. Xin cảm ơn.

Địa chỉ email của bạn sẽ không được tiết lộ Trường đánh dấu * là bắt buộc

Scroll Up