Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Simple Custom Code – Custom CSS, JS, and HTML, Visual CSS Customizer

开发者 appscreo
更新时间 2026年10月29日 23:26
PHP版本: 7.0 及以上
WordPress版本: 7.1
版权: GPLv2 or later
版权网址: 版权信息

标签

custom css custom js html snippet css snippet js snippet

下载

1.0 2.0 1.1 1.3 1.4

详情介绍:

Simple Custom Code – CSS, JS, and HTML lets you add custom CSS, JavaScript, and HTML to WordPress without touching theme files. Create and manage unlimited code snippets in one place. Every snippet is saved as a file in your uploads folder, so your code loads fast, caches well, and stays portable — no database clutter. Choose the workflow that fits you. The live Visual CSS Customizer lets you point at any element on your page, click to select it, and style it with real-time visual controls. Or write code directly in the built-in editor with syntax highlighting, autocomplete, and error checking. Both paths produce clean, ready-to-use code. Free features include: Live Visual CSS Customizer [youtube https://www.youtube.com/watch?v=waO2WUFMMLk] Create designs directly from your site's frontend using the built-in Visual CSS Editor. Select any element visually, adjust fonts, colors, spacing, borders, and hover effects with live preview, and save when you are happy with the result. Key features: Gravity Forms Visual CSS Customizer [youtube https://www.youtube.com/watch?v=AOhsZmQdy48] Style Gravity Forms with the dedicated live CSS customizer. Open it from the admin bar under CSS Customize > Gravity Forms and fine-tune form fields, labels, buttons, and layouts in real time. Match your forms to your brand without writing CSS by hand. Unlimited CSS, JavaScript & HTML Snippets Go beyond CSS. Create and manage unlimited snippets for CSS, JavaScript, and HTML from a single interface. Each snippet type is built for its purpose, so you can style, script, and structure your site exactly as you need. Highlights: Flexible Loading Locations Control where your code loads. Unlike basic custom CSS plugins, Simple Custom Code gives you granular control over the context and location of each snippet: You never load unnecessary code where it does not belong, keeping your site lean and fast. Advanced Code Editor with Autocomplete & Syntax Highlighting The built-in code editor is built for developers and beginners alike: AI-Powered Code Generation Describe what you need in plain English, and the AI generates ready-to-use CSS, JavaScript, or HTML. Whether it is a sticky header, a custom button style, or an admin tweak, tell the AI what you need and review the result in the editor before saving. Smart Plugin Settings Total control over how and where your snippets load: See Loaded Snippets on the Page Check exactly which snippets are active on any page. The plugin lists the loaded snippets directly on your site so you can verify what is running, where, and in what order — without guessing or hunting through the admin. Upgrade to Pro The free version covers the essentials. The Pro upgrade adds advanced features for developers and agencies who need complete control over code delivery: Pro is built for performance-focused developers and agencies who need production-grade code management on WordPress. Learn more and upgrade at simplecustomcode.com Who This Is For This plugin helps anyone customize WordPress design and functionality quickly, safely, and without touching core files:

安装:

Method 1: WordPress Dashboard (Recommended)
  1. Navigate to Plugins → Add New in your WordPress admin.
  2. Click the Upload Plugin button at the top of the page.
  3. Choose the appscreo-visual-css-customizer.zip file from your computer.
  4. Click Install Now and wait for the installation to complete.
  5. Click Activate Plugin.
Method 2: Manual FTP Upload
  1. Unzip the appscreo-visual-css-customizer.zip file to your computer.
  2. Upload the appscreo-visual-css-customizer folder to /wp-content/plugins/ on your server.
  3. Navigate to Plugins in your WordPress admin dashboard.
  4. Find "Simple Custom Code – CSS, JS, and HTML" in the plugin list and click Activate.
First-Time Setup
  1. After activation, you'll see a Custom Code menu item in your WordPress admin.
  2. Click Custom Code → Add New to create your first snippet.
  3. Visit any page on your site's frontend and click the CSS Customize button in the admin toolbar to launch the visual customizer, or start directly from the snippet editor.

屏幕截图:

  • Plugin UI 2
  • Plugin UI 3
  • Plugin UI 4
  • Plugin UI 5
  • Plugin UI 6
  • Plugin UI 7

常见问题:

Can I use the Visual Customizer on any theme?

The customizer works on most modern, well-coded themes. It may have limited functionality on themes that: - Heavily rely on JavaScript for rendering their layout - Use excessive iframes or shadow DOM elements - Have complex, non-standard DOM structures For best results, we recommend using it with block themes (WordPress 5.9+) or classic themes with standard HTML structure.

Is it safe to use on a live site?

Absolutely! You have full control: 1. Create and test snippets while they are set to "Inactive" 2. The visual customizer shows a live preview, but changes are only saved when you explicitly click "Save Snippet" 3. Even after saving, snippets won't affect your live site until you change their status to "Active" 4. You can use URL conditions to test snippets on specific pages before applying site-wide

Can I use this alongside other CSS plugins?

Yes, but be mindful of potential conflicts. Simple Custom Code – CSS, JS, and HTML loads after most theme styles but before other plugins. Use the Priority setting to adjust load order if needed.

I'm upgrading from a version prior to 1.3 — where did the "CSS Modifications" menu go?

In version 1.3, the CSS Modifications admin menu item has been renamed to Custom Code. This reflects the expanded capabilities of the plugin, which now supports CSS, JavaScript, and HTML snippets — not just CSS. All of your existing custom CSS snippets, settings, and configurations are fully preserved and will continue to work exactly as before. Nothing is lost — the menu has simply been renamed to better represent what the plugin can now do.

Can I use the AI code generation feature?

Yes! AI-powered code generation is available in the free version. You'll need to provide your own OpenAI API key, which you can obtain from your OpenAI account. Once configured in the plugin settings, simply describe what you want in plain English and the AI will generate the appropriate CSS, JavaScript, or HTML code for you.

Does the plugin slow down my site?

No — performance is a core design principle. All snippets are stored as external files (not in the database), which means they benefit from browser and server-side caching. You can also choose between inline or external loading per snippet, and use priority settings to ensure optimal load order. Pro users gain additional performance tools including minification, async loading, and cache mode.

What's the difference between the free version and Pro?

The free version includes all the core features: unlimited CSS, JS, and HTML snippets, the Visual CSS Customizer, file-based storage, the advanced code editor, AI-powered generation, loading location control, and role-based access. Pro adds developer-grade performance tools: conditional loading by URL, JS defer, async CSS, SCSS/Less compilation, auto-minification, cache mode, and priority support.

Will upgrading to Pro affect my existing snippets?

Not at all. Upgrading to Pro is seamless — all your snippets and settings remain fully intact.

更新日志:

2.0 1.4 1.3 1.2 (Simple Custom Code base) 1.1 1.0