內容簡介
本外掛程式方便使用這款 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).
