Как изменить шрифт на сайте wordpress и как изменить цвет текста

Как изменить шрифт на сайте и как изменить цвет шрифтаВ этой статье я хочу рассказать о том, как изменить шрифт на сайте wordpress и как изменить цвет текста для лучшего его восприятия и гармонии с шаблоном. Но перед тем как изменить размер шрифта, нужно понимать, что есть заголовки H1, H2, …, H6, есть текст шапки сайта (header.php), есть текст контента рубрик (archive.php), отдельных записей (single.php) и контента страниц (page.php), текст сайдбара (sidebar.php) и подвала (footer.php). То есть, в каждой части сайта шрифт и цвет меняется отдельно, но делается это в шаблоне под названием таблица стилей (style.css).

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

Как изменить размер шрифта на wordpress

Открываем браузер Google Chrom, в нем открываем свой сайт. К примеру, нужно изменить размер шрифта текста записей или заголовков, для этого необходимо навести мышкой, и выделить любую часть шрифта который хотите поменять, нажать на нем правую кнопку мыши и выбрать пункт, просмотр кода элемента (показано ниже).
Как изменить шрифт на сайте wordpress
После этого, в нижней части экрана появится следующее окошко кода:
Wordpress изменить размер шрифта
Здесь необходимо, в правой части найти строку font-size:, которая отвечает за размер выделенного шрифта и скопировать первую строку, которая отвечает за данный отдел (показано на рисунке).

Теперь осталось лишь найти данную строку кода в шаблоне сайта style.css, о нем я говорил в начале и данная страница должна уже быть открыта в отдельном окне. Переходим в нее и нажимаем кнопки на клавиатуре ctrl+f, вверху справа открывается окно поиска, в нем и нужно вставить скопированную строку кода. На странице она находится автоматически и первая строка, font-size: которая размещена под ней, отвечает за нужный нам размер шрифта, здесь мы его меняем, сохраняем изменения  и смотрим результат (показано на рисунке ниже).
размер шрифта на вордпресс

Как изменить цвет шрифта на wordpress

Открываем сайт в браузере Google Chrom, выделяем участок текста, в котором хотим поменять цвет, нажимаем правую кнопку мыши и нажимаем на пункт просмотр кода элемента. В правой части открывшегося окна, находим строку color:, которая отвечает за цвет выделенного нами текста, и копируем первую строку данного отдела, как показано на рисунке ниже (ниже показан пример изменения цвета заголовка статьи).
Как изменить цвет текста на сайте wordpress
Данную, скопированную строку необходимо найти в style.css. Для этого, открываем страницу style.css (как это сделать описано во втором абзаце данной статьи) и, находясь на ней, нажимаем ctrl+f, вверху справа открывается окно поиска, скопированную строку вставляем в нее. На странице она находится автоматически, и первая строка color: которая будет под ней и будет отвечать за цвет заголовка на данной странице, ее и нужно менять (показано на картинке ниже).
Как изменить цвет текста на сайте вордпресс
На этом у меня все. Я надеюсь, что не очень запутал вас. Могу сказать лишь то, что если даже вам показалось это сложно, то это лишь в первый раз, изменяя шрифт или цвет текста повторно, вы поймете что на самом деле это делается в течении одной лишь минутки ;-).

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

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

Форма2

Получайте новые материалы на свою email-почту

* Конфиденциальность гарантирована.
Комментарии
«Как изменить шрифт на сайте wordpress и как изменить цвет текста» (28) отзывов
  1. Баяс:

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

    • Пожалуйста Баяс. Пользуйтесь и другими материалами сайта

  2. Ирина:

    К сожалению, не нашла информацию о том, как поменять шрифт в шапке сайта

    • Здравствуйте Ирина. Шрифт в шапке меняется так же как и в любой другой части сайта, прочтите статью еще раз и все поймете.

  3. Петр:

    Добрый вечер! У меня в теме шаблона в style.css вообще нет ничего подобного. Тема Customizr. Не подскажете где посмотреть?

    • Здравствуйте Петр. Извините что ответил с запозданием, если проблема изменения шрифта осталась, напишите в в отдел «связь со мной» логин пароль к вашему сайту и какой шрифт хотите поменять, я посмотрю.

  4. Игро:

    Здравствуйте! У меня шаблон с очень мелким шрифтом, но как-то даже и не задумывался о том что можно его увеличить, поэтому свыкся с этим! Но,один из комментаторов вдруг мне сделал выговор и сказал что шрифт мелкий и тяжело читать текст на маленьких экранах! В тот же момент я открыл гугл и в форме поиска вписал «Как поменять шрифт на wordpress» Вы были первый и поэтому я сейчас пишу вам этот комментарий!
    Спасибо вам большое за столь разжёванное и понятное руководство! За 5 минут поменял шрифт статей и за одно поигрался со стилями других блоков благодаря вам!

    • Приветствую Вас Игро. Мне очень приятно читать такие комментарии, я в первую очередь рад что вы нашли ответ в первых рядах поиска и решили свой вопрос. Конечно, не всегда получается выводить свои ответы в топ 10 но даже 10-30 человек в день которые решают данную проблему, приносят мне удовольствие и заряжают энергией писать новые статьи. Если вдруг, у вас возникнут сложности или вопросы, ответ на которые вы не найдете на моем сайте, пишите мне в отдел «связь со мной» я постараюсь вам помочь.

  5. Игорь Черноморец:

    Да, это конечно очень радует когда статьи попадают в топ, так и ещё люди находят в них ответы на волнующие вопросы!я представляю как вы сейчас чувствуйте! 🙂 У меня такое было один раз, так разволновался, что заснуть не смог 🙂
    Спасибо вам за такой доброжелательный ответ на мой комментарий и желание помогать в будущем! я это очень ценю! В такие моменты я моментально подписываюсь на обновление блога, так как мне больше важно отношение автора к посетителю нежели информация на его ресурсе!
    Спасибо тебе ещё раз за это Виталик!

    • 🙂 Честно говоря все волнения уже давно позади, но тем не менее приятно когда твой труд кому то помогает, это всегда подбадривает.

  6. Галина:

    Здравствуйте! С удовольствием нашла у вас ответ на свой вопрос об изменении шрифта на сайте. Оказывается, не сложно.
    Скажите, а можно как-то настроить, чтобы тексты статей на сайте изначально были крупным шрифтом?

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

  7. Элли:

    Супер! Спасибо, очень легко и понятно, быстро получилось изменить цвет.
    Пробовала по подобию изменить размер изображений логотипов (брендов) на главной странице (сейчас они вытянуты по ширине почему-то); поняла, что не хватает height: 100%. Попробовала вставить в html, всё сработало, но в style.css такого значения не нашла, нашла похожие, но ничего не изменилось.
    Не знаете как изменить размеры рисунка на главной?

    • Элли. Конечно знаю, НО, я конкретно не понял что вы хотите поменять, напишите мне в отдел «связь со мной» напишите адрес сайта, выделите ту картинку которую хотите поменять и я вам помогу с удовольствием, height: 100% не всегда и в теме. На сколько я понял у вас ИМ. Но все же размер картинки есть стандарт, его можно или уменьшить, или увеличить, или же обрезать, в любом другом случае картинка растягивается. Напишите мне если вопрос остался.:-)

  8. Алексей:

    Добрый день!
    Пробовал менять размер шрифта, но на сайте он никак не меняется. Кэш сбрасывал. Не подскажете, в чем еще может быть дело?
    Версия Wordoress 4.3

    • Здравствуйте Алексей. Я не могу знать где и что вы меняете, если шрифт не меняется значит что то не то делаете. Дайте мне адрес сайта, скажите какой шрифт вы хотите изменить и я скажу что нужно сделать.

  9. Archangel:

    спасибо за наводку… нашел и поменял)

  10. Roman:

    Большое спасибо автору за данную статью — очень кстати, помогли. Тоже хотел у себя шрифт увеличить да руки не доходили, а тут ещё и пользователи жаловаться начали. Решил на просторах посмотреть как это правильно делается, но попадались какие-то идиотические способы (плагины, скрипты и т.п.). Сам знал, что через CSS нужно только размер шрифта поменять, ну как именно не догонял. Хорошо что сайт в первых позициях — быстро нашёл. Добавил себе в закладки, потом обязательно почитаю — много полезного нашёл! И вообще надо щас подписаться…

  11. Дмитрий:

    Подскажите пожалуйста, как изменить цвет шрифта темы Responsive, там в таблице CSS кода нет, только что-то вроде Readmy.

    • Дмитрий. Напишите мне по данному вопросу через форму связь со мной и укажите там адрес своего сайта и что конкретно хотите поменять.

  12. Сергей:

    Здравствуйте! У меня сайт практически готов он пока на локалхосте. Я всё делаю как вы говорите,но шрифт не увеличивается. Тема у меня fashionistas

    • Здравствуйте Сергей.
      1) Где вы хотите поменять шрифт?
      2) Нужно смотреть сайт, возможно шрифт у вас меняется в админ панеле через меню.

      В принципе это можно сделать в любое время, после переноса сайта.

  13. Ирина Топчий:

    Добрый вечер! Установила новую тему и никак не могла найти где прописаны злополучные фразы «Предыдущие записи», «Новые записи» (я английского не знаю) Ваша статья помогла! УРРРРРРРА!

    • Ирина. Рад что помог, смотрите и другие материалы, может еще что то для себя найдете.

  14. Владимир:

    Хорошая статья, помогла с изменением размеров. А вот для изменения цвета текста, лучше подходят плагины. Например TinyMCE Advanced. Поставил и хоть каждую букву текста разными цветами пиши.

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

  15. Наталия:

    Спасибо, Виталий! Как приятно, что есть авторы, которые всегда готовы помочь! Новичкам очень не легко осваивать просторы интернета, много непонятного, не знакомого, новые термины и понятия. Я хотела на свой сайт взять тему, но в ней очень мелкий текст, как это изменить я не знала, поэтому использовала другую тему. Если бы прочитала Вашу статью раньше, то этого делать не пришлось бы! Спасибо Вам!

Оставить свое мнение: