你想在你的WordPress網站上添加一個背景圖片嗎?
背景圖片可以使你的網站看起來更有吸引力和活力。
在這篇文章中,我們將告訴你如何輕鬆地在你的WordPress網站上添加一個背景圖片。
為什麼要添加WordPress背景圖片?
在你的WordPress網站上添加一個背景圖片可以使它對訪問者更有吸引力。你可以迅速抓住用戶的注意力,
背景圖片還允許你根據你的品牌來個性化你的網站設計。例如,你可以在背景中上傳你的產品或品牌吉祥物的照片。
此外,你還可以添加一個YouTube視頻作為完整的背景,或一個圖像幻燈片,這將使你的內容更加生動。
然而,我們建議不要選擇會分散網站訪問者註意力的圖片。
同樣重要的是,選擇一個移動端友好的背景圖片,不會影響你的網站速度。否則,它將損害你的WordPress SEO。
這就是說,讓我們看看你可以添加WordPress背景圖片的不同方法。我們將涵蓋多種方法,包括使用WordPress主題定制器、全站編輯器、插件、主題生成器等。
方法1. 使用你的WordPress主題定制器添加一個背景圖片
大多數流行的WordPress主題都有自定義背景支持。這個功能允許你輕鬆地設置一個背景圖片,如果你的主題支持它,我們推薦這個方法。
然而,如果你的自定義菜單選項不見了,那麼你的主題可能啟用了全站編輯。在下一節,我們將介紹如何使用全站編輯器來改變你的背景圖片。
要使用定制器,你需要訪問WordPress管理中的Appearance » Customize。這將啟動WordPress主題定制器,你可以在查看你的網站的實時預覽時改變不同的主題設置。
要記住的一件重要事情是,你看到的選項將根據你使用的WordPress主題而有所不同。在本教程中,我們使用的是Astra主題。
如果你使用的是一個不同的主題,那麼你可能需要查閱該主題的文檔,或者聯繫主題的開發者,以了解如果你在定制器中添加一個背景圖片。
在Astra主題的定制器選項中,你需要在左邊的面板上點擊 “全局”。
之後,你會看到不同的全局選項來定制你的Astra主題。
繼續,點擊進入 “顏色 “部分。
在這裡,你可以改變主題顏色,包括背景顏色。你還可以定制你的鏈接、正文、標題、邊框等等。
要添加一個背景圖片,向下滾動到’Surface Color’部分。然後你可以點擊’網站背景’選項,並切換到’圖像’標籤。
之後,只需點擊 “選擇背景圖片 “按鈕。
這將彈出WordPress媒體庫,你可以從你的電腦上傳一張圖片或選擇你以前上傳的圖片。
在你選擇了背景圖片後,你需要點擊 “選擇 “按鈕。
這將關閉媒體彈出窗口,你將在主題定制器中看到你選擇的背景圖片的預覽。
不要忘記點擊頂部的 “發布 “按鈕來保存你的設置。
這樣你已經成功地在你的WordPress網站上添加了一個背景圖片。現在你可以到網站前端看看你的網站背景。
方法二:使用全站編輯器添加自定義背景圖片
如果你使用的是一個基於block的WordPress主題,那麼你可以使用全站編輯器(FSE)添加一個自定義的背景圖片。
全站編輯器允許你使用block來編輯你的網站設計。 這就像使用WordPress塊編輯器編輯博客文章或頁面一樣。
在本教程中,我們將使用預設的Twenty Twenty-Two主題。 要啟動全站編輯器,只需從你的WordPress儀錶板進入Appearance» Editor。
一旦你進入全站編輯器,你就需要在你的範本上添加一個封面塊來上傳背景圖片。
只需點擊頂部的『+』號,添加一個Cover block。
繼續點擊封面塊中的 「上傳 」或 「媒體庫 」按鈕,為該塊添加背景圖片。
這將打開WordPress媒體上傳器的彈出視窗。
你可以選擇一個你想用來作為網站背景的圖像。
當你選擇了圖片,只需點擊 「選擇 」 按鈕。
一旦圖片被添加到Cover block,下一步就是將其設置為頁面的背景。
要做到這一點,請點擊頂部的清單檢視圖示(有3個破折號的圖示),以打開主題元素的概要視圖,如網站的頁眉和頁腳。
之後,只需在清單檢視中把所有範本元素拖放到Cover block下。
當它們都在下面時,封面塊的圖像將顯示為網站的背景。
之後,你可以通過點擊Cover block塊並選擇螢幕右上角的齒輪圖示來調整背景圖片。 這將打開塊設置面板。
你會發現一些選項,使圖像成為固定的背景,重複的背景,調整其覆蓋,編輯顏色,以及更多。
當你完成後,別忘了點擊 「保存 」按鈕。
這樣你已經成功地使用全站編輯器添加了一個背景圖片。
方法3:使用WordPress主題生成器添加背景圖片
你可以在你的網站上添加自定義背景圖片的另一種方法是使用像SeedProd這樣的WordPress主題構建器。
在本教程中,我們將使用SeedProd專業版,因為它包括主題構建器。 也有一個SeedProd Lite版本,你可以免費試用。
首先,你需要安裝並啟動SeedProd外掛程式
一旦該外掛程式被啟動,你會在你的WordPress儀錶板上看到SeedProd的歡迎介面。 接下來,只要輸入你的許可證密鑰,然後點擊 「驗證金鑰 」按鈕。 你可以在你的SeedProd帳戶區找到許可證密鑰。
接下來,你需要在你的WordPress管理面板中前往SeedProd 》Theme Builder。
向前走,點擊頂部的 「主題 」 按鈕。
SeedProd現在將提供多個主題範本供你選擇。
你可以將滑鼠懸停在任何你想使用的範本上,然後點擊它。 讓我們在本教程中使用 「啟動器 」主題範本。
從這裡,SeedProd會生成不同的範本,如主頁、單篇文章、單頁、側邊欄、頁眉等等。
要添加一個出現在整個網站和所有主題範本上的背景圖片,請繼續點擊全域CSS下的 「編輯設計 」選項。
在下一個螢幕上,你會看到你可以改變的全域CSS設置。
只需點擊 「背景 」 選項。
之後,你會看到背景圖片選項。
繼續點擊 「使用你自己的圖片 」按鈕,上傳你的圖片,或點擊 「使用圖片庫 」按鈕,搜索一個圖片庫,作為你的網站背景。
一旦你添加了背景圖片,SeedProd構建器將顯示一個即時預覽。
該外掛程式還提供了改變背景位置的選項。 你可以選擇是否要使用全屏覆蓋,把它放在重複的位置,等等。
此外,你可以通過移動 「暗淡背景 」滑塊來編輯背景圖片應該有多暗。 分數越高,圖像就越暗。
當你完成了對背景圖片的編輯,只需點擊頂部的 「保存 」按鈕,關閉全域CSS設置。
如果你想為你網站的不同部分添加一個自定義的背景圖片,那麼你可以在SeedProd中編輯那些單獨的主題範本。
方法4. 使用外掛程式在WordPress中添加一個自定義的背景圖片
使用一個WordPress外掛程式來添加背景圖片,要比內置的WordPress選項靈活得多。
你需要安裝和啟動 Full Screen Background Pro
這個外掛程式將讓你為任何帖子、頁面、類別等設置不同的背景。 此外,它們將自動成為全屏,併為行動裝置自行調整。
啟動后,你需要訪問Appearance » Fullscreen BG Image來配置外掛程式設置。
你將被要求添加你的許可證金鑰。 你可以從你購買該外掛程式後收到的電子郵件或從你在該外掛程式網站上的賬戶中獲得這一資訊。
接下來,你需要點擊 「保存選項 」按鈕來啟動你的金鑰。 你現在準備開始向你的WordPress網站添加背景圖片。
繼續點擊外掛程式設置頁面上的『添加新圖片』按鈕。
你現在應該看到背景圖片的上傳螢幕。
點擊 「選擇圖像 」按鈕,上傳或選擇一個圖像。 一旦你選擇了圖像,你將能夠在螢幕上看到圖像的即時預覽。
接下來,你需要為這個圖像提供一個名稱。 這個名字是為你準備的,所以你可以在這裡輸入任何東西。 最後,你需要選擇你想把它作為背景頁的位置。
一旦你選擇了它是整個網站的背景,還是帖子、類別、檔案或其他地方的背景,別忘了保存你的修改。
你可以通過訪問Appearance» Fullscreen BG Image頁面並重複這個過程,在網站的不同區域添加你想要的圖像。
如果你設置了一個以上的圖片用於全域或用於帖子、頁面和類別,那麼該外掛程式將自動開始以幻燈片的形式顯示背景圖片。
你可以在外掛程式設置中調整圖片淡出的時間和新的背景圖片開始淡出的時間。
你在這裡輸入的時間單位是毫秒。 1秒是1000毫秒。 如果你想讓一個背景圖片在20秒后淡出,那麼你需要輸入20000。
不要忘記點擊 「保存選項」按鈕來存儲你的變化。
帖子、頁面和類別的背景圖片
Full Screen Background Pro還允許你為單個帖子、頁面、類別、標籤等設置背景圖片。
只要編輯你想顯示不同背景圖片的帖子/頁面。 在帖子編輯螢幕上,你會注意到在帖子編輯器下面有一個新的 Full Screen Background Image。
要為類別、帖子和頁面使用背景圖片,你需要訪問Appearance » Fullscreen BG Image 頁面,然後點擊 “Add New Image’ ”按鈕。
在上傳圖片后,你可以從 「選擇顯示此圖片的背景 」下拉功能表中選擇一個類別、帖子、頁面、檔案和其他選項。
比方說,你想為類別頁面顯示一個背景圖片。 為此,只需從下拉功能表中選擇『類別』。
該外掛程式還提供了一個選項,可以將背景圖片限制在特定的類別、帖子和頁面。
例如,如果你想為特定類別添加自定義背景圖片,那麼只需在 「選擇限制圖片的類別 」欄下輸入類別名稱。
不要忘記保存你的設置。
你現在已經成功地為特定的帖子、頁面和類別添加了背景圖片。
方法五:使用CSS Hero添加背景圖片
CSS Hero是一個WordPress外掛程式,它允許你對你的主題做任何改變,而不需要接觸一行代碼。
你可以通過幾個簡單的步驟快速添加背景圖片。 首先,你需要安裝並啟動CSS Hero。
一旦你完成了這些,就可以開始定製你的網站了。 現在在瀏覽器中打開你的主頁。 你會在管理欄中看到 「用CSS Hero定製 」的連結。
在你點擊該連結后,你會看到CSS Hero選項打開。 將滑鼠懸停在你想添加圖片的區域。
當你點擊所選取區域時,你可以看到左側邊欄中的 「背景 」 選項。
繼續點擊『背景』,查看添加圖像的設置。
從那裡,你可以點擊『圖像』。 現在,你可以從Unsplash選擇一張圖片或上傳你自己的圖片來創建你的背景。
當你點擊你想要的圖像時,你會看到 「應用圖像 」按鈕。 然後你可以選擇你想要的圖片的尺寸。 你可以選擇大的版本,這樣它就會延伸到整個頁面。
點擊底部的『保存和發佈』,為你的網站保存背景圖片。
方法6. 使用CSS代碼在WordPress的任何地方添加自定義背景圖片
默認情況下,WordPress會在整個WordPress網站的不同HTML元素上添加幾個CSS類。 你可以使用這些WordPress生成的CSS類,輕鬆地將自定義背景圖片添加到各個帖子、類別、作者和其他頁面。
例如,如果你的網站上有一個叫做電視的分類,那麼當有人瀏覽電視分類頁面時,WordPress會自動將這些CSS類添加到body標籤中。
<body class="archive category category-tv category-4">
你可以使用Chrome檢查工具來看看究竟哪些CSS類是由WordPress添加到body標籤的。
你可以使用category-tv或category-4的CSS類來為這個分類頁面設計不同的樣式。
讓我們為分類檔案頁添加一個自定義的背景圖片。 你需要將這個自定義CSS添加到你的主題中。
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代碼,只需將.category-tv替換為帖子特定的CSS類。