WordPress css: Подключение CSS в WordPress

Подключение CSS в WordPress

Вариант 2 — Добавление Custom CSS WordPress через настройщик темы

Вы можете легко добавить произвольный CSS в WordPress, если версия вашей CMS 4.7 и выше, так как она включает встроенный инструмент в настройке темы. Чтобы использовать его, перейдите в раздел Внешний вид › Настроить в админ консоли. Прокрутите вниз до раздела Дополнительные стили.
Для вас будет открыт встроенный инструмент, который позволит вам добавить любой код CSS. Он прост в использовании и позволяет просматривать как мобильные, так и планшетные версии вашего сайта, что очень ценно, учитывая, насколько важна мобильность в настоящее время.
Поздравления! Теперь вы знаете, как применять пользовательский CSS в WordPress без каких-либо плагинов.

Вариант 3 — Добавление стилей Custom CSS WordPress, используя дочернюю тему

Все приведенные выше примеры показали вам, как добавить свой собственный CSS в уже живой сайт (запущенный онлайн) на WordPress. Однако есть ситуации, когда вам нужно сначала проверить это. Возможно, вы ещё не знаете точно, что хотите сделать, или не хотите рисковать своим сайтом. Чтобы этого не произошло, мы рекомендуем создать дочернюю тему WordPress. Это позволит вам развязать своё воображение и попробовать различные комбинации CSS. И самое главное, ваш живой сайт при этом никак не пострадает!

Разрешение общих вопросов, связанных с пользовательскими стилями в WordPress

Иногда вы можете столкнуться с небольшими техническими заминками при добавлении пользовательского CSS в WordPress. Давайте быстро рассмотрим наиболее распространенные вопросы и посмотрим, как с ними справиться.

Изменения не появляются

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

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

И наконец, некоторые хостинг-провайдеры предлагают встроенные инструменты кэширования, чтобы улучшить работу вашего сайта на WordPress. Мы делаем это и на Hostinger. Наши встроенные плагины для WordPress могут быть отключены или очищены через раздел Плагины › Установленные › Must-Use.

Ошибки в синтаксисе CSS

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

Слишком много вариантов

Иногда с произвольными стилями CSS можно перестараться. Добавляя две или более ссылки на селектор, можно вызвать конфликт. Поскольку CSS не может читать мысли, он не знает, какое значение применять. Это обычное явление при вызове новой таблицы стилей поверх существующей. Если вы пытаетесь изменить заголовок h3, но ничего не происходит, дважды проверьте таблицу стилей для существующих записей.

Отсутствие идей

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

Заключительное слово

Подводя итог, добавление пользовательского CSS в WordPress – отличный способ сделать ваш сайт уникальным и привлекательным. Мы научились добавлять пользовательский CSS в WordPress с помощью плагинов, встроенных инструментов и дочерней темы.

Если вы нашли это руководство полезным, не стесняйтесь делиться им на Facebook, Twitter или в других социальных сетях. И, наконец, если у вас есть какие-либо советы, хитрости или идеи, которыми вы хотите поделиться, мы с нетерпением ждём их в комментариях ниже!

Как редактировать CSS в WordPress?

CSS – это язык стилей, который определяет отображение HTML-страниц. С помощью этого языка Вы можете управлять шрифтами, цветом, размерами, позиционированием и многими другими элементами веб-страницы. Любая современная тема в своей разметке использует CSS. WordPress-шаблоны тоже не являются исключением.

Для чего редактировать CSS на сайте?

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

Редактирование CSS в WordPress

Редактировать язык стилей в WordPress можно несколькими способами. Мы рассмотрим два из них, которые являются наиболее простыми для пользователей.

Редактирование на странице настроек темы

Большинство современных WordPress-тем предусматривают добавление CSS-кода прямо в настройках. Для этого достаточно в админ-панели перейти Внешний вид -> Настроить, выбрать Дополнительные стили и в поле вставить нужный код, после чего кнопку Сохранить и активировать.

Редактирование в админ-панели WordPress

Итак, для редактирования CSS-файлов через админ-панель необходимо перейти Внешний вид -> Редактор. В итоге Вы попадаете в окно редактирования WordPress-тем.

Тут нужно выбрать тему, которую хотите изменить. Далее справа, в списке файлов темы, следует найти и нажать на пункте Таблицы стилей style.css.

Перед Вами отобразится окно редактора, в котором можно редактировать файл стилей.

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

!!! Правки стилей темы предусматривает редактирование ее файлов. При обновлении темы все Ваши изменения будут утеряны. Поэтому рекомендуем Вам использовать дочерние темы.

Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.

Если Вам понравилась статья — поделитесь с друзьями

Как редактировать 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

Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта.

• Входите в каталог сайта по 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.
• Таким образом, меняем любые стили активной темы.

Полезные ссылки

Другие статьи раздела: CMS WordPress

Похожие посты:

Как редактировать CSS в WordPress.Изменение CSS стилей в WordPress.Как добавить CSS в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.

Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем!

Способ №1

1. Заходим в административное меню и переходим в Внешний вид -> Редактор.

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

Как видите, с административной панели всего за несколько кликов можно добраться до стилей вашего шаблона WordPress.

Способ №2

Для редактирования стилей этим способом нам нужно:

1. Найти файл style.css в корне папки вашей активированной темы (шаблона).

Путь к файлу: wp-content\themes\название_вашей темы\style.css

2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.

3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.

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

Согласитесь, проще и быстрее нажать Ctrl+S в текстовом редакторе и сразу смотреть изменения на сайте, чем после каждого обновления стилей пересохранять страницу в административном меню.

Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -> Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл».

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Как безопасно добавлять кастомные CSS стили для плагинов и тем на WordPress

С вами когда-то такое случалось? Вы установили плагин, у него были все нужные вам функции. Но… он некрасиво выглядел. Даже после того, как вы поменяли все настройки, он всё равно не вписывается в стиль вашей темы. И даже если он идеально работает, вы немного огорчились или начали искать другой плагин.

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

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

Эта статья покажет вам, как правильно добавлять такие стили, чтобы они всегда были в безопасности, даже если вы меняете или обновляете тему.

Кастомный CSS — больше контроля над дизайном плагинов

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

Возьмём, к примеру, один из наиболее популярных плагинов Contact Form 7. Его стиль можно изменить только слегка. Но используя кастомный CSS, вы можете полностью изменить каждый аспект его отображения на экране.

К тому же, даже плагины с предусмотренной возможностью изменения внешнего вида не позволят изменить каждый элемент.

Так что, изучив немного CSS и как его безопасно добавить к вашей теме, вы выйдете на новый уровень отображения плагинов читателям.

Почему важно добавить кастомный CSS правильно

Вы не хотите как попало добавить CSS стили к плагину. Есть правильный и неправильный способ добавить CSS на WordPress.

Когда вы добавляете CSS стили правильно, они всегда будут работать корректно, даже если вы обновите вашу тему. Вы сможете просто скопировать и вставить их в новую тему, если вы когда-либо решите сменить дизайн.

С другой стороны, добавив их неправильно, вы рискуете потерять стили при обновлении или смене темы.

А сейчас мы расскажем вам, как правильно добавлять CSS стили плагинов для Divi и других тем WordPress.

Куда добавлять CSS стили в теме Divi

Для начала рассмотрим процесс добавления кастомных стилей CSS на примере темы Divi.

Для безопасного добавления CSS стилей для ваших плагинов в Divi, зайдите во вкладку «Theme Options» в вашем меню Divi:

Потом во вкладке «General» нужно пролистать страницу до конца вниз. Там вы найдёте окошко «Custom CSS»:

Технически, всё, что вам нужно сделать, это ввести ваш кастомный код CSS и нажать «Save Changes». Но поскольку мы хотим сделать так, чтобы можно было легко перемещать и копировать стиль нашего плагина, то давайте сделаем еще один шаг.

Вы, наверное, уже добавили кастомные Divi CSS сниппеты, они помогают настроить кастомный CSS в этом окне. Для этого вы можете добавить комментарий типа «Плагин CSS стилей начинается тут». Тогда добавьте ваш CSS код под этой строчкой.

Чтобы добавить такой комментарий, нужно скопировать и вставить этот код:

/* Plugin CSS Styles Start Here */

Комментарий ни на что не повлияет, но поможет организовать разные кастомные CSS стили. Divi поможет сохранить ваши пользовательские CSS стили в безопасности во время обновлений так, что вам не нужно бояться потерять их.

Куда добавлять CSS стили для других тем

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

Предположим, что вы установили дочернюю тему, вы можете менять её в консоли WordPress, зайдя во Внешний вид → Редактор:

Убедитесь, что вы редактируете верную дочернюю тему. Вам нужно зайти в style.css. Для этого просто нажмите на этот пункт.

Потом вам нужно просто добавить ваш кастомный CSS так же, как мы это сделали в Divi. Для начала, добавьте комментарий:

/* Plugin CSS Styles Start Here */

Далее добавьте ваш кастомный CSS стиль под этой строкой:

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

Реальный пример: Contact Form 7

Давайте рассмотрим реальный пример. Представим, что вы хотите изменить стиль формы обратной связи Contact Form 7. Вы установите плагин и получите похожую форму:

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

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    border: 1px solid #000000;
}

В редакторе ваш CSS должен выглядеть так:

После сохранения таблицы стилей и обновления вашей формы обратной связи, вы должны увидеть это:

Теперь границы полей ввода выделены черной рамкой.

Если вы используете Divi, то ваш код будет таким же, только добавляется он в другом месте:

Конечно, это просто эксперимент, поскольку вам не нужен плагин формы обратной связи в Divi. Но этот метод сработает с любым плагином!

Итоги

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

Чтобы подсмотреть, какие стили вам нужно изменить для того или иного элемента на вашем сайте, откройте Developer Tools в Chrome (нажмите F12) и наведите мышкой на интересующий вас объект. Вы сразу же увидите, какие стили использует этот элемент.

Просто помните – всегда храните кастомный CSS в отдельной области, отделённой комментарием. Так вы всегда сможете его быстро найти.

А у вас есть советы по поводу кастомных CSS стилей? Расскажите нам в комментариях!

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

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Как добавить произвольные CSS-стили к своему WordPress-сайту: три способа

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

Поиск элементов дизайна, которые вы хотите изменить

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

В CSS используются селекторы, которые позволяют определить то, какие объявления дизайна будут применяться к определенному участку вашего сайта. Обычно это реализуется при помощи задания класса для требуемого элемента. Однако CSS может также использоваться для определения целого элемента (к примеру, для тега body) или для элемента на основе его ID.

К счастью, популярные браузеры позволяют вам видеть, какие селекторы и какие объявления применяются к элементу страницы. Делается это при помощи пары кликов. В Google Chrome, к примеру, вы можете просто выделить определенный фрагмент документа, после чего выполнить правый щелчок по нему, как показано ниже.

Выберите Inspect Element (Проинспектировать элемент) из выпадающего меню, после чего вы сможете получить доступ к информации о дизайне, представленной в окне справа. Пример этого приведен далее.

Пункты, подсвеченные красным – это дескрипторы, которые применяются к тексту, выделенному вами. К примеру, элемент font-size показывает, что текст, выделенный вами, имеет размер 13 пикселей («13px»). Дескрипторы находятся в фигурных скобках и относятся к определенным селекторам. Название соответствующей таблицы стилей выводится справа от селекторов.

Как только вы вооружитесь этой информацией, вы сможете легко изменить дизайн. К примеру, если вы хотите изменить шрифт с 13px до 14px, вам достаточно просто найти файл стилевой таблицы, который отображается справа от соответствующих селекторов (#plugin-info .block-content”), после чего меняете в нем «13px» на «14px».

Вы можете сделать то же самое в Firefox, выделив фрагмент страницы, щелкнув по нему правой кнопкой мыши, после чего выбрав пункт «Проинспектировать элемент» в меню.

Как работает связка WordPress и CSS

Никакие две темы WordPress не являются одинаковыми. Поэтому учтите, что советы, которые вы прочтете далее, могут не совпадать на 100% с тем, что вы имеете.

Однако, скорее всего, необходимые CSS стили будут располагаться в файле style.css. Это – универсальное название стилевой таблицы для любого типа сайтов, а не только для сайтов WordPress.

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

Учитывая это, давайте перейдем к рассмотрению трех методов редактирования CSS.

Метод 1. Редактирование файла style.css вашей темы

Есть два способа получения доступа к файлу style.css вашей темы.

Первый способ – доступ из консоли WordPress. В левом меню вы найдете пункт Внешний вид. Вложенное в него меню должно включать в себя дополнительные опции. В самом низу этого меню вы найдете пункт Editor (Редактор). Щелкните по нему.

Как только вы перейдете к странице редактора, вы увидите список файлов в вертикальной панели с правой стороны страницы. В самом низу панели будет находиться искомый файл style.css.

Если вы щелкнете по пункту Stylesheet (стилевая таблица), файл style.css будет загружен и выведен в самом центре экрана. Вы можете использовать этот экран для редактирования файла, однако есть и более удобный способ это сделать (о нем далее).

Еще один способ обратиться к таблице стилей заключается в том, чтобы найти ее на сервере вашего хостинг-провайдера. Точное расположение папки с темой будет зависеть от вашего провайдера. В примере ниже папка с сайтом называется thecare и находится она в папке public_html. Поскольку на сайт установлена система WordPress, вы можете видеть папку wp-content в папке thecare. В wp-content находится папка themes, которая содержит установленные темы. Поскольку мы используем тему Newsletter, корректные стили style.css для нее находятся в папке newsletter-parent.

В данный момент вы могли бы задать вопрос: «Почему здесь находятся папки newsletter-parent и newsletter-child?» Хороший вопрос, и мы в скором времени дадим на него ответ.

Метод 2. Использование дочерней темы для редактирования CSS

Если вы скачали фантастическую тему и хотите внести некоторые изменения в нее, вы должны сделать это с помощью дочерней темы, а не редактировать основную тему (родительскую).

Почему? Поскольку разработчики часто обновляют свои темы, исправляя в них ошибки и внося изменения в дизайн. Если вы внесете изменения в основную тему, после чего установите обновление, вы потеряете все свои труды.

С другой стороны, если вы внесете CSS изменения только в дочернюю тему, то обновляться будет только родительская тема. Все ваши изменения останутся в дочерней теме и не утратятся.

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

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

Метод 3. Использование плагина для редактирования CSS

Самый удобный способ редактирования CSS стилей – это использование плагинов.

Одно из основных преимуществ использования плагина равносильно плюсу использования дочерних тем. Если вы обновите тему, ваши изменения не будут перезаписаны, поскольку они хранятся отдельно от файлов темы. Еще одно преимущество – вам не нужно будет создавать дочернюю тему.

Вот лишь некоторые великолепные плагины для редактирования CSS:

Simple Custom CSS

Simple Custom CSS – одно из самых популярных решений для редактирования CSS стилей. Плагин был загружен более 100 000 раз и имеет рейтинг в 5 звезд.

WP Add Custom CSS

WP Add Custom CSS – плагин, который позволяет вам менять внешний вид всего сайта или только некоторых отдельных записей. Великолепный вариант, если вам требуется гибкость дизайна для разных записей.

Плагин в данный момент набрал более 10,000 скачиваний.

Theme Junkie Custom CSS

Если вам нужно решение, которое предлагает лайв-превью ваших изменений, рассмотрите плагин Theme Junkie Custom CSS. Данное решение добавляет произвольный CSS-менеджер к вашей администраторской консоли, где вы можете вносить свои собственные стили.

Easy Code Placement

Easy Code Placement – нечто большее, чем просто CSS решение. Плагин позволяет вам добавлять и другие типы кода, включая PHP, JS, HTML и даже обычный текст.

Если вы меняете разметку темы, вам может понадобиться внести коррективы не только в CSS, но и в другой код. В таком случае Easy Code Placement – решение для вас.

Child Theme Configurator

Child Theme Configurator – решение, которое позволяет вам изменить разметку вашего сайта при помощи дочерней темы.

Источник: wpmu.org

Шпаргалка по стандартным стилям CSS для начинающих. Часть 1

Когда-то кто-то…. Наверняка каждый из вас однажды задавался целью стилизировать определенные элементы WordPress темы «под себя». Естественно, сделать это можно легко, зная какие классы нужно отредактировать, однако ведь не все темы используют стандартные классы. Так то оно так, однако определенные CSS классы и ID все таки генерируются именно WordPress. Если вы собрались редактировать тему, или собираетесь создать одну на суд общества, то вот вам несколько элементов стилей, которые стОит учесть при анализе и редактировании style.css.

Цель данной шпаргалки — помочь новичкам в изучении тем ВП. Если же вы такой новичок, который не хочет связываться с кодом, то вам стОит взглянуть в направлении фреймфорков (например, Headway) где всё можно сделать «под себя» простым перетаскиванием. Для остальных же мы пройдемся по некоторым наиболее важным стандартным стилям WordPress.

Стандартные стили для класса Body

Одна из самых замечательных вещей в WordPress — его настраиваемость. Он позволяет кастомизировать очень тонкие моменты вашего сайта с помощью CSS. Один из способов сделать это — добавить собственные классы к различным элементам вашего блога. Наиболее важный из них — это тег . Вот несколько примеров общих классов, которые WordPress может добавить к этому элементу:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(имя-пользователя) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(имя файла шаблона) {}
.search-results {}
.search-no-results {}
.logged-in {}
. paged-(номер страницы) {}
.single-paged-(номер страницы) {}
.page-paged-(номер страницы) {}
.category-paged-(номер страницы) {}
.tag-paged-(номер страницы) {}
.date-paged-(номер страницы) {}
.author-paged-(номер страницы) {}
.search-paged-(номер страницы) {}

Если, например, вы захотите оформить вашу страницу результатов поиска, то можете использовать класс “search-results” для добавления своего оформления. WordPress добавляет этот класс к тегу body только тогда, когда активна страница результатов поиска, поэтому не затрагиваются остальные страницы.

Стандартные стили записей

Как и в случае с элементом body, WordPress добавляет динамические классы к элементам записи. Вот список наиболее популярных из них:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

И снова, WordPress добавляет динамические классы к вашим записям, используя функцию post_class (), которая позволяет вам создавать свои собственные стили для каждого формата. Функция post_class () добавит класс в виде “.format-foo”, где foo — любой выбранный вами формат записи (например, галерея, изображение и т.д.)

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Стандартные стили меню

В нашей статье под названием как стилизировать меню в WordPress мы обсуждали как добавить собственный класс к вашем меню. Мы будем считать, что вы прочли ту статью и то, что вы дали своему классу меню имя “main-menu”.

#header .main-menu{}           /* контейнер */
#header .main-menu ul {}       /* первый неупорядоченный список */
#header .main-menu ul ul {}    /* неупорядоченный список в неупорядоченном списке */
#header . main-menu li {}       /* пункт списка */
#header .main-menu li a {}     /* ссылка в пункте списка */
#header .main-menu li ul {}    /* вложенный список в пункте списка */
#header .main-menu li li {}    /* выпадающий элемент навигации */
#header .main-menu li li a {}  /* анкор выпадающего элемента */


.current_page_item{}           /* Класс для текущей страницы */
.current-cat{}                 /* Класс для текущей рубрики */
.current-menu-item{}           /* Класс для любого другого текущего пункта меню */
.menu-item-type-taxonomy{}     /* Класс для таксономии */
.menu-item-type-post_type{}    /* Класс для страницы */
.menu-item-type-custom{}       /* Класс для любого пользовательского элемента, который был добавлен */
.menu-item-home{}              /* Класс для элемента, ведущего на главную страницу блога */

Обратите внимание, что каждый раз при создании меню в WordPress оно автоматически оборачивается в контейнер (div). Этот div имеет только имя класса, если вы его указали (мы выбрали “main-menu”). И уже внутри него вы стилизируете остальные элементы списка.

Продолжение статьи
Шпаргалка по стандартным стилям CSS для начинающих. Часть 2
Шпаргалка по стандартным стилям CSS для начинающих. Часть 3

VN:F [1.9.22_1171]

Rating: 3.7/5 (3 votes cast)

Как легко добавить собственный CSS на свой сайт WordPress

Иногда вам может понадобиться добавить собственный CSS на свой сайт WordPress.

Возможно, это потому, что вы следите за обучающим курсом на WPBeginner или на нашем канале YouTube. Для большинства новичков использование FTP слишком запутано, но есть и другие способы добавить собственный CSS.

В этой статье мы покажем вам, как легко добавить собственный CSS на ваш сайт WordPress без редактирования файлов темы.

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции или хотите двигаться в своем собственном темпе, продолжайте читать инструкции ниже.

Метод 1. Добавление собственного CSS с помощью настройщика темы

Начиная с WordPress 4.7, пользователи теперь могут добавлять собственный CSS прямо из админки WordPress. Это очень просто, и вы сможете мгновенно увидеть свои изменения с помощью предварительного просмотра в реальном времени.

Во-первых, вам нужно перейти на страницу Themes »Customize .

Это запустит интерфейс настройки темы WordPress.

Вы увидите предварительный просмотр вашего сайта в реальном времени с множеством опций на левой панели.Щелкните вкладку Additional CSS на левой панели.

Вкладка сдвинется, чтобы показать вам простое поле, в которое вы можете добавить свой собственный CSS. Как только вы добавите действующее правило CSS, вы сможете увидеть его применение на панели предварительного просмотра вашего веб-сайта.

Вы можете продолжать добавлять собственный код CSS, пока не будете удовлетворены тем, как он выглядит на вашем сайте.

Не забудьте нажать кнопку «Сохранить и опубликовать» вверху, когда закончите.

Примечание: Любой пользовательский CSS, добавляемый с помощью настройщика темы, доступен только с этой конкретной темой. Если вы хотите использовать его с другими темами, вам нужно будет скопировать и вставить его в новую тему, используя тот же метод.

Метод 2: Добавление собственного CSS с помощью подключаемого модуля

Первый метод позволяет сохранить собственный CSS только для текущей активной темы. Если вы измените тему, вам может потребоваться скопировать и вставить свой собственный CSS в новую тему.

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

Первое, что вам нужно сделать, это установить и активировать плагин Simple Custom CSS. После активации просто перейдите к Внешний вид »Пользовательский CSS и запишите или вставьте свой собственный CSS.

Не забудьте нажать кнопку «Обновить собственный CSS», чтобы сохранить изменения.

Теперь вы можете просмотреть свой веб-сайт WordPress, чтобы увидеть настраиваемый CSS в действии.

Использование настраиваемого плагина CSS против добавления CSS в теме

Оба метода, описанные выше, рекомендуются для начинающих. Опытные пользователи также могут добавлять собственный CSS прямо в свои темы.

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

Лучше всего использовать вместо этого дочернюю тему. Однако многие новички не хотят создавать дочернюю тему.Помимо добавления пользовательского CSS, часто новички действительно не знают, как они будут использовать эту дочернюю тему.

Использование настраиваемого плагина CSS позволяет хранить собственный CSS независимо от вашей темы. Таким образом, вы можете легко переключать темы, и ваш собственный CSS все еще будет там.

Еще один отличный способ добавить собственный CSS на ваш сайт WordPress — использовать плагин CSS Hero. Этот замечательный плагин позволяет редактировать практически все стили CSS на вашем сайте WordPress без написания ни единой строчки кода.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Как использовать CSS в WordPress для легкой настройки стиля

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

Cascading Style Sheets (CSS) — один из важнейших языков веб-дизайна. Внесение изменений в CSS на вашем сайте позволяет вам настроить его внешний вид, макет, шрифты, цвета и многое другое. CSS предлагает более полный контроль над внешним видом вашего сайта, чем ваша тема, и работать с ним не так уж и сложно.

Если вы новичок в CSS, вы попали в нужное место. Мы объясним, что это такое, как он влияет на ваш сайт и как начать использовать CSS в WordPress. Давайте прямо сейчас!

Что такое CSS (и как он работает)

Во-первых, давайте немного вернемся и поговорим о языке гипертекстовой разметки (HTML). Это основной язык, используемый для создания вашего веб-сайта WordPress, и он носит описательный характер. Код HTML сообщает веб-браузерам о различных элементах вашего контента.Например, он указывает, какой текст является частью заголовка, а какой — частью основного абзаца.

Если вы когда-нибудь проверяли вкладку Текст в редакторе WordPress, вы видели HTML в действии:

Вы также можете использовать HTML, чтобы каким-то образом определять стиль вашего веб-сайта. Однако это громоздкий способ выполнить работу. Например, если вы хотите, чтобы все заголовки ваших сообщений были фиолетовыми, вам нужно будет добавить HTML-код, содержащий ту же инструкцию, для каждого заголовка по отдельности.

Вот где на помощь приходят каскадные таблицы стилей (CSS). Этот язык используется для определения внешнего вида элементов HTML, включая их размеры, макеты, цвета, шрифты и т. Д. Например, вы можете изменить цвет всех заголовков на своем сайте с помощью нескольких строк кода с помощью CSS, не изменяя HTML-код вашего контента.

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

Где добавить CSS в WordPress

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

К счастью, есть более простое решение. Чтобы добавить CSS в WordPress, вам просто нужно:

• Перейдите к Внешний вид> Настроить на панели инструментов WordPress, чтобы открыть настройщик WordPress
• Выберите опцию Additional CSS в меню слева в интерфейсе настройщика WordPress:

(в настоящее время) пустой редактор в этой области позволяет вам вводить строки кода CSS без необходимости сортировать существующую таблицу стилей.Вы можете добавить сюда столько CSS, сколько захотите — просто включите каждый новый фрагмент в отдельной строке. Кроме того, вы можете увидеть, как ваши изменения вступят в силу в режиме предварительного просмотра. Таким образом, вы узнаете, правильно ли они выглядят , прежде чем опубликует их на вашем сайте.

Кроме того, этот редактор поможет вам «проверить» ваш CSS, что является причудливым способом сказать, что он предупредит вас, если вы сделаете какие-либо очевидные ошибки.

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

Как начать настройку вашего сайта WordPress с помощью CSS

Как мы упоминали ранее, вы можете изменить практически любой аспект внешнего вида своего сайта с помощью CSS в WordPress. Небо действительно предел здесь. Однако пока мы будем упрощать задачу и рассмотрим некоторые базовые настройки CSS, которые вы можете сделать.

Мы уже упоминали об изменении цвета текста, так что начнем с этого.Если вы действительно хотите, чтобы ваши сообщения WordPress привлекали внимание посетителей, вы можете поэкспериментировать с изменением цвета заголовка каждого сообщения. Вот как выглядит базовый пост в теме Twenty Seventeen WordPress:

Теперь добавьте этот код в поле Additional CSS в настройщике:

h2 {
цвет: пурпурный;
}

Как видите, цвет заголовка сообщения изменился с черного на фиолетовый:

Эта же настройка будет применяться ко всем остальным сообщениям на вашем сайте.Вместо того, чтобы просто называть цвет, вы также можете использовать шестнадцатеричные коды, чтобы получить нужный оттенок. Просто замените фиолетовый на # 9C33FF (или любой другой цвет, который вы хотите использовать). Когда вас устраивает новый оттенок, выберите Опубликовать вверху экрана, чтобы изменения вступили в силу.

Затем, что, если вы хотите внести некоторые изменения в основной текст? Давайте отредактируем семейство и размер шрифта, добавив этот код в новую строку:

p {
font-family: Georgia;
размер шрифта: 20 пикселей;
}

Опять же, вы можете сразу увидеть результаты в настройщике:

Наконец, давайте немного выделим боковую панель, добавив голубой фон и небольшой отступ. В новой строке вставьте этот CSS:

.widget {
background: # B9EBFA;
отступ: 25 пикселей;
}

Это помещает простой фон позади вашей боковой панели:

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

На этом этапе вы, возможно, начинаете понимать, как работает CSS под капотом. В первой строке фрагмента CSS указывается, какой элемент вы изменяете, например заголовки сообщений ( h2 ), текст, содержащийся в абзацах ( p ) или области ваших виджетов ( widget ). Следующие строки, заключенные в квадратные скобки, содержат конкретные инструкции о том, что следует изменить.

Где узнать больше о CSS

В Интернете есть множество полезных руководств, которые помогут вам узнать больше о CSS и наиболее распространенных элементах, на которые вы можете повлиять.А до тех пор, если вы изо всех сил пытаетесь понять, какой код вам нужен для внесения того или иного изменения, простой поиск в Google обычно приведет вас к ответу. Ресурсы, такие как веб-документы MDN от Mozilla, обычно имеют высокий рейтинг в Google и прекрасно объясняют различные аспекты CSS.

Немного попрактиковавшись, вы обнаружите, что добавляете CSS в кратчайшие сроки.

Заключение

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

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

У вас есть вопросы о том, как использовать CSS в WordPress? Спросите нас о чем угодно в разделе комментариев ниже!

Бесплатный гид

5 основных советов по ускорению работы сайта на WordPress

п {
    красный цвет;
    размер шрифта: 200%;
}
 

 Это абзац с классом "предупреждение". 
 Это абзац с идентификатором "опасность".
 

.предупреждение {
    цвет фона: #ccf;
}
#Опасность {
    цвет фона: #fcc;
}
 

#danger {цвет: красный; }
.warning {цвет: оранжевый; }
p {цвет: зеленый; }
 

#danger {цвет: красный; }
.warning {цвет: оранжевый; }
п {цвет: зеленый! важно; }
 

 Это  хороший  образец абзаца. 
 

сильный {цвет: салатовый; }
em {цвет: помидор; }
 

p strong em {цвет: салатовый; }
em {цвет: помидор; }
 

п {цвет: индиго; }
п {цвет: голубой; }
p {цвет: бирюзовый; }