如何在 WordPress 中嵌入 PDF 文件

已發表: 2022-05-17

WordPress 是一個現代、靈活的網站發布平台。 您可以看到這一點的一種方式是通過它對媒體的處理方式。 您可以通過媒體庫將幾乎所有類型的文件上傳到您的站點,但是對於某些文件,您需要一些額外的支持。 如果您想學習如何在 WordPress 中嵌入 PDF 文件,您需要比簡單的圖像或視頻嵌入更多的步驟。

由於 WordPress 僅提供通用嵌入功能,因此您需要使用服務器來託管文件或為大多數用例安裝插件。 好消息是這兩種解決方案都是合適的,最重要的是,易於實施。

在本文中,我們將向您展示如何使用 Google Drive、WordPress 塊和插件在 WordPress 中嵌入 PDF 文件。 首先,值得討論一下為什麼要嵌入 PDF,並指出簡單上傳和嵌入之間的區別。

為什麼要在 WordPress 中嵌入 PDF 文件

您可能已經知道為什麼要在 WordPress 中嵌入 PDF 文件,儘管您可能不了解您將獲得的好處。 有很多,這裡只是幾個:

  • PDF 非常適合用作完整產品或服務的採樣器。 例如,如果您是平面設計師或作家,您可以製作 PDF 以供下載。
  • 根據內容,某些 PDF 可以很好地用作可重複使用的元素。 註冊表單就是一個很好的例子,或者是條款和條件文件。
  • 如果您委託白皮書或報告,則不必將它們輸入 WordPress。 相反,您可以提供文件以供下載或查看。

最後一點提出了 PDF 的常見用例。 例如,由於轉換的耗時性質,您可能不想在您的網站上重新創建有價值的 PDF 作為帖子。 但是,您可以嵌入文件並保留原生內容的所有動態和交互元素。

嵌入和上傳 PDF 文件的區別

對某些人來說這似乎很明顯,但嵌入 PDF 文件和上傳 PDF 文件是有區別的。 是的,您可以將任何文件上傳到 WordPress(當前寫作中的 SVG 除外),但這並不意味著您可以查看它。

為此,您需要某種方式讓 WordPress 與文件“對話”以顯示它。 這就是專用 PDF 查看器發揮作用的地方。 過去,在嵌入文件方面,WordPress 並不是最好的。 但是,隨著塊編輯器的出現,您將獲得更一致的工作流程,更符合 WordPress 中的其他媒體類型——稍後會更多。

如何在 WordPress 中嵌入 PDF 文件(3 種方式)

為了在 WordPress 中嵌入 PDF 文件,我們將介紹三種方法。 每一個都將適合不同的應用程序和工作流程。 因此,您選擇的是個人決定:

  1. 如果您使用 Google Drive 來託管您的文件,您可能希望將嵌入代碼添加到 WordPress 的 HTML 中。
  2. WordPress 塊編輯器有一種查看 PDF 的方法,這可能是您在前端顯示它們所需的全部內容。
  3. PDF Embedder 等插件可讓您顯示 PDF,並為讀者提供功能齊全的體驗。

我們提供的解決方案沒有任何順序,沒有一個比另一個更“正確”。 因此,請查看每一個,並選擇一個適合您的總體目標。

1. 使用 Google Drive 嵌入文件

許多網站所有者使用 Google 產品,對於那些投資於生態系統的人來說,您將了解 Google Drive 的重要性。

Google 雲端硬盤徽標。

如果您將 PDF 文件託管在雲中,並且不想移動它們,則可以相對輕鬆地將它們嵌入到您的 WordPress 網站中。 首先,轉到您在 Google Drive 中選擇的文件,然後單擊“更多操作”菜單下的“共享”選項:

Google Drive 中的共享選項。

歡迎您選擇與您想要的體驗相匹配的設置組合。 在這裡完成後,返回更多操作菜單並在新窗口中打開文件:

Google Drive 中的“在新窗口中打開”選項。

您會注意到該菜單中的選項發生了變化。 如果您打開更多操作菜單,現在將有一個嵌入項目...鏈接:

Google Drive 中的 Embed item… 選項。

單擊它會彈出一個對話框,其中包含一些 HTML 代碼。 你應該複製這個,然後返回 WordPress:

Google Drive 的嵌入項目對話框。

此時,您可以返回 WordPress 並打開要從中嵌入 PDF 的頁面。 這一次,在塊編輯器的更多操作菜單中,打開代碼編輯器

WordPress 中的代碼編輯器選項。

您在這裡的工作是為您的嵌入代碼找到正確的位置,並將其粘貼到:

將 HTML 代碼添加到 WordPress 代碼編輯器。

單擊退出代碼編輯器鏈接後,您將在頁面上看到嵌入:

嵌入在 WordPress 頁面中的 Google Drive。

然而,雖然這很容易實現,但它是一種顯示 PDF 的實用方式,因為它是iframe ,您沒有太多選擇。 如需更靈活的方法,請繼續閱讀!

2. 使用 WordPress 塊將可查看的 PDF 文件添加到您的站點

與舊的經典編輯器相比,塊編輯器可讓您以一致的方式處理各種媒體類型。 當您在 WordPress 中嵌入 PDF 文件時,這一點最為明顯。

您可以使用文件塊來嵌入各種文件,但在這種情況下,我們可以使用它來嵌入 PDF。 如果您導航到所需的帖子或頁面,您可以搜索文件塊,並且(很像圖像)您會注意到一個文件上傳器對話框:

文件塊上傳器對話框。

如果您在此處添加文件,它將作為內聯元素顯示在一個漂亮的查看器中:

使用文件塊的嵌入。

您還將看到文件的完整 URL 路徑和下載按鈕。 您可以在編輯器側邊欄中的專用塊設置中更改此設置:

WordPress 側邊欄中的文件塊設置。

在我們看來,它是比嵌入 Google Drive 更好的解決方案,但仍然只能提供一種輕鬆的體驗,您可以通過使用插件來更好地體驗。 接下來讓我們討論這個選項。

3. 使用插件在 WordPress 中嵌入 PDF 文件

如果您想定期在 WordPress 中嵌入 PDF 文件,或者想提供一流的閱讀體驗,那麼插件就是您的最佳選擇。 有幾個可供選擇,實際上,任何選項都將是一個很好的解決方案。

然而,我們喜歡 PDF Embedder,因為它有很多安裝、很多正面評價(因此其他用戶喜歡這個插件),並且它有定期更新。

PDF 嵌入器插件。

安裝並激活插件後,前往 WordPress 中的“設置”>“PDF 嵌入器”頁面:

WordPress 中的 PDF 嵌入器設置鏈接。

這裡沒有太多,因為觀眾開箱即用。 但是,您可以更改最小和最大尺寸、某些工具欄特定設置等元素:

PDF 嵌入器設置頁面。

要嵌入您的 PDF,只需將 PDF 嵌入塊添加到您的內容,然後從上傳器中選擇您的文件:

PDF 嵌入器塊顯示打開媒體庫的選項。

請注意,您還可以在此處查看阻止設置,並根據需要進行調整。 如果您之前沒有觸摸全局設置,您可能需要進行一些調整以更好地適應您的內容:

PDF 嵌入器側邊欄。

但是,這將為您提供比 Google Drive 的嵌入或本機 WordPress 選項更好的查看器。 此外,您可以升級到 PDF Embedder 的高級版本,以獲得更多功能、更好的支持等等。

如何在 WordPress 中嵌入可讀且優化的 PDF

正如您要優化圖像和視頻一樣,您也需要優化 PDF 文件。 以下是一些快速提示,可幫助您提供看起來很棒的小文件並保持豐富性:

  • 你的排版很重要——就像你網站的字體一樣重要。 我們建議您一共堅持兩種字體,並將其設置為適合所有眼睛的大小。
  • 您可以像優化圖像一樣優化 PDF。 有時,PDF 的大小可能為兆字節,因此您希望使其盡可能小。 ShortPixel 有一個出色的 PDF 壓縮器來進行圖像優化。
  • 說到這一點,如果您在 PDF 中包含圖像,請確保它們也具有正確的優化級別。

總體而言,將您的 PDF 視為您網站上的帖子或頁面:使其針對搜索和速度進行優化,而不必擔心交互性。 該文件將呈現良好並提供與原生內容相同的動態。

綜上所述

無論您在 WordPress 網站上投放什麼媒體,您都可以使用它(可以承受 SVG)。 在 PDF 方面,WordPress 具有出色的原生體驗,這可能就是您所需要的。 但是,如果您想要在 WordPress 中嵌入 PDF 文件時獲得更全面的體驗,您可以考慮其他一些因素。

例如,如果您將文件託管在 Google Drive 中,您可以將嵌入的 HTML“硬編碼”到您的內容中。 這將提供一個不錯的查看器,但它不靈活,並且如果您稍後刪除文件,可能會以斷開的鏈接和丟失的媒體結束。 相反,插件將為您提供所需的所有功能。 PDF Embedder 非常出色,但也有其他解決方案。 這裡的任務是為您的需求和工作流程選擇最佳的。

您是否需要在 WordPress 中嵌入 PDF 文件,如果需要,您將採用哪種方法? 在下面的評論部分讓我們知道!