如何在WordPress側邊欄小部件中添加圖像


您是否要在WordPress的側邊欄小部件中添加圖像? 默認情況下,WordPress使您可以輕鬆地在網站上的任何位置上傳和添加圖像。 在本文中,我們將向您展示如何在WordPress側邊欄小部件中輕鬆添加圖像。 我們將分享多種方法,因此您可以使用最適合您的一種方法。

在WordPress側邊欄小部件中添加圖像

影片版本

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

使用圖像小部件在WordPress中添加圖像

在WordPress側邊欄中添加圖像的最簡單方法是使用默認的“圖像”小部件。

只需轉到 外觀»小部件 頁,然後將“圖片”小部件添加到側邊欄中。 如果您以前從未使用過小部件,請參閱有關如何在WordPress中添加和使用小部件的指南。

添加圖像小部件

小部件將展開,您將能夠看到其設置。

第一個選項是向圖像小部件添加標題。 之後,單擊“添加圖像”按鈕繼續。

這將打開WordPress媒體上傳器,您可以在其中單擊“上傳文件”按鈕以上傳圖像或選擇以前上傳的圖像。

影像設定

上載圖像後,您將在右列中看到圖像設置。 在這裡,您可以為圖像提供標題/ ALT文本,添加描述,選擇尺寸甚至添加鏈接。

完成後,您可以單擊“添加到小部件”按鈕以保存您的更改。 現在,您將在小部件設置區域中看到圖像的預覽。

小部件預覽

不要忘記單擊“保存”按鈕來保存圖像小部件。

現在,您可以訪問您的網站以查看WordPress博客的側邊欄上顯示的圖像。

側邊欄圖像預覽

使用文本小部件在WordPress邊欄中添加圖像

使用默認的“圖像”小部件將圖像添加到側邊欄非常容易。 但是,有時您可能需要添加具有自定義HTML的圖像或具有格式的文本。 在這種情況下,您將需要使用“文本”窗口小部件。

只需轉到 外觀»小部件 頁,然後將“文本”小部件添加到側邊欄中。 在小部件設置下,您將在文本編輯區域上方看到“添加媒體”按鈕。

使用文本小部件在WordPress邊欄中添加圖像

單擊該按鈕將調出媒體上傳器,允許您上傳或從媒體庫中選擇圖像。

選擇圖片後,點擊“插入帖子”按鈕。 現在,您將可以在文本小部件設置中查看圖像預覽。

您可以繼續將文本和其他元素添加到文本小部件。 文本編輯器中的工具欄為您提供了一些基本的格式設置按鈕。

使用文本和基本格式添加圖像

完成後,請不要忘記單擊“保存”按鈕來存儲小部件設置。

現在,您可以訪問您的網站以查看側邊欄圖像的運行情況。

使用側邊欄中的文本小部件顯示的圖像

在WordPress側邊欄小部件中手動添加圖像

在某些情況下,您可能需要向圖像添加其他HTML代碼。 默認的文本小部件允許使用一些非常基本的HTML,但可能不適用於高級HTML或格式。 在這種情況下,您將需要手動將圖像添加到博客的側邊欄。

首先,您需要將圖片上傳到WordPress網站。 只需轉到 媒體»添加新 並上傳您的圖像文件。

上傳圖像後,您需要單擊圖像旁邊的“編輯”鏈接。

在WordPress中上載和編輯圖像文件

WordPress現在將帶您進入“編輯媒體”頁面,您將在屏幕右側看到圖像文件URL。 您需要復制此URL並將其粘貼到文本編輯器(如記事本)中。

在WordPress中復製圖像文件URL

接下來,您需要轉到 外觀»小部件 屏幕,然後將“自定義HTML”小部件拖放到要顯示圖像的側邊欄。

手動將圖像添加到WordPress側邊欄小部件

在小部件的文本框區域,您需要使用以下代碼添加圖像:

草莓

img 標記用於HTML中以顯示圖像。 它需要兩個屬性,第一個是 src 定義圖像文件的位置。 在這裡您將粘貼先前複製的URL。

第二個是 alt 用於為圖像提供替代文本。 您的最終img標籤將如下所示:

草莓

您需要單擊“保存”按鈕來存儲小部件設置,然後預覽您的網站。

使用插件在WordPress邊欄中添加圖像

將圖像添加到WordPress側邊欄的另一種方法是使用插件。 這將為您提供更多選項和一個簡單的界面,某些初學者可能會比默認的“圖片”小部件更容易使用。

首先,您需要安裝並激活Image Widget插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,只需轉到 外觀»小部件 頁。 您會在可用的小部件列下看到一個標記為“圖像小部件”的新小部件。 只需將此圖像小部件拖放到要顯示圖像的WordPress側邊欄。

圖片小工具插件

接下來,單擊“選擇圖像”按鈕以上傳圖像或從媒體庫中選擇一個。 之後,您需要單擊“插入小部件”按鈕,然後您將在小部件設置下看到圖像預覽。

您可以為圖像添加標題,替代文本,鏈接和標題。 您也可以從可用選項列表中選擇圖像尺寸。

圖片小工具插件的更多設置

滿意後,只需單擊“保存”按鈕以保存圖像小部件。 就是這樣,您現在可以轉到您的網站,查看側邊欄中顯示的圖像。

我們希望本文能幫助您在WordPress側邊欄小部件中添加圖像。 如果您遇到問題,請別忘了查看有關如何解決WordPress中常見圖像問題的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Google+。