Всем привет!
Сегодня мы будем изменять шрифт заголовка статей.
До внесения изменений, описанных ниже, название статей в моем блоге выглядело вот так
Далее я опишу свои действия, которые выполнил для изменения внешнего вида заголовка, а вы сможете применить данный алгоритм в дальнейшем и для внесения других изменений на сайте.
Итак, для начала, посмотрим код элемента заголовка.
В исходном коде мы видим, что заголовок статьи идёт с классом class="title". Классы обычно описываются в каскадной таблице стилей – по умолчанию в WordPress это файл style.css. Подробно на этом не буду сейчас останавливаться. Давайте вы просто посмотрите как изменения в style.css скажутся на внешнем виде заголовка, а со временем либо разберемся подробней с таблицами стилей, либо вопрос отпадет, уже как понятный.
Файл style.css можно изменить либо с помощью любого текстового редактора, либо через админку WordPress. Поскольку изменения будут небольшими, то сейчас давайте отредактируем его через админку. Перейдите в админке в меню
“Внешний вид” – “Редактор”.
Справа внизу кликните по “Таблица стилей (style.css)”.
По центру откроется содержимое файла style.css. В этом файле нам нужно найти строку ".title". Описание классов в таблице стилей начинается с точки ".". Поэтому мы ищем не "title", а ".title". Нажмите Ctrl+F и введите искомую строку. Таким образом, мы нашли код, описывающий класс title, который используется при выводе заголовка статьи.
Зеленым я подчеркнул фрагмент, который отвечает за преобразование всех символов заголовка в верхний регистр. Удаляю этот фрагмент. Также я изменю размер шрифта – он задается свойством font-size. Устанавлю 24px. И внесу изменения в семейство шрифтов font-family: Arial, Helvetica, sans-serif; После всех изменений нужно кликнуть по кнопке “Обновить файл” внизу страницы.
Вот как теперь выглядит мой заголовок после изменений.
Хотя дизайнер с меня никакой, но вариант после редактирования мне нравится больше. Можно еще попробовать какие-то варианты, но главное – мы теперь знаем как это делать.
Заранее трудно предугадать как изменится внешний вид сайта после редактирования CSS. Поможет в этом определиться тот же инструмент просмотра кода элемента. Когда вы просматриваете исходный код элемента, то справа внизу можно увидеть окно со значениями свойств из таблицы стилей. У меня в Google Chrome это окно выглядит вот так.
Вот в этом окне можно изменить значение любого свойства, или отключить это свойство вообще (убрав галочку слева). И все последствия этих изменений вы сразу увидите на странице в режиме реального времени. Подберите таким образом значения, который вас устроят и только после этого внесите изменения в style.css так, как это было описано выше.
Таким образом, мы изменили внешний вид заголовка статей: убрали преобразование в верхний регистр, изменили размер шрифта и семейство шрифтов.
Данный алгоритм можно применять и для других изменений на сайте, касающихся таблицы стилей style.css.
Коротко повторю порядок действий:
1. Смотрим исходный код элемента, внешний вид которого хотим изменить.
2. В окне просмотра стилей CSS подбираем значения свойств.
3. Вносим изменения в соответствующий раздел файла style.css.
Если возникли какие-либо вопросы – обязательно напишите их в комментариях к статье.
Желаю успехов! До связи!
Здравствуйте, Алексей!
У нас шаблон Core. Получили хозяйство от партнеров, теперь сражаюсь с правкой. По этой теме вопрос такой. Не могу поменять шрифт в заголовках страниц – они h2. Попытки залезть в Внешний вид-Настройки Темы-Шрифты- H2 почти ни к чему не приводят. Удается поменять только цвет, на остальные изменения (в т.ч. шрифта) нет реакции. Пробовала по Вашему совету посмотреть код элемента – в правом окошке можно поменять шрифт, и изменения отлично видны на странице. Про стили CSS: если зайти это посмотреть через тот же Вн Вид-Редактор-Таблица Стилей, то отображается какой-то текст без подробностей. А если в браузере тупо набрать wp-content/uploads/the-core-style.css (с именем домена в начале), то вылезает добротный текст и О! чудо! там прописан желаемый шрифт и жирность для h2. Как тут пробиться?!
Заранее спасибо, Дарья.
Скачай файл по ftp Filezilla-ой, изменяй как хочешь и закачивай обратно на хост…