Title: OpenStatus Badge
Author: constantbourgois
Published: <strong>2026 年 6 月 28 日</strong>
Last modified: 2026 年 6 月 28 日

---

搜尋外掛

![](https://ps.w.org/openstatus-badge/assets/icon.svg?rev=3589039)

# OpenStatus Badge

 由 [constantbourgois](https://profiles.wordpress.org/constantbourgois/) 開發

[下載](https://downloads.wordpress.org/plugin/openstatus-badge.1.0.1.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/openstatus-badge/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/openstatus-badge/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/openstatus-badge/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/openstatus-badge/#developers)

 [技術支援](https://wordpress.org/support/plugin/openstatus-badge/)

## 外掛說明

OpenStatus Badge allows you to easily embed your OpenStatus status page badge anywhere
on your WordPress site using the block editor.

**Features:**

 * Simple setup – just enter your status page slug
 * Customizable appearance – choose theme (light/dark), size (sm/md/lg/xl), and 
   variant (outline)
 * Block editor integration – full preview in the editor with real-time attribute
   changes
 * Lightweight – badge is loaded as a native `<img>` tag, no inline SVG fetching

**How it works:**

 1. Configure your OpenStatus status page slug in Settings > OpenStatus
 2. Add the “OpenStatus Badge” block to any page or post
 3. Customize the badge appearance using the block settings
 4. The badge automatically links to your status page

### Source Code

The source code for this plugin is publicly available on GitHub:
 https://github.
com/openstatusHQ/wordpress-status-widget-plugin

The `src/` directory contains the uncompiled block source (JavaScript, SCSS). The`
build/` directory contains the compiled assets generated by `@wordpress/scripts`.

To rebuild from source:

 1. Clone the repository
 2. Run `npm install`
 3. Run `npm run build`

## 螢幕擷圖

[⌊The OpenStatus Badge block in the editor with theme, size, and variant settings⌉⌊
The OpenStatus Badge block in the editor with theme, size, and variant settings⌉[

The OpenStatus Badge block in the editor with theme, size, and variant settings

[⌊The badge displayed on the frontend⌉⌊The badge displayed on the frontend⌉[

The badge displayed on the frontend

[⌊Plugin settings page — configure your status page slug and default variant⌉⌊Plugin
settings page — configure your status page slug and default variant⌉[

Plugin settings page — configure your status page slug and default variant

## 適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

 *   OpenStatus Badge Display your OpenStatus status page badge.

## 安裝方式

**From the WordPress plugin directory:**

 1. In your WordPress dashboard, go to Plugins > Add New
 2. Search for “OpenStatus Badge”
 3. Click “Install Now” then “Activate”
 4. Go to Settings > OpenStatus and enter your status page slug
 5. Add the “OpenStatus Badge” block to any page or post

**Manual installation (zip file):**

 1. Download the plugin zip file
 2. Go to Plugins > Add New > Upload Plugin
 3. Upload the zip and click “Install Now”
 4. Activate the plugin
 5. Go to Settings > OpenStatus and enter your status page slug

**From source (developers):**

 1. Clone or download the repository
 2. Run `npm install` then `npm run build` to compile the block assets
 3. Upload the `openstatus-badge` folder to the `/wp-content/plugins/` directory
 4. Activate the plugin through the ‘Plugins’ menu in WordPress
 5. Go to Settings > OpenStatus to configure your status page slug
 6. Add the “OpenStatus Badge” block to any page or post

## 常見問題集

### Where do I find my status page slug?

Your status page slug is the subdomain of your OpenStatus URL. For example, if your
status page is at `acme.openstatus.dev`, your slug is `acme`.

### How often is the badge updated?

The badge is loaded directly by the browser as an image from OpenStatus. Updates
are reflected as soon as OpenStatus publishes them.

### Can I use multiple badges with different settings?

Yes! Each block can have its own theme, size, and variant settings. However, all
badges will use the same status page slug configured in settings.

### What happens if the badge cannot be loaded?

If the badge image cannot be loaded, the browser will display the alt text “System
status” instead.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈OpenStatus Badge〉的開發相關工作。

參與者

 *   [ constantbourgois ](https://profiles.wordpress.org/constantbourgois/)
 *   [ thibaultleouay ](https://profiles.wordpress.org/thibaultleouay/)

[將〈OpenStatus Badge〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/openstatus-badge)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/openstatus-badge/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/openstatus-badge/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/openstatus-badge/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/openstatus-badge/)。

## 變更記錄

#### 1.0.1

 * Fix badge display: replaced inline SVG fetching with a native `<img>` tag to 
   avoid CORS issues
 * Fix render.php: use `echo` instead of `return` for block output
 * Update badge endpoint to v2
 * Fix extra whitespace below badge image (anchor baseline gap)
 * Add global default variant setting in Settings > OpenStatus (No-outline / Outline)
 * Add custom OpenStatus icon in the block inserter

#### 1.0.0

 * Initial release

## 中繼資料

 *  版本 **1.0.1**
 *  最後更新 **3 天前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.1 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.0**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/openstatus-badge/)
 * 標籤:
 * [badge](https://tw.wordpress.org/plugins/tags/badge/)[monitoring](https://tw.wordpress.org/plugins/tags/monitoring/)
   [status](https://tw.wordpress.org/plugins/tags/status/)[uptime](https://tw.wordpress.org/plugins/tags/uptime/)
 *  [進階檢視](https://tw.wordpress.org/plugins/openstatus-badge/advanced/)

## 評分

這個項目尚無任何評論記錄。

[Your review](https://wordpress.org/support/plugin/openstatus-badge/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/openstatus-badge/reviews/)

## 參與者

 *   [ constantbourgois ](https://profiles.wordpress.org/constantbourgois/)
 *   [ thibaultleouay ](https://profiles.wordpress.org/thibaultleouay/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/openstatus-badge/)