Добавление пользовательских CSS

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

Эта функция доступна на сайтах с тарифными планами WordPress.com Premium, Business и Commerce, а также с устаревшим тарифным планом Pro. Для бесплатных сайтов или сайтов с тарифным планом Personal необходимо приобрести платный тарифный план более высокого уровня, чтобы получить доступ к этой функции.

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

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

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

В зависимости от темы для доступа к редактору CSS на сайте существует два способа. Далее подробно описан каждых из этих способов.

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

1. Откройте консоль вашего сайта.
2. Перейдите в раздел Внешний вид → Редактор.
3. Нажмите Стили в меню «Дизайн» слева.
   • Если ваша тема содержит варианты стилей, нажмите значок карандаша, чтобы открыть опции стилей.

4. Нажмите три точки справа от заголовка «Стили» и выберите «Дополнительные CSS».

5. Введите или скопируйте код CSS в соответствующее поле.
6. Нажмите кнопку «Сохранить» в правом верхнем углу экрана, чтобы сохранить CSS на сайте.

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

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

1. Откройте консоль вашего сайта.
2. Перейдите в раздел Внешний вид → Редактор.
3. Нажмите Стили в меню «Дизайн» слева.
   • Если ваша тема содержит варианты стилей, нажмите значок карандаша, чтобы открыть параметры стилей.
4. На этот раз выберите раздел «Блоки», чтобы перейти к настройкам и настроить внешний вид отдельных блоков для всего сайта.
5. Щёлкните имя блока, в который требуется добавить CSS. Вы также можете найти нужный тип блока, введя название в поле поиска.
6. Прокрутите страницу вниз и нажмите кнопку «Дополнительно».
7. В поле «Дополнительные CSS» введите код CSS, который будет применяться ко всем экземплярам этого типа блока. При добавлении CSS поблочно не обязательно включать селектор CSS, достаточно добавить свойство и значение. Пример см. в видео выше.
8. Нажмите кнопку «Сохранить» в правом верхнем углу экрана, чтобы сохранить CSS на сайте.

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

1. Откройте консоль вашего сайта.
2. Перейдите в раздел Внешний вид → Настроить → Дополнительные CSS.
3. Введите или скопируйте код CSS в соответствующее поле. Изменения будут отражены в окне предварительного просмотра справа.
4. Нажмите «Сохранить изменения», чтобы применить CSS на сайте.

Сохраняются последние 25 версий CSS. Доступ к ним можно получить, нажав кнопку «Посмотреть полную историю» в нижней части редактора CSS. Здесь можно восстановить предыдущие версии CSS.

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

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

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

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

Вы можете полностью отключить исходные CSS темы, выбрав опцию «Не использовать исходные CSS темы». Это позволит вам использовать любую тему WordPress.com как чистый лист для разработки дизайна с помощью CSS.Это дополнительная опция, которую следует использовать только в том случае, если вы хотите начать всё сначала и создать CSS для своей темы с нуля.

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

WordPress.com поддерживает средства предварительной обработки (препроцессоры) CSS LESS и Sass (SCSS Syntax). Это дополнительная опция для пользователей, которые желают воспользоваться такими расширениями CSS, как переменные и примеси. Дополнительные сведения см. на сайтах LESS и Sass.

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

• Если на вашем сайте используется блочная тема, вы можете изменять или удалять ссылки в подвале с помощью редактора сайта — CSS не требуется.
• Если на вашем сайте используется классическая тема, вы можете заменить ссылки в подвале на минималистичный логотип WordPress. Вы можете скрыть ссылки в подвале, если для сайта действует подписка на тарифный план Business или Commerce.

Да, но только на сайтах с поддержкой плагинов.

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

Да. Вы можете загрузить изображение в свою библиотеку медиафайлов, затем разместить ссылку на него в виде прямого URL-адреса в своей таблице стилей CSS. Вот пример использования фонового изображения в таблице стилей:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

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

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

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