Title: ShahCalc – Visual Calculator Builder
Author: syedjunaidshah
Published: <strong>2026 年 9 月 23 日</strong>
Last modified: 2026 年 9 月 23 日

---

搜尋外掛

![](https://ps.w.org/shahcalc/assets/banner-772x250.png?rev=3708551)

![](https://ps.w.org/shahcalc/assets/icon-256x256.png?rev=3708551)

# ShahCalc – Visual Calculator Builder

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

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

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

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

## 外掛說明

ShahCalc lets you build interactive calculators (loan and mortgage payments, ROI,
pricing quotes, fitness and health figures and more) without writing code. Define
the inputs, assemble a formula visually, style the result, and embed it with a shortcode,
a Gutenberg block or an Elementor widget.

**How it works**

 * **Visual builder.** Add number fields, sliders, dropdowns and checkboxes. Build
   the formula by clicking fields and operators, or type it. The builder validates
   the formula as you go and shows a live preview at desktop, tablet and mobile 
   widths.
 * **Safe formula engine.** Formulas are parsed into an abstract syntax tree and
   evaluated by walking that tree. Formula text is never executed as code: there
   is no `eval()` and no `new Function()`, on the server or in the browser. Supported:`
   + - * / ^`, parentheses, numbers and field IDs.
 * **Vanilla JavaScript.** No jQuery and no charting library. Results update as 
   visitors type, with an animated count-up and a small SVG chart.
 * **Style isolation.** Each calculator renders inside a Shadow DOM, so theme CSS
   does not restyle it and its CSS does not leak into your theme. Colors, borders,
   radius, typography and spacing are configured through a fixed set of CSS custom
   properties.
 * **Gutenberg block.** Search for “ShahCalc” in the block inserter.
 * **Elementor widget.** Pick a calculator and style it from the Elementor Style
   tab. Elementor is optional.
 * **Shareable results.** Visitors’ inputs are reflected in the page URL (query 
   string) so a specific result can be bookmarked or shared.
 * **Loads only where needed.** The front-end scripts are enqueued only on pages
   that actually display a calculator.

**Who can manage calculators?** Administrators only (the `manage_options` capability).
Published calculators are visible to all visitors; drafts are visible only to people
who can edit them.

#### Usage

 1. Go to **ShahCalc** in the admin menu and click **Create New** (you can start from
    a template).
 2. Add fields, build the formula, style the calculator and click **Save Calculator**.
 3. Embed it with `[shahcalc id="123"]`, the **ShahCalc** block, or the **ShahCalc**
    Elementor widget.

Shortcode attributes: `id` (required), `show_title` (`true` or `false`, overrides
the calculator’s own setting).

#### Privacy

ShahCalc does not set cookies, does not store visitor data, and does not contact
any external service. The shareable-URL feature writes the values a visitor types
into their own browser’s address bar. If your analytics or server logs record full
page URLs, those values will be recorded too.

#### Source code

The complete, human-readable source, including the unminified React (JSX) sources
for the compiled files in the `build/` directory, is public on GitHub: https://github.
com/Junaidshah1234/shahcalc

To rebuild the compiled files: clone the repository, run `npm ci`, then `npm run
build`. The build uses `@wordpress/scripts`; the entry points are `src/builder.jsx`,`
src/dashboard.jsx` and `src/block.jsx`. The scripts in `public/js/` are not compiled
and are shipped as written.

## 螢幕擷圖

[⌊The full-screen visual builder: fields, formula builder, live responsive preview.⌉⌊
The full-screen visual builder: fields, formula builder, live responsive preview
.⌉[

The full-screen visual builder: fields, formula builder, live responsive preview.

[⌊The ShahCalc dashboard with each calculator's shortcode.⌉⌊The ShahCalc dashboard
with each calculator's shortcode.⌉[

The ShahCalc dashboard with each calculator’s shortcode.

[⌊A calculator on the front end.⌉⌊A calculator on the front end.⌉[

A calculator on the front end.

[⌊The Elementor widget with the Style tab controls.⌉⌊The Elementor widget with the
Style tab controls.⌉[

The Elementor widget with the Style tab controls.

## 適用於區塊編輯器

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

 *   ShahCalc

## 安裝方式

 1. Upload the `shahcalc` folder to `/wp-content/plugins/`, or install it from **Plugins
    > Add New**.
 2. Activate the plugin through the **Plugins** screen.
 3. Open **ShahCalc** in the admin menu to create your first calculator.

## 常見問題集

### Does ShahCalc use jQuery?

No. The front end is vanilla JavaScript.

### Is it safe to let formulas run in the browser?

Yes. Formulas are parsed and evaluated by a small purpose-built parser that supports
only arithmetic. They are also validated on the server before they are saved, and
validated again when a calculator is rendered.

### Will my theme’s CSS change how the calculator looks?

Theme rules for elements inside the calculator do not apply, because it renders 
in a Shadow DOM. Inherited properties (such as the page’s font family, unless you
set one in ShahCalc) still flow in, which is normal for Shadow DOM. Browsers without
declarative Shadow DOM support get the same result through a small JavaScript fallback.

### Can contributors or editors create calculators?

No. Creating and editing calculators requires the `manage_options` capability.

### Does it work without Elementor?

Yes. The shortcode and the Gutenberg block work on their own. The Elementor widget
appears only when Elementor is active.

### What happens to my calculators if I uninstall the plugin?

Calculators are stored as a custom post type and are left in your database so they
are not lost by accident. Note that an `[shahcalc]` shortcode left on a page will
appear as plain text once the plugin is removed.

## 使用者評論

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

## 參與者及開發者

以下人員參與了開源軟體〈ShahCalc – Visual Calculator Builder〉的開發相關工作。

參與者

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

[將〈ShahCalc – Visual Calculator Builder〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/shahcalc)

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

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

## 變更記錄

#### 1.0.1

 * Renamed the plugin from OmniCalc to ShahCalc (name/slug/text-domain) at the request
   of the WordPress.org Plugin Review Team.
 * Replaced the raw `<style>` tag used inside the calculator’s Shadow DOM with a
   stylesheet registered and enqueued via `wp_register_style()` / `wp_enqueue_style()`.

#### 1.0.0

 * Initial release.

## 中繼資料

 *  版本 **1.0.1**
 *  最後更新 **5 天前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.3 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.1.2**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/shahcalc/)
 * 標籤:
 * [calculator](https://tw.wordpress.org/plugins/tags/calculator/)[calculator-builder](https://tw.wordpress.org/plugins/tags/calculator-builder/)
   [elementor](https://tw.wordpress.org/plugins/tags/elementor/)[formula](https://tw.wordpress.org/plugins/tags/formula/)
   [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/)
 *  [進階檢視](https://tw.wordpress.org/plugins/shahcalc/advanced/)

## 評分

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

[撰寫評分](https://wordpress.org/support/plugin/shahcalc/reviews/#new-post)

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

## 參與者

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

## 技術支援

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

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