Title: Counting Number Block
Author: Phi Phan
Published: <strong>2022 年 7 月 13 日</strong>
Last modified: 2026 年 2 月 11 日

---

搜索插件

![](https://ps.w.org/counting-number-block/assets/icon-256x256.gif?rev=2755379)

# Counting Number Block

 作者：[Phi Phan](https://profiles.wordpress.org/mr2p/)

[下载](https://downloads.wordpress.org/plugin/counting-number-block.1.1.2.zip)

 * [详情](https://cn.wordpress.org/plugins/counting-number-block/#description)
 * [评价](https://cn.wordpress.org/plugins/counting-number-block/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/counting-number-block/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/counting-number-block/#developers)

 [支持](https://wordpress.org/support/plugin/counting-number-block/)

## 描述

This single-block plugin makes your numbers stand out by animating them while still
keeping them SEO-friendly, accessibility-ready, and respecting the reduced motion
mode. The number can be counted up or down.

This block performs one simple job: animating numbers. You can combine it with other
blocks to fit any design.

### Key features

 * It can be counted up or down depending on the start value and the real value
 * SEO and Accessibility ready – Screen readers will read the actual number value,
   not the animated one.
 * It can be fit in any design
 * Highly customizable with a large range of options like duration, separator, decimal,
   etc.
 * You can animate it one time or multiple times whenever the block appears in the
   viewport
 * You can provide a prefix and/or a suffix value
 * The animated effect will not be shown in the reduced motion mode

Please take a look at [these custom block patterns](https://boldpatterns.net/keywords/number?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Counting+Number+Block)
that use this block to see how it can be applied to real-world sites.

If this plugin is useful for you, please do a quick review and [rate it](https://wordpress.org/support/plugin/counting-number-block/reviews/#new-post)
on WordPress.org to help us spread the word. I would very much appreciate it.

### Other plugins

Please check out my other plugins if you’re interested:

 * **[Content Blocks Builder](https://wordpress.org/plugins/content-blocks-builder)**–
   This plugin turns the Block Editor into a powerful page builder by allowing you
   to create blocks, variations, and patterns directly in the Block Editor without
   needing a code editor.
 * **[Meta Field Block](https://wordpress.org/plugins/display-a-meta-field-as-block)**–
   A block to display custom fields as blocks on the front end. It supports custom
   fields for posts, terms, users, and setting fields. It can also be used in the
   Query Loop block.
 * **[SVG Block](https://wordpress.org/plugins/svg-block)** – A block to display
   SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows
   you to upload SVG images and load them into the icon library.
 * **[Icon separator](https://wordpress.org/plugins/icon-separator)** – A tiny block
   just like the core/separator block but with the ability to add an icon.
 * **[Breadcrumb Block](https://wordpress.org/plugins/breadcrumb-block)** – A simple
   breadcrumb trail block that supports JSON-LD structured data and is compatible
   with WooCommerce.
 * **[Block Enhancements](https://wordpress.org/plugins/block-enhancements)** – 
   Adds practical features to blocks like icons, box shadows, transforms, etc.
 * **[Better YouTube Embed Block](https://wordpress.org/plugins/better-youtube-embed-block)**–
   A block to solve the performance issue with embedded YouTube videos. It can also
   embed multiple videos and playlists.

The plugin is developed using @wordpress/create-block. The source code is in the
trunk branch.

## 屏幕截图

 * [[
 * Block settings

## 区块

该插件提供了 1 个区块.

 *   Counting number block This block provides an animated counter effect for numbers.

## 安装

 1. Upload the plugin files to the `/wp-content/plugins` directory, or install the 
    plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress

## 常见问题

### Why and when would you need this plugin?

If you want to highlight your numbers, you could use this plugin to make a counting
effect.

### Does it fit in my design?

Absolutely! It is super simple. It only animates the number, you can put it in any
layout blocks.

## 评价

![](https://secure.gravatar.com/avatar/1d80ceb23ce4a5bc235e975afdb8a9aadb2445917dca92dcc3c7b6ec8856a1fb?
s=60&d=retro&r=g)

### 󠀁[Parfait, juste ce qu’il faut](https://wordpress.org/support/topic/parfait-juste-ce-quil-faut/)󠁿

 [domguard](https://profiles.wordpress.org/domguard/) 2026 年 2 月 18 日 1 回复

Juste la fonction qu’il faut, on peut ensuite placer son bloc animé comme on le 
désire.

![](https://secure.gravatar.com/avatar/0572667f5610e73b3febac3ec6fae09b5d4c23a5095d8efd59fc70abe6e069fb?
s=60&d=retro&r=g)

### 󠀁[Does what you need without bloat or fluff](https://wordpress.org/support/topic/does-what-you-need-without-bloat-or-fluff/)󠁿

 [Jonathandejong](https://profiles.wordpress.org/jonathandejong/) 2026 年 2 月 13
日 1 回复

I’m a picky dev when it comes to plugins and this block just has exactly what you
need and nothing more. No bloat, no promotional banners all over. Just a well crafted
block for animating counts of numbers. Thank you!

![](https://secure.gravatar.com/avatar/76cc769dac37afc614baaa8c45889d002375ac5a00028248de4c411741d1b538?
s=60&d=retro&r=g)

### 󠀁[Works great](https://wordpress.org/support/topic/works-great-9639/)󠁿

 [jacskewes](https://profiles.wordpress.org/jacskewes/) 2025 年 7 月 19 日 1 回复

Best of the available options, thanks!

![](https://secure.gravatar.com/avatar/75bc91bc025de10896dc7f5ea80631f1368395f3236087a2361d83fa472c1907?
s=60&d=retro&r=g)

### 󠀁[Does what I need!](https://wordpress.org/support/topic/does-what-i-need-94/)󠁿

 [vob522611](https://profiles.wordpress.org/vob522611/) 2024 年 2 月 3 日 1 回复

The developer was very responsive and helpful when I didn’t understand how to style
it (using the block inspector settings). Thanks!

![](https://secure.gravatar.com/avatar/aed69f3bd3d4ae0bb12c875564537c18d0cc093d31d288f26ff8b023dd430bcd?
s=60&d=retro&r=g)

### 󠀁[Really great number counter](https://wordpress.org/support/topic/really-great-number-counter/)󠁿

 [EncodeDotHost](https://profiles.wordpress.org/encodedothost/) 2023 年 8 月 16 
日 1 回复

After testing a few different number counter block plugins, I found this one and
haven’t looked back. It does exactly what is say on the tin, but also doesn’t over
complicate things with trying to do everything and just sticks to being a great 
plugin. Highly recommend. If I could give 6*’s, I would!

![](https://secure.gravatar.com/avatar/5d62301cbbce4b465174ea8a6103742179535f1afb2f932ed88ad7c55aac04b4?
s=60&d=retro&r=g)

### 󠀁[Great plugin, better developer!](https://wordpress.org/support/topic/great-plugin-better-developer/)󠁿

 [Tarei King](https://profiles.wordpress.org/tareiking/) 2023 年 8 月 11 日 1 回复

This plugin did almost everything I needed, super happy with it. And then the following
day, it did everything I wanted as Phi had updated it to include my idea. I definitely
appreciate when developers listen and respond, you are awesome Phi!

 [ 阅读所有9条评价 ](https://wordpress.org/support/plugin/counting-number-block/reviews/)

## 贡献者及开发者

「Counting Number Block」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ Phi Phan ](https://profiles.wordpress.org/mr2p/)

「Counting Number Block」插件已被翻译至 2 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/counting-number-block/contributors)
为本插件所做的贡献。

[帮助将「Counting Number Block」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/counting-number-block)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/counting-number-block/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/counting-number-block/)，或通过[RSS](https://plugins.trac.wordpress.org/log/counting-number-block/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/counting-number-block/)。

## 更新日志

#### 1.1.2

_Release Date – 11 February 2026_

 * Fixed – Delay not working
 * Fixed – Missing default value that caused an invalid content issue
 * Improved – Upgraded the CountUp script

#### 1.1.1

_Release Date – 11 January 2026_

 * Improved – Replaced classnames with clsx
 * Improved – Handling of the frontend script when hosts or cache plugins defer 
   or delay it.

#### 1.1.0

_Release Date – 30 June 2024_

 * Improved – Support accessibility for the actual value
 * Improved – Don’t animate the number in the reduced motion mode
 * Added – Support clientNavigation interactivity
 * Added – Allow editing content attributes from the block toolbar
 * Improved – Refactor the code
 * Updated – Tested up to WP 6.6

#### 1.0.7

_Release Date – 10 August 2023_

 * DEV – Add a CSS class named `is-number-animating` when it’s counting
 * DEV – Show the `startVal` at the beginning
 * DEV – Refactor code

#### 1.0.6

_Release Date – 22 March 2023_

 * DEV – Make the block animate the trailing zero in decimal places

#### 1.0.5

_Release Date – 31 January 2023_

 * DEV – Add settings for disabling grouping, grouping separator, decimal separator
 * DEV – Add more typography settings
 * DEV – Add keywords for blocks

#### 1.0.4

_Release Date – 16 October 2022_

 * FIX – Refactor code to allow animate the number both scroll up & down

#### 1.0.3

_Release Date – 16 September 2022_

 * FIX – Change textdomain

#### 1.0.1

_Release Date – 20 July 2022_

 * FIX – Allow animating decimal numbers
 * FIX – Animate on load

#### 1.0.0

_Release Date – 13 July 2022_

## 额外信息

 *  版本 **1.1.2**
 *  最后更新：**2 月前**
 *  活跃安装数量 **2,000+**
 *  WordPress 版本 ** 5.9 或更高版本 **
 *  已测试的最高版本为 **6.9.4**
 *  PHP 版本 ** 7.0 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/counting-number-block/) 、 [Spanish (Chile)](https://cl.wordpress.org/plugins/counting-number-block/)
   和 [Spanish (Spain)](https://es.wordpress.org/plugins/counting-number-block/).
 *  [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/counting-number-block)
 * 标签
 * [animation](https://cn.wordpress.org/plugins/tags/animation/)[block](https://cn.wordpress.org/plugins/tags/block/)
   [Counter](https://cn.wordpress.org/plugins/tags/counter/)[gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/)
   [number](https://cn.wordpress.org/plugins/tags/number/)
 *  [高级视图](https://cn.wordpress.org/plugins/counting-number-block/advanced/)

## 评级

 5 星（最高 5 星）。

 *  [  9 条 5 星评价     ](https://wordpress.org/support/plugin/counting-number-block/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/counting-number-block/reviews/?filter=4)
 *  [  0 条 3 星评价     ](https://wordpress.org/support/plugin/counting-number-block/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/counting-number-block/reviews/?filter=2)
 *  [  0 条 1 星评价     ](https://wordpress.org/support/plugin/counting-number-block/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/counting-number-block/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/counting-number-block/reviews/)

## 贡献者

 *   [ Phi Phan ](https://profiles.wordpress.org/mr2p/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/counting-number-block/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](https://boldblocks.net?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Counting+Number+Block+Donate)