使用 Carousel Slider Block WordPress 插件創建幻燈片

周末,Virgiliu Diaconu 讓我去看看他的 旋轉木馬滑塊 plugin,一個他維護了三年的項目。 自發布以來,它已慢慢獲得超過 5,000 次活躍安裝。

我每天都會收到這樣的電子郵件。 通常情況下,這些項目從根本上被破壞了,或者對我來說有點太垃圾了。 像許多其他人一樣,我問自己,這會是那些未經加工的鑽石之一嗎? 我總是很樂觀,可以堅持最微小的希望。

我應該先說我一般不喜歡滑塊和輪播,以此作為這篇評論的序言。 它們通常被用來隱藏內容,迫使網站訪問者採取額外的行動來找到它。 或者,在用戶閱讀完第一個面板之前,它們開始自動滑動。 如果用於整理無關緊要的內容,我會在某些網站上容忍它們。

但是,我知道很多人喜歡他們。 我需要回答的問題是這是否是一個可靠的實現。 TLDR 版本的處理能力比我見過的其他版本好得多。

使 Block Slider Carousel 成為可靠插件的原因在於,它主要是所見即所得的。 它也不會使體驗複雜化。 有一個可以解決的問題,我會解決的。 總的來說,創建一個充滿幻燈片的輪播很簡單。

用戶只需在編輯器中插入 Carousel Slider 塊即可創建新的輪播。 UI 類似於插入幻燈片時的核心 Row 塊——單擊「+」圖標。 從那裡,用戶可以在每個塊中添加任何其他塊:

created-slides-with-the-carousel-slider-block-wordpress-plugin 使用 Carousel Slider Block WordPress 插件創建幻燈片初始輪播插入。

我添加了此默認設置的屏幕截圖,以表明該插件幾乎是 WordPress 原生的。 沒有通過單獨的自定義帖子類型屏幕進行管理。 幻燈片並非全部堆疊在一起,看起來與前端的最終輸出完全不同。 而且它沒有令人眼花繚亂的配置設置。

編輯器和前端的主要區別在於後期編輯屏幕上顯示的水平滾動條,用於導航輪播。 添加幾張幻燈片後,它會出現在外部 Slider Carousel 塊下方:

created-slides-with-the-carousel-slider-block-wordpress-plugin-1 使用 Carousel Slider Block WordPress 插件創建幻燈片帶有簡單圖像幻燈片的滑塊輪播。

如果啟用了編輯器視圖中的上一個/下一個箭頭和點導航,我很樂意看到它被替換。 該插件允許用戶打開和關閉。

該塊的選項是此類插件預期的基線控制項。 用戶可以控制顯示幻燈片的數量、滾動顯示的數量以及動畫速度。 它包括在輪播結束時循環播放的切換和自動播放選項。

有一種 RTL 模式,目前尚不清楚它是否正常工作。 打開它似乎沒有在編輯器中進行任何更改。 但是,幻燈片在前端以相反的順序顯示。

該塊有一個單獨的面板,用於控制較小屏幕上的幻燈片數量。 用戶可以手動設置斷點或將其保留為默認值 768px。

我在使用該插件時遇到的最大問題是它覆蓋了幻燈片中的塊邊距。 如以下屏幕截圖所示,標題、段落和按鈕塊之間沒有空格:

created-slides-with-the-carousel-slider-block-wordpress-plugin-2 使用 Carousel Slider Block WordPress 插件創建幻燈片塊之間沒有間距。

我正在測試的主題使用 WordPress 5.9 中新的「塊間隙」功能來處理垂直間距。 但是,由於 CSS 在插件中的編寫方式,這可能是以前版本中的一個問題。 Carousel Slider Block 的樣式以高度的特異性將塊邊距歸零。

此問題僅在編輯器中。 如果您可以在預覽或發布之前不知道每張幻燈片的確切外觀,那麼這並不是一種太粗糙的體驗。 但是,對於插件作者來說,這應該是一個簡單的解決方法。 我毫無問題地刪除了有問題的代碼。

created-slides-with-the-carousel-slider-block-wordpress-plugin-3 使用 Carousel Slider Block WordPress 插件創建幻燈片更正了塊之間的間距。

我的理智得到了恢復——我是一個保持體面間距的堅持者。

一個受歡迎的新增功能是箭頭和點導航的顏色選項以及填充、邊框、背景和塊間距等功能。 這將使最終用戶更容易自定義輪播容器。

我會使用這個插件嗎? 了解我自己,我可能會構建一個自定義塊,當手頭有一個完全可以接受的解決方案時過度設計它。 當然,我不使用滑塊。 但是,如果我仍然做這樣的工作,我會很樂意將它交給客戶。 此外,該插件的前端 CSS 足夠輕量級,可以覆蓋自定義設計。

來源

相關文章