Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Искать в статьях
Искать на страницах
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

Если вы хотите настроить тему на WordPress, а в этой теме нет встроенного редактора настроек стилей оформления, тогда вам нужно понимание о CSS, чтобы знать, как устроен внешний вид темы. Таблица стилей содержит CSS-правила, которые управляют отображением информации на сайте, цветовой палитрой, выбором шрифтов, прочее.

Этот момент может быть не очень понятен для новичков – что за что отвечает. Поэтому новый плагин под названием CSS Hero создан специально для того, чтоб можно было редактировать тему после установки любого плагина на сайт и применять новые стили оформления без углубления в код.

Смотрите также:

Плагин CSS Hero содержит следующие функции:

  • Режим редактирования (для мобильных телефонов, планшетов)
  • Выбор цвета
  • Настройка шрифтов
  • Таблицы стилей для градиентов, теней блоков и текста
  • Включение и выключение блокировки экрана
  • История правок и изменений

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Многообещающе, не так ли? А теперь давайте попробуем разобраться, как плагин работает на самом деле, и как просто с его помощью редактировать тему в реальном времени.

Специализированный хостинг для сайтов на WordPress!

Установка плагина

После загрузки и активации плагина вы увидите сообщение с предложением получить лицензионный ключ доступа к сайту CSS Hero.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

После нажатия кнопки «Получить ключ доступа сейчас» вас автоматически перенаправит на сайт, где вы сможете активировать лицензию для сайта, на который был установлен плагин.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Настройка вашей темы

После установки плагина и активации лицензионного ключа переходим к живому редактированию вашей темы. Для этого зайдите на главную страницу вашего сайта, и вы увидите голубую кнопку в правом верхнем углу (она доступна только админам сайта) для загрузки редактора.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Специализированный хостинг для сайтов на WordPress!

Если вы нажмете на эту голубую кнопку, откроется меню со ссылками:

  • Главного редактора (нажмите ее, чтоб начать редактирование)
  • Выбора устройства (ПК, планшет, мобильный телефон)
  • Истории
  • Пресетов (сохранения и загрузки)
  • Инструментов
  • Кнопок, с помощью которых можно делиться информацией в социальных сетях
  • Установки полноэкранного режима
  • Закрытия редактирования

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Для того, чтоб начать редактирование темы, нажмите на кнопку «Редактор» и наведите курсором мышки на любую область страницы, выделите и кликните. Справа на странице появятся опции.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Затем можете приступать к редактированию вашей темы: изменению фоновых цветов, размера шрифта, цвета, прочее. Все, что находится в таблице стилей, подлежит редактированию, и вы можете сохранить или оставить изменения, если вы уйдете со страницы.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Ниже приведен пример того, как всего за несколько минут была отредактирована тема Twenty Twelve с помощью CSS Hero. Вручную редактирование заняло бы намного больше времени, потому как пришлось бы искать название каждого элемента в таблице стилей и вручную менять его значение.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Если вы закончили редактирование стилей, нажмите на «Сохранить изменения». Если вы хотите сохранить созданные стили CSS, зайдите в «Инструменты» → «Показать созданные CSS» и на экране появятся стили CSS, в которые вы хотите внести изменения. Можете скопировать и вставить их в дочернюю тему для вашего сайта, и в дальнейшем вам не нужно будет активировать плагин.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Поддерживаемые темы и плагины

Вот список поддерживаемых тем и список поддерживаемых плагинов WordPress, которые 100% работают вместе с плагином CSS Hero без сучка и задоринки. Чтобы отредактировать тему, которой нет в этом списке, придется выполнить чуть больше шагов, для этого есть специальная документация на сайте.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Ценовая политика

Стоимость плагина достаточно приемлемая. Для одного сайта вы можете приобрести его всего за $14 в год, для 5-ти сайтов – за $29, а для 999 (как для разработчиков) – за $99. Причем плагин можно активировать на один год, а сам редактор использовать всегда.

Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero

Источник: wplift.com
Специализированный хостинг для сайтов на WordPress!

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

7 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Александр

Зравствуйте.
Блог на WordPress на Openserver на локальном компьютере. Тема Twentyfourteen.
При сужении окна текст левого сайдбара (белый шрифт на черном поле) начинает налазить на белое поле основного текста и сливаться с ним (когда меняешь цвет шрифта сайдбара текст становится виден и на белом фоне тоже). При этом область сайдбара с черным фоном остается, текст съезжает с нее вправо, постепенно оставляя пустой. При дальнейшем сужении окна черная область сайбара слева исчезает и он весь, с текстом, уходит в вниз, где нормально виден (там тоже черный фон). Но это все происходит только на страницах блога (в WordPress два вида страниц: собственно страницы и записи, где на первом месте самые свежие), а на страницах с записями такого не происходит – все нормально. Смотрел HTML код (в браузере, когда нажимаешь пункт исследовать элемент) сайдбар на обоих видах страниц идет под одним divом (с одним и тем же идентификатором id) divы основного содержания хоть и называются по- разному, но имеют одни и те же CSS свойства (там их видно). Непонятно почему сайдбар ведет себя по-разному на разных видах страниц.
На обоих видах страниц сайдбар имеет отрицательное левое поле margin -100%. Когда это свойство убираешь сайдбар остается слева, но текст в нем уходит вниз, до уровня где заканчивается текст основного содержания. Но перестает налазить на него, как было раньше.
Может, кто знает, в чем дело и как это исправить?

Александр

Здравствуйте!
Редактирую файл style.css , а сайт не реагирует. Редактирую через админку в WordPress: Внешний вид – Редактор. Может кто знает почему?
P.S.
Сайт не не хостинге, а на OpenServer на локальном компьютере, тема Twenty Fourteen, WordPress.

Возможно, браузер закэшировал старую версию. Попробуйте обновить страницу через Ctrl+F5 или открыть страницу в режиме Инкогнито.

Александр

Да, после Ctrl+F5 получилось.

Есть и аналог - yellow-pencil http://waspthemes.com/yellow-pencil/ В отличие от CSSHero можно бесплатно установить на свою тему пробную версию и попробовать все функции. Также нет привязки к оплате за подписку - покупаешь только один раз для одного проекта. В общем, мне он понравился больше.

а где можно взять беслпатную версию?

Удивительная вещь! Вот только нужно больше поддерживаемых тем и плагинов.