如何輕鬆地將圖像並排放置在WordPress中


您想將圖像並排放置在WordPress內容中嗎?

通常,初學者很難在WordPress帖子和頁面中找到如何將兩張圖片彼此相鄰放置的方法。

在本逐步指南中,我們將展示如何輕鬆在WordPress中並排放置圖像(無需編寫任何代碼)。

將圖像並排放置在WordPress中

使用塊編輯器並排放置圖像

並排顯示圖像的最簡單方法是使用WordPress塊編輯器。

塊編輯器具有特殊的“圖庫”塊,可讓您以行和列顯示圖像。

首先,您需要創建一個新的帖子/頁面或編輯現有的帖子/頁面以打開內容編輯器。 進入內部後,單擊(+)符號添加一個新塊。

創建一個帖子並向其添加一個塊

接下來,您需要選擇Gallery塊並將其添加到頁面中。 您可以在“公共塊”部分中找到“畫廊”塊,也可以使用搜索欄快速找到它。

選擇圖庫塊以添加到您的帖子中

現在,您可以通過將圖像拖到圖庫中或使用“上載”按鈕輕鬆地將其添加到圖庫中。 您還可以從WordPress媒體庫中選擇圖像。

如您所見,我們已將2張圖像添加到我們的Gallery塊中。 WordPress自動將它們並排放置。

圖庫中的兩個圖像(蝴蝶和蘋果)

如果要並排放置3張圖像怎麼辦? 如果添加第三張圖片,將會發生以下情況。 WordPress只是簡單地調整了其他三個文件的大小以使其並排放置:

畫廊中的三幅圖像(蝴蝶,蘋果和藍色花朵)

如果您上傳第四張圖片,則WordPress會將其放置在其他圖片之下。

畫廊中的四個圖像(蝴蝶,蘋果,藍色花朵和知更鳥)

您可以更改WordPress應在單列中並排包含的圖像數量。

首先,如果沒有選擇圖庫,請單擊它。 在屏幕的右側,您將看到圖庫的圖塊設置。

更改圖庫塊的設置

您可以將此處的列數調整為1到4之間的任何數字。例如,如果要並排放置兩個圖像,並在其下方放置兩個圖像,可以將“列數”設置為2。

將畫廊設置為2列而不是3列

就這麼簡單!

如果要更改圖像在圖庫中的位置,只需單擊它。 然後,您會看到箭頭,可用於在圖庫中向前或向後移動箭頭。

在圖庫中向前或向後移動圖像

這是來自我們的示例帖子的成品畫廊演示:

實時帖子中的2列畫廊

使用插件在WordPress中並排放置圖像

如果您使用的是舊的經典WordPress編輯器,或者要創建比默認Gallery塊更複雜的畫廊,則需要WordPress畫廊插件。

我們建議使用Envira Gallery,因為它是最好的WordPress Gallery插件

為了本教程的緣故,我們將使用Envira的免費版本,但您可能想要獲得Pro版本才能獲得強大的功能,例如相冊,圖像幻燈片等。

首先,您需要安裝並激活Envira Gallery插件。 如果您不確定如何安裝,請查看有關如何安裝WordPress插件的分步指南。

接下來,您可以轉到 Envira畫廊»添加新 在您的WordPress儀表板中。

在Envira Gallery中添加新畫廊

您需要給畫廊一個標題。 我們將其稱為“示例圖庫”。 接下來,上傳您要使用的圖像。

您可以將它們拖放到上傳框中,也可以使用“選擇文件”按鈕之一。

給您的新畫廊起個名字

圖片上傳後的外觀如下:

圖片上傳到Envira畫廊

您可能要在此處為圖像添加標題和替代文本。 當用戶將鼠標光標移到圖像上方時,標題將顯示在圖像下方。

在燈箱彈出模式下,標題也會顯示在圖片下方,我們稍後將對其進行介紹。

要編輯標題和替代文本,請在圖庫中的圖像上單擊“編輯”按鈕。

單擊編輯按鈕以編輯圖庫中的圖像

然後,您可以更改圖像的標題。 它默認為圖像的文件名。

您還應該輸入替代文本,因為這對您的WordPress網站的SEO很有幫助。 如果標題描述了圖像,則只需將其替換為替代文本即可。

設置圖像的標題和替代文本

完成後,請確保在單擊X關閉窗口之前,單擊“保存元數據”按鈕。

單擊保存元數據按鈕以保存您的更改

要在網站上添加圖庫,您首先需要發布它。 繼續,然後單擊屏幕右側的“發布”按鈕。

單擊發布按鈕以發布您的畫廊,以便您可以在您的網站上使用它

現在,編輯一個帖子或頁面,或者創建一個新的。 在內容編輯器中,單擊(+)將塊添加到您的帖子中,然後選擇“ Envira Gallery”塊。 您可以在“通用塊”部分中找到它,也可以使用搜索欄。

將Envira Gallery塊添加到您的帖子或頁面

然後,您需要單擊下拉列表以選擇您的畫廊。

從Envira Gallery塊中選擇您的畫廊

您應該在自己的帖子中看到自己的畫廊。

您可以在屏幕的右側調整設置。 例如,您可能要更改列佈局或圖像之間的邊距大小。

帖子編輯器中顯示的Envira Gallery

我們決定將畫廊設置為始終顯示在兩列中。 我們還在圖像之間添加了更大的邊距。

用戶可以單擊圖像在燈箱中查看完整尺寸的版本。 他們也可以使用燈箱滾動瀏覽圖像。

在燈箱中查看Envira畫廊中的圖像

如果您想在圖庫中添加更多圖片,則可以通過訪問 Envira畫廊»所有畫廊 在您的WordPress儀表板中。 只需單擊您的畫廊名稱即可對其進行編輯。

編輯您已在Envira Gallery中創建的畫廊

您對圖庫所做的任何更改都會顯示在您放置在其帖子,頁面或側邊欄中的任何位置。 您無需再次將其添加到其中。

小費: 如果使用的是經典編輯器而不是塊編輯器,則仍可以使用Envira Gallery。

您會在經典編輯器上方看到一個“添加畫廊”按鈕,可用於將現有畫廊添加到帖子中。

在經典編輯器中添加Envira畫廊

您還可以通過單擊“添加媒體”按鈕,然後單擊“創建畫廊”來創建新畫廊。

使用經典編輯器中的媒體庫創建新畫廊

我們希望本教程可以幫助您學習如何在WordPress中並排放置圖像。 您可能還需要閱讀有關如何在WordPress塊編輯器中對齊圖像的指南,以及我們必須包含WordPress插件的完整列表(專家選擇)。

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