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

Замена цвета шрифта (по аналогии делается и замена размера шрифта).

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

Заменить цвет шрифта на сайте

Внизу страницы у вас появится окно (разбитое на две части), в котором можно будет увидеть свойства выделенного объекта. В данном случае нас интересует окошко стилей справа. Прокручивая ползунок в окошке справа, находим интересующее нас свойство объекта — цвет шрифта будет показан раскрашенным кружочком с порядковым номером цвета (см.фото).

Ещё правее от кружочка (обведено красным) находится информация о месторасположении нужных нам свойств шрифта (строчка style.css:418). Запоминаем номер строчки, чтобы быстро и легко найти её в файле style, в котором и будут производиться все изменения.

2

2. Чтобы выбрать нужный нам цвет нажимаем на цветной кружочек (в моём случае — голубой), и видим выпадающее окно палитры цветов. Именно в ней мы можем определиться с цветом, и сразу же увидеть как это будет смотреться на сайте (при изменении цвета в палитре надпись «Читать дальше» также изменяет свой цвет).

5

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

6

3. Дальше закрываем диалоговое окно инспектора, нажав на крестик в правом верхнем углу и переходим в файловый менеджер на странице аккаунта вашего хостинга. Нам нужно найти файл styleгде мы и будем производить все необходимые изменения. В моём случае путь к файлу выглядит так:

путь к файлу style

В списке папок и фалов вашей темы (в моём случае темы «contango») находим файл «style» и открываем его.

Обязательно копируем всё содержимое файла перед любыми манипуляциями (на случай, если что-то пойдёт не так)!!! Для этого устанавливаем курсор мыши в пустое место поля файла и жмём (Ctrl+A), далее копируем (Ctrl+C) и сохраняем (Ctrl+V) всё это в любом текстовом редакторе (Word, Блокнот). Обязательно сохраните этот документ на жёстком диске, чтобы при необходимости вы всегда могли восстановить исходные данные файла style.

4. Теперь приступаем к изменению цвета посредством редакции файла style. Для этого находим нужную нам строчку под номером 418 и чуть ниже видим надпись color с порядковым номером текущего цвета шрифта. Аккуратненько выделяем номер цвета и вставляем нужный нам (который копировали ранее).

7
Если такое предусмотрено в вашей теме, то вы также можете изменить цвет шрифта, который показывается при наведении курсора на надпись (у меня он светло-зелёный), в моём случае это строчка 426.

5. Заменив цвета, жмём сохранить, закрываем файл style и обновляемся, чтобы изменения точно вступили в силу. Бывает, что дополнительно требуется удалить историю просмотра в браузере и по новой зайти на сайт, чтобы увидеть все изменения.

8

Аналогично меняются цвета различных элементов сайта, не только шрифтов.

Замена размера шрифта.

Тут всё делается по аналогии с заменой цвета.

1. Идём на страницу сайта, кликаем по нужному нам объекту правой кнопкой мыши, выбираем в выпадающем окне «Исследовать элемент».

В правом окошке появившегося меню (смотри шаг 1 замены цвета) находим нужные нам атрибуты шрифта font-size.

Ещё правее вверху находится информация о месторасположении нужных нам свойств шрифта (строчка style.css:119). Запоминаем номер строки, чтобы быстро и легко найти её в файле style, в котором и будут производиться все изменения.

В моём случае значение надписи «Читать дальше» по умолчанию 18 пикселей. Для наглядности я поменяла это значение на 30, и надпись сразу же стала больше.

замена размера шрифта

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

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

путь к файлу style

Обязательно копируем всё содержимое файла перед любыми манипуляциями (на случай, если что-то пойдёт не так). Для этого устанавливаем курсор мыши в пустое место поля файла и жмём (Ctrl+A), далее копируем (Ctrl+C) и сохраняем (Ctrl+V) всё это в любом текстовом редакторе (Word, Блокнот). Обязательно сохраните этот документ на жёстком диске, чтобы при необходимости вы всегда могли восстановить исходные данные файла style.

3. Теперь приступаем к изменению размера шрифта. Для этого находим нужную нам строчку под номером 119 (см.шаг 1) и чуть ниже (у меня это строчка 121) видим надпись font-size. Заменяем размер шрифта на нужный нам.

замена размера шрифта 2

4. Заменив размер шрифта жмём сохранить, закрываем файл style и обновляемся, чтобы изменения точно вступили в силу. Бывает, что дополнительно требуется удалить историю просмотра в браузере и по новой зайти на сайт, чтобы увидеть все изменения.

замена размера шрифта 3

Ну вот и всё! Спасибо за внимание! Надеюсь, статья была вам полезна. Успехов! 🙂


Кстати, если вы ищете хороший и надёжный хостинг, то можете воспользоваться моей партнёрской ссылкой https://beget.com/p197108, по которой вас перекинет на хостинг-провайдера, услугами которого я сама пользуюсь. Мне его посоветовал брат, и я этим хостингом осталась очень довольна. Если вы воспользуетесь моей ссылкой и станете клиентом beget.com, то я благодаря вам смогу оплатить ещё пару месяцев хостинга для этого сайта. Так что, заранее благодарю вас!

Теперь уж точно всё. Пока! :-* 

ЧИТАТЬ ЕЩЁ

Редактирование шаблона Contango. Как изменить кнопки Read More, Next Post, Previous Post в Word Press.... Я занимаюсь сайтом около недели, и что касается редактирования тем и прочих доработок, то в этом я абсолютный новичок. Для своего сайта я установила т...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Навигация по записям