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

Способ изменения стиля сайта

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

скриншот

Первое, что нам нужно сделать – это включить инструменты разработчика. Они есть в каждом браузере. Мы будем рассматривать примеры для GoogleChrome, у остальных платформ принцип аналогичный. Итак, указываем на элемент, нажимаем правую кнопку мыши и выбираем вкладку «просмотреть код».  И видим примерно следующее (изображение кликабельно).

Инструмент разработчика

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

Основные элементы.

1 – выбор устройства для отображения. «Responsive» означает произвольный размер.

2 – выбор размещения элементов для самого экрана разработчика. По умолчанию колонка с инструментами будет справа. Можете переместить её вниз или налево. Иногда это может быть удобно.

3 – html-код сайта

4 – css-код сайта, стили оформления

5 – панель изменения размера. Можно перемещать её мышью, чтобы посмотреть, как меняется отображение сайта.

Для начала нам нужно найти наш элемент в html-коде. Если вы открыли страницу, щёлкнув по элементу, то он будет подсвечен по умолчанию. Если нет – то можно либо ещё раз кликнуть по блоку, либо поискать его, листая список в окне (3).

Далее обращаем внимание на окно (4). В нём перечислены все селекторы и свойства, отвечающие за выбранный элемент. Ищем, какая часть css-кода отвечает за размер шрифта – нам нужен тег font-size. В данном случае он обнаружился в первом же фрагменте.

Для начала проверим наше предположение. Прямо в браузере, в окошке (4) меняем строку font-size: 4em;. Например, впишем значение font-size: 2em;. Заголовок уменьшился в два раза. Можно, кстати, просто выделить мышью значение 4em и менять его, нажимая на клавиатуре стрелки вверх и вниз. Допускается указывать дробные значения. В нашем случае укажем 2.6em, при этом заголовок помещается в одну строку и выглядит так. Кроме em могут быть и другие единицы измерения – px, rem, vh.

фото 3

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

.jeg_single_tpl_2 .entry-header .jeg_post_title, .jeg_single_tpl_3 .entry-header .jeg_post_title, .jeg_single_tpl_6 .entry-header .jeg_post_title {
    font-size: 4em;
    line-height: 1.1;
}

Часть, которая идёт до скобок называется селектором – он указывает, к каким блокам сайта будут применяться стили. Селекторы отделяются запятыми, таким образом, один и тот же стиль может быть применён к разным фрагментам. Чтобы понять, какой селектор нужен нам, достаточно присмотреться к подсказке браузера – тот, который относится к нашему конкретному элементу, выделен чуть более жирным шрифтом. В данном случае это .jeg_single_tpl_2 .entry-header .jeg_post_title. Оставляем его, остальные убираем.

Внутри фигурных скобок перечислены сами стили. Нам нужен только один из них – font-size. Таким образом, итоговый код для вставки примет следующий вид.

/* Уменьшаем заголовок статьи */
.jeg_single_tpl_2 .entry-header .jeg_post_title {
    font-size: 2.6em;
}

Комментарий внутри тегов /* и */ вписываем для себя, чтобы потом не запутаться, браузер его не увидит. Не забываем поменять нужный нам параметр!

Теперь сформированный код нужно вставить в окно для пользовательских стилей. Обычно оно помещается в настройках темы. Заходим в админку и идём вот сюда.

фото 4

А потом сюда

вордпресс

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

фото 6

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

Что ещё можно менять?

Понятно, что не размерами шрифта едиными жив веб-мастер. Давайте рассмотрим, какие ещё мелкие правки вы можете таким способом внести на свой сайт.

Межстрочный интервал

Задаётся тегом line-height. Выглядеть это примерно так line-height: 24px; Важно понимать, что он определяет именно расстояние между строками в одном абзаце, или, например, между строками заголовка, который занял несколько строк. Изменить таким образом расстояние между абзацами не получится.

Внешние и внутренние отступы

Расстояния между блоками задаются тегом margin. Он может быть один, либо иметь модификации: margin-right, margin-left, margin-top, margin-bottom. Как интуитивно понятно, это расстояния от соответствующей границы блока до соседнего элемента. Если указан один margin, то расстояния до границ перечисляют через пробел.

Свойство padding очень похоже, но указывает расстояние от границ блока до элементов, которые расположены внутри него. Также имеет модификации для правой, левой, верхней и нижней границ: padding-right, padding -left, padding -top, padding –bottom.

Длину и ширину элементов

В современной вёрстке эти свойства используются не часто и могут работать далеко не всегда. Чаще размеры высчитываются движком автоматически, исходя из содержимого и отступов. Тем не менее, знать их полезно. width – указывает ширину блока, height – высоту.

Скрыть блок

Ещё одно полезное и часто используемое свойство. Если вы хотите вообще убрать какой-нибудь элемент, чтобы его не показывали на вашем сайте, достаточно добавить свойство display: none. В нашем случае это выглядело бы следующим образом.

/* Не показывать заголовок статьи */
.jeg_single_tpl_2 .entry-header .jeg_post_title {
    display: none;
}

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

Техника безопасности

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

Имейте в виду, что вносимые корректировки коснутся всех страниц и записей сайта. Для WordPress как минимум, нужно просмотреть главную и архивную страницы (список рубрик), отдельную запись и отдельную страницы. Не забывайте почистить кеш и браузера, и сервера!

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

Последняя рекомендация – уже скорее совет для продвинутых пользователей. Пользовательские стили тема обычно выводит внутри блока <head></head>, что не лучшим образом сказывается на скорости загрузки и может влиять на СЕО. Поэтому если у вас накопилось уже много правок, стоит скопировать их и перенести в файл со стилем темы.

Как правило, он лежит в папке wp-content\название вашей темы\style.css. Записывать код нужно в конец файла, чтобы новые стили получили приоритет над прежними. Сделать эту процедуру можно зайдя на хостинг через FTP либо через файловый менеджер вашего провайдера.

Заключение

Исправление свойств, которые мы рассмотрели, составляет 90% от всех изменений, которые обычно хотят внести пользователи для улучшения внешнего вида своего сайта. Как видите, ничего сложного здесь нет, а между тем, на фрилансе за одну такую корректировку берут по 300-500 рублей. В общем, экспериментируйте, пробуйте, разбирайтесь, не забывая про технику безопасности. Не огорчайтесь, если что-то не получится. Современные сайты имеют достаточно сложную структуру и для решения некоторых вопросов лучше, всё-таки, обратиться к специалисту.