如何以列和行顯示WordPress圖片

您想按列或行顯示 WordPress 照片嗎?

默認情況下,WordPress 會以垂直列的形式添加圖片。 但是,如果您要在一篇博文中添加多張照片,這看起來就不是很整潔,而且使用者需要下滑網頁才能查看。

在本文中,我們將向您展示如何以列和行的方式輕鬆顯示 WordPress 照片。

為什麼需要分欄和分行顯示 WordPress 照片?

默認情況下,當您在 WordPress 博客文章中添加多張圖片時,它們會緊挨在一起或疊放在一起。
這看起來不太好,而且您的用戶必須多次滾動才能查看多個圖像和照片。

您可以使用基於網格的佈局來分行分列顯示照片,從而輕鬆解決這個問題。 這樣,圖片將以緊湊的布局顯示,並改善網站的用戶體驗。

如果您有一個攝影網站,那麼您可以用更吸引人的方式展示您的作品集。 或者,您可以在網店上以行列式顯示更多產品圖片。

說了這麼多,讓我們來看看如何手動或使用 WordPress 外掛程式分行分列顯示 WordPress 照片。

1.無需外掛程式即可按列顯示照片

這種方法不需要在 WordPress 網站上安裝外掛程式。 如果你不經常添加多張照片,那麼這種方法就很適合你。
您可以手動將圖片添加到列塊,或者使用 WordPress 的預設圖庫塊。

在列塊中添加圖片

首先,您需要創建一個新的帖子或編輯一個現有的帖子來顯示您的照片。 進入內容編輯器介面后,點擊 「+」按鈕添加列塊。

圖片 5

接下來,您可以選擇所需的列數和佈局。 例如,您可以選擇 50/50 比例、33/66 比例、25/50/25 比例等。

圖片 6

然後,您就可以為每一列添加一個圖像塊。 只需點擊 「+」按鈕,然後選擇 「圖像」塊。

圖片 7

接下來,您需要為圖塊添加一張圖片。 您可以點擊 「上傳 」按鈕從電腦中添加圖片,或者選擇 「媒體庫 」選項使用現有圖片。

圖片8

媒體庫打開后,只需選擇您喜歡的圖片,然後點擊 「選擇 」按鈕即可。 圖片優化的最佳做法之一是為圖片添加alt-text。 這可以讓搜尋引擎理解您的圖片,並將其顯示在圖片搜尋結果中。

圖片 9

現在你應該可以在其中一個列塊中看到你的圖片了。 現在,您可以對列中的其他塊進行同樣的操作,添加更多圖片。

圖片 10

在圖庫塊中添加圖片

WordPress 還提供了一個預設的圖庫塊,您可以用它來以列和行的形式顯示圖片。 首先,點擊 「+」按鈕,在內容編輯器中添加一個圖庫塊。

圖片 11

接下來,你需要上傳圖片或從媒體庫中選擇。 在本教程中,我們將選擇 「媒體庫 」選項。

圖片 12

您只需從中選擇要添加到圖庫中的圖片,並按行和列顯示即可。
選擇圖片后,點擊 「創建新圖庫 」 按鈕。

圖片 13

接下來,WordPress 會要求您為每張圖片輸入標題,並重新排列圖片的順序。
之後,只需點擊 「插入圖庫 」按鈕即可。

圖片 14

完成後,只需發佈您的文章,就能以列和行的形式查看圖片。
只需訪問您的網站,即可看到它們的實際效果。

圖片 15

這種方法適用於大多數初學者。 但是,如果您經營攝影博客或經常在網站上分享照片,則此方法缺少幾個重要功能。

例如,照片的外觀依賴於您的WordPress主題,您受限於特定的布局和樣式。 您的圖像將不會在燈箱彈出視窗中打開。

為了獲得更專業和美觀的用戶體驗,您應該嘗試使用外掛程式方法。

2.使用外掛程式在列和行中顯示照片

將照片顯示在列和行中的最佳外掛程式是Envira Gallery。 這是最受歡迎的WordPress圖庫外掛程式,非常易於使用並提供了許多功能。

首先,您必須安裝並啟動Envira Gallery外掛程式。 有關更多詳細資訊,請參閱我們的逐步指南,瞭解如何安裝WordPress外掛程式

啟動后,您需要訪問Envira Gallery»設置頁面,輸入您的許可證密鑰。 您可以從Envira Gallery網站上的您的帳戶中獲取此密鑰。

圖片 16

現在,您已經準備好創建精美的圖片庫了。 只需從 WordPress 儀錶板前往 Envira Gallery “ 添加新內容,即可創建您的第一個圖庫。

圖片 17

首先,您需要在頂部為您的圖庫輸入一個名稱。 在這裡,您可以從電腦中選擇並上傳檔,也可以從 WordPress 媒體庫中選擇。
上傳照片後,您會看到它們出現在下面的圖庫設置框中。

圖片 18

接下來,您需要點擊 「配置 」選項卡,自定義顯示照片的方式。 Envira Gallery 可讓您選擇不同的圖庫佈局。 要按行和列顯示圖片,可以選擇網格、mason和正方形佈局。

圖片 19

選擇佈局后,可以點擊 「圖庫列數 」下拉功能表,選擇要顯示的列數。 如果向下滾動,你會看到更多自定義圖庫的選項。 例如,有一些設置可以編輯圖庫的尺寸和大小。

圖片 20

之後,您可以點擊 「發佈 」按鈕,將您的照片庫添加到 WordPress 網站。 現在,您需要編輯一篇文章或創建一篇新文章。 進入內容編輯器后,只需點擊 「+」按鈕即可添加 「Envira Gallery」塊。

圖片 21

在這裡,您可以點擊下拉功能表,選擇您之前創建的圖庫。 現在,您可以保存帖子並預覽,你可以看到一個具有自適應移動端的照片庫

圖片 22

現在,當使用者點擊照片縮略圖時,它就會以漂亮的彈出式窗口打開。

分享你的喜愛

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *