如何正確地將 WordPress 背景圖片添加到您的網站？

將 WordPress 背景圖片添加到您的網站容易嗎？ 除非您的主題不支持它，否則大多數情況下答案是肯定的。

事實上，如今許多 WordPress 主題都提供了一些輕鬆的方式來添加和更改現有的背景圖像。

您還可以使用 CSS 或插件更改 WordPress 背景圖像，這會打開選項以在頁面、帖子和類別上設置背景圖像。

本文將向您展示如何執行上述所有操作，以使您的網站以引人注目的外觀和感覺脫穎而出。

什麼是WordPress 背景圖片？

WordPress 背景圖片是應用在主要內容後面的圖片。 它們不像英雄形像那樣成為您網站的主要焦點，它們通常更加微妙並補充您網頁上的其他內容。

除了幫助創建提供更好閱讀體驗的網頁外，WP 背景圖像還提供了許多設計可能性，使您的網站在競爭對手中脫穎而出。

與競爭對手不同意味著通過在您的網站設計上付出額外的努力來提高您的品牌知名度，這並不總是那麼容易。 在這種情況下，您可以向數字機構尋求專業的網頁設計服務。

但是為什麼要改變背景呢？ 好吧，默認的可能不會吸引您或與您的品牌不一樣。 或者，也許它根本不是圖像，只是純色。 或者，也許您一開始就喜歡現有的，但現在已經厭倦了。

不管是什麼原因，讓我們嘗試改變它。

使用默認 WordPress 定制器添加WordPress背景圖像

WordPress 主題通常提供一種在背景中使用顏色或圖像的輕鬆方式。 大多數人選擇更改更符合其網站品牌和品味的背景顏色。

在本指南中，我們將使用 Woostify——電子商務網站的絕佳主題。 根據您的主題，該方法可能會略有不同。

1. 在 WordPress 儀表板中，轉到外觀 > 牆紙/背景或外觀 > 自定義 > 牆紙。

2. 單擊選擇圖像按鈕以打開媒體庫。

3. 選擇您想要的圖像。 您可以從您的計算機上載它或從媒體庫中選擇一個現有的。

4. 滿意時單擊“選擇圖像”按鈕。
5. 如果您喜歡在預覽中看到的內容，請單擊“發布”按鈕。 就是這樣！

此外，WordPress 提供了一個簡單的背景圖像編輯工具。 你可以用它來試驗一下，看看什麼尺寸、位置等是最好的。

不用擔心被任何東西卡住。 您可以隨時輕鬆返回設置並更改背景（和相關選項）。

使用 Elementor Page Builder 將 WordPress 背景圖像添加到帖子/頁面

Elementor 是一種流行的頁面構建器，可顯著加快網站製作速度。 它提供了一個免費插件，您可以使用它來添加 WordPress 背景圖像。

1. 首先，您需要安裝並激活 Elementor 插件。
2. 首先，轉到您選擇的帖子或頁面。 在默認的 WordPress 頁面編輯器上，單擊“使用 Elementor 編輯”按鈕。

Elementor 編輯器將打開。 在左側，您會看到一個菜單，其中列出了用於構建和編輯帖子/頁面的所有拖放塊。

3. 單擊頁面構建器左下角的小設置圖標。

4. 然後，選擇樣式選項卡。

5. 之後，單擊畫筆圖標以添加WordPress 背景圖像。

6. 接下來，單擊選擇圖像按鈕以調出媒體庫。

7. 選擇您想要的圖像。 您可以從您的計算機上載它或從媒體庫中選擇一個現有的。

8. 然後，單擊右下角的“插入媒體”按鈕。

現在，選定的背景圖像應出現在右側的預覽中。 您可能需要調整其他內容以確保圖像和文本等項目正確顯示。

9. 請記住按“更新”按鈕以保存所有更改並更新帖子/頁面。

此外，Elementor 為 WordPress 背景圖像提供了一些調整，如位置、附件、重複等。隨意嘗試它們以找出最佳背景。

使用插件添加 WordPress 背景圖片

有幾個免費但出色的插件可以完成添加WordPress 背景圖像的工作。 例如簡單的全屏背景圖像、高級 WordPress 背景、全背景管理器等。

為整個站點添加WordPress 背景圖像

在本指南中，我們將使用簡單的全屏背景圖像，因為它很簡單，因此得名。

該插件為您的網站提供了簡單的 WordPress 背景圖像安裝和設置。 它會使用瀏覽器自動縮放圖像。 因此，無論您的訪問者使用什麼設備，它總是會填滿屏幕。

將其付諸實施只需要幾個簡單的步驟。 有一個付費版本可以添加額外的功能。 然而，免費的就是我們所需要的。

1. 安裝並激活簡單屏幕背景圖像插件。
2. 在 WordPress 儀表板中，轉到外觀 > 全屏背景圖像。

3. 單擊選擇圖像按鈕以打開媒體庫。

4. 選擇您想要的圖像。 您可以從您的計算機上載它或從媒體庫中選擇一個現有的。

5. 滿意時單擊“選擇圖像”按鈕。
6. 最後，單擊“保存選項”按鈕並查看您的網站。 該圖像現在應該在網站上顯示為全屏 WordPress 背景圖像。

請注意，WordPress 背景圖像的插件設置會覆蓋默認的 WordPress Customizer。 這不是一件壞事，只是要牢記在心。

在特定頁面/帖子上添加WordPress 背景圖像

在本指南中，我們將使用我們上面提到的高級 WordPress 背景插件。

該插件允許使用 Gutenberg 塊添加背景。 您可以將顏色、圖像甚至視頻設置為 WordPress 背景。 它們都可以在移動設備上查看。 此外，您可以為 WordPress 背景圖像和視頻添加視差效果。

在這種情況下，我們只會將靜態背景圖片添加到內容區域，特別是帖子/頁面。

因為這適用於 Gutenberg 塊，所以如果需要，請確保從經典編輯器模式切換。

1. 安裝並激活插件。
2. 打開現有的帖子/頁面或創建一個新的。
3. 點擊左上角的加號按鈕。 然後，向下滾動到設計部分，並選擇 AWB 塊。 頂部圖標欄和側面菜單列將出現在塊旁邊。

4. 單擊側欄中的圖像按鈕。 然後單擊其下方的選擇圖像按鈕以打開媒體庫。

5. 選擇所需的圖像。 然後，單擊選擇按鈕。 完成後，您應該會看到背景圖像。

6. 在頂部圖標欄上，單擊漢堡形狀圖標。 然後，選擇全寬度選項以覆蓋整個寬度。 這完全是可選的。

在側欄中，您可以更改 WordPress 背景圖像的大小、間距、位置等。 隨意嘗試它。

現在，剩下的就是在塊內添加內容。 如果您正在編輯現有的帖子/頁面，只需將內容剪切並粘貼到塊中即可。

當您對結果感到滿意時，請記住保存帖子/頁面。

使用CSS添加WordPress 背景圖片

現在，我們將探討如何使用CSS更改 WordPress 背景圖像。 這可以使用 WordPress 定制器對整個站點或特定類別進行。

1. 在 WordPress 儀表板中，轉到外觀 >自定義以訪問 WordPress 自定義程序。

2. 向下滾動並單擊附加 CSS部分。

3. 將下面的相應代碼複製並粘貼到 CSS 字段中：

為整個站點添加WordPress 背景圖像

body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

請務必將佔位符文本“imageURL”替換為實際的圖像文件 URL。 要查看此內容，請在媒體庫中選擇您想要的圖像以查看圖像信息。

如果您了解 CSS，請隨意調整它。

在特定類別頁面上添加WordPress 背景圖像

body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

請務必將佔位符文本“imageURL”替換為實際的圖像文件 URL，並將“categoryid”替換為正確的類別名稱。

要了解類別 ID，請按照以下說明操作：

1. 在 WordPress 儀表板中，轉到帖子 > 類別。

2. 將鼠標懸停在要引用的類別的編輯文本上。 您將在頁面左下方看到 URL，顯示類別 ID。

在 WordPress 中使用背景圖像的最佳實踐

在 WordPress 上設置自定義背景圖像似乎是一件容易的事。 是的！ 在大多數情況下確實如此，但並非總是如此。

因此，我們建議遵循 WordPress 背景圖片最佳實踐，以盡可能多地消除問題。

在使用 WordPress 主題之前檢查背景圖像支持

不幸的是，並非所有 WordPress 主題都支持自定義背景圖像。 這通常是因為背景與主題的整體設計不匹配。 因此，開發人員選擇將其完全關閉。

因此，您應該在下載新主題時檢查功能列表，特別是如果您打算購買高級主題。 許多銷售主題的網站提供有關 WordPress 主題是否支持背景圖像的信息。

堅持使用高質量的圖像

您預期的背景圖像的分辨率通常會影響或破壞其呈現方式。 您可能會認為用手機拍攝的照片足以作為背景。 但很有可能它需要更高的質量。

您可以從 Shutterstock 等網站購買免版稅照片。 這些網站通常有專業級的圖像，可以作為大型背景圖像上傳。 您還可以在免費的圖片網站上找到很多。

背景圖像可能不會在您的 WordPress 網站上完全可見，因為其中大部分都被內容所覆蓋。 但是，它仍然顯示在整個屏幕上。 因此，如果您不使用高質量的圖像，您可能會看到拉伸背景。

優化背景圖片

與上傳到 WordPress 網站的所有照片一樣，您應該在發布之前優化背景圖像。

這對於背景圖像尤其重要，因為它們經常出現在您網站的多個頁面上。 另外，它們是大照片，佔用大量屏幕空間。 此外，較大的圖像會給服務器帶來很大的壓力。 因此，請記住優化您的背景圖片，以便您的網站快速加載。

您在這裡有兩個選擇：

• 在將背景圖像（以及您的所有網站照片）上傳到服務器之前對其進行優化。 您可以藉助 Photoshop、GIMP 和 Pixlr 等工具完成此手動過程。
• 通過安裝 WordPress 插件來自動優化過程，該插件可在上傳時調整大小和縮小圖像。

最後的想法

將 WordPress 背景圖片添加到您的網站似乎是一件小事。 但如果做得好，它可以產生巨大的影響。

此外，它可以幫助您保持在線狀態的新鮮感。 因此，您的訪問者不會對一遍又一遍地看到相同的照片感到無聊。

理想情況下，盡可能使用 WordPress 定制器添加背景圖像，因為它是專門為按預期工作而設計的。

但是，您還有其他選項來添加和更改 WordPress 背景圖像，如上所示。

現在，繼續使用您的網站背景進行創意，以直觀地吸引訪問者。