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

Я не профессиональный верстальщик. Моя основная специальность – продвижение сайтов, однако мой опыт в веб-дизайне может оказаться полезным для всех, кто работает с WordPress.

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

Как работают CSS: немного теории

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

Пример простого стиля

Стиль состоит из селектора и объявления.

  	h1, h2, h3 {  	 margin-top: 25 px;  	 margin-bottom: 20 px;  	}  

Здесь указано, какую ширину в пикселях имеют верхний и нижний отступ у заголовков h1, h2 и h3 внутри текста веб-страницы. Это вполне очевидно, хоть и по-английски. Как это выглядит на экране, понятно из скриншота.

Подкрутить CSS можно в режиме реального времени и тут же увидеть, что получится

Файл стилей, который мы будем пытаться изменить, легко отыскать в консоли движка в редакторе темы. Обычно он называется style.css. Идём в левое меню WordPress: Внешний вид → Редактор тем.

Здесь находятся файлы со стилями в консоли WordPress

Файлов со стилями может быть несколько, но пока нас это не должно смущать – остановимся на главном, со стандартным названием style.css.

Какие бывают атрибуты CSS и за какие элементы дизайна они отвечают

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

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

Чтобы было понятно, как это работает, рассмотрим несколько простых примеров свойств.

Отступ от верхнего края:

  	margin-top: 25 px  

Все просто. Здесь задан отступ содержимого элемента от его верхнего края в 25 пикселей.

При помощи свойства margin-top можно поменять верхний отступ

Размер шрифта:

  		font-size: 17 px  

Здесь задан кегль экранного шрифта в 17 пикселей.

Свойство font-size регулирует кегль шрифта

Ширина элемента:

width: 100%

Свойство задает относительную ширину элемента в 100 %;

Видно, как меняется ширина изображения при разных параметрах width

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

Что делать, если у темы мало настроек дизайна

Что делать, если вы хотите подкорректировать размеры заголовков, отступы текста и изображений или убрать рамки у виджетов в сайдбаре, а в стандартном меню – только цвета и акценты? Даже если вы не специалист, можно попробовать самому.

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

Выбираем элемент на сайте, к которому будем искать стили

Чтобы увидеть код страницы и получить доступ к редактированию элементов сайта в режиме реального времени, наберите комбинацию клавиш:

  • Ctrl + Shift + I в Google Chrome, Opera;
  • Ctrl + U в «Яндекс.Браузере», Microsoft Edge;
  • Ctrl + Shift + C или F12 в Mozilla Firefox.

Выбираем мышкой нужный нам элемент сайта. Например, находим заголовок в тексте статьи и кликаем на нем правой кнопкой. Во всплывающем меню нажимаем «Просмотреть код». В консоли браузера должны быть открыты вкладки Elements и Styles.

Открываем консоль браузера и проверяем, открыты ли вкладки Elements и Styles

Ищем в консоли нужные нам стили и их параметры. Пробуем изменить параметры и смотрим, к чему это приводит на странице в браузере.

Меняем параметры в консоли и отслеживаем визуальные изменения на сайте

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

Эти значения будем использовать в дальнейшей работе

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

Делаем резервную копию стилей

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

  • Открыть в консоли WordPress редактор тем.
  • Найти актуальную тему в перечне всех доступных на сайте и нажать «Выбрать».
  • Использовать нужный файл со стилями.
  • Создать на компьютере пустой документ — например, с помощью редактора Word — и скопировать туда из все содержимое стилей из панели управления сайтом.
Делаем резервную копию файлов со стилями

Ищем стили в редакторе тем и выгружаем содержимое

Следующий этап – поиск селекторов, которые будем редактировать, и перенос содержимого в файл на локальном компьютере. Действуем как при создании резервной копии:

  • Заходим в консоль WordPress. Выбираем в левом меню «Редактор тем».
  • Выбираем нашу тему из перечня доступных и нажимаем «Выбрать».
  • Находим справа нужный нам файл темы со стилями (название этого файла мы записали при поиске в браузере).
  • Создаем пустой текстовый документ на локальном компьютере и копируем в него содержимое файла из WordPress.

Ищем и редактируем нужные стили CSS

Редактировать выбранные стили лучше в отдельном файле. На предыдущем шаге мы выгрузили код в отдельный файл. Я использую Microsoft Word. Вы можете взять любой другой текстовый редактор, который считаете удобным. Главное, чтобы у него была функция поиска фрагмента текста.

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

Проверяем название селектора

Ищем внутри объявления селектора нужное свойство и меняем параметр.

Меняем значение параметра

Обновляем файл стилей, чистим кэш браузера и проверяем результат

Выделяем в нашем файле отредактированный текст щелчком правой кнопки на тексте, открываем меню и выбираем «Копировать».

Копируем исправленный код в буфер обмена

Выделяем и удаляем все содержимое файла стилей в окне WordPress.

Удаляем содержимое файла стилей в окне WordPress

Копируем в пустое окно наш исправленный код при помощи сочетания клавиш Ctrl + V. Нажимаем «Обновить файл».

Обновляем код файла со стилями в консоли WordPress

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

Чистим кэш в браузере Google Chrome

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

Меняем ширину контейнера сайта

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

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

Типичный пример контейнера

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

Пример:

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

Решение:

Открываем в браузере страницу. Наводим курсор мыши на содержимое в середине, кликаем правой кнопкой и открываем консоль браузера командой «Просмотреть код».

Ищем в коде HTML-тег:

<div class="container"></div>

Все, что нас интересует – атрибуты width правила @media для контейнера. Не буду вдаваться в детали, но именно там задаются нужные настройки ширины. В нашем случае они будут храниться не в styles.css, а в другом файле с именем bootstrap.css. Увидеть это можно в консоли браузера.

Настройка ширины контейнера сайта
Обратите внимание, что если сузить поле консоли браузера, то контейнер сайта растянется и значение @media изменится. Так работает адаптивная верстка.
Адаптивная верстка в действии

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

Идем в редактор и копируем содержимое bootstrap.css в отдельный файл на локальный компьютер. Делаем резервную копию всех стилей.

Выбираем файл стилей bootstrap.css

Ищем в документе Word селектор container. Если верстка адаптивная, выпадет несколько результатов.

Ищем в CSS-коде нашу настройку

Нам надо изменить значение ширины. Ищем селектор контейнера с большим и средним диапазоном значений в пикселях. В нашем случае это выглядит так:

  	@media (min-width: 992 px){  		 .container {  		 width: 970px;  		 }  		}    

И так:

  	@media (min-width: 1 200 px) {  		 .container {  		 width: 1170px;  		 }  		}    

Если выставить другие значения width в каждой группе, в итоге получится такой код:

  	@media (min-width: 992 px) {  		 .container {   		 width: 860px;  		 }  		}    

И такой:

  	@media (min-width: 1 200 px) {  		 .container {  		 width: 970px;  		 }  		}  
Меняем значение атрибута width

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

Смотрим, что получилось

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

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

Заключение

С каскадными таблицами стилей, если вы не специалист, нужно быть аккуратным. Одно неосторожное изменение может вызвать совершенно неожиданный эффект. Чтобы лучше понимать происходящее, поищите информацию в интернете или спросите у знакомых веб-дизайнеров. Этот метод тоже работает :-)

Эта статья – не полное руководство, а простой, доступный любому способ «на коленке» внести небольшие косметические правки в дизайн блога на WordPress.

Вот общая методика в двух словах:

  1. Ставим задачу.
  2. Создаем бэкап файлов со стилями.
  3. Ищем нужный селектор, атрибут и название файла со стилями в консоли браузера.
  4. Вносим изменения в файл со стилями.
  5. Тестируем изменения на сайте и при необходимости повторяем цикл заново.
Берите на вооружение советы, делайте гипотезы и не бойтесь их самостоятельно проверять. И помните, что для успеха бизнеса мало иметь хороший сайт. Эту задачу решает комплексное продвижения в интернете, которым занимаются специалисты агентства «Текстерра».
#
Дизайн Разработка
© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.