內容簡介
HRTSoftX - Conditional Elements 外掛允許使用者在 WordPress 區塊編輯器中創建內容，並根據設定的條件控制其顯示時機。透過靈活的佈局選項，使用者可以精確地管理內容的可見性，提升網站的互動性與使用體驗。
【主要功能】
• 使用 Gutenberg 創建和管理內容
• 根據主題自動提供佈局選項
• 支援自定義 WordPress 行動鉤子
• 控制內容顯示的條件設定
• 根據使用者角色或裝置控制可見性
• 短碼支援，方便在各處使用
外掛標籤
開發者團隊
② 後台搜尋「HRTSoftX – Conditional Elements」→ 直接安裝（推薦）
原文外掛簡介
Conditional Elements lets you create content with the WordPress block editor, add it to WordPress hooks, and control when it is displayed.
Create Gutenberg content, choose where it should appear, and configure conditions to control its visibility. You can include or exclude content based on configured conditions, control visibility by user role or device, and use custom WordPress action hooks when you need more flexibility.
Key Features
Gutenberg Content – Create and manage content using the WordPress block editor.
Flexible Placement – Add Gutenberg content before or after supported locations.
Theme-Aware Placement – Automatically provides available placement options based on the active theme.
Block Theme Support – Provides placement options for WordPress block themes.
Custom Hooks – Add content to your own WordPress action hooks.
Include Conditions – Display content when selected conditions are met.
Exclude Conditions – Prevent content from being displayed when selected conditions are met.
User Role Conditions – Control content visibility based on the current user’s role.
Device Visibility – Show or hide content for desktop, tablet, or mobile devices.
Shortcodes – Render Conditional Elements content directly inside posts, pages, templates, widgets, or other shortcode-compatible areas.
Placement
Conditional Elements provides theme-aware placement options based on the active theme.
For supported classic themes, additional theme-specific placement options may be available.
For other classic themes, common WordPress hook locations are available, including:
Before Site Wrapper
After Site Wrapper
Before Header
Before Inner Content
After Inner Content
Before Footer
After Footer
For WordPress block themes, supported placement locations include:
Before Site Wrapper
After Site Wrapper
Before Header
After Header
Before Title
After Title
Before Content
After Content
Before Inner Content
After Inner Content
Before Footer
After Footer
Available placement options depend on the active theme and its supported hooks.
You can also use Custom Hook to add content to any WordPress action hook.
Conditions
Conditional Elements provides several ways to control when content is displayed.
Include
Display content when the configured conditions match.
Exclude
Prevent content from being displayed when the configured conditions match.
User Role
Control content visibility based on the current user’s WordPress role.
Device Visibility
Control visibility based on the visitor’s device:
Desktop
Tablet
Mobile
Shortcode
Each Conditional Element has a shortcode that can be copied directly from the Shortcode column in the Conditional Elements list table.
Example:
[hrtcel_element id=32]
Use the shortcode anywhere WordPress supports shortcodes.
The shortcode respects the Conditional Element’s configured conditions by default.
Bypass Conditions
You can optionally bypass the configured conditions by passing bypass_conditions=”true”.
Example:
[hrtcel_element id=32 bypass_conditions=”true”]
This renders the element’s content without applying its configured conditional rules.
Source Code
The JavaScript and CSS files in the build/ directory are compiled from human-readable source code. The full, uncompiled source is included in this plugin in the src/ directory.
Compiled files and their sources:
build/hrtcel-admin-list.js and build/hrtcel-admin-list.css are built from src/admin-list/
build/hrtcel-sidebar.js and build/hrtcel-sidebar.css are built from src/sidebar/
The source is written in TypeScript/React and SCSS. The build is configured in package.json, tsconfig.json and webpack.config.js, and uses the @wordpress/scripts toolchain (webpack). Dependency versions are locked in package-lock.json.
Building from source
Requirements: Node.js 20.17 or later and npm.
Open the plugin directory in a terminal.
Run npm install to install the build tools.
Run npm run build to regenerate the files in build/.
Run npm run dev during development to rebuild automatically when files change.
Third-party libraries
The following libraries are bundled into the compiled JavaScript:
react-select (MIT) – https://github.com/JedWatson/react-select
Emotion packages used by react-select (MIT) – https://github.com/emotion-js/emotion
@wordpress/icons (GPL-2.0-or-later) – https://github.com/WordPress/gutenberg/tree/trunk/packages/icons
All other @wordpress/* packages are loaded from WordPress core as script dependencies and are not bundled.
