外掛說明

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:

Configure your OpenStatus status page slug in Settings > OpenStatus
Add the “OpenStatus Badge” block to any page or post
Customize the badge appearance using the block settings
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:

Clone the repository
Run npm install
Run npm run build

螢幕擷圖

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

The badge displayed on the frontend — The OpenStatus Badge block in the editor with theme, size, and variant settings

適用於區塊編輯器

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

OpenStatus Badge Display your OpenStatus status page badge.

安裝方式

From the WordPress plugin directory:

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

Manual installation (zip file):

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

From source (developers):

Clone or download the repository
Run npm install then npm run build to compile the block assets
Upload the openstatus-badge folder to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
Go to Settings > OpenStatus to configure your status page slug
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〉的開發相關工作。

將〈OpenStatus Badge〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

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

外掛說明

Source Code

螢幕擷圖

適用於區塊編輯器

安裝方式

常見問題集

Where do I find my status page slug?

How often is the badge updated?

Can I use multiple badges with different settings?

What happens if the badge cannot be loaded?