кнопка наверх

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

css и дочерняя тема WordPress Доброго времени суток! Вчера был мой День рождения! Четверть века прожита:) Отмечали дома, в Анапе, в кругу семьи и новых друзей. Меня задарили цветами, шариками, ягодами и другими подарками. Мы с мамой наготовили вкуснейших сыроедческих блюд, которые оценили даже далекие от такого питания люди. Вечером запускали небесные фонарики в поле.

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

Содержание:

Что такое css-стили

CSS – (каскадные таблицы стилей) язык, используемый для оформления внешнего вида html-страницы. Любой элемент сайта имеет свои css-правила, записанные в отдельном файле (таблице стилей) и задающие внешний вид этого элемента.

На моем блоге есть серия статей, где я учу индивидуально оформлять те или иные элементы блога:

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

Как вносить изменения в стили WordPress-блога?

Для начала, всем, кто сталкивается с подобным вопросом впервые, предлагаю изучить структуру шаблона и его основные файлы. Файл стилей style.css в WordPress отвечает за внешнее оформление темы. Если вы загляните внутрь этого файла с помощью редактора Notepad или любого другого, то увидите приблизительно следующее:

Файл стилей style.css

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

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

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

Для этого нам нужно вспомнить дополнение FireBug для FireFox. В статье про данное расширение описано, как находить элементы кода, которые отвечают за ту, или иную деталь сайта. Далее вы можете скопировать отрывок кода данного элемента и вставить его в файл css-стилей (далее я расскажу, как редактировать файл дочерней темы или поле изменения стилей, созданное плагином). Таким образом, мы сохраняем протестированные в Файербаге изменения.

Задаются стили в WordPress, как и на любых других типах сайтов, с помощью стандартной модели: селектор {свойство: значение;}.

Разберем, как это делается на примере селектора «socials», который отвечает за отображение социальных кнопок:

1
2
3
4
5
6
7
8
.socials {
    border-bottom: 2px solid #f0f3f4;
    border-top: 2px solid #dee1e2;
    height: 30px;
    margin-bottom: 10px;
    padding: 5px 5px 0 0;
    position: relative;
}

Свойство border-bottom отвечает за стиль нижней границы, а прописанные после двоеточия значения определяют ее толщину (2 пикселя), тип (solid – сплошной), цвет (#f0f3f4).

Соответственно border-top – верхняя граница с подобными значениями, height – высота элемента, margin-bottom – нижний отступ, padding – поля вокруг элемента, position – положение элемента.

Вы сможете найти развернутые описания свойств и их значений на специализированных сайтах по CSS, а мы разберем самые основные и часто используемые из них. 

Свойство «Шрифт» (Font)

font-size — размер шрифта в пикселях, процентах и т.д., например, font-size: 12 px;

font-family – название шрифта (Calibri, Tahoma  и т.д.);

font-weight – насыщенность: жирный (bold), нормальный (normal) или значения от 100 до 900;

font-style – стиль шрифта: курсив, нормальный, наклонный (normal, italic, oblique);

font – свойство, которое задает сразу ряд характеристик, например,

p { font: italic 110% tahoma; }

Размеры

width – ширина элемента в пикселях, процентах, пунктах и т.д.;

height – высота элемента.

Свойства текста

text-align – горизонтальное выравнивание: по центру, по левому или правому краю, по ширине и т.д.;

text-align: left;

vertical-align – выравнивание по вертикали;

line-height – высота строки в пикселях, процентах, пунктах;

color – цвет текста элемента задается с помощью названия (red, green, black и проч.) или посредством шестнадцатеричной системы, где используются числа от 0 до 9 и латинские буквы от A до F, обозначающие числа от 10 до 15 (color: #dee1e2;). Для определения цветов есть множество специальных программок и онлайн сервисов. Я использую для этого фотошоп.

Свойство Background (Фон)

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

Соответственно, background-color– это отдельно только цвет фона, background-image– изображение, где значением служит путь к файлу:

background-image: url ('images/test.gif').

Свойство «Граница» (Border)

border – мы уже разбирали на примере выше, это свойство границы.

Соответственно если через дефис прибавить top, bottom, right, left (например, border-top), то это будет верхняя, нижняя, правая или левая граница.

Отступы (Margin)

margin – величина отступа со всех сторон. По аналогии с border, можно описывать отдельно top, bottom, right, left (margin-right).

Поля (Padding)

padding – поле вокруг элемента (сверху, справа, снизу и слева);

Отдельные поля по аналогии с margin и border (top и т.д.).

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

Проблема с обновление темы

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

Что же делать, чтобы этого не случилось?

Для этой задачи есть два варианта решения:

  • Вообще не обновлять свою тему:)
  • Подключить к установленной вами WordPress-теме дочернюю со своим файлом style.css;
  • Воспользоваться плагином для правки стилей.

Разберем 2 и 3 пункты подробнее.

Как создать дочернюю тему WordPress?

Для установки вспомогательной темы, вам необходимо создать новую папку в wp-content/themes. К примеру, назовем ее Additional Theme. В ней вам нужно создать новый файл style.css.

Открываем этот файл и прописываем следующее:

1
2
3
4
5
6
7
8
/*
Theme Name: Additional Theme
Template: twentyfifteen
*/
 
@import url("../twentyfifteen/style.css");
 
h1 { color: red; }

В данном случае Theme Name задает название нашей дочерней темы Вордпресс. Template указывает на родительскую тему, которая находится в папке twentyfifteen. Эти строки нужно обязательно прописывать.

Команда @import url импортирует стили родительской темы. После этой директивы можно указывать свойства и значения выбранных вами для изменения элементов. В нашем случае это тэг «h1» (заголовок), которому мы присвоили красный цвет.

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

Теперь копируем созданную нами папку на сервер. Если все сделано верно, то в разделе «Внешний вид» — «Темы» у вас появится новая тема Additional Theme. Именно ее нужно активировать. При этом родительская тема должна быть установлена, но не активирована.

С помощью установки дочерней темы можно не только менять стили, но и расширять возможности вашей родительской темы с помощью других файлов шаблона. Но файл style.css для нее обязателен, так как именно он позволяет распознать дочернюю тему по информационному заголовку (Theme Name, Template).

Плагин Simple Custom CSS

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

Один из них, это плагин Simple Custom CSS для WordPress:

Simple Custom CSS

После установки плагина, заходим в панель редактирования («Внешний вид» — «Custom CSS»):

настройка Custom CSS

Здесь по аналогии с тем, как мы это делали после директивы @import, вносим изменения в css-стили WordPress-темы, которые будут учитываться вместе с основным файлом style.css.

правка css-стилей

После внесения дополнений нажимаем Update Custom CSS. Соответственно, если вы захотите вернуть исходный стиль вашей темы для всех элементов, можно просто удалить все ранее добавленные вами параметры из данного поля. Вот и все, что нужно знать о работе данного плагина.

Кто выбрал для себя этот способ правки css, смотрим видео о плагине:

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

Удачи в освоении!

P.S. Фотки с Дня рождения. Мне сто лет не дарили гелиевых шариков. А сыроедческих тортов вообще никогда:)

подарки

О традиционном селфи с гостями вспомнили только, когда половина гостей уже ушла.

селфи


1 звезда2 звезды3 звезды4 звезды5 звезд (10 оценок, среднее: 5,00 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Alex:

    Вот эту статью я отдельно в закладки ставлю, чтобы изучить все как следует, так как именно стили CSS — для меня темный лес (стихи получились 🙂 ). Спасибо большое! И с прошедшим днем рождения!

    Ответить
  2. Ann:

    Здравствуйте, уважаемая тёзка! Будьте добры, подскажите, как можно сохранить изменения файла стилей какого-либо плагина (в частности wp-shop) в дочерней теме? Я знаю, что файл style.css в дочерней теме может дополнять файл стилей родительской темы, если в него подключить файл родительской темы с помощью директивы @import.

    Есть ли подобная возможность для плагинов? И если есть, то как это сделать?

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

    Ответить
    • Анна:

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

      Ответить
      • Ann:

        Анна, спасибо за подсказку, я так так и сделала и у меня получилось!

        Я добавила с помощью правила @import таблицы стилей плагина wp-shop в файл style.css дочерней темы и прописала новые значения в файл style.css для определённых классов. И всё. При обновлении плагина магазина wp-shop, всё мои стили остались на месте.

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

        Ответить
  3. Александр:

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

    Ответить
  4. Александр:

    Здравствуйте!

    Редактирую файл style.css , а сайт не реагирует. Редактирую через админку в WordPress: Внешний вид – Редактор. Может кто знает почему?

    Изменения в файле style.css сохраняются, их видно, если открыть его в блокноте, найдя в папке OpenServer, а на сайте изменений не видно.

    P.S.

    Плагина для редактирования CSS не устанавливал, данная функция была изначально.

    Сайт не не хостинге, а на OpenServer на локальном компьютере, тема Twenty Fourteen, WordPress.

    Ответить
  5. MGIN:

    Спасибо, действительно лучшая статья по данной теме.

    P.S...а прочитал я немало.

    Ответить
  6. Илья:

    А мне не один из способов так и не помог(( стили как не обновлялись, так и не обновляются. Куда ещё можно копать? В файле поменял цвет элементов, создавал новую тему, устанавливал плагин, руками в файлах смотрел стили — там-то поменяны, а вот в браузере как будто нет. Смотрел с разных браузеров и в режиме инкогнито, и всё равно...((

    Ответить
  7. Алексей:

    Здравствуйте, Анна! Подскажите порядок действий для изменения окна поиска в меню сайта — надо вставить вместо поиска код аудиоплеера.из шапки сайта. В Фаербаге строку нашел, но что дальше делать не понимаю...

    Ответить
Ваш комментарий: