如何在發布前實時預覽 WordPress 網站？

WordPress 是最大的用於創建網站的內容管理系統。 雖然它聲稱使用 WYSIWYG（所見即所得）編輯器界面，但事實並非如此。 舊的經典編輯器無法與 WYSIWYG 編輯器相媲美，而新的基於古騰堡塊的編輯器是視覺和技術的混合。 使用此設置，您必須始終預覽帖子和頁面以避免佈局問題。 在本文中，我們將解釋如何在發佈內容之前預覽 WordPress 網站。

為什麼要在發布前預覽內容？

根據情況有不同的預覽場景。

1. 預覽帖子或頁面

由於以下一個或多個原因，需要預覽單個帖子、頁面或自定義帖子。

• 許多功能不會出現在帖子編輯器中，您只能通過預覽或發布後查看它們。 例如，您在“外觀 > 自定義 > 附加 CSS”部分添加的任何 CSS 代碼僅適用於預覽或實時內容。
• 同樣，如果您在編輯器的文檔側邊欄中為任何元素添加自定義 CSS 類，則僅在您查看內容時才有效。
• 側邊欄和頁腳中的內容只能在完整頁面中看到，而不能在編輯器屏幕中看到。
• 由於與您的主題不兼容，可能存在佈局問題。 例如，對於圖像的全寬和寬寬選項，許多主題將無法正常工作。 您需要檢查預覽以避免圖像在側邊欄內容上重疊。
• 使用插件插入頁眉、頁腳或正文部分的代碼在編輯器中不起作用。 例如，您可能有廣告或社交圖標的標題代碼，這些代碼僅適用於預覽或實時內容。
• 您的緩存插件可能無法正確顯示修改後的內容。 在這種情況下，如果有任何問題，您必須預覽並清除緩存。
• 幾乎每個 WordPress 網站都通過插件或主題設置使用短代碼。 這些短代碼都不適用於 Gutenberg 或 Classic 編輯器。

說了這麼多，靠編輯器裡看到的內容，不預覽就發佈出來，簡直就是傻逼。

2. 預覽別人的帖子

以上所有原因都適用於查看您網站中的單個帖子或頁面。 但是，這些是網站所有者或發佈內容的人的情況。 但還有另一種情況，您或您的編輯想要在發布前分享帖子。 例如，您可能需要在內容上線之前將內容分享給您的客戶以獲得批准。 這也可以在 WordPress 中將帖子鏈接發送給任何人以進行審查或預覽。

3. 主題更改預覽

預覽整個站點或隨機頁面還有另外一個原因。 WordPress 有數以千計的免費和高級主題，您無法激活每個主題來測試站點的佈局。 解決方案是測試 WordPress 存儲庫中可用的任何主題的實時預覽，或者在不激活的情況下安裝在您的站點上。 這將有助於在不影響實時用戶的情況下識別佈局問題並了解外觀。

SEO 優惠：使用 Semrush Pro 14 天特別免費試用優化您的網站。

如何在發布前預覽 WordPress 網站？

讓我們解釋所有可能的解釋，涵蓋上述所有場景。

預覽單個帖子或頁面

好的部分是您可以在 WordPress 中預覽帖子或頁面內容，而無需額外的插件。

• 當您在 Gutenberg 塊編輯器中時，單擊“發布”或“更新”按鈕旁邊顯示的“預覽”鏈接。 創建新帖子時您會看到“發布”按鈕，編輯已發布的帖子時會看到“更新”按鈕。

• 您將看到一個下拉列表，其中顯示了多個預覽選項 - 桌面、平板電腦或移動設備。

• 默認情況下，編輯器中的預覽將顯示為“桌面”模式，您可以選擇平板電腦或移動視圖來立即更改編輯器中的視圖。 您可以僅將其用作初步預覽以檢查文本/圖像內容，因為其他代碼和佈局在編輯器中將無效。

• 要查看完整預覽，請選擇設備模式並單擊“在新選項卡中預覽”選項。 這將在新的瀏覽器選項卡中打開帖子並應用您在模板其他地方應用的所有代碼、短代碼和佈局更改。

請記住，預覽包括所有效果，如 CSS、腳本、短代碼，並應用帶有側邊欄、頁腳等的全局佈局。您可以在上面的實時預覽屏幕截圖中註意到在編輯器中找不到的多個問題。 [google-translator] 短代碼和第一個側邊欄小部件不起作用。 您可以在點擊“發布”或“更新”按鈕之前解決問題並修復它們。

如果您仍在為帖子和頁面使用經典編輯器或在經典編輯器界面使用自定義帖子類型，請先單擊“保存草稿”按鈕。 現在，您將在帖子標題下方看到一個永久鏈接，然後單擊它。

這將在新的瀏覽器選項卡中打開實時帖子預覽。 您可以讓預覽選項卡保持打開狀態並繼續更新頁面內容。 每當您再次單擊永久鏈接時，它都會更新已打開的預覽選項卡。

允許通過與任何人共享鏈接進行預覽

當您在瀏覽器地址欄中看到預覽 URL 時，它具有 preview_id、preview_nonce 和 preview=true。 正如 StackExchange 文章中所述，WordPress 有一種機制可以根據帖子的狀態來拉取預覽。 有一些插件可用於創建帶有自定義帖子 URL 的過期隨機數，您可以與任何人共享。

• 轉到“插件> 添加新”部分並在搜索框中搜索“預覽”。
• 這將過濾許多插件，找到公共帖子預覽插件並在您的網站上安裝/激活它。

• 創建一個新帖子並將其保存為草稿，以便在側邊欄中看到一個額外的“啟用公共預覽”選項。 請記住，此選項僅在自動保存運行或單擊“預覽”鏈接左側的“保存草稿”鏈接後才會出現。

• 選中“啟用公共預覽”框以查看顯示的預覽 URL。

• 單擊顯示在 URL 旁邊的“複製預覽 URL”按鈕將鏈接複製到剪貼板。 現在，您可以與任何您想查看帖子預覽的人共享此 URL。 當您想限制訪問時，只需轉到您的帖子並禁用“啟用公共預覽”複選框。 或者發布帖子也會使公共預覽 URL 無效，因為您已經發布了帖子。
• 限制訪問或發布帖子後，任何查看預覽 URL 的人都會收到 WordPress 錯誤消息，提示“沒有可用的公共預覽！”。

WordPress SEO：使用免費的 WordPress SEO 指南優化 WordPress 網站。

用不同的主題預覽整個網站

這是 WordPress 的默認功能，您不需要任何額外的插件。 當您想預覽幾個主題而不在您的實時站點上激活它們時，它也是最有用的選項。 但是，您需要安裝主題才能使用主題預覽功能。 您可以通過 WordPress 管理面板以兩種方式使用主題預覽。

如果您想從 WordPress.org 存儲庫安裝/預覽主題或在您的站點上預覽已安裝的主題，請按照說明進行操作。

• 當您在 WordPress 管理面板中時，轉到“外觀 > 自定義”部分以打開自定義程序。
• 它將使用您當前的主題顯示您網站主頁的實時預覽。 在下面的示例中，您可以看到定制器正在顯示 Astra 主題的實時預覽，然後單擊“更改”按鈕。

• 您將看到如下所示的屏幕，其中顯示了您網站上所有已安裝的主題以及切換到 WordPress.org 主題的選項。
• 對於已安裝的主題，單擊“實時預覽”按鈕進入預覽屏幕。

• 如果您想測試任何 WordPress.org 主題，請從側邊欄中單擊該選項以查看主題。 您可以使用搜索框來過濾您的主題，然後單擊“安裝和預覽”按鈕。

• 例如，我們將主題更改為 GeneratePress 並在不激活的情況下進行如下預覽。 您還可以通過單擊顯示側邊欄底部的圖標將設備顯示切換到桌面、平板電腦或移動設備。

• 這種方法的一大優點是您可以單擊預覽頁面上的任何內部鏈接，並使用新主題查看該頁面的預覽。
• 預覽後，您可以關閉定制器或改回原來的主題。 或者，單擊“激活並發布”按鈕在您的網站上應用新主題並使其生效。

下一個選項是通過轉到“外觀>主題”部分來預覽僅安裝在您網站上的主題。 將鼠標懸停在鼠標上，然後單擊顯示在要預覽的主題上的“實時預覽”按鈕。 這將帶您進入定制器屏幕，您可以在其中預覽上述方法中所述的任何鏈接。

最後的話

許多用戶不知道 WordPress 中可用的各種預覽選項。 我們希望本文能幫助您在發布新主題之前預覽 WordPress 網站，或者僅預覽和共享單個帖子 URL。