Как Изменить Размер Шрифта в WordPress
access_time
hourglass_empty
person_outline

Как Изменить Размер Шрифта в WordPress

Изменить размер шрифта в WordPress на самом деле очень просто. В этой статье мы покажем вам, как это сделать.

Мы рассмотрим два метода — через плагин и с помощью CSS.

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

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

В последней версии WordPress доступен новый редактор Gutenberg. Мы также покажем вам, как изменить размер шрифта с помощью этого инструмента.

Пробуем Изменить Размер Шрифта с Помощью Плагина TinyMCE Advanced

TinyMCE Advanced — бесплатный плагин, который позволяет легко выбрать нужный размер шрифта. Этот плагин создаёт классическую панель инструментов в новом редакторе Gutenberg.

Сначала необходимо установить и активировать плагин. Затем вы можете перейти на страницу настроек (найдите плагин TinyMCE Advanced в разделе “Настройки” и кликните по названию). Там вы найдёте две вкладки: Редактор блоков (Gutenberg) и Классический редактор (TinyMCE). Кстати плагин переведён на русский, так что знания английского вам не понадобятся, по крайней мере для работы в визуальном редакторе. 

Если вы хотите использовать только классический редактор, пролистайте страницу настроек плагина немного вниз, найдите и установите флажок возле опции “Заменить редактор блоков на классический редактор”. Чтобы использовать оба редактора, убедитесь, что эта опция осталась без галочки.

Вот, как мы можем изменить шрифт, используя этот плагин:

  1. Перейдите в раздел Записи -> Добавить новую или к редактированию существующей записи. Вы увидите классический редактор или редактор блоков, в зависимости от того, что вы выбрали для работы. Мы используем классический вариант.
    Классический Редактор WordPress
  2. Выделите строки текста, которые вы хотите изменить, затем выберите размер шрифта.
    Выбор Размера Шрифта в Визуальном Редакторе WordPress
  3. Вот, что у нас получилось.
    Изменённый Размер Шрифта в WordPress

Используем CSS — Классический Путь

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

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

Чтобы изменить размер шрифта WordPress с помощью CSS, нужно добавить несколько строк кода. Вы можете сделать это через редактор или Customizer (настройщик). Мы рекомендуем использовать Customizer, так как это удобнее.

  1. Перейдите в Консоль WordPress, затем выберите Внешний вид -> Настроить.
    Настройки Внешнего Вида в Консоли WordPress
  2. Выберите Добавить CSS.

Опция Добавления CSS в WordPressДобавить код можно в поле слева.

  1. Чтобы изменить весь шрифт:
    body {
    font-size: 1.25rem;
    }

    Изменение Всего Шрифта с Помощью Дополнительного CSS

  2. Чтобы изменить шрифт абзаца:
    p {
    font-size: 25px;
    }

    Изменение Шрифта Абзаца с Помощью Дополнительного CSS

  3. Чтобы изменить шрифты определённых заголовков:
    h2 {
    font-size: 2.5em;
    }

    Изменение Шрифтов Заголовков в Консоли WordPress с Помощью Дополнительного CSS

  4. Чтобы изменить размер шрифта в боковом меню WordPress:
    .sidebar li {
    font-size: 12px;
    }
  5. Чтобы изменить размер шрифта в футере:
    .footer {
    font-size: 150%;
    }
  6. Чтобы изменить шрифт для определенного размера экрана:
    html {
    font-size: 18px;
    }
    @media (min-width: 900px) {
    html {
    font-size: 20px;
    }
    }

CSS-стили позволяют измерять размер текста в четырёх разных единицах:

  • Эм (em)  единица, используемая в веб-документах. 1em равняется размеру используемого на странице шрифта, например, если размер шрифта 12pt, то 1em равно 12pt.
  • Пиксели (px) — единица измерения, используемая на экране. Один пиксель равняется одной точке на экране компьютера.
  • Пункты (pt) — единица измерения позаимствована из традиционных печатных изданий. 1 пункт равен 1/72 дюйма.
  • Проценты (%). Значение по умолчанию — 100%, меняется при увеличении или уменьшении.

Как Изменить Размер Шрифта в Редакторе Gutenberg

Как упоминалось ранее, Gutenberg является новым дополнением WordPress. Он был добавлен в CMS, чтобы упростить редактирование записей с медиафайлами.

Вот как выглядит блок:

Блок в Редакторе Gutenberg

  1. Выберите запись, которую вы хотите отредактировать, или просто нажмите на “Добавить новую”.
  2. Нажмите на блок, содержащий текст, которые вы хотите изменить, затем выберите номер вручную.
    Изменение Размера Шрифта в Редакторе Gutenberg
  3. Или же выберите один из доступных параметров справа: маленький, нормальный, средний, большой и огромный.
    Изменение Размера Шрифта в Редакторе Gutenberg с Помощью Опций по Умолчанию

Очень удобно, не правда ли?

Выводы

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

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

Автор

Author

Olha L. / @olha

Ольга уже около пяти лет работает менеджером в сфере IT. Написание технических заданий и инструкций — одна из её главных обязанностей. Её хобби — узнавать что-то новое и создавать интересные и полезные статьи о современных технологиях, веб-разработке, языках программирования и многом другом.

Похожие руководства

Author

Anatoliy Ответить

25 июня 2020

Очень просто и толково написано, все отлично работает. Спасибо.

    Author

    Olha L.

    Отвечено 26 июня 2020

    Анатолий, спасибо за комментарий. Рады, что смогли быть полезны для Вас!

Оставьте ответ

Комментарий*

Имя*

Email*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Присоединиться к Hostinger сейчас!