菜单
Comprehensive guide to building, maintaining, and recovering Elementor-based WordPress sites. Covers the CSS pipeline, global styles (Kit), common post-attack failures and fixes, Pro vs Free features, and integration with Kadence and Hello Elementor themes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Deploy a theme, plugin, or wp-content subset to a WordPress server from a CI/CD pipeline, with automatic pre-deploy backup, post-deploy health check, and automatic rollback on failure. Designed for GitHub Actions, GitLab CI, or any pipeline that can run Python.
Security and integrity audit for WooCommerce stores. Checks REST API key scope, payment gateway exposure, webhook HTTPS enforcement, suspicious $0 orders, exposed wc-logs (PII/payment data), and coupon abuse.
Scaffold and deploy a WordPress child theme via SSH. Generates style.css, functions.php (with correct parent style enqueueing), and index.php. Supports Kadence, Astra, GeneratePress, Hello Elementor, OceanWP, and any custom parent. Can activate the child theme immediately after creation.
Safely switch WordPress themes via SSH with automatic rollback if the site goes down. Records the previous theme for instant rollback. Verifies HTTP 200 before and after the switch.
Security audit of WordPress themes via SSH. Scans for PHP malware patterns, injected scripts, recently modified files, and unexpected file types. Also checks DB for customizer injections and Elementor postmeta payloads. Use after any attack or before going live with a new/inherited theme.
Comprehensive guide to building and recovering Kadence-based WordPress sites. Covers global styles, Kadence Blocks, Header/Footer builder, template library, child theme best practices, and post-attack recovery sequences.
| name | elementor-guide |
| description | Comprehensive guide to building, maintaining, and recovering Elementor-based WordPress sites. Covers the CSS pipeline, global styles (Kit), common post-attack failures and fixes, Pro vs Free features, and integration with Kadence and Hello Elementor themes. |
| triggers | ["Elementor","Elementor broken","Elementor not rendering","Elementor CSS","Elementor Kit","Elementor Pro","Elementor recovery","page builder"] |
Elementor is a visual page builder that stores page layouts as JSON in
_elementor_data postmeta and generates CSS cached in _elementor_css.
Understanding this pipeline is essential for diagnosis and recovery.
1. Plugin loads → registers the_content filter at priority 9999
2. Filter checks _elementor_css postmeta for cached CSS
3. Cache miss OR elementor_css_version bumped → regenerates CSS
4. Outputs rendered HTML with <div class="elementor-*"> structure
5. Inline CSS injected in <head> or dequeued to file
Break step 1 (plugin missing/inactive) → raw <p> tags, no layout
Break step 2-3 (cache corrupt/stale) → layout renders but styles wrong
Break step 4 (JSON corrupt) → blank sections or missing widgets
| DB key | Purpose |
|---|---|
wp_options.elementor_css_version | Version token — bump this to force CSS rebuild |
wp_postmeta._elementor_css | Per-page CSS cache — delete to rebuild per page |
wp_options._elementor_global_css | Global (Kit) CSS cache |
wp-content/cache/elementor/ | File-based CSS cache |
python scripts/restoration/wp-elementor-fix.py --config config/config.yaml
This bumps elementor_css_version, deletes all _elementor_css postmeta,
and clears the file cache — forcing Elementor to regenerate CSS on next page load.
The Kit is the control panel for global design tokens — fonts, colours, spacing,
and global widgets. It lives as a WordPress post with post type elementor_library
and _elementor_template_type = 'kit'.
-- Find the active Kit
SELECT post_id FROM wp_postmeta
WHERE meta_key = '_elementor_template_type' AND meta_value = 'kit';
-- Check which Kit is active
SELECT option_value FROM wp_options WHERE option_name = 'elementor_active_kit';
Elementor Kit stores global tokens in its _elementor_page_settings postmeta.
These generate CSS custom properties:
:root {
--e-global-color-primary: #6EC1E4;
--e-global-color-secondary: #54595F;
--e-global-color-text: #7A7A7A;
--e-global-color-accent: #61CE70;
--e-global-typography-primary-font-family: 'Roboto';
--e-global-typography-secondary-font-family: 'Roboto Slab';
}
Override in child theme style.css (load after Elementor styles):
:root {
--e-global-color-primary: #E53E3E;
}
| Feature | Free | Pro |
|---|---|---|
| Drag-drop visual editor | ✅ | ✅ |
| 40+ basic widgets | ✅ | ✅ |
| 90+ Pro widgets | ❌ | ✅ |
| Theme Builder (header/footer) | ❌ | ✅ |
| WooCommerce Builder | ❌ | ✅ |
| Popup Builder | ❌ | ✅ |
| Dynamic Content | ❌ | ✅ |
| Form Widget (advanced) | ❌ | ✅ |
| Global Widget editing | ❌ | ✅ |
| Role Manager | ❌ | ✅ |
| Custom CSS per-widget | ❌ | ✅ |
The most common attack scenario: plugins deleted → Elementor inactive → site shows raw HTML instead of designed layout.
# 1. Restore missing plugins (including Elementor)
python scripts/restoration/wp-plugin-restore.py --config config/config.yaml \
--plugins elementor --activate
# Elementor Pro must be re-purchased and installed manually via wp-admin
# (not on wordpress.org)
# 2. Fix Elementor CSS pipeline
python scripts/restoration/wp-elementor-fix.py --config config/config.yaml
# 3. Verify site renders
curl -sI https://yoursite.com | head -3
Cause: Elementor plugin missing from filesystem but still in active_plugins.
WordPress tries to load the missing plugin → PHP fatal → blank output.
Diagnosis:
SELECT option_value FROM wp_options WHERE option_name='active_plugins';
-- Look for elementor/elementor.php — is the directory there?
Fix: wp-plugin-restore.py then wp-elementor-fix.py
Cause: _elementor_css cache corrupted or CSS version mismatch.
Fix: Bump elementor_css_version and delete _elementor_css postmeta:
python scripts/restoration/wp-elementor-fix.py --config config/config.yaml
Cause: Elementor Kit post was deleted or its postmeta was cleared.
Diagnosis:
SELECT option_value FROM wp_options WHERE option_name='elementor_active_kit';
-- Should return a post_id. Then:
SELECT * FROM wp_postmeta WHERE post_id=KIT_ID AND meta_key='_elementor_page_settings';
Fix: Restore Kit settings from backup. If no backup, reconfigure in Elementor → Site Settings → Global Colours + Global Fonts.
Cause: Elementor Pro plugin deleted or elementor-pro/elementor-pro.php
removed from active_plugins.
Fix: Re-install Elementor Pro from your Elementor account → My Subscriptions → Downloads.
Then re-run wp-elementor-fix.py.
Cause: Nonce issue (WP session expired), DB write permissions, or PHP memory limit too low.
Diagnosis:
# Check PHP memory limit
ssh USER@HOST "php -r 'echo ini_get(\"memory_limit\");'"
# Check for DB errors
ssh USER@HOST "tail -50 /path/to/wp-content/debug.log"
| Theme | Notes |
|---|---|
| Hello Elementor | Elementor's own lightweight theme. Purpose-built, zero styling conflicts. Use with Elementor Pro Theme Builder. |
| Kadence | Excellent pairing — Kadence global styles complement Elementor's kit. Use Kadence for headers/footers, Elementor for page content. |
| Astra | Performance-focused, good Elementor compatibility. |
| GeneratePress | Ultra-lightweight, great for speed. |
| OceanWP | Full-featured, many Elementor extensions. |
/* Section */
.elementor-section { }
.elementor-section.elementor-section-full_width { }
/* Column */
.elementor-column { }
/* Widget container */
.elementor-widget { }
.elementor-widget-text-editor { }
.elementor-widget-heading { }
.elementor-widget-image { }
.elementor-widget-button { }
/* Inner section (nested) */
.elementor-inner-section { }
/* Target by Elementor CSS ID (set in Advanced tab) */
#my-section { }
/* Target by CSS class (set in Advanced tab) */
.my-custom-class { }
Enable temporarily for diagnosis (never leave on in production):
// wp-config.php
define( 'ELEMENTOR_DEBUG', true );
Or via SSH:
python scripts/hardening/wp-harden.py --config config/config.yaml --dry-run
# Check what WP_DEBUG state the script would set