Стили CSS, как они используются в CMS WordPress, именно эти вопросы разберем в этом посте.

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

Элементы страницы сайта

В общем виде страница сайта состоит из следующих основных блоков:

1) Шапка сайта или Header.

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

2)Информационный блок.

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

3)Виджеты.

Это боковые колонки сайта. Их может быть несколько. Чаще всего один или два. Располагаться виджеты могут в нескольких вариациях:

  • справа от информационного блока
  • слева от информационного блока
  • справа и слева от информационного блока

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

4) Подвал или Footer страницы.

Располагается внизу страницы и для всех страниц сайта одинаков.

Все эти блоки, в свою очередь, состоят из отдельных составляющих, их называют элементами блоков. Что это за элементы?

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

Так вот для описания всех этих элементов и служат стили CSS. И находятся эти описания в специальных файлах с расширением .css.

Применение стилей CSS в CMS WordPress

Стили css
Теперь переходим ближе к теме нашей статьи – использование стилей CSS в CMS WordPress.
В каждом сайте, функционирующем на WordPress, дизайн определяется шаблоном или темой. Файл, содержащий все элементы CSS, называется style.css.

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

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

…/wp-content/themes/имя-темы/style.css

Можно добраться к нему и через административную панель вашего сайта, пройдя по пунктам:

Дизайн – Редактор – style.css

В каких случаях стоит заниматься изменением стилей в файле style.css?
Если Вас дизайн сайта в целом устраивает, но хочется какой-то элемент подправить. Изменить размер или цвет шрифта в каком-то блоке, изменить цвет заливки или рисунок. да мало ли что мы захотим изменить.

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

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

/* Start blockquote */
blockquote
{
margin:10px 10px 10px 50px;
padding:5px 5px 5px 41px;
background-color:#CCE1E5;
background-image:url(‘images/PostQuote1.png’);
background-position:left top;
background-repeat:no-repeat;
}
/* Finish blockuote */

Затем загрузил в в папку images своей темы изображение с именем PostQuote1.png и откорректировал запись в этом блоке. Для этого пришлось изменить только одну строку в файле style.css. Таким образом можно менять любые элементы дизайна на своем сайте на движке WordPress. Я решил дать Вам небольшую инструкцию по изменению стилей CSS.

Изменение элементов дизайна

  • 1.Четко определяем, что нам надо менять. Конкретный элемент дизайна.
  • 2.Сохраняем копию файла style.css на свой компьютер
  • 3.Открываем файл style.css любым редактором, Блокнотом или Notepad будет предпочтительнее.
  • 4.Находим элемент дизайна для изменения.
  • 5.Изменяем директивы css
  • 6.Сохраняем изменения в файле style.css и загружаем его на хостинг.
  • 7.Тестируем результаты нашей работы.
  • 8.Если все нормально, то завершаем наши усилия, в противном случае продолжаем работу.

Вот Вам ориентировочный план действий.

И еще предлагаю Вам посмотреть хорошее доходчивое видео на тему стилей CSS и его месте в сайтостроении.

На этом завершаю, всем желаю успехов.

Комментарии (15) на “Стили CSS, использование в WordPress”

  • Александр пишет:

    Интересная и полезная информация!

  • ирина пишет:

    Познавательная статья,но сама вряд ли стану делать.Лучше доверится таким как вы профессионалам.

  • Владимир Фесюк пишет:

    Вот у меня в теме есть, помимо Таблицы стилей ещё Таблица стилей для редактора (editor-style.css). Они почти дублируются. Но каково их соотношение я так до конца понять не могу. Не сталкивались с таким?

    • Юрий пишет:

      Нет не сталкивался, это просто у Вас тема такая. Если знаете автора, то обратитесь к нему. Можно попробовать протестировать, предварительно сделав копию. Изменить какой-то блок в одном из файлов CSS и посмотреть как это отображается на сайте.

      • Владимир Фесюк пишет:

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

        • Юрий пишет:

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

          • Владимир Фесюк пишет:

            А, точно, спасибо, что подсказали, наверное так и есть.

  • Владимир пишет:

    Благодарю Вас за такую интересную и полезную информацию!

  • Павел Рыжиков пишет:

    Очень полезная статья. Я много раз редактировал темы. Много раз сайт просто сваливался, приходилось восстанавливать через хостинг. Все не просто. Спасибо. У Вас отличный сайт. Удачи.

  • Вадим пишет:

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

  • samsimon21 пишет:

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

  • Иван пишет:

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

    • Юрий Силин пишет:

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

  • Юлия пишет:

    Любой человек, знакомый с разработкой под WordPress, знает о важности использования дочерних тем. Они позволяют добавить свой код в WordPress-тему, защитив э 19 тот код от перезаписи при следующем обновлении темы. Если вы измените файлы темы напрямую, не обращаясь к дочерней теме, то в таком случае при следующем обновлении темы все изменения будут потеряны. А хранить css стили в базе данных и загружать каждый раз их оттуда. Именно так же новый кастомайзер будет стили хранить?

    • Юрий Силин пишет:

      Соглашусь с вами. Статью писал 5 лет назад, а за это время технологии создания сайтов заметно продвинулись. Ранее использование дочерних тем широко не применялось.

Оставить комментарий

Популярные записи
Получать новые статьи
Свежие статьи на сайте Ваш e-mail: