Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео

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

Примечание: Программисты, создавая темы, используют нестандартные методы кодировки. Поэтому давать 100% гарантию, что ручной метод поможет всегда, нельзя. Тогда установите плагин. Но большинство шаблонов легко измените сами.

Шаг №1: Сделайте бэкап файла style.css

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

  • скопируйте содержание файла, с которым будете работать;
  • создайте бэкап файла (сайта) с помощью плагина;
  • сделайте скриншот файла стилей до внесения изменений;
  • проверьте на локалке, как выглядит страница по-новому.
Примечание: Если нет локального ресурса (домашняя платформа для экспериментов и проверки результатов), рекомендую обратить внимание на OpenServer или Denwer. Это пошаговое руководство по созданию бесплатного сайта-тренажера на ПК. Прежде чем отдадите предпочтение какому-либо серверу, узнайте о различиях, выберите лучший.

В первом случае, перейдите: Консоль управления WP Внешний вид Редактор тем. Откройте файл стилей, скопируйте весь код. Сохраните в каком-либо редакторе на компьютере. При необходимости, заменив содержание файла, вернете первоначальные настройки.

Прежде изменения шрифтов, скопируйте содержание файла style.css

Скопируйте содержание файла style.css

  1. Если работаете на локалке, используя «Денвер», проще скопировать файл style.css, перейдя в директорию: Z: (или папка Сервер) home → localhost → www → web → wp-content → themes → название установленной темы. Найдите файл стилей, скопируйте, сохраните в удобном месте.
  2. В случае использования OpenServer, путь будет таким: Диск, на который установили платформу (у меня это D:/) — OSPanel — domains — домен сайта — wp-content — themes — название Темы — style.css.

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

Обратите внимание: Если изменяемый параметр, например, цвет, есть в кастомных настройках Темы, правка кода не нужна. Меняйте цвет в окне, которое открывается слева. Этот функционал имеет приоритет.

Кастомные настройки цвета шрифтов Темы

Кастомные настройки цвета в Теме wordpress имеют приоритет

Шаг №2: Как просто выбрать шрифт для замены

Выбрать шрифт можно, используя сервис Google fonts. Там же предлагается код для вставки в файлы header и style.css. Но проще и нагляднее вносить правки вручную. Если хотите внедрить не слишком вычурный тип шрифта, найдите его в редакторе, имеющем подобный список.

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

Выбрать новый шрифт для сайта

Как просто подобрать нужный шрифт

Подбирайте вариант, чтобы текст легко читался. Учитывайте, выбранный шрифт будет отражаться у пользователя, только в том случае, если имеется в его системе (браузере).

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

font-family (шрифты, используемые на сайте)

Приоритетные шрифты (2-4), заданные разработчиком Темы

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

Примечание: В кодировке блоки могут быть объединены. Выбрав одну область, изменения отображаются в других, если программист задал одинаковые параметры. Поэтому, сначала проверяют, на что влияет правка. Только потом, если все устраивает, обновляют код.

Шаг №3: Предварительный визуальный обзор измененных параметров шрифта

Перейдите на сайт, выделите область, которую хотите изменить. Это может быть любой блок: заголовок, контекст, записи, виджеты, меню и т. д. Правой кнопкой мыши вызовите контекстное меню, нажмите «Просмотреть код». Попадете на страницу, где меняют визуальные настройки. При этом содержание файлов останется нетронутым.

Переход на страницу изменения шрифтов

Перейдите на страницу визуального изменения шрифтов (цвета, размера, семейства)

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

Изменение шрифта заголовков

Параметр шрифта font-family: первое значение- приоритетное

Поле с кодом может располагаться как внизу, так и справа. Это зависит от браузера. В Google работать удобнее, лучше виден блок для внесения правок. Открывается мобильная версия сайта. Прокрутите экран, чтобы выделенный фрагмент был в поле зрения. Справа ищите параметры, соответствующие шрифтам. Это все связанное с наименованием «font». Окна, если они закрыты, раздвигайте направляющими стрелочками.

Параметры шрифтов для изменения

Таблица изменяемых параметров шрифтов

Параметры шрифтов: как и что менять в коде

Примечание: Сохраняйте все знаки препинания, обозначения. Меняйте только числа. Список шрифтов не удаляйте, просто первым пропишите свое название. Подобрав нужный цвет, скопируйте код (типа # e34a83d). В файле стилей нет цветных квадратиков, только эти значения.

Где и как изменить шрифт: семейство, цвет, размер

Пример: правки вносят в файл стилей; строка 410; параметр: font-famile; первый: lobster

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

Шаг №4: Как изменить шрифт в файле Стилей

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

Изменить семейство (вид) шрифта

Замените (пропишите на 1 место) нужный шрифт

Важно: Если изменений на сайте нет, не спешите расстраиваться. Все нормально. Это браузер использует кешированые данные. Надо либо почистить кеш, либо перегрузить пару раз страницу, либо подождать, пока система, наконец-то, учтет новые параметры. Это зависит от скорости интернета, загруженности ресурса, плагинов-оптимизаторов, истории и т. п. Со временем все отобразится, если не забыли сохранить правки.

Заключение

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

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

Важно: При обновлении темы, настройки, сделанные таким способом, пропадут. Чтобы этого не случилось, скопируйте и сохраните файл стилей перед этим процессом. После замените обновленный (дефолтный style.css). Либо восстановите данные из бэкапа, либо не обновляйте шаблон, пока не найдете оптимального решения. Например, создав дочернюю Тему. При нестандартном коде поможет установка шрифтов через плагин.

Изменение шрифтов с помощью плагина

Опытом делится известный в сети вебмастер А. Абрамович. Автор чудо- скрипта Art Decoration Shortcode для красивого оформления статей. Сама часто пользуюсь советами Артема при работе с wordpress, поэтому рекомендую посмотреть ролик.

Возможно вам будет интересно почитать:

Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Где скачать бесплатный шаблон wordpress на русском
2019 Где скачать бесплатный шаблон wordpress на русском? Ответ однозначный: на официальном сайте. Объясню пошагово, как его найти, на что обратить внимание, чтобы выбрать действительно, ...
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Как быстро сделать кнопку ссылкой на странице сайта wordpres
Как быстро сделать кнопку на странице сайта wordpress, не используя html код. Встраивается элемент в любом месте текста, при нажатии будет активным. Установите его за ...
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Плагины, которые должны быть на каждом сайте
После первых настроек в консоли WP установите плагины, которые должны быть на каждом сайте. Прежде всего, это расширения для обеспечения безопасности. Их активируйте сразу. Остальные - ...
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Как просто установить тему wordpress: секреты, скриншоты, пошаговая инструкция
После создания сайта возникает желание установить тему wordpress вместо предустановленной по-умолчанию, чтобы кардинально изменить дизайн. Мало того, что поиск отнимает много времени, но даже понравившийся ...
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
4 способа, как изменить Read More на «Читать далее» в wordpress
Предлагаю 4 способа, как изменить Read More на "Читать далее" в wordpress. Перевести надпись на русский или переименовать кнопку сможет даже новичок, делающий первый сайт ...
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Как изменить url, адрес, цвет, вид, постоянные ссылки в wordpress
2019 Простые способы, как изменить url, адрес, цвет, вид, Постоянные ссылки в wordpress. Как преобразовать их в ЧПУ, сделать анкорными, закрытыми и открытыми для индексации. ...
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Регистрация и создание сайта wordpress на бесплатном хостинге Бегет
Пройдите процедуру регистрации аккаунта и создания сайта на движке WP, следуя пошаговой инструкции по скриншотами. Технический бесплатный домен хостер предоставляет. Введите в Поисковой строке браузера: ...

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

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