Якщо ви хочете налаштувати тему на WordPress, а в цій темі немає вбудованого редактора налаштувань стилів оформлення, тоді вам потрібно розуміння CSS, щоб знати, як влаштований зовнішній вигляд теми. Таблиця стилів містить CSS-правила, які керують відображенням інформації на сайті, палітрою кольорів, вибором шрифтів, інше.
Цей момент може бути не дуже зрозумілим для новачків – що за що він відповідає. Тому новий плагін під назвою CSS Hero створений спеціально для того, щоб можна було редагувати тему після встановлення будь-якого плагіна на сайт та застосовувати нові стилі оформлення без заглиблення в код.
Дивіться також:
Плагін CSS Hero містить такі функції:
- Режим редагування (для мобільних телефонів, планшетів)
- Вибір кольору
- Налаштування шрифтів
- Таблиці стилів для градієнтів, тіней блоків та тексту
- Увімкнення та вимкнення блокування екрану
- Історія правок та змін
Багатообіцяюче, чи не так? А тепер спробуємо розібратися, як плагін працює насправді, і як просто з його допомогою редагувати тему в реальному часі.
Установка плагіна
Після завантаження та активації плагіна ви побачите повідомлення з пропозицією отримати ліцензійний ключ доступу до сайту CSS Hero.
Після натискання кнопки «Отримати ключ доступу зараз» вас автоматично перенаправить на сайт, де ви зможете активувати ліцензію для сайту, на який було встановлено плагін.
Налаштування вашої теми
Після встановлення плагіна та активації ліцензійного ключа переходимо до живого редагування вашої теми. Для цього зайдіть на головну сторінку вашого сайту, і ви побачите блакитну кнопку у правому верхньому кутку (вона доступна лише адмінам сайту) для завантаження редактора.
Якщо ви натиснете цю блакитну кнопку, відкриється меню з посиланнями:
- Головного редактора (натисніть її, щоб розпочати редагування)
- Вибір пристрою (ПК, планшет, мобільний телефон)
- Історії
- Пресетів (збереження та завантаження)
- Інструментів
- Кнопок, за допомогою яких можна ділитися інформацією у соціальних мережах
- Налаштування повноекранного режиму
- Закриття редагування
Для того, щоб почати редагування теми, натисніть кнопку «Редактор» і наведіть курсором мишки на будь-яку область сторінки, виділіть і клацніть. Праворуч на сторінці з'являться опції.
Потім можна приступати до редагування вашої теми: зміни фонових кольорів, розміру шрифту, кольору та інше. Все, що знаходиться в таблиці стилів, підлягає редагуванню, і ви можете зберегти або залишити зміни, якщо ви підете зі сторінки.
Нижче наведено приклад того, як лише за кілька хвилин було відредаговано тему Двадцять дванадцять за допомогою CSS Hero. Вручну редагування зайняло набагато більше часу, тому що довелося б шукати назву кожного елемента в таблиці стилів і вручну змінювати його значення.
Якщо ви закінчили редагування стилів, натисніть «Зберегти зміни». Якщо ви бажаєте зберегти створені стилі CSS, зайдіть в «Інструменти» → «Показати створені CSS» і на екрані з'являться стилі CSS, які ви бажаєте змінити. Можете скопіювати та вставити їх у дочірню тему для вашого сайту, і надалі вам не потрібно буде активувати плагін.
Підтримувані теми та плагіни
ось список підтримуваних тем і список підтримуваних плагінів WordPress, які 100% працюють разом із плагіном CSS Hero без сучка та задирки. Щоб відредагувати тему, якої немає у цьому списку, доведеться виконати трохи більше кроків, для цього є спеціальна документація на сайті.
Цінова політика
Вартість плагіна досить прийнятна. Для одного сайту ви можете придбати його лише за $14 на рік, для 5-ти сайтів – за $29, а для 999 (як для розробників) – за $99. Причому плагін можна активувати на один рік, а редактор використовувати завжди.
Джерело: wplift.com
Коментарі до запису: 7
Дивовижна річ! Ось тільки потрібно більше тем і плагінів, що підтримуються.
а де можна взяти безглузду версію?
Є і аналог - yellow-pencil http://waspthemes.com/yellow-pencil/ На відміну від CSSHero можна безкоштовно встановити на свою тему пробну версію та спробувати всі функції. Також немає прив'язки до оплати за передплату — купуєш лише один раз для одного проекту. Загалом мені він сподобався більше.
Доброго дня!
Редагую файл style.css, а сайт не реагує. Редагую через адмінку WordPress: Зовнішній вигляд – Редактор. Може, хто знає чому?
PS
Сайт не не хостингу, а OpenServer на локальному комп'ютері, тема Twenty Fourteen, WordPress.
Можливо, браузер закешував стару версію. Спробуйте оновити сторінку за допомогою Ctrl+F5 або відкрити сторінку в режимі Інкогніто.
Так, після Ctrl+F5 вийшло.
Доброго дня.
Блог WordPress на Openserver на локальному комп'ютері. Тема Twentyfourteen.
При звуженні вікна текст лівого сайдбара (білий шрифт на чорному полі) починає налазити на біле поле основного тексту і зливатися з ним (коли змінюєш колір шрифту сайдбара, текст стає видно і на білому тлі теж). При цьому область сайдбара з чорним фоном залишається, текст з'їжджає з неї праворуч, поступово залишаючи порожній. При подальшому звуженні вікна чорна область сайбару зліва зникає і він весь, з текстом, йде вниз, де нормально видно (там теж чорне тло). Але це все відбувається лише на сторінках блогу (у WordPress два види сторінок: власне сторінки та записи, де на першому місці найсвіжіші), а на сторінках із записами такого не відбувається – все нормально. Дивився HTML код (у браузері, коли натискаєш пункт дослідити елемент) сайдбар на обох видах сторінок йде під одним divом (з одним і тим самим ідентифікатором id) divи основного змісту хоч і називаються по-різному, але мають одні й ті самі CSS властивості ( там їх видно). Незрозуміло, чому сайдбар поводиться по-різному на різних видах сторінок.
На обох видах сторінок сайдбар має негативне ліве поле margin –100%. Коли ця властивість прибираєш сайдбар залишається зліва, але текст у ньому йде вниз, рівня де закінчується текст основного змісту. Але перестає налазити на нього, як було раніше.
Може, хто знає, в чому річ і як це виправити?