前言介紹
- 這款 WordPress 外掛「FrontBlocks」是 2024-02-10 上架。
- 目前有 70 個安裝啟用數。
- 上一次更新是 2025-02-25，距離現在已有 67 天。
- 外掛最低要求 WordPress 6.7 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
amulero | davidperez | matiasquero | sacrajaimez | alexbreagarcia |
外掛標籤
slider | carrusel | lightweight | generatepress |
內容簡介
總結：這篇文章介紹了在WordPress外掛中使用的數據屬性，包括輪播圖的數據屬性和動畫的數據屬性。
問題與答案：
1. 這篇文章主要介紹了哪些輪播圖的數據屬性？
- data-type: slider, carousel
- data-autoplay: 0 – time ms
- data-view: 1, 2, 3, 4, 5, 6
- data-buttons: bullets, arrows, none
- data-res-view: 1, 2, 3, 4, 5, 6
2. 輪播圖的slider和carousel有什麼不同？
- slider：當滑動到第一張或最後一張時，會重新回到開頭或結尾。
- carousel：在滑動到第一張或最後一張時，不會重新開始。
3. 有哪些動畫的數據屬性可以使用？
- data-frontblocks-animation：定義要分配給元素的動畫類名。
- 基於Animate.css的動畫效果：包括Attention seekers、Back entrances、Back exits、Bouncing entrances、Bouncing exits、Fading entrances、Fading exits、Flippers、Rotating entrances、Rotating exits、Specials、Zooming entrances、Zooming exits、Sliding entrances等。
4. 提到了哪些其他外掛？
- Closemarketing外掛。
5. 是否提供了開發者相關資訊和連結？
- 有提到開發者、官方存儲庫Github和其他相關連結。
HTML bulleted list:
- data-type: slider, carousel
- slider - 當滑動到第一張或最後一張時，會重新回到開頭或結尾
- carousel - 在滑動到第一張或最後一張時，不會重新開始
- data-autoplay: 0 - 時間（毫秒）
- data-view: 1, 2, 3, 4, 5, 6
- data-buttons: bullets, arrows, none
- data-res-view: 1, 2, 3, 4, 5, 6
- data-frontblocks-animation: 定義要分配給元素的動畫類名
Animations:
- Based on Animate.css
- Attention seekers: (多個選項)
- Back entrances: (多個選項)
- Back exits: (多個選項)
- Bouncing entrances: (多個選項)
- Bouncing exits: (多個選項)
- Fading entrances: (多個選項)
- Fading exits: (多個選項)
- Flippers: (多個選項)
- Rotating entrances: (多個選項)
- Rotating exits: (多個選項)
- Specials: (多個選項)
- Zooming entrances: (多個選項)
- Zooming exits: (多個選項)
- Sliding entrances: (多個選項)
Others Plugins:
- Closemarketing Plugins
Developers
Official Repository Github
Links
Closemarketing
Close·Technology
原文外掛簡介
To start using the Carousel, add the frontblocks-carousel class to the element and then, include any of the following attributes:
Data Attributes for Carrousel:
– data-type: slider, carousel
slider – rewinds slider to the start/end when it reaches first or last slide,
carousel – changes slides without starting over when it reaches first or last slide.
data-autoplay: 0 – time ms
data-view: 1, 2, 3, 4, 5, 6
data-buttons: bullets, arrows, none
data-buttons-color: hex color
data-buttons-background-color: hex color or transparent
data-res-view: 1, 2, 3, 4, 5, 6
Data Attributes for Animation:
– data-frontblocks-animation: defines the animation class name that will be assigned to the element.
Animations:
Based on Animate.css
Attention seekers:
bounce, flash, pulse, rubberBand, shakeX, shakeY, headShake, swing, tada, wobble, jello, heartBeat
Back entrances:
backInDown, backInLeft, backInRight, backInUp
Back exits:
backOutDown, backOutLeft, backOutRight, backOutUp
Bouncing entrances:
bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp
Bouncing exits:
bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
Fading entrances:
fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeInTopLeft, fadeInTopRight, fadeInBottomLeft, fadeInBottomRight
Fading exits:
fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, fadeOutTopLeft, fadeOutTopRight, fadeOutBottomRight, fadeOutBottomLeft
Flippers:
flip, flipInX, flipInY, flipOutX, flipOutY, Lightspeed, lightSpeedInRight, lightSpeedInLeft, lightSpeedOutRight, lightSpeedOutLeft
Rotating entrances:
rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
Rotating exits:
rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
Specials:
hinge, jackInTheBox, rollIn, rollOut
Zooming entrances:
zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp
Zooming exits:
zoomOut, zoomOutDown zoomOutLeft, zoomOutRight, zoomOutUp
Sliding entrances:
slideInDown, slideInLeft, slideInRight, slideInUp, Sliding, exits slideOutDown, slideOutLeft, slideOutRight, slideOutUp
Others Plugins:
– Closemarketing Plugins
Developers
Official Repository Github
Links
Closemarketing
Close·Technology
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「FrontBlocks」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
0.2.0 | 0.2.1 | 0.2.2 | 0.2.3 | 0.2.4 | 0.2.5 | trunk |
延伸相關外掛（你可能也想知道）
Remove URL Field from Comment Form in GeneratePress Theme 》這個外掛可以讓您在 GeneratePress 主題的留言表單中停用/移除 URL/網站欄位。這個「從 GeneratePress 主題的留言表單中移除 URL 欄位」的外掛可以在免費版本...。
QuadMenu – GeneratePress Mega Menu 》演示 | 文檔 | 開發者 | 社群, 這個 WordPress 外掛允許您在 GeneratePress 中創建超級菜單，並將 QuadMenu 與 GeneratePress 主題設置集成。需要 QuadMenu ...。
GP Related Posts 》透過 GeneratePress 內含的連接點 (hooks) 新增相關文章。, 包含選項頁面，可以定義標題、縮圖大小和相關文章在頁面上的位置。。
Generate Disable Mobile 》這個外掛可以停用 GeneratePress 主題中的行動裝置功能。, 安裝並啟用即可完成！, 這個外掛需要 GeneratePress 主題作為您目前啟用的主題，如果沒有使用 Gene...。
Shortcuts for GeneratePress 》此外掛會在 WordPress 管理列中新增一個「GP Shortcuts」的選單，讓使用 GeneratePress 和 GenerateBlocks 的使用者能夠快速地前往網站內的各個區域以及相關...。
Infinite Scroll for GeneratePress 》GeneratePress 無限捲動外掛是一個超輕量級的插件，可在執行 GeneratePress 主題的 WordPress 博客上啟用無限捲動功能。, , → 瞭解更多資訊, GeneratePress ...。
GP Elements Admin Link 》此外掛會在管理列上新增一個按鈕，讓你可以方便地進入 WordPress 元素編輯器、新增新元素或複製現有元素。。
WP247 GeneratePress Pre-Footer Widgets 》將一個 Pre-Footer Widgets 區域新增到 GeneratePress 主題中，此區域與 GeneratePress Footer Widgets 區域相似，但會在頁面上的 Footer Widgets 區域之前立...。
Generate Legacy Mobile Menu 》在 GeneratePress 主題中恢復傳統的行動裝置選單。, 只需安裝、啟用即可完成！, 此外掛需要 GeneratePress 為您的活躍佈景主題 - 如果沒有 GeneratePress，此...。
URL Field Remover for GeneratePress 》「GeneratePress 專用 URL 欄位移除外掛」是一個針對 GeneratePress 主題開發的免費 WordPress 外掛，能協助您移除 GeneratePress 主題留言區或評論表單內的 ...。
GP UX Optimized Mobile Menu 》GP UX Optimized Mobile Menu 這個外掛專為手機用戶所設計，可以取代標準菜單，放在右下角以最佳化的使用體驗呈現。, 目前只有在 GeneratePress 主題上進行測...。