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

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

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

Перед началом работ понадобится...

  • тема с опциями для настройки CSS или плагин для настройки таблицы стилей
  • доступ к правке таблицы стилей style.css
  • дочерняя тема

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

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

Правка стилей внутри настроек темы

У некоторых тем есть подключаемые опции для CSS, которые можно активировать в режиме администрирования сайта через панель администратора. Для этого надо перейти в подменю Внешний вид → Настроить.

Иногда такие настройки внесены отдельным пунктом меню, а иногда — как заголовок "Edit CSS" в специальном разделе.

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

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

Плагин для настройки CSS

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

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

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

После установки и активации плагина редактировать внешний вид можно в разделе Внешний вид → Edit CSS.

Создаем дочернюю тему

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

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

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

Можно также создать папку для дочерней темы и назвать ее именем основной темы с приставкой дочерней темы, поместить туда файл style.css и импортировать код основной таблицы стилей:

@import url("../THEMENAME/style.css");

Для работ с новой дочерней темой почитайте практическое руководство. После настройки всех параметров перейдем к правке кода.

1. Меняем цвет фона

Для смены фонового изображения на вашем сайте сначала изучите общий стиль и параметры фона. Применяется ли тут сплошной фоновый цвет или картинка, встроенная в фрейм?

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

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

Для тем без оформления в полную ширину в тело страниц встраивается простой цвет фона:

body {
  background-color: #477C67;
}

Для определения нужного цвета используйте инструмент под названием W3Schools HTML color picker либо установите расширение для Chrome либо Firefox.

Для своего примера я выбрал цвет фона #477C67:

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

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

Если вы хотите настроить фоновое изображение для блога, загрузите сначала нужную вам картинку. Убедитесь, что разрешение картинки и параметры блога совпадают. Путь к фоновому изображению может быть таким: "wp-content/uploads/2014/01/IMAGE.jpg"

body {
  background: url(location/img.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

В итоге должно получиться вот что:

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

Картинка остается статичной даже при прокрутке.

2. Улучшаем читаемость текста

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

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

body {
  font-size: 16px;
  color:#000
}

Используйте этот код в вашем файле style.css и проблемы со шрифтом решатся.

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

Подходящий размер шрифта для вашего блога — 14-16 пикселей. Избегайте 12 пикселей для шрифта. Крупный шрифт сделает ваш контент более читаемым и профессиональным. Поправить в коде надо вот что:

body {
  font-family: Arial, Helvetica, sans-serif;
}

В итоге получаем такой код:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color:#000
}

3. Меняем внешний вид ссылок

Смена цвета ссылок — следующий шаг, и настроить это можно с помощью следующих параметров:

a {
    color: #BA2323;
}

Берем к примеру цвет #BA2323 и вот что получаем:

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

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

a:hover {
  color: #222;
  background-color:#BA2323; 
}

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

a:visited {
  color: #004A4A;
}

4. Меняем внешний вид заголовков

Заголовок типично ставится h1, а подзаголовки — h2. Если вам надо поставить свой цвет и параметр для заголовка, можно внести несколько правок для конкретного поста. Для этой настройки надо указать дополнительно параметр, и вот как.

Находим стиль, соответствующий нашему заголовку "some-style". Редактировать надо следующую часть кода:

.entry-title {
    color: #WANTEDCOLOR;
    font-size: WANTEDSIZEpx;
}
 
.entry-title a {
    color: #WANTEDCOLOR;
}

Меняем на голубой #5CBDBD:

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

Для редактирования стилей надо править параметр вместо some-style на h1{} или h2{} или h3{}.

5. Изменяем цветовую схему виджетов

Один из простейших способов редактировать виджет — дополнение цветами. Править надо секцию, начинающуюся с widget-title. Тут можно установить цвет для виджета в дочерней теме:

.widget {
  background: #COLOR;
}
.widget-title {
  background-color: #COLOR;
}

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

Заключение

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

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

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

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

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

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