Как редактировать CSS сайта WordPress
Вступление
Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.
CSS это
С одной стороны CSS это расширение текстового файла. С другой стороны CSS это язык программирования, на котором пишется это файл. С третьей стороны CSS это свод правил для задания шрифта, цвета сайта, относительного расположения блоков сайта (влево, центр, право, отступы от верха и низа) и других представлений внешнего вида страниц сайта, которые в этом файле и прописаны.
Сразу замечу, файлы CSS могут иметь пугающие размеры, но в них нет ничего сложного. Это очень простые, хотя и разнообразные, правила, написанные в простом синтаксисе.
Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах.
Нам понадобиться только справочник HTML: http://htmlbook.ru/.
Также замечу, что запоминать все правила CSS наизусть совершенно не обязательно. Достаточно понимать синтаксис написания правил CSS. Этого достаточно, чтобы редактировать файл CSS, да и справочник всегда поможет. Главное знать, что править и как править. Кроме справочника есть инструменты в браузерах, о них чуть ниже, которые позволяют редактировать CSS онлайн.
Где лежит файл style.css WordPress
Несколько прописных истин:
- Каждая тема WordPress имеет свой файл определяющий ее внешний вид.
- Редактирования файла style.css одной темы не затрагивает другие темы установленные на сайт;
- Перед редактированием любых файлов активной темы, сделайте резервную копию сайта, на случай фатальных ошибок редактирования и возвращения сайту рабочего состояния.
А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.
css.
Три способа редактировать CSS сайта WordPress
Предложу три варианта редактирования файла style.css.
Редактирование из панели администратора
Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.
Справа вы видите список файлов темы, в поле редактора открывается содержимое файлов. Если у вас установлено несколько тем, обратите внимание на правый верхний угол. Там есть поле выбора темы. По умолчанию откроется активная тема, но редактировать можно любую установленную тему без её активации.
Совет: Ошибки в редактировании style.css не могут обрушить сайт, вы можете изуродовать только внешний вид. Поэтому, перед прямым редактированием из консоли можно обойтись без резервной копии сайта, достаточно сделать копию самого файла style.css и в случае неудачного редактирования вернуть файлу прежний вид.
Редактирование файла style.
css по FTPГоворят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.
- Входите в каталог сайта по FTP;
- Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
- Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.
Оба способа редактирования относятся к прямому редактированию, «живого» файла активной темы. У прямого редактирования есть большой недостаток: при обновлении темы все ваши изменения потеряются и тема примет исходный внешний вид. Чтобы этого избежать используется способ дочерней темы.
Дочерняя тема WordPress
Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.
На этом принципе основан и третий способ редактирования стилей.
Редактирование файла style.css с помощью плагинов
Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.
После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».
Теперь не нужно редактировать style.css напрямую, достаточно вписать кусок кода css в поле редактора и изменения появятся на сайте. Причем при обновлении темы они не потеряются.
Как понять, что нужно редактировать
Если вы бегло не читаете CSS нужно воспользоваться онлайн инструментами, для чтения CSS и понять, что нужно редактировать.
Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).
Показываю, как им пользоваться:
Например, хотим поменять заголовок сайта.
- Наводим на него мышь, через правую кнопку открываем «Код элемента»;
- Видим код HTML в правом поле и код CSS в левом поле;
- Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
- Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).
Для примера, я поменял онлайн размер шрифта названия.
Но это еще не все.
- Нашли нужный кусок кода css;
- Копируем его;
- Редактируем и переносим кусок кода в style.css дочерней темы или в поле редактора Jetpack.
- Таким образом, меняем любые стили активной темы.
Полезные ссылки
- Сервис проверки CSS от W3C (формат CSS3): http://jigsaw.w3.org/css-validator/
- Сервис сжатия CSS файлов: 15 Сервисов сжатия CSS файлов.
©www.wordpress-abc.ru
Другие статьи раздела: CMS WordPress
Похожие посты:
javascript — Как налету изменить CSS чужого сайта?
Вопрос задан
Изменён 4 месяца назад
Просмотрен 82 раза
Вопрос довольно специфичный, попробую объяснить как можно проще.
Краткая информация: есть программа, где запускается браузер Google Chrome. При загрузке страницы все возможные стили специально блокируются. В итоге загружается страница без стилей.
У меня есть доступ к консоли Google Chrome, где я могу исполнять свой JavaScript, изменяя HTML. В текущей реализации загружается нужная страница и моментально исполняется код (в head вставляется тег <style></style> с моим CSS, когда страница загрузится):
var myCss = '.example_class {color: red}'
window.onload = ()=> {
if (window.location.href.indexOf('examplewebsite.com') !== -1) {
document.querySelector("head").innerHTML += '<style>' + myCss + '</style>';
}
}Проблема в том, что иногда стили не применяются (особенно, когда на одной странице нажимаешь на ссылку, ведущую на другую страницу (где и нужно применить свои стили). Если же изменять HTML спустя некоторое время простым кодом:
document.querySelector("head").innerHTML += '<style>' + myCss + '</style>';
То стили применяются всегда, но иногда ломается сама страница (не реагирует на любые клики по любым элементам). Не представляю как гарантированно встроить свой CSS на чужую страницу, не поломав ее.
- javascript
- google-chrome
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Учебник: Добавьте пользовательский CSS на свой сайт
Редактировать
Твиттер LinkedIn Фейсбук Эл.
адрес
- Статья
- 2 минуты на чтение
Рабочая область «Стиль» позволяет редактировать некоторые функции темы вашего сайта, такие как шрифты и цвета; однако вы можете применять свои собственные темы CSS.
Вы можете создать свою собственную тему, определив собственный файл CSS и загрузив его на свой сайт.
В этом руководстве вы узнаете, как:
- Загрузить пользовательский файл CSS
- Редактировать CSS — это код Visual Studio для Интернета
Необходимые условия
- Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
- Создан сайт Power Pages. Создайте сайт Power Pages.
- Пользовательский файл темы, созданный с помощью вашего любимого редактора CSS.
Примечание
Любая пользовательская тема, которую вы создаете, должна быть совместима с Bootstrap v3.
Добавьте пользовательский CSS на свой сайт
В этом примере мы добавим несколько пользовательских файлов CSS, которые позволят нам добавлять эффекты тени к кнопкам на нашем веб-сайте. Вы можете использовать свой собственный CSS-файл или использовать предоставленный образец.
Чтобы создать образец, в своем любимом редакторе CSS создайте файл пользовательской темы button_shadow.css и сохраните его.
.кнопка1 { коробка-тень: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333; }Перейти на Power Pages.
Выберите сайт, на который вы хотите добавить пользовательскую тему, и выберите Изменить .
Откройте рабочее пространство Styling .
Выберите тему и выберите … (многоточие), а затем выберите
В разделе Custom CSS выберите Загрузите и выберите свой собственный файл CSS. Вы можете загружать только один файл CSS за раз, но можно загружать несколько файлов. Если несколько файлов CSS обновляют один и тот же атрибут, будут применяться атрибуты в файле CSS внизу списка. Вы можете настроить порядок ваших пользовательских файлов CSS.
Вы должны сразу увидеть результаты обновлений на холсте страниц.
Вы можете отключить или изменить порядок ваших пользовательских файлов CSS. Файл, указанный последним, будет иметь приоритет над остальными.
Вы можете редактировать файл CSS напрямую, выбрав многоточие ( … ), а затем выбрав Редактировать код . Этот шаг откроет визуальный код для веб-редактора. Выберите CTRL-S , чтобы сохранить изменения.
Выберите Синхронизировать в студии дизайна, чтобы обновить CSS и просмотреть изменения.
Выберите Предварительный просмотр , чтобы просмотреть пользовательскую тему на своем сайте.
Примечание
Чтобы полностью удалить пользовательскую тему, удалите запись веб-файла в приложении «Управление порталом».
Обратная связь
Просмотреть все отзывы о странице
Найдите, протестируйте и измените CSS в своих темах Файл Style.css
Очень распространенный вопрос, который новички задают на форумах по веб-дизайну и темам сразу после установки новой темы:
Как изменить цвет ……….
В этом очень простом руководстве я покажу вам, как использовать браузер Google Chrome для:
- проверки элемента, который вы хотите изменить
- Измените CSS в браузере, чтобы проверить, как выглядят изменения
- Затем внесите постоянные изменения в файл style.css вашей темы.
- В этом уроке мы изменим цвет всех ссылок с красного на зеленый.
- В этой демонстрации мы будем использовать дочернюю тему Daily Dish от StudioPress.
1. Найдите CSS, который вы хотите изменить
Первый шаг — наведите курсор на ту часть вашей темы, в которую вы хотите внести изменения:
На приведенном выше снимке экрана наведен на . ссылку на боковой панели, а затем щелкните правой кнопкой мыши ее.
Выпадающее меню появляется после щелчка правой кнопкой мыши по области, поэтому теперь вы можете щелкнуть элемент .
После того, как вы нажмете элемент «Проверить», появится всплывающее окно, которое выглядит следующим образом:
Глядя на всплывающее окно, что оно вам показывает?
Вы можете увидеть код HTML за текстом, который мы щелкнули, который является связанным текстом, который мы хотим изменить: Подробнее обо мне.
В правом окне отображается CSS, который нам нужно изменить:
a {
цвет: #e14d43;
текстовое оформление: нет;
} Теперь мы можем щелкнуть ссылку рядом с тем CSS, который называется style.
css?ver.
Это требует непосредственного использования таблицы стилей темы и CSS, который применяется к текстовой ссылке, которую мы щелкнули, как показано выше.
2. Проверка изменений в окне браузера
Теперь мы можем протестировать изменения в этом окне и просмотреть их, прежде чем вносить постоянные изменения в файл темы style.css.
В приведенном выше примере вы можете видеть, что мы изменили цвет с красного на зеленый, а также изменили цвет при наведении с #000 на оранжевый.
Окно также сообщает нам строку в файле темы style.css, где мы можем найти код для изменения, который в этом примере начинается со строки 178.
После того, как вы изменили CSS в окне браузера и остались довольны изменениями, вы можете сделать их постоянными в файле style.css вашей дочерней темы.
3. Изменение таблиц стилей CSS
- С помощью FTP перейдите к файлу style.css дочерних тем и загрузите его.
- Откройте файл на рабочем столе с помощью редактора кода, например Notepad++ .
