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

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


access_time

hourglass_empty

Изменить размер шрифта в 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

Опция Добавления CSS в WordPress

Добавить код можно в поле слева.

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

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

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

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

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

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

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

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

    Изменение Шрифтов Заголовков в Консоли 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

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

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

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

Выводы

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

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

Читайте также:  Nginx Redirect: Инструкция по Созданию Редиректов в NGINX
По теме: (Статьи)

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

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

пять × один =

Читайте также
Top