Fyrins Retype
| 开发者 | fyrins |
|---|---|
| 更新时间 | 2026年11月13日 16:22 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
详情介绍:
We help every <baker, potter, beekeeper> find their customers.
There is no settings page, no option in your database, no account and no outgoing request.
How it behaves
- The word takes its real width as it is typed, so the text that follows it moves along with the writing.
- A word that is entirely bold, italic or a link keeps that formatting while it is retyped. A word formatted only in part is left still.
- Words added to the page after it loads, by a "load more" button for instance, are animated too.
- The animation pauses when the browser tab is hidden or the word is scrolled out of view, and resumes when it comes back.
- Nothing loads on pages that do not use the format. Where it is used, the front end gets a script of about 5 KB, loaded with
deferin the footer, and a stylesheet under 1 KB. - The words are inserted as text, never as HTML.
- The saved markup is a plain
<span>with a class and a data attribute. If you deactivate the plugin, the selected word simply stays in the sentence, and no block is invalidated.
- Screen readers are given the original word, once. The letters being typed are hidden from them, so a screen reader user hears a normal sentence rather than a stream of changes.
- Visitors who ask their system to reduce motion see the original word, with no animation and no blinking caret. If they turn the setting on while reading, the animation stops and the original word comes back.
- Without JavaScript, the original word is shown as plain text.
retype_delays filter. See the FAQ.
Source code and build
The scripts and stylesheets shipped in build/ are compiled from the src/ directory of the public repository, with @wordpress/scripts, the build tool maintained by the WordPress project:
https://github.com/Fyrins/retype
To reproduce the shipped files:
git clone https://github.com/Fyrins/retype.git cd retype npm install npm run build
安装:
- In your admin, go to Plugins, then Add New Plugin, and search for Retype.
- Install and activate it.
- Edit a post, select a word in a heading or a paragraph, open the "More" dropdown of the formatting toolbar, and choose Retype.
屏幕截图:
常见问题:
How do I edit the list of words?
Click inside the word and choose Retype again. The popover opens with the current list. Remove format turns the word back into ordinary text. An empty list does the same.
Which word is shown first?
The one you selected in the editor. It is also the word screen readers read and the word shown to visitors who prefer reduced motion, so pick the one that makes the sentence work on its own.
Can I change the speed?
For one word, in the popover: "Typing delay per letter" is in milliseconds, lower is faster, and erasing speeds up or slows down in proportion. "Pause on each word" is in seconds. Reset brings a setting back to the site default.
For the whole site, use the retype_delays filter, in your theme's functions.php or a small plugin of your own. Values are in milliseconds:
add_filter( 'retype_delays', function ( $delays ) { $delays['type'] = 90; // per letter while typing, default 40 $delays['erase'] = 30; // per letter while erasing, default 20 $delays['hold'] = 2500; // pause on each word, default 1200 return $delays; } );
Missing keys keep their default. type and erase are kept between 10 and 2000, hold between 200 and 60000, and anything that is not a number falls back to the default.
A script of your own can also set window.retypeDelays before the plugin's script runs, with the same keys and the same limits. The settings of a word in the popover take precedence over both.
Can the caret have its own color?
Yes. The popover offers the colors of your theme's palette. A palette color is saved as a reference to the theme color, so the caret follows it if the theme changes it. Clear the color and the caret takes the color of the text.
Where are the settings of a word stored?
In the post content, as data attributes of the word's <span>: data-retype-type and data-retype-hold in milliseconds, data-retype-caret for the color. Nothing goes to the database besides your post. Values out of range are confined to the same limits as the filter, and a color that is not a hex, rgb(), hsl() or theme palette color is ignored.
Can a retyped word be bold or a link?
Yes, if the whole word is: the formatting stays and only the letters change. If only part of the word is formatted, the word is shown as it is, without animation, because it could not be retyped letter by letter without rebuilding your markup.
Does it work in the site editor and in templates?
The format is registered for every rich text field of the block editor, so the site editor offers it too, in headings and paragraphs of templates and patterns. On the front end, any rendered block that contains it loads the script.
The word is cut off on small screens.
The animated word does not wrap, so a word wider than the screen is clipped. Keep the words short, especially in large headings.
Does it phone home?
No. There is no telemetry, no external asset, no outgoing request, and nothing is written to your database.
更新日志:
- First release.
- Retype format for the block editor, with a popover to type the list of words and, for each word, its typing speed, pause and caret color.
- Front-end animation that pauses when the tab is hidden or the word is off screen, and stays still under reduced motion.
- Script and stylesheet loaded only on pages that use the format.
retype_delaysfilter for the default typing, erasing and pause delays.- Words added to the page after load are animated, and a word removed from the page stops.