這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

WP Designer

外掛說明

WP Designer allows you to add extra functionality to your site in a standard compliant way using customization best-practices. It allows you to keep the site functionality outside the theme so that it is not dependent on the theme. This comes in handy in various scenarios like when you want to create Custom Post Types, Custom Taxonomies etc. This also allows you to have one single place where you keep all your edits.

WP Designer also gives you a development friendly environment. It provides you options to conveniently disable your customizations when you want to troubleshoot.

It supports SCSS, which means you can now quickly, easily and more flexibly author the styles for your website. Place all your customizations in style.scss and WP Designer will automatically compile it into CSS for your website. Using SASS can help you save a lot of time customizing the site design. A comprehensive guide to using SCSS can be found here: http://sass-lang.com/guide

Place all your php functions in functions.php and extra styles in style.scss.

WP Designer allows you to:

  1. Add extra functionality to any theme without hassles.
  2. Extend the capabilities of existing theme.
  3. Keep your customizations (php code snippets and css styles) outside the theme.
  4. Theme independence allows to extend WordPress without creating a massive and painful update to an existing theme.
  5. Speed up your development time using SCSS.

Also read:

  1. http://justintadlock.com/archives/2013/09/14/why-custom-post-types-belong-in-plugins
  2. http://justintadlock.com/archives/2011/02/02/creating-a-custom-functions-plugin-for-end-users

螢幕擷圖

  • WP Designer: Debug Tools

安裝方式

Log in to your WordPress dashboard, navigate to the Plugins menu and click Add New. In the search field type WP Designer and click Search Plugins. Once you’ve found the plugin you can install it by simply clicking “Install Now”.

Or you can follow the steps given below:

  1. Upload the entire wp-designer folder to the /wp-content/plugins/ directory.
  2. DO NOT change the name of the wp-designer folder.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Once activated, visit the Settings > WP Designer for usage instructions.

常見問題集

How do I start my customizations?

On activation, WP Designer automatically creates a wp-designer folder in the uploads directory which includes all the necessary files and folders required for designing the site. You can start by editing the functions.php for adding any custom functionality. If you need CSS customizations you can use the style.scss file SCSS/CSS customizations. The inbuilt compiler will automatically handle the SCSS to CSS generation for the front-end.

How do I make use of SASS

You just need to place all your design customizations in the style.scss file located in the wp-designer folder in the uploads directory and it will be automatically compiled to autogenerated.css and your customizations would reflect on the site front-end.

Just a second, now when I use SASS, will my old customizations stay and will they work?

Rest assured, your existing customizations stay in the same style.css file and you can continue to use it to customize your design. With the support of SASS, WP Designer will create an additional style.scss file so that you can go ahead and SASSify your customization. The compile routine is automatically managed by the plugin so that your customizations appear on the front-end.

How do I disable my customizations?

There are three ways to do this.

  1. Go to Setting > WP Designer and check the option to disable functions.php and style.css.
  2. Comment out your code.
  3. Disable the WP Designer plugin itself.

Some of the customizations in plugin’s style.scss / style.css are not working.

If you have made any specific customizations using WordPress in-built Customizer or your child theme, they may not work due to CSS priority or specificity. For instance, if you have set the background-color for the site using the WordPress customizer, the plugin’s style.css may not be able to override the same CSS rule.

使用者評論

2020 年 10 月 4 日
This plugin is amazing. Quick and easy way to be able to write with SCSS on any site. Save time on coding, keep your CSS organized, streamline your dev. Simply awesome.
2016 年 9 月 3 日 1 則留言
I just tried out the SCSS functionality and it is working. Thank you. Your headline “Now SASSified” seems a little bit misleading since the SASS nesting is not supported ( omitting {} ).
閱讀全部 2 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈WP Designer〉的開發相關工作。

參與者

將〈WP Designer〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.2.4

  • Updated PHP compatibility requirements.
  • Updated scssphp library.
  • Generate and enqueue a compressed css for normal visitors for performance speed-up.

2.2.3

  • Implemented versioning to last modified time to force cachebusting during development.

2.2.2

  • Changed inclusion of functions.php to plugins_loaded.
  • Fixes a lot of bugs and functions not working.

2.2.1

  • Updated scssphp library.

2.1.0

  • Updated scssphp library.
  • Filters allow manipulation of scss during compile time.
  • Minified version enqueued for site performance enhancement.

2.0.2

  • WP Designer is fully compatible with WordPress 4.5.

2.0.1

  • WP Designer is fully compatible with WordPress 4.4.

2.0

  • New Feature: Added support for SCSS.
  • Eliminated obsolete code.

1.0

  • This is the initial release of the plugin.