[WordPress] 外掛分享: Word Switcher

前言介紹

  • 這款 WordPress 外掛「Word Switcher」是 2017-12-08 上架。
  • 目前尚無安裝啟用數,是個很新的外掛。如有要安裝使用,建議多測試確保功能沒問題!
  • 上一次更新是 2017-12-21,距離現在已有 2691 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
  • 外掛最低要求 WordPress 3.0.0 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

bilalakil |

外掛標籤

effects | animation | shortcode | transition | word-switcher |

內容簡介

本外掛程式方便使用這款 Word Switcher JavaScript 工具:https://bitbucket.org/bilalakil/word-switcher

本外掛會建立一個 [word-switcher] 短碼 shortcode,讓您可以指定這個工具的參數以及要顯示的文字,同時也提供一個當工具載入時或載入失敗時顯示的替代文字。當頁面載入完成時,替代文字將被取代成 Word Switcher 工具。

您可以自己加入 CSS 動畫效果,只需在自訂器中加入幾行代碼即可。此外,它還會將 wordSwitcher JavaScript 函式新增至全域範圍,讓您可以針對它進行其他操作。

以下是完整的使用範例:

Hello [word-switcher words="world, people, friends, everybody, mate" switchDelay="1000" random="true" animationDuration="null" className="hello-world-switcher"]world[/word-switcher]

此外,您也可以加入以下 CSS (可以直接在自訂器中輸入)來為切換的文字加入淡入淡出的效果:

.hello-world-switcher-enter-active, .hello-world-switcher-leave-active {
transition: opacity 1s
}
.hello-world-switcher-enter, .hello-world-switcher-leave-to {
opacity: 0
}

如果您需要更多資訊來了解參數以及它們的預設值,以及如何使用動畫類別(這是啟發和模仿自完美的 Vue.js),請參閱此 JavaScript 工具的文件。

原文外掛簡介

This plugin facilitates the usage of this Word Switcher JavaScript tool: https://bitbucket.org/bilalakil/word-switcher
It creates a [word-switcher] shortcode where you can specify values for the tool’s parameters and, of course, the words themselves, along with a fallback value to be displayed while the tool is being loaded or if it fails to load. When the page is loaded the fallback content will be replaced with a word switcher.
Bring your own animations – it’s as easy as adding a couple of lines of CSS in the Customizer. It also adds the wordSwitcher JavaScript function to the global scope so you can do whatever you like with it.
Full usage example:

Hello [word-switcher words="world, people, friends, everybody, mate" switchDelay="1000" random="true" animationDuration="null" className="hello-world-switcher"]world[/word-switcher]

This can be accompanied by the following CSS (which you can insert straight into the Customizer) to simply fade the switching words in and out:

.hello-world-switcher-enter-active, .hello-world-switcher-leave-active {
transition: opacity 1s
}
.hello-world-switcher-enter, .hello-world-switcher-leave-to {
opacity: 0
}

Read the JavaScript tool’s documentation for more information regarding the parameters and their default values, and how to use the animation classes (as inspired and imitated from the awesome Vue.js).

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Word Switcher」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


0.1.0 | 0.1.1 | trunk |

延伸相關外掛(你可能也想知道)

暫無相關外掛推薦。

文章
Filter
Apply Filters
Mastodon