
為什么要添加WordPress背景圖片?
將圖像添加到您的 可以使其對訪問者更具吸引力。您可以快速吸引用戶的注意力并讓他們參與您的內容。
它還允許您根據您的品牌個性化您的網站設計。例如,您可以在背景中上傳產品或品牌吉祥物的微妙照片。
此外,您還可以或圖像幻燈片,讓您的內容栩栩如生。
但是,我們確實建議選擇不會分散注意力或難以閱讀 上內容的背景圖像。背景應該增強用戶體驗,并有助于向訪問者傳遞您的信息。
選擇適合移動設備且不會影響的背景圖像也很重要。否則,它會損害你的。
也就是說,讓我們看看添加 WordPress 背景圖像的不同方法。我們將介紹多種方法,包括使用 WordPress 主題定制器、完整站點編輯器、插件、主題構建器等。
方法 1.使用您的 WordPress 主題定制器添加背景圖像
最都帶有自定義背景支持。此功能允許您輕松設置背景圖像,如果您的主題支持,我們建議使用此方法。
但是,如果,則您的主題可能已啟用完整的網站編輯。在下一節中,我們將介紹如何使用完整的網站編輯器來更改背景圖像。
要使用定制器,您需要訪問 WordPress 后臺中的 Appearance ? Customize 頁面。這將啟動 WordPress 主題,您可以在其中更改不同的主題設置,同時查看網站的實時預覽。

要記住的重要一點是,您看到的選項會根據您使用的 WordPress 主題而有所不同。
如果您使用的是其他主題,則可能需要查找該主題的文檔或聯系主題開發人員,了解如何在定制器中找不到背景圖像時添加背景圖像。
在 Astra 主題的定制器選項中,您需要單擊左側面板中的“全局”。

之后,您將看到不同的全局選項來自定義您的 Astra 主題。
繼續并單擊“顏色”部分。

在這里,您可以更改主題顏色,包括背景顏色。您還可以自定義鏈接、正文文本、標題、邊框等。
要添加背景圖片,請向下滾動到“表面顏色”部分。然后,您可以單擊“站點背景”選項并切換到“圖像”選項卡。

之后,只需單擊“選擇背景圖像”按鈕。
這將打開WordPress媒體庫,您可以在其中從計算機上傳圖像或選擇之前上傳的圖像。

選擇背景圖像后,您需要單擊“選擇”按鈕。
這將關閉媒體彈出窗口,您將在主題定制器中看到所選背景圖像的預覽。

不要忘記單擊頂部的“發布”按鈕來存儲您的設置。
就這樣。您已成功將背景圖像添加到您的 WordPress 網站。繼續訪問您的網站以查看其實際效果。
方法 2.使用完整站點編輯器添加自定義背景圖像
如果您使用的是基于,則可以使用完整站點編輯器 (FSE) 添加自定義背景圖像。
完整的網站編輯器允許您使用塊編輯您的網站設計。這就像使用 編輯博客文章或頁面一樣。
在本教程中,我們將使用默認的 Twenty Twenty-Two 主題。要啟動完整的站點編輯器,只需從 WordPress 儀表板轉到外觀 ? 編輯器。
!
進入完整網站編輯器后,您需要在模板中添加封面塊以上傳背景圖片。
只需單擊頂部的“+”號并添加一個封面塊。

繼續并單擊封面塊中的“上傳”或“媒體庫”按鈕,將背景圖像添加到塊中。
這將打開 WordPress 媒體上傳器彈出窗口。

您可以選擇要用作網站背景的圖像。
選擇圖像后,只需單擊“選擇”按鈕即可。

將圖像添加到封面塊后,下一步是將其設置為頁面的背景。
為此,請單擊頂部的“列表視圖”圖標(帶有 3 個破折號的圖標)以打開主題元素(例如網站頁眉和頁腳)的大綱視圖。

之后,只需將所有模板元素拖放到列表視圖中的 Cover 塊下。
當它們都在那里時,封面塊的圖像將顯示為站點的背景。

之后,您可以通過單擊封面塊并選擇屏幕右上角的齒輪圖標來調整背景圖像。這將打開“阻止設置”面板。
您將找到使圖像成為固定背景、重復背景、調整其疊加層、編輯顏色等的選項。

完成后,不要忘記單擊“保存”按鈕。
就是這樣!您已使用完整的站點編輯器成功添加了背景圖像。
方法 3.使用 WordPress 主題生成器添加背景圖像
向網站添加自定義背景圖像的另一種方法是使用 WordPress 主題構建器,例如 。
它是和網站構建器。您可以獲得拖放功能,無需接觸任何代碼即可輕松自定義您的網站設計。
在本教程中,我們將使用 SeedProd Pro 版本,因為它包含主題構建器。還有一個 版本,您可以免費試用。
首先,您需要安裝并激活 SeedProd 插件。插件激活后,您將在 WordPress 儀表板中看到 SeedProd 歡迎屏幕。接下來,只需輸入您的許可證密鑰并單擊“驗證密鑰”按鈕。您可以在 SeedProd 帳戶區域找到許可證密鑰。

接下來,您需要前往 SeedProd ? WordPress 管理面板中的主題生成器。
繼續并單擊頂部的“主題”按鈕。

SeedProd 現在將提供多個主題模板供您選擇。
您可以將鼠標懸停在要使用的任何模板上,然后單擊它。讓我們在本教程中使用“Starter”主題模板。

從這里,SeedProd 將生成不同的模板,例如主頁、單篇文章、單頁、、標題等。
要添加出現在整個網站和所有主題模板上的背景圖像,請繼續并單擊Global CSS下的“編輯設計”選項。

在下一個屏幕上,您將看到可以更改的全局 CSS 設置。
只需單擊“背景”選項。

之后,您將看到 背景圖片 選項。
繼續并單擊“使用您自己的圖像”按鈕上傳您的圖片,或單擊“使用庫存圖像”按鈕搜索要用作網站背景的庫存圖像。

添加背景圖像后,SeedProd 構建器將顯示實時預覽。
該插件還提供了更改背景位置的選項。您可以選擇是否要使用全屏鍵盤蓋、重復使用等。
此外,您可以通過移動“昏暗的背景”滑塊來編輯背景圖像的暗度。分數越高,圖像越暗。

完成背景圖像編輯后,只需單擊頂部的“保存”按鈕并關閉全局CSS設置。
如果您想為網站的不同部分添加自定義背景圖像,則可以在 SeedProd 中編輯這些單獨的主題模板。
方法 4.使用插件在 WordPress 中添加自定義背景圖像
使用 WordPress 添加背景圖像比內置的 WordPress 選項靈活得多。
首先,您需要安裝并激活 插件。
這個插件可以讓你為任何帖子、頁面、類別等設置不同的背景。此外,它們將自動全屏并針對移動設備進行自我調整。
激活后,您需要訪問 外觀 ? 全屏背景圖像 配置插件設置。

系統將要求您添加許可證密鑰。您可以從購買插件后收到的電子郵件或您在插件網站上的帳戶中獲取此信息。
接下來,您需要單擊“保存選項”按鈕以激活您的密鑰。您現在可以開始向 WordPress 網站添加背景圖像了。
繼續并單擊插件設置頁面上的“添加新圖像”按鈕。

您現在應該看到背景圖像上傳屏幕。
單擊“選擇圖像”按鈕上傳或選擇圖像。選擇圖像后,您將能夠在屏幕上看到圖像的實時預覽。

接下來,您需要為此映像提供一個名稱。此名稱僅供您使用,因此您可以在此處鍵入任何內容。最后,您需要選擇要將其用作背景頁面的位置。
一旦您選擇了它是整個網站、帖子、類別、檔案還是其他地方的背景,請不要忘記保存您的更改。
您可以通過訪問外觀 ? 全屏背景圖像頁面并重復此過程,將任意數量的圖像添加到網站的不同區域。
如果您將多個圖像設置為全局使用或用于帖子、頁面和類別,則插件將自動開始將背景圖像顯示為幻燈片。
您可以在插件設置中調整圖像淡出所需的時間以及新背景圖像開始淡出的時間。

您在此處輸入的時間以毫秒為單位。1 秒是 1000 毫秒。如果您希望背景圖像在 20 秒后淡出,則需要輸入 20000。
不要忘記單擊“保存選項”按鈕來存儲您的更改。
帖子、頁面和類別的背景圖像
還允許您為單個帖子、頁面、類別、標簽等設置背景圖像。
只需編輯要顯示不同背景圖像的帖子/頁面即可。在帖子編輯屏幕上,您會注意到帖子編輯器下方新的“全屏背景圖像”框。

要將背景圖像用于類別、帖子和頁面,您需要訪問外觀 ? 全屏背景圖像頁面,然后單擊“添加新圖像”按鈕。
上傳圖片后,您可以從“選擇要顯示此圖片的上下文”下拉菜單中選擇類別、帖子、頁面、存檔和其他選項。
假設您要顯示類別頁面的背景圖像。為此,只需從下拉菜單中選擇“類別”。

該插件還提供了一個選項,可以將背景圖像限制為特定的類別、帖子和頁面。
例如,如果要為特定類別添加自定義背景圖像,則只需在“選擇要限制圖像的類別”字段下輸入類別名稱即可。
不要忘記保存您的圖像以存儲您的設置。
現在,您已成功為特定帖子、頁面和類別添加背景圖像。
方法 5.使用 CSS Hero 添加背景圖像
是一個 WordPress 插件,可讓您在不接觸任何代碼的情況下對主題進行任何更改。
您可以通過幾個簡單的步驟快速添加背景圖像。首先,您需要安裝并激活 CSS Hero。
完成此操作后,就可以開始自定義您的網站了。現在在瀏覽器中打開您的主頁。您將在中看到“使用 自定義”鏈接。

單擊該鏈接后,您將看到 CSS Hero 選項打開。將鼠標懸停在要添加圖像的區域上。
單擊所選區域時,您可以在左側邊欄中看到“背景”選項。

繼續并單擊“背景”以查看添加圖像的設置。
從那里,您可以單擊“圖像”?,F在,您可以從 Unsplash 中選擇一張圖像或上傳自己的圖像來創建您的背景。

當您單擊所需的圖像時,您會看到“應用圖像”按鈕。然后,您可以選擇圖像的大小。您可以選擇大版本,以便它在整個頁面上延伸。
點擊底部的“保存并發布”以保存您網站的背景圖像。
方法 6.使用 CSS 代碼在 WordPress 中的任何位置添加自定義背景圖像
默認情況下,WordPress 會將多個 CSS 類添加到整個 WordPress 網站的不同 HTML 元素中。您可以使用這些 輕松地將自定義背景圖像添加到單個帖子、類別、作者和其他頁面。
例如,如果您的網站上有一個名為 TV 的類別,那么當有人查看 TV 類別頁面時,WordPress 會自動將這些 CSS 類添加到 body 標簽中。
<``body` `class``=``"archive category category-tv category-4"``>
您可以使用準確查看 WordPress 將哪些 CSS 類添加到 body 標簽中。

您可以使用 either 或 CSS 類來以不同的方式設置此類別頁面的樣式。category-tv``category-4
讓我們將自定義背景圖像添加到類別存檔頁面。您需要將此 添加到您的主題中。
body.category-``tv` `{``background-image``: ``url``(``"http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"``);``background-position``: ``center` `center``;``background-size``: ``cover``;``background-repeat``: ``no-repeat``;``background-attachment``: ``fixed``;``}
不要忘記將背景圖像 URL 和類別類替換為您自己網站中的圖像。
您還可以為單個帖子和頁面添加自定義背景。WordPress 在 body 標簽中添加了一個帶有帖子或頁面 ID 的 CSS 類。您可以使用相同的 CSS 代碼,只需替換為特定于 post 的 CSS 類即可。.category-tv







