Как легко изменить размер шрифта в WordPress - WPtuts.ru

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

Использование заголовков абзаца

Заходя на сайт, посетите в течение пары секунд определяет, подходит ли ему эта статья или нет. Он не вчитывается в абзацы, а бегло просматривает заголовки и всё, что выделяется из общей массы текста. Заголовки являются визуальными крючками, за которые цепляется взгляд пользователя. Если их не будет, посетитель просто уйдет с сайта.

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

Как добавить заголовок в блочном редакторе Gutenberg

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

Как легко изменить размер шрифта в WordPress - gutenberg zagolovok

По умолчанию, при создании блок имеет заголовок 2 уровня. Мы рекомендуем использовать именно его, но если вы пишите большую статью, то можно использовать заголовки 3 и 4 уровня. Для этого нажмите на H2 и выберите нужный.

Как легко изменить размер шрифта в WordPress - gutenberg zagolovok 2 urovnja

В правой части экрана экрана, в настройках блока, вы также можете изменить размер заголовка, выбрать его цвет.

Как добавить заголовок в старом классическом редакторе

Если вы воспользовались нашей статьей о том, как отключить Gutenberg и вернуть классический редактор, то добавить заголовок можно нажатием на раскрывающийся список “Абзац”.

Как легко изменить размер шрифта в WordPress - classic editor zagolovok

Выделите текст, который вы хотите сделать заголовком и нажмите на нужный размер заголовка.

Размер и цвет разных стилей заголовка указывается в таблице стилей вашей темы (файл style.css). Если вы используете премиум темы, то изменить оформление текста можно в настройках темы Внешний вид -> Настройки, либо в уникальной вкладке темы (зависит от темы).

Изменение размера текста в блочном редакторе Gutenberg

Если вы хотите иметь абзац или весь текст более крупным шрифтом, то вы без проблем это сделаете в новой версии редактора.

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

Как легко изменить размер шрифта в WordPress - gutenberg razmer teksta

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

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

Как изменить размер шрифта в WordPress с помощью плагина TinyMCE Advanced

Как легко изменить размер шрифта в WordPress - icon 256x256

TinyMCE Advanced

Расширяет и улучшает редактор блоков (Gutenberg) и классический редактор (TinyMCE).

Andrew Ozz

TinyMCE Advanced – это плагин WordPress, расширяющий возможности оформления текста, а также ряд других полезных функций. Плагин особенно полезен для пользователей старого классического редактора, но также работает и с новым блочным редактором. В Gutenberg он добавляет новый блок “Классический параграф”, который повторяет весь функционал классического редактора.

Для использования, установите и активируйте плагин TinyMCE Advanced. Если вы не знаете, как это сделать, то прочтите наше руководство по установке плагинов WordPress.

Перейдите в Настройки -> TinyMCE Advanced, для настройки редактора. Если вы используете классический редактор, то перейдите во вкладку “Классический редактор (Tiny MCE)”.

Как легко изменить размер шрифта в WordPress - tinymce advanced nastroiki
Настройки редактора TinyMCE Advanced

Здесь вы можете видеть внешний вид панели инструментом. В третей строчке находится инструмент раскрывающийся список “Размеры шрифта”. Именно она нам нужна. Вы можете переместить её в первый ряд, добавить или убрать не нужные инструменты, перетаскивая их на нужные места.

Если вы используете блочный редактор, то перейдите во вкладку “Редактор блоков (Gutenberg)” и переместите раскрывающийся список “Размеры шрифтов” в панель инструментов.

После настройки не забудьте сохранить изменения.

Теперь чтобы редактировать размер шрифта в блочном редакторе, добавьте блок “Классический параграф” и у вас появится возможность изменять размер шрифта у текста, а также все остальные стандартные инструменты.

Как легко изменить размер шрифта в WordPress - tinymce advanced gutenberg

Используя классический редактор у вас появятся новые инструмента, один из них – Размер шрифта, который вы можете изменить. Выделите нужный кусок текста и в выпадающем списке выберите размер шрифта.

Как легко изменить размер шрифта в WordPress - tinymce advanced classic editor

Примечание

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

Как изменить размер шрифта всего сайта WordPress через CSS

Если размер шрифта абзацев вас не устраивает и вы всегда изменяете его, то лучшим решением будет воспользоваться CSS.

Многие темы, особенно премиум, имеют настройки оформления, где зачастую можно изменить размер шрифта. Для этого зайдите во вкладку Внешний вид -> Настроить. Если вы нашли там такую опцию, то это отлично. Вам не нужно будет вносить изменения в код CSS.

Но есть такие темы, которые не имеют таких возможностей, поэтому нам придется прописать собственные правила для размера шрифта у абзацев. Для этого зайдите в Внешний вид -> Настроить -> Дополнительные стили. Здесь вы можете размещать все свои пользовательские стили (код CSS).

Как легко изменить размер шрифта в WordPress - dopolnitelnye stili

В данном текстовом поле добавьте свой CSS код.

Чтобы сделать размер шрифта абзацев 16px добавьте следущий код:

CSS
style.css

Вы сразу увидите изменения в предварительном просмотре в правой части экрана. Если никаких изменений не произошло, то добавьте !important, как показано на скриншоте выше. Это даст вашему коду приоритет. После того, как размер шрифта вас устроит, нажмите кнопку “Опубликовать” в верхней части экрана, чтобы сохранить все внесенные изменения.

Данный код относится только в абзацам, а что, если вы захотите увеличить размер шрифта заголовка 2 уровня (h2)? С помощью данного кода мы увеличим размер шрифта заголовков 2 уровня до 32px:

CSS
style.css

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

Хотим заметить, что все эти изменения относятся только к активной теме. Если вы смените тему, то данный код нужно будет скопировать в новую тему.

Написать комментарий

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