7 лучших плагинов для шрифтов и типографики wordpress 2020

Используйте Gutenberg

Благодаря новому редактору Gutenberg статью можно разделить на блоки с различным содержимым, в том числе создать блок с произвольным HTML в котором не будут автоматически добавляться открывающие и закрывающие теги <p>.

При создании блока нужно выбрать «Добавить произвольный HTML» или любой блок «Редактировать как HTML», а после редактирования сохранить как блок HTML.

Нужно учесть, что поддержка Classic Editor в WordPress продлится до 2022 года, поэтому лучше уже сейчас перейти на Гутенберг. Это действительно удобно.

Как удалить теги <p></p> из блочного виджета

Как и в текстовом виджете TinyMCE, так и в блочном виджете Гутенберг осталась проблема автоматического добавления тегов <p></p> вокруг шорткода. Таким образом WP пытается компенсировать недопустимую разметку html. Выглядит это так:

<p></p>

Чтобы это исправить, вставьте шорткод в виджет «Произвольный HTML» и оберните его в div.

<div></div>

Теперь проблема решена.

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

Плагин WordPress Meet the Team Shortcode

Как и плагин Stupid Simple Testimonials выше, предназначенный для добавления отзывов в макет вашей страницы, плагин WordPress Meet the Team Shortcode предазначен для добавления членов команды в макет страницы элегантным и профессиональным способом.

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

Примечательные функции:

• представления в виде карусели или отзывчивой сетки
• неограниченное количество пользовательских полей
• сортировка посредством перетаскивания
• поддерживает до 12 столбцов
• очень настраиваемый
• и другое

Плагин WordPress Meet the Team Shortcode – это хороший выбор, если представление вашей команды и их специализаций потенциальному посетителю сайты является приоритетом для вас.

Weglot (бесплатный/от 8,25 евро за Pro-версию)

Запущенный в 2015 году, плагин Weglot быстро набрал популярность и превратился в один из наиболее часто используемых плагинов для локализации сайта на базе WordPress.

В отличие от прочих плагинов для локализации в этом списке, Weglot больше походит на SaaS-сервис (ПО как услуга), что позволяет легко интегрировать его с помощью специального плагина из репозитория WordPress.org.

Некоторые основные настройки можно провести непосредственно в панели администратора WordPress, а сам перевод размещается на серверах Weglot. Управление процессом перевода также происходит из панели управления Weglot.

В чем же преимущества такого подхода?

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

Затем, если вы хотите вручную управлять процессом перевода, вы можете перейти в панель управления на сайте Weglot, которая предлагает два интерфейса для работы с переводом:

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

Вы также можете передать перевод на аутсорс профессиональным переводчикам прямо из панели управления Weglot.

И наконец, можно провести поисковую оптимизацию всего контента вашего сайта: Weglot интегрируется с Yoast SEO, чтобы вы могли перевести метаданные.

Единственный недостаток Weglot — это его стоимость. Хотя имеется и бесплатный вариант с ограничениями по переводу до 2 000 слов для одного языка, платная версия плагина работает по модели периодической оплаты по подписке. Это означает, что для работы плагина необходимо продолжать оплачивать услуги сервиса.

Стоимость платных тарифных планов начинается от 8,25 евро в месяц для одного языка, объем текста — до 10 000 слов.

Убираем теги из изображений

WordPress автоматически обрамляет в теги <p> не только текст, но и изображения. Если вам понадобится задать своим изображениям определенный стиль, а теги <p> мешают этому, то разместите в файле functions.php следующий PHP-код:

/* Remove the <p> tag from images */
function img_unautop($pee) {
    $pee = preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<figure>$1</figure>', $pee);
    return $pee;
}
add_filter( 'the_content', 'img_unautop', 30 );

При добавлении этого кода, все изображения будут расположены внутри тега . Его можно заменить на если вы не используете HTML5. Также данный код убирает теги <p> в ссылках, которые вставлены отдельной строкой после переноса .

Несколько шрифтов в одном запросе

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

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

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

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Можно использовать сокращения:italic – или bold – или , или числовое значение bold italic – или

https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

Перевод контента вашего сайта

Чтобы перевести свой сайт, вы можете просто нажать на вкладку » Translate Site» на странице настроек плагина или кнопку в панели администратора WordPress.

Это откроет онлайн редактор перевода в новой вкладке браузера.

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

Теперь нажмите на язык, на который вы хотите перевести строку, а затем предоставьте свой перевод.

После ввода перевода нажмите на кнопку » Save Translation» вверху, а затем нажмите на кнопку Next. TranslatePress автоматически загрузит следующую строку на странице для вашего перевода.

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

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

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

TranslatePress позволяет мгновенно начать перевод любой страницы или сообщения на вашем сайте при входе в систему. Просто нажмите на кнопку » Translate Page’» вверху, чтобы войти в онлайн редактор.

Как только вы переведете строку, плагин автоматически переведет ее для вас в других местах. Например, если вы перевели Заголовок сообщения, то Заголовок сообщения в виджетах боковой панели будет автоматически переведен.

Добавление кода с помощью плагинов

Универсальный способ добавить код в WordPress — это использовать плагин. И есть несколько вариантов. 

Во-первых, рекомендую простой плагин Head, Footer and Post Injections. После активации перейдите в пункт «Настройки», подпункт «Head and footer». И тут вы увидите возможность добавить любой код в любое место сайта: в шапку, подвал, записи, страницы. Кроме того, есть дополнительные опции, вроде включения добавленного кода только на некоторых устройствах или типах страниц.

Интерфейс плагина Плагин Head, Footer and Post Injections.

Ещё один способ добавить код в WordPress, это плагин My Custom Functions. Он решает задачу интеграции PHP функций, и добавляет их так, будто они были написаны в файле темы functions.php. При этом ни обновление темы, ни даже её изменение данную интеграцию не нарушает. 

Работу этого плагина я рассматривал на примере добавления в тему функции для реализации чек-бокса соглашения на обработку персональных данных в форме комментариев WordPress.

После активации плагина, перейдите в пункт «Настройки», подпункт «PHP inserter». Включите применение кода и добавьте свою PHP функцию.

Добавление PHP функции в My Custom Functions.

FlatFolio

FlatFolio – ещё один отличный вариант для тех, кто ищет альтернативную схему сетки. Помимо того, что плагин имеет гибкую настройку, он обладает дополнительным преимуществом, предлагая функции карусели и слайдера.  Вы можете настроить сетку с логотипами, заголовками, цветными оверлеями, заголовками и подзаголовками, тенями при наведении и т. д.

Примечательные функции:

• функция предпросмотра
• карусель и слайдер
• неограниченные форматы элементов
• различные эффекты оверлея
• и другое

Для пользователей желающих показать графический контент, FlatFolio окажется универсальным и простым в использовании макетом.

Используйте надежный фреймворк/тему

За каждым  WordPress-сайтом лежит тема или фреймворк, и это иногда может приводить к проблемам. Каждая тема написана по-разному, и потому одни зачастую темы лучше, чем другие. Дефолтные WordPress-темы типа Twenty Fifteen, очень быстрые, потому что легковесные.

Будьте осторожны, когда покупаете темы на таких мега популярных сайтах, как ThemeForest и  Creative Market. Несмотря на то, что там много великолепных тем, вы должны понимать, что разработчики часто добавляете функции просто, чтоб увеличить продажи. Так что главное — найти правильных разработчиков. И именно о таких мы не раз писали на страницах этого сайта.

Так же, такие легкие фреймворки, как Thesis Theme framework и Genesis также известны тем, что на их основе разрабатываются быстрые и хорошо написанные темы.

Как добавить Google- шрифты в WordPress вручную

Шаг 1: Найдите лучший Google-шрифт для сайта

Сначала перейдите на сайт Google Fonts и выберите шрифт, который хотите установить.

Для этого можно использовать поиск, если знаете название шрифта. А также отфильтровать шрифты по категории, языку и свойствам.

Google предоставляет функцию предварительного просмотра выбранного шрифта.

Шаг 2: Выберите и добавьте шрифт Google

Для примера я использую шрифт Montserrat. Чтобы выбрать его, нажмите на знак плюс «+».

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

Шаг 3: Выберите стиль и настройте шрифт

На вкладке выбранного семейства шрифтов доступно два варианта: «Встроить» (EMBED) и «Настроить» (CUSTOMIZE). Откройте настройки и задайте необходимые стили шрифта (размер, полужирный, курсивный и т.д.) и языки. Я выбрал стиль «regular 400» и «light 300 italic».

Примечание: Параметр Load Time демонстрирует скорость загрузки выбранного Google-шрифта на страницах сайта.

Шаг 4: Добавьте Google-шрифт на WordPress-сайт

Нажмите Embed, после чего вы увидите код для добавления выбранных шрифтов.

Доступно три способа добавления шрифта:

1. Добавить Google-шрифт, как рекомендует WordPress.
2. Встроить код Google Fonts в файл header.php.
3. Добавить Google-шрифт с помощью правила @IMPORT.

Добавляем Google-шрифт так, как рекомендует WordPress

Вернитесь на вкладку «Embed» в Google Fonts и скопируйте URL-адрес (не весь скрипт) выбранного шрифта. В моем случае это https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap.

Теперь добавьте этот код в файл functions.php. Если вы работаете на локальном сервере, он будет находиться в папке используемой темы оформления. В моем случае это Disk > Xampp > htdocs > wordpress > wp-content > themes > twentynineteen.

На хостинге вам потребуется получить доступ к этому файлу с помощью любого FTP-клиента. В моем случае, это Applications> MyDB> public_html> wp-content> themes> twentynineteen

Теперь откройте файл functions.php и добавьте в него приведенный ниже код:

function wpblog_add_google_fonts() {
  wp_enqueue_style( 'wpblog_google_fonts', 'https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap', false );
} 
add_action( 'wp_enqueue_scripts', 'wpblog_add_google_fonts' );

Примечание: не забудьте изменить URL-адрес на свой.

Теперь сохраните отредактированный файл.

Встраивание кода Google Fonts в файл header.php

Этот метод позволяет добавить Google-шрифт, скопировав код из вкладки «Embed» и добавив его в файл header.php используемой темы оформления. Этот файл расположен в следующей папке: Disk> Xampp> htdocs> wordpress> wp-content> themes> twentynineteen.

Откройте header.php и добавьте в него приведенный ниже код:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="http://WPblog.com/wp-content/themes/WPblog/style.css" media="all">

Примечание: добавьте этот код в раздел <head>.

Нажмите кнопку «Сохранить», и все будет готово!

Импорт Google-шрифта

Самый простой способ добавить Google-шрифт в WordPress – загрузить его в CSS. Для этого достаточно нажать на @IMPORT.

А затем скопировать код без <style> и добавить его в начало файла CSS используемой темы оформления WordPress. Но имейте в виду, что такой способ может увеличить время загрузки страниц.

Adding Google Web Fonts in WordPress Themes

We have mostly seen folks using the first two methods.

The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this:

@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);

You can also combine multiple font requests into one. Here is how you would do it:

@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

If you MUST use @import, then at least combine multiple requests into one.

Performance Optimized Method of Adding Google Web Fonts

The best way of adding Google fonts is by using the Standard method which utilizes the link method instead of the import method. Simply take your font URL that you got from step 1. If you are adding multiple fonts, then you can combine the two fonts with a | character. Then place the code in your theme’s head section.

You will most likely have to edit your header.php file, and paste the following code above your main stylesheet. The example would look like this:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

Once you have done that, you can simply start using it in your theme’s CSS file like this:

h1 {
    font-family: 'Oswald', Helvetica, Arial, serif;
}

Now there are a lot of theme frameworks and child themes out there. It is NOT recommended to modify your parent theme’s files specially if you are using a theme framework because your changes will be overridden the next time you update that framework. You will need to utilize the hooks and filters presented to you by that parent theme or framework to add Google fonts properly in your child themes.

Properly Enqueuing Google Fonts in WordPress

Another way to add Google fonts to your WordPress site is by enqueuing the font in your theme’s functions.php file or a site specific plugin.

function wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Don’t forget to replace the font link with your own.

Loading Google Fonts Using JavaScript

For this method you will need to copy the code in the JavaScript tab in Google fonts usage instructions section. You can paste this code in your theme or child theme’s header.php file immediately after <head> tag.

Our last tip on using Google Web Fonts on your site would be to don’t load fonts you won’t use. For example, if you only want the bold, and normal weight, then don’t add all the other styles.

We hope that this article helped you add Google Web Fonts in your WordPress themes the right way, so your site can load fast. You may also want to check out our guide on how to add Typekit fonts in WordPress.

Сократите количество WordPress-плагинов

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

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

P3 (Plugin Performance Profiler)

P3 – это бесплатный  WordPress-плагин, который поможет вам увидеть, какие плагины затормаживают работу вашего сайта, а именно он показывает:

• Время загрузки каждого плагина
• Общее количество активных плагинов и время загрузки страницы
• Влияние каждого  плагина на скорость загрузки страницы
• Количество  MySQL запросов (на уровне страницы)
• Сравнение сканирований

Заметим: сейчас плагин не совместим с PHP7.

WP Performance Profiler

WP performance profiler – это  недорогой (всего 9$) премиальный WordPress-плагин, созданный специально для того, чтоб вы могли измерить производительность ваших WordPress-плагинов на более продвинутом уровне, чем это делает P3.

И конечно же — после того, как анализ проведем, плагины-измерители можно удалить или просто отключить.

Внедрение сети доставки содержимого (Content Delivery Network)

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

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

Загрузка всех ассетов из WordPress CDN

Убедитесь в том, что вы загружаете даже самые мелкие файлы, типа фавикона, из вашей CDN. Если загружено все из CDN, то создается одно единое соединение. Чтобы твикнуть ваш фавикон, просто киньте его в корневой каталог вашей инсталляции WordPress с помощью  FTP, а затем добавить следующее в ваш header.php между тегами head.

<link rel="shortcut icon" href="https://cdn.domain.com/favicon.ico" type="image/x-icon" />

Как вы видите из примера ниже,  загружено 100% ваших ассетов из CDN.

Выбор многоязычного плагина WordPress.

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

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

Если вы знаете, какой плагин вы собираетесь использовать, то вы можете сразу попробовать.

1. TranslatePress
2. WPML
3. Polylang

Все три из них снабжены необходимыми функциями, необходимыми для создания надежного многоязычного веб-сайта.

Они позволяют переводить посты, страницы, продукты и другие типы постов.

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

Они позволяют вам настроить SEO дружественные URL адреса для каждого языка.

С учетом сказанного, давайте начнем.

1.Создайте Многоязычный Сайт WordPress с помощью TranslatePress.

TranslatePress это один из лучших плагинов для WordPress перевода на рынке. Это немного отличается от других решений, упомянутых в этом руководстве.

Обычно многоязычные Плагины просят вас создать несколько версий одной и той же статьи, чтобы перевести ее. TranslatePress позволяет создавать переводы одновременно.

Он также позволяет вам использовать живой редактор для перевода всех визуальных аспектов вашего сайта.

Самое главное, вы можете сочетать машинный и человеческий переводы. Это означает, что вы можете использовать Google Translate или аналогичные инструменты искусственного интеллекта для создания машинного перевода и улучшения только тех частей, которые пропустил искусственный интеллект.

Первое, что вам нужно сделать, это установить и активировать плагин TranslatePress. Для получения более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.

Если вы хотите перевести свой сайт на несколько языков, то вам также нужно будет установить дополнения ‘Extra Languages’. Вы можете сделать это с помощью кнопки Загрузить дополнения под своей учетной записью на веб-сайте TranslatePress.

После загрузки дополнения вы можете установить и активировать его, как и любой другой плагин WordPress.

После активации вам необходимо посетить страницу Settings » TranslatePress, чтобы настроить параметры плагина.

Во-первых, вам нужно перейти на вкладку лицензия и ввести свой лицензионный ключ. Вы можете найти эту информацию под своей учетной записью на веб-сайте Translate Press.

После этого вам нужно перейти на вкладку Общие настройки, чтобы настроить другие настройки.

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

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

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

Выбор по умолчанию «нет», что означает, что только другие языки будут иметь имя языка в URL-адресе в качестве подкаталога. Мы рекомендуем оставить эту настройку как есть для лучшего SEO.

Это приведет вас к следующему параметру, «Force language in custom links». Опция по умолчанию «да», потому что это изменит пользовательские ссылки для переведенных языков, сделав URL-адреса более удобными для SEO.

Далее вам нужно выбрать, хотите ли вы использовать Google Translate для автоматического перевода. Выбор по умолчанию «нет», но вы можете изменить его, если хотите использовать Google Translate.

Вам нужно будет предоставить ключ API Google Translate в следующем поле. Вы найдете ссылку под опцией, которая покажет вам инструкции о том, как ее получить.

Наконец, вы перейдете к опциям о том, как вы хотите отобразить переключатель языков на своем веб-сайте. TranslatePress предоставляет вам три варианта.

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

Идите вперед и нажмите на кнопку «Save Changes», чтобы сохранить свои настройки.

Используйте меню шрифтов, чтобы найти и использовать больше шрифтов

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

1. Откройте существующий документ или создайте новый документ с Гугл документы,
2. Щелкните стрелку выбора шрифта на панели инструментов и выберите «Другие шрифты». Это откроет новое окно.

1. Теперь вы увидите несколько шрифтов, которые не были доступны в средстве выбора шрифтов. Вы можете искать ваши любимые шрифты, введя их названия в поле поиска.

1. Выберите различные параметры вверху, чтобы отсортировать шрифты по сценариям, типам шрифтов и различным порядкам сортировки.
2. Как только вы найдете нужный вам шрифт, щелкните шрифт, и он будет добавлен в ваш список шрифтов. Затем нажмите OK внизу, чтобы закрыть окно шрифтов.

1. Выбранный вами шрифт теперь будет использоваться в вашем текущем документе Google Docs.
2. Документы Google позволяют хранить список ваших любимых шрифтов в этом окне «Дополнительные шрифты». Вы можете добавлять и удалять шрифты оттуда, так что это упорядоченный список ваших любимых шрифтов.