Title: Velox Component Manager Author: veloxplugins Published: 2026 年 9 月 9 日 Last modified: 2026 年 9 月 9 日 --- 搜尋外掛 ![](https://ps.w.org/velox-component-manager/assets/banner-772x250.png?rev=3687796) ![](https://ps.w.org/velox-component-manager/assets/icon-256x256.png?rev=3687796) # Velox Component Manager 由 [veloxplugins](https://profiles.wordpress.org/veloxplugins/) 開發 [下載](https://downloads.wordpress.org/plugin/velox-component-manager.1.0.1.zip) * [詳細資料](https://tw.wordpress.org/plugins/velox-component-manager/#description) * [使用者評論](https://tw.wordpress.org/plugins/velox-component-manager/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/velox-component-manager/#installation) * [開發資訊](https://tw.wordpress.org/plugins/velox-component-manager/#developers) [技術支援](https://wordpress.org/support/plugin/velox-component-manager/) ## 外掛說明 Velox Component Manager organizes front-end customizations as self-contained components instead of scattered snippets. Each component keeps its HTML, CSS, optional JavaScript, notes, status and usage information together. Create a component once, insert it with a shortcode or the Gutenberg Velox Component block, and manage its code from one focused interface. #### Component-first workflow * Keep HTML, CSS and optional JavaScript together. * Activate or deactivate the whole component. * Organize components with lightweight Groups. * Duplicate components safely; duplicates start inactive. * Select multiple components and apply common management actions in bulk. * Export one component or all components as portable JSON. * Imported components start inactive so imports cannot immediately change the public site. #### Scoped CSS by default Velox automatically wraps rendered components and scopes their CSS selectors to that wrapper. This reduces accidental style collisions between unrelated customizations. CSS scoping can be disabled per component when global styles are intentional, such as a CSS-only component targeting theme or page-builder markup. #### Conditional static assets Velox discovers the components needed by a page and combines their code into cache- friendly static assets under the WordPress uploads directory. * One page-level CSS bundle when CSS is required. * One page-level JavaScript bundle when JavaScript is required. * Hashed filenames for cache busting. * Site-wide asset mode for intentionally global customizations. * Graceful inline fallback when static files cannot be written. #### Know where components are used The Used On index shows which content references each component. Velox understands normal shortcodes, the Gutenberg Velox Component block, and Avada Fusion Code content. Safety checks warn before removing referenced components and identify inactive, trashed or missing component references. #### Editing and recovery * WordPress CodeMirror syntax highlighting. * Sandboxed live preview for unsaved HTML, CSS and JavaScript. * WordPress-backed revision history. * Browser-local recovery drafts for unsaved editor work. * Ctrl/Cmd + S support and unsaved-change warnings. #### Backup and restore Create manual backups or schedule daily, weekly or monthly snapshots with configurable retention. Backups cover Velox components and relevant Velox settings. Restore operations validate the snapshot first, create a pre-restore safety backup, and attempt an automatic rollback if a restore fails after making partial changes. Export/Import and Backup/Restore serve different purposes: exports are for portability between sites; backups are recovery snapshots for the current Velox installation. #### Focused by design Velox Component Manager does not execute PHP snippets and does not include analytics, tracking pixels, cloud libraries, AI code generation, account systems, telemetry or remote services. ### Privacy Velox Component Manager does not collect, transmit or sell visitor or administrator data. It does not contact Velox Plugins or any other external service during normal operation. Component code, usage information, settings and backups remain within the WordPress installation. Browser-local recovery drafts are stored in the administrator’s browser local storage and are not transmitted to Velox Plugins. ## 螢幕擷圖 [⌊Components dashboard with status, Group, Used On information, filters and bulk actions.⌉⌊Components dashboard with status, Group, Used On information, filters and bulk actions.⌉[ Components dashboard with status, Group, Used On information, filters and bulk actions. [⌊Component editor keeping HTML, CSS, JavaScript and notes together with Live Preview.⌉⌊ Component editor keeping HTML, CSS, JavaScript and notes together with Live Preview .⌉[ Component editor keeping HTML, CSS, JavaScript and notes together with Live Preview. [⌊Component controls for activation, CSS scoping, site-wide assets and stable shortcode usage.⌉⌊Component controls for activation, CSS scoping, site-wide assets and stable shortcode usage.⌉[ Component controls for activation, CSS scoping, site-wide assets and stable shortcode usage. [⌊Usage and safety checks showing where components are referenced before destructive actions.⌉⌊Usage and safety checks showing where components are referenced before destructive actions.⌉[ Usage and safety checks showing where components are referenced before destructive actions. [⌊Groups management for organizing components without changing how they render.⌉⌊ Groups management for organizing components without changing how they render.⌉[ Groups management for organizing components without changing how they render. ## 適用於區塊編輯器 這個外掛提供 1 個可供區塊編輯器使用的區塊。 * Velox Component ## 安裝方式 1. Upload the plugin ZIP through Plugins > Add New > Upload Plugin, or install the plugin directory under `/wp-content/plugins/`. 2. Activate Velox Component Manager. 3. Open Velox Components > Add New. 4. Add your HTML, CSS and optional JavaScript, then save the component. 5. Insert the generated shortcode wherever WordPress shortcodes are supported, or use the Velox Component block in Gutenberg. Example shortcode: ``` [velox_component slug="homepage-feature"] ``` ## 常見問題集 ### Does Velox Component Manager run PHP snippets? No. The plugin is deliberately limited to front-end HTML, CSS and JavaScript. PHP execution has a different security and failure profile and is outside the plugin’s purpose. ### Why is CSS scoping enabled by default? Scoping helps prevent generic selectors such as `.card`, `.title` or `.button` in one component from changing another component. Disable scoping only when the CSS intentionally needs to target markup outside the component wrapper. ### What HTML can a component render? Rendered component HTML is filtered through WordPress KSES. Standard post markup plus common form and SVG elements are supported. Script/style blocks and inline event-handler attributes are removed; put styling in the CSS tab and executable behaviour in the JavaScript tab. ### Can I use it with Avada or Elementor? Yes. The shortcode is builder-independent and can be used anywhere the builder processes WordPress shortcodes. Avada Fusion Code references are also understood by the Used On index. No dedicated builder integration is required. ### Why does Live Preview look different from my real page? The preview intentionally renders the component in an isolated sandbox and does not load your theme or page-builder styles. It is designed to verify the component itself. The live page remains authoritative when a component relies on theme-specific CSS. ### What is the difference between Export and Backup? Export creates portable component JSON for moving or sharing components. Backup creates a recovery snapshot of components and relevant Velox settings for the current installation. ### What happens if I uninstall the plugin? Velox preserves components, groups, settings and stored backups by default. This avoids silently destroying custom code simply because the plugin was removed. Disposable scheduled/runtime state is cleaned up. ### Does the plugin send data to Velox Plugins? No. Velox Component Manager has no telemetry, tracking or remote-service dependency. ## 使用者評論 這個外掛目前沒有任何使用者評論。 ## 參與者及開發者 以下人員參與了開源軟體〈Velox Component Manager〉的開發相關工作。 參與者 * [ veloxplugins ](https://profiles.wordpress.org/veloxplugins/) [將〈Velox Component Manager〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/velox-component-manager) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/velox-component-manager/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/velox-component-manager/)，或 透過 [RSS](https://plugins.trac.wordpress.org/log/velox-component-manager/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/velox-component-manager/)。 ## 變更記錄 #### 1.0.1 * Fixed CodeMirror layout in initially hidden CSS and JavaScript tabs so the gutter and line numbers no longer overlap or clip code text. * Routed preview and late-discovered component CSS/JavaScript through WordPress enqueue APIs. * Sanitized rendered component HTML through a WordPress KSES allow list and limited the filesystem fallback notice to Velox admin screens. #### 1.0.0 * Initial public release. * Create reusable front-end components that keep HTML, CSS, optional JavaScript and notes together. * Scoped CSS by default with conditional hashed static asset delivery and site- wide asset support. * Insert components with shortcodes or the Gutenberg Velox Component block. * Track usage across WordPress content, custom fields and Avada Fusion Code. * Includes Groups, bulk actions, Live Preview, revisions, recovery drafts, JSON portability and backup/restore. * Includes safety checks for referenced, inactive, trashed and missing components. ## 中繼資料 * 版本 **1.0.1** * 最後更新 **3 週前** * 啟用安裝數 **少於 10 次** * WordPress 版本需求 ** 6.6 或更新版本 ** * 已測試相容的 WordPress 版本 **7.1.2** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/velox-component-manager/) * 標籤: * [code manager](https://tw.wordpress.org/plugins/tags/code-manager/)[components](https://tw.wordpress.org/plugins/tags/components/) [custom css](https://tw.wordpress.org/plugins/tags/custom-css/)[custom html](https://tw.wordpress.org/plugins/tags/custom-html/) [javascript](https://tw.wordpress.org/plugins/tags/javascript/) * [進階檢視](https://tw.wordpress.org/plugins/velox-component-manager/advanced/) ## 評分 這個項目尚無任何評論記錄。 [撰寫評分](https://wordpress.org/support/plugin/velox-component-manager/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/velox-component-manager/reviews/) ## 參與者 * [ veloxplugins ](https://profiles.wordpress.org/veloxplugins/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/velox-component-manager/)