外掛說明
Studio Noir Custom Page Styles allows you to add custom CSS to individual pages and posts, with powerful features for reusability and file management.
Key Features
- Write custom CSS directly in the page/post editor
- Upload CSS and JavaScript files
- Select unlimited existing styles with drag & drop reordering
- Choose header or footer loading for JavaScript files
- Automatically generates CSS files for better performance
- Choose which post types to enable
- Secure and WordPress coding standards compliant
Perfect For
- Adding unique designs to landing pages
- Customizing individual blog posts with external libraries
- Managing page-specific styles without bloating your main stylesheet
- Reusing common style patterns across multiple pages
- Adding JavaScript effects and animations to specific pages
How It Works
- Edit any page or post
- Find the “Custom Page Styles” meta box
- Upload CSS/JS files, select existing styles, or write custom CSS
- Reorder styles by drag & drop to control load order
- Publish and see your styles in action!
Load Order
Styles are loaded in the following order for maximum flexibility:
- Selected styles (base templates)
- Uploaded files (libraries and frameworks)
- Direct CSS (final adjustments and overrides)
螢幕擷圖
Custom Page Styles meta box with file upload interface 
Drag & drop reordering of selected styles 
Settings page to choose enabled post types
安裝方式
Automatic Installation
- Go to Plugins > Add New
- Search for “Studio Noir Custom Page Styles”
- Click “Install Now”
- Activate the plugin
Manual Installation
- Download the plugin zip file
- Go to Plugins > Add New > Upload Plugin
- Choose the downloaded file and click “Install Now”
- Activate the plugin
After Activation
- Go to Settings > Custom Page Styles
- Select which post types you want to enable
- Edit any page/post and find the “Custom Page Styles” meta box
- Start adding custom styles!
常見問題集
-
Can I use this on custom post types?
-
Yes! Go to Settings > Custom Page Styles and select which post types you want to enable.
-
Will this work with my theme?
-
Yes, Studio Noir Custom Page Styles works with any WordPress theme.
-
How many styles can I apply to one page?
-
Unlimited! You can select as many existing styles as you need, upload multiple CSS/JS files, and add custom CSS – all on the same page.
-
Can I control the order styles are loaded?
-
Yes! Use drag & drop to reorder selected styles. The order you set determines the load order.
-
What file types can I upload?
-
CSS (.css) and JavaScript (.js) files only. Maximum file size is 5MB per file.
-
Where should JavaScript files be loaded?
-
You can choose header or footer for each JS file. Footer is recommended for most cases (default).
-
Where are the uploaded files stored?
-
Uploaded files are stored in
/wp-content/uploads/sn-cps-styles/{post_id}/to keep files organized by post. -
Does this affect site performance?
-
No, CSS is generated as separate files and only loaded on the relevant pages, which is better for performance than inline styles.
-
Can I use this with page builders?
-
Yes, Studio Noir Custom Page Styles works alongside page builders like Elementor, Gutenberg, and the Classic Editor.
-
What if the meta box doesn’t appear?
-
- Make sure the plugin is activated
- Check that the post type is enabled in Settings > Custom Page Styles
- Click “Screen Options” at the top of the editor and make sure “Custom Page Styles” is checked
使用者評論
這個外掛目前沒有任何使用者評論。
參與者及開發者
變更記錄
1.1.1
- SECURITY: Enhanced path traversal protection in ajax_remove_file()
- SECURITY: Added MIME type validation using finfo_file() in ajax_upload_file()
- FEATURE: Automatic filename conflict resolution (adds -1, -2, etc.)
- IMPROVED: File upload security with comprehensive validation
1.1.0
- NEW: Unlimited style selection (previously limited to 2)
- NEW: Drag & drop reordering for selected styles (ACF-style sortable UI)
- NEW: File upload feature for CSS and JavaScript files
- NEW: Choose header or footer loading for JavaScript files
- NEW: Files organized in post-specific directories
- IMPROVED: CSS load order optimization (selected uploaded direct CSS)
- IMPROVED: Security enhancements for file uploads (type validation, size limit)
- IMPROVED: Better UI with visual feedback and file management
1.0.2
- IMPROVED: Style loading priority optimization
- Set
wp_enqueue_scriptshook priority to 20 - Custom CSS now reliably overrides theme styles
1.0.1
- SECURITY: Enhanced CSS sanitization (WP_Error support)
- SECURITY: Additional dangerous pattern detection
- SECURITY: File size limit added (1MB for CSS)
- IMPROVED: Better error handling with Transient API
- IMPROVED: Path traversal attack prevention
1.0.0
- Initial release
- Custom CSS per page/post
- Reuse existing styles feature
- Post type selection
- Automatic CSS file generation
- Security: SQL injection prevention
- Security: CSS sanitization
- Security: File path validation