如何在 WordPress 中使用滑塊效果顯示前後圖像

假設您是一名健身博主，並希望通過分享您身體轉變前後的圖像來激勵您的觀眾。 如果您可以使用前後圖像滑塊來顯示差異，而不是將圖像並排放置，那就太酷了。

等待！ 什麼是前後圖像滑塊？

它是一個圖像滑塊，可將一個圖像堆疊在另一個圖像上，並使用交互式滑塊來顯示圖像。 如果滑塊水平移動，則當滑塊移動到最右側時會顯示第一個圖像，而當滑塊向左移動時將顯示第二個圖像。

這種滑塊對於比較兩個相似的圖像非常方便。 因此，它對許多專業人士（如攝影師、美容師、設計師、醫生和牙醫）很有用。

如果您是 WordPress 用戶並且想知道如何在您的網站上使用它，那麼您來對地方了。 在本文中，我將分享如何在網站上使用滑塊效果添加前後圖像。

因此，事不宜遲，讓我們開始吧。

訂閱我們的 YouTube 頻道

如何在圖像滑塊之前添加

有許多免費和高級插件，您可以使用它們在網頁上添加前後圖像滑塊。

但是，我們將在本文中使用Twenty20 Image Before After 插件。 稍後，我還會提到一些流行的免費和高級替代品。

在插件之前安裝Twenty20 Image

2020 是一個免費插件，可在 WordPress 插件庫中找到。 它允許您在帖子、頁面和側邊欄中添加前後圖像滑塊。 它還支持流行的頁面構建器，如 Elementor 和 WPBakery。

要安裝此插件，請轉到 Plugins -> Add New 並蒐索Twenty20 Image Before-After。 找到插件後，只需安裝並激活它：

在您的帖子或頁面中添加前後圖像

Two20 插件不附帶任何設置頁面。 所以你可以在安裝插件後開始做臟活。

現在，在 WordPress 5.0 更新之後，您可能正在使用 Classic 或 Gutenberg 編輯器。 所以讓我向您展示這個插件如何在兩個編輯器上工作。

古騰堡編輯

到目前為止，Twenty20 插件還沒有塊，但您可以使用其短代碼功能並將代碼添加到短代碼塊中。

讓我們看一下短代碼的示例：

[twenty20 img1=”3442″ img2=”3442″ 方向=”水平” offset=”0.4″ align=”none” width=”100%” before=”Before” after=”After”hover=”false”]

讓我解釋一下每個參數：

• img1 – 在這裡您必須添加第一張圖像的圖像 ID（不是圖像 URL）。
• img2 – 添加第二張圖片的 ID（而不是圖片 URL）。
• 方向- 這允許您決定是在水平方向還是垂直方向上使用滑塊。 因此，該值將是水平的或垂直的。
• offset – offset 的值應該在 0.1 到 1 之間。
• align - 這決定了前後圖像的對齊方式。 值可以是 none、left 或 right。
• 寬度- 圖像的寬度可以是百分比或像素。
• 之前- 您可以在此處添加之前圖像的標題。
• after - 添加後圖像的標題。
• 懸停- 此參數決定是否要在鼠標移動時移動滑塊。 它接受真值或假值。

不知道如何找到圖片的ID？ 從 WordPress 儀表板的左側邊欄中轉到媒體 -> 庫，然後單擊圖像。 現在檢查您的網絡瀏覽器的地址欄：

在上面的示例中，您可以在 URL 中看到 item = 50。 因此，50 是該特定圖像的 ID。

好的！ 現在您知道如何使用Twenty20 簡碼，創建（或編輯）您想要添加前後圖像滑塊的帖子或頁面。 然後，添加一個新塊並蒐索短代碼小部件：

複製我在上面示例中使用的代碼，將其粘貼到短代碼框中並根據您的要求進行調整：

就是這樣。 您現在可以預覽帖子（或頁面）並檢查它是否正常工作。

經典編輯器

如果您使用的是經典編輯器，您將在安裝插件後看到一個新按鈕添加二十 20。 單擊該按鈕，將打開一個彈出窗口，要求您選擇兩個圖像：

選擇兩個圖像並單擊插入後，將打開一個新窗口，詢問您生成短代碼的一些詳細信息：

完成設置後，您可以單擊“插入簡碼”按鈕。

您也可以稍後對此短代碼進行更改 - 只需按照古騰堡編輯器部分中的示例進行操作即可。

在側邊欄中添加前後圖像

2020 插件還允許您在網站的側邊欄中添加前後圖像。 它帶有一個小部件，可以為您做很酷的工作。

前往外觀 -> 小部件。 現在找到Twenty20 小部件並將其拖到側邊欄區域。 此小部件的設置與上一節類似 - 只是您有兩個額外的按鈕用於選擇（或上傳）前後圖像。

完成後，保存小部件設置，然後檢查您的網站。 很簡單，不是嗎？

一些替代插件

雖然我喜歡Twenty20 插件，因為它簡單且免費，但您可能更喜歡其他的東西。 因此，我決定分享這個插件的一些免費和高級替代品：

1. Divi 的前 + 後圖像

如果您是 Divi 用戶，Divi 插件的 Before + After Images 最適合您的需求。 它是輕量級的、響應式的並且支持延遲加載。 它創建了一個新模塊，可幫助您將前後圖像添加到您的網站。 這個免費插件將與 Divi Builder 插件、Divi 主題和 Elegant Themes 的其他主題一起使用。

價格 – 免費 | 更多信息

2.多用途前後滑塊

多用途 Before After Slider 是啟用了觸摸和滑動功能的高級插件。 它帶有一個易於使用的管理面板，可幫助您根據需要調整每個圖像滑塊，並且不需要使用短代碼。 您可以創建無限的前後圖像並在帖子、頁面和側邊欄上使用它們。

價格 – 18 美元 | 更多信息

3. 智能前後查看器

Smart Before After Viewer 是一個完全響應和触摸友好的高級插件。 它允許您在前後圖像上添加自定義標籤文本。 您可以毫不費力地更改標籤的位置和顏色。 此插件還允許您在單個頁面上添加多個圖像。

價格 – 18 美元 | 更多信息

尾註

前後圖像滑塊是顯示兩個相同圖像之間差異的好方法。 您可以按照本教程在 WordPress 網站上使用此類滑塊。

那麼，您是否使用過本文中提到的任何插件？ 或者，您想推荐一個適合實現相同目標的特定插件嗎？ 在評論部分告訴我們。

精選圖片來自 __/shutterstock.com