Title: WP Live CSS Editor
Author: funlab
Published: <strong>2011年5月15日</strong>
Last modified: 2013年9月28日

---

プラグインを検索

このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま
せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress
で使用した場合は互換性の問題が発生する可能性があります。

![](https://s.w.org/plugins/geopattern-icon/wp-live-css-editor.svg)

# WP Live CSS Editor

 作者: [funlab](https://profiles.wordpress.org/funlab/)

[ダウンロード](https://downloads.wordpress.org/plugin/wp-live-css-editor.13.09.zip)

 * [詳細](https://ja.wordpress.org/plugins/wp-live-css-editor/#description)
 * [レビュー](https://ja.wordpress.org/plugins/wp-live-css-editor/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/wp-live-css-editor/#installation)
 * [開発](https://ja.wordpress.org/plugins/wp-live-css-editor/#developers)

 [サポート](https://wordpress.org/support/plugin/wp-live-css-editor/)

## 説明

A CSS live Editor that allows you to preview realtime CSS changes and then save 
your changes.
 It saves dated backups of each save, so you can go back if it breaks,
and you should erase backups once on a while. It’s a port from a Drupal module Live
CSS http://drupal.org/project/live_css by guybedford http://drupal.org/user/746802
Now using ACE editor http://ace.ajax.org/ Tested on WordPress 3.6. But needs more
testing !

=capabilities.php problem (not bug) SOLVED !=

Ok, now I did the correct thing and created an action to the wp_loaded hook to init
the plugin, then,
 check whether the user can “erase themes” which is an Admin capability
only, so the plugin only works if you are an admin. No need to modify the capabilities.
php nor anything else.

Some users have had problems in former 12.05 release with their site being inaccesible
after installing the plugin.
 It all seemed to be part of the same problem with 
the capabilities.php file that is discussed here: https://wordpress.org/support/
topic/fatal-error-call-to-undefined-function-wp_get_current_user-4?replies=32

It works nice and perfect for me, but still needs testing !!!

### Hola mundo !

Este plugin está basado en el módulo de [Drupal Live CSS] (http://drupal.org/project/
live_css) de [guybedford] (http://drupal.org/user/746802)

Es un editor de CSS que te permite editar en directo todas las hojas de estilo CSS
de tu web, ver los cambios y guardar sobre la marcha.
 Está pensada para usarla 
al diseñar la web, por lo que conviene desactivarlo o desinstalarlo una vez terminada.
Cada vez que se guardan los cambios se genera una copia de seguridad fechada, para
que puedas volver atrás si hace falta. Utiliza ACE como editor.

Sólo los administradores pueden usar el plugin.

Importante !!!

Hacer copia de respaldo de los archivos CSS antes de probarlo !
 Aunque el plugin
genera automáticamente copias de seguridad fechadas en el mismo directorio en que
estén los archivos modificados, siempre conviene tener una copia del estado general
de la cosa antes de empezar a trastear. Si no funciona al guardar o hacer la copia
de seguridad aparece un mensaje con las rutas del archivo que se intentaba modificar,
la de la copia de seguridad y tal vez un mensaje de error. Lo más seguro es que 
el problema sea de permisos. Los CSS que quieras editar deberían tener permiso de
escritura 755.

Instalación

La instalación es la típica de cualquier plugin de wordpress. Desempaquetar el zip
en wp-content/plugins, y listo. No hay que tocar los temas ni hacer nada más que
activarlo desde el panel de administración.
 No tiene opciones ni página propia 
en el panel de administración. Probado en WordPress 3.3.2, tienes que ser un administrador
para poder usarlo.

Utiliza ahora el hook wp_loaded que arregla el problema de la versión anterior que
se discutía aquí: https://wordpress.org/support/topic/fatal-error-call-to-undefined-
function-wp_get_current_user-4?replies=32

Más información

    ```
    http://drupal.org/project/live_css  Live CSS
    http://drupal.org/user/746802       guybedford
    http://drupal.org/user/78427
    http://mozillalabs.com/skywriter/2011/01/18/mozilla-skywriter-has-been-merged-into-ace/
    http://www.ajax.org/
    http://ace.ajax.org/

    https://codex.wordpress.org/AJAX_in_Plugins
    http://briancray.com/2009/08/19/wordpress-head-element/
    http://www.devlounge.net/code/using-ajax-with-your-wordpress-plugin
    http://amiworks.co.in/talk/simplified-ajax-for-wordpress-plugin-developers-using-jquery/

    http://drupal.org/project/cssedit   Realtime CSS Editor
    http://drupal.org/user/78427        tjholowaychuk
    ```

## スクリーンショット

 * [[
 * The live css editor with the header changed to red

## インストール

Upload the `wp-live-css-editor` folder to the `/wp-content/plugins/` directory
 
Activate the plugin through the ‘Plugins’ menu in WordPress

IMPORTANT: Tested on WordPress 3.3.2, now you have to be an administrator to use
it.

capabilities.php problem (not bug) SOLVED !

Ok, now I did the correct thing and created an action to the wp_loaded hook to init
the plugin, then,
 check whether the user can “erase themes” which is an Admin capability
only, so the plugin only works if you are an admin. No need to modify the capabilities.
php nor anything else.

Some users have had problems in former 12.05 release with their site being inaccesible
after installing the plugin.
 It all seemed to be part of the same problem with 
the capabilities.php file that is discussed here: https://wordpress.org/support/
topic/fatal-error-call-to-undefined-function-wp_get_current_user-4?replies=32

File structure:

 * /wp-content/plugins/wp-live-css-editor/
 * /wp-content/plugins/wp-live-css-editor/wp-live-css-editor.php
 * /wp-content/plugins/wp-live-css-editor/wp-live-css-editor.js
 * /wp-content/plugins/wp-live-css-editor/wp-live-css-editor-css.css
 * /wp-content/plugins/wp-live-css-editor/readme.txt
 * /wp-content/plugins/wp-live-css-editor/JSON.php
 * /wp-content/plugins/wp-live-css-editor/screenshot-1.jpg
 * /wp-content/plugins/wp-live-css-editor/ace/

## FAQ

  Will it let me edit the theme’s CSS, or just any CSS ? Can I choose which are 
editable ?

You can edit any and all CSS files that are loaded in the page. As long as they 
have write permission, and you are logged in as an administrator.

## 評価

このプラグインにはレビューがありません。

## 貢献者と開発者

WP Live CSS Editor はオープンソースソフトウェアです。以下の人々がこのプラグインに
貢献しています。

貢献者

 *   [ funlab ](https://profiles.wordpress.org/funlab/)
 *   [ pingram ](https://profiles.wordpress.org/pingram3541/)

[“WP Live CSS Editor” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/wp-live-css-editor)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/wp-live-css-editor/)する
か、[SVN リポジトリ](https://plugins.svn.wordpress.org/wp-live-css-editor/)をチェック
するか、[開発ログ](https://plugins.trac.wordpress.org/log/wp-live-css-editor/)を
[RSS](https://plugins.trac.wordpress.org/log/wp-live-css-editor/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 13.09

Big thanks to pingram3541 for his forum posts that corrected some very ugly bugs.

I’ve been very busy and away from computers for a while. Better late than never.

 * Fixed saving issue that wreaked the file by creating ugly and recursive escape
   chars \\\\\\\\\: https://wordpress.org/support/topic/backslahes-added-css-broken
 * Fixed theme ‘setting’ that should allow better reading. Kept twilight, though,
   still you can change the theme manually editing both the js and php files: https://
   wordpress.org/support/topic/background-color-or-themes
 * Moved it all down below the wp admin bar so the css selector isn’t hidden: https://
   wordpress.org/support/topic/sidebar-28px-top-for-wpadmin-menu
 * Fixed messing around with admin pages: https://wordpress.org/support/topic/editor-
   left-open-causes-admin-to-break

#### 12.06

 * pluggable.php and capabilities.php load order problem that made the site inaccesible
   SOLVED using the wp_loaded hook

#### 12.05

 * Updated from guybedford’s module http://drupal.org/project/live_css
 * Dropped less suport for simplicity
 * You have to be logged in as an administrator to see and use the plugin
 * Uses ACE editor which solves most of commented bugs and needed features (wild
   slashes, search in the css editor, undo keyboard shortcuts…)

#### 11.05

 * First Commit ! release 2011-05-15
 * Now using wp_enqueue_scripts adn wp_enqueue_styles to correctly inject stylesheets
   and scripts
 * **Not for production sites**, just for design and development time. **Needs roles
   and permissions settings**, though **only logged in users can actually save changes**,
   any visitor can see it in action.
 * If it doesn’t save changes, it’s probably a **permission problem** with the CSS
   file (Or **you are not logged in**)
 * Will need to **clean up backups manually** via FTP when you are done, as they
   might be a lot and counting ! A restore version system would come in handy…
 * Seems to be fixed, but for a while the plugin was inflating the CSS files in 
   each save by swarming trillions of slashes before every single and double quote
 * Fixed a BUG where relative urls wouldn’t find the wp-admin/admin-ajax.php file,
   thanks to Gary Cao’s wonderful tips: http://www.garyc40.com/2010/03/5-tips-for-
   using-ajax-in-wordpress/#js-global
 * Please ! **Backup your CSS files** before using it the first time, just in case!
 * No plugin options nor admin page
 * A JSON helper for older PHP versions is there, but untested yet.
 * A floating window / drawer might be better than narrowing the whole page.

## メタ

 *  バージョン **13.09**
 *  最終更新日 **13年前**
 *  有効インストール数 **100+**
 *  WordPress バージョン ** 2.7またはそれ以降 **
 *  検証済み最新バージョン: **3.6.1**
 *  言語
 * [English (US)](https://wordpress.org/plugins/wp-live-css-editor/)
 * タグ
 * [css](https://ja.wordpress.org/plugins/tags/css/)[designer](https://ja.wordpress.org/plugins/tags/designer/)
   [developer](https://ja.wordpress.org/plugins/tags/developer/)[editor](https://ja.wordpress.org/plugins/tags/editor/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/wp-live-css-editor/advanced/)

## 評価

 5つ星中2.5つ星

 *  [  3 5-星レビュー     ](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/?filter=5)
 *  [  0 4-星レビュー     ](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/?filter=4)
 *  [  1 3-星レビュー     ](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/?filter=3)
 *  [  1 2-星レビュー     ](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/?filter=2)
 *  [  5 1-星レビュー     ](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/wp-live-css-editor/reviews/)

## 貢献者

 *   [ funlab ](https://profiles.wordpress.org/funlab/)
 *   [ pingram ](https://profiles.wordpress.org/pingram3541/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/wp-live-css-editor/)

## 寄付

このプラグインが今後も改善できるよう応援しませんか ?

 [ このプラグインに寄付 ](http://www.flashdance.es/dontpanic/doku.php?id=wp-live-css-editor)