Как редактировать CSS WordPress темы из браузера?

Question

[Ринат Хайсман]

Добрый час! Мне ужасно надоело постоянно редактировать в браузере css, а потом лезть в админку/ftp клиент с тем, чтобы сохранить изменения.

Как можно упросить задачу, чтобы изменения в style.css темы сохранялись автоматически при редактировании с помощью dev tools хрома?

Comments

[zorca]

Вы просто неправильно поставили рабочий процесс. Для начала никто не работает с сайтом на продакшене, это низший уровень развития, если вы конечно хотите чтобы ваш титул "Front-end developer" стал не просто словами. Работайте со стилями на локалке, после чего деплойте на продакшен, когда все проверено.

Answer 1

[Владимир Проскурин]

Ну можно сколхозить следующим образом.
1) В хроме можно привязывать файл из dev тулза в локальный файл. Погуглите, в недавних обновлениях было.
2) Этот привязанный файл переопределяете поверх серверного. т.е. чтобы браузер вместо удаленного качал локальный. Можно использовать всякие переопределяющие файлы проги, прокси, локальный сервер, или например расширение для хрома https://chrome.google.com/webstore/detail/resource... Я обычно же использую BrowserSync, перехожу через консоль в директорию, где будут лежать переопределяемые файлы, и выполняю

browser-sync start --proxy адрес_сайта --files './' --ss './'

И создается локальный сервер, через который я работаю. Структуру папок нужно иметь такую же, как и на сервере. т.е. если там стиль лежит в /styles/style.css, то и вы создавайте эту папку и кидайте туда этот файл. Плюс бонусом будет LiveReload. Так можно менять все статические файлы. Серверные скрипты так сделать не получится. К тому же, файл физически на вашем компьютере, и после всех изменений, нужно кинуть измененный файл на сервер.
PS: По хорошему, правки лучше не делать сразу на продакшн сервере, но если надо, то пусть.

Answer 2

[Александр]

Редактируйте CSS в каком-нибудь редакторе, сохраняйте, а затем открывайте браузер с вкладкой сайта и просто нажимайте Ctrl+F5.

Comments

[Ринат Хайсман]

Вы читали вопрос? Я хочу редактировать визуально с помощью dev tools хрома и автоматом сохранять наредактированное :)

[Александр]

Ринат Хайсман, но вы же можете использовать, например, редактор с LivePreview. А делать это прямо в Chrome, как мне кажется, невозможно. Хотя бы потому что WP выдаёт страницу, собирая её, буквально, по частям.

[Ринат Хайсман]

Александр Рябов, это возможно. Есть даже плагин для хрома под эти нужды, но у меня он не работает, скорее всего перестал поддерживаться просто.