Настройка плагина WP Google Fonts под кириллицу

🎅MnogoBlog > WordPress > Дизайн > Для красоты > Настройка плагина WP Google Fonts под кириллицу
3 комментария

Здравствуйте, здесь бы хотелось рассказать вам про первоначальную настройку плагина WP Google Fonts, после которой он сможет полноценно работать с кириллическими (русскими) шрифтами.

Скачать исходники для статьи можно ниже

Протестировав плагин WP Google Fonts я столкнулся с проблемой – при выборе кириллического шрифта (на момент публикации данной статьи всего их насчитывалось 40 на сайте http://www.google.com/webfonts, а в данном плагине еще меньше) в пункте “Select Fonts” – меняются только английские буквы, русские же не претерпевают ни каких изменений.

Например возьмем ккириллический шрифт Comfortaa:

После нажатия на кнопку “Save” переходим на сайт и видим:

 

Приступим же к решению данной проблемы.

Выявление причины.

Давайте посмотрим в чем разница в ссылках на шрифт Comfortaa между обычным шрифтом, который использует плагин WP Google Fonts и кириллическим, для этого опять заходим на сайт http://www.google.com/webfonts и видим:

Забиваю на данном сайте в строку поиска Comfortaa, перехожу по ссылке Quick-use и смотрю в 3 пункте код ссылки на шрифт:

http://fonts.googleapis.com/css?family=Comfortaa’ rel=’stylesheet’ type=’text/css

Теперь выбираю в левом нижнем углу в пункте Script параметр Cyrillic нахожу опять данный шрифт Comfortaa, опять захожу по ссылке Quick-use, во 2 пункте настройки шрифта ставлю только Cyrillic  и смотрю в 3 пункте код ссылки на шрифт:

http://fonts.googleapis.com/css?family=Comfortaa&subset=cyrillic’ rel=’stylesheet’ type=’text/css

Как видите разница не большая – а именно добавился параметр subset=cyrillic, соответственно если нужно еще использовать и латиницу, то параметр  приобретет следующее значение: subset=cyrillic,latin и т.д.

Редактирование кода плагина.

Причину проблемы мы выявили, теперь идем редактировать код самого плагина.

Для этого заходим в панель управления вашим сайтом, на котором уже установлен плагин WP Google Fonts, заходим в левом меню в пункт “Плагины” и в его подпункт “Редактор”. Далее справа в верхнем углу выбираем из списка плагин WP Google Fonts (как на скриншоте ниже).

У вас откроется код файла плагин с названием wp-google-fonts/google-fonts.php.

Теперь в вашем браузере (я пользуюсь Firefox) открываем строку поиска, для этого в верхнем меню выбираю пункт “Правка” и его подпункт “Найти”.

Далее ввожу в нее следующий запрос (как на скриншоте ниже):

fonts.googleapis.com

Как видите он нашел данную строчку!

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

Для этого меняем вот этот код:

  

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont1.'\' rel=\'stylesheet\' type=\'text/css\' />';

На следующий: 

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont1.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';

googlefont1 – означает, что это ссылка принадлежит первому блоку в настройках плагина.
Поэтому данное действие нужно проделать для всех 6 блоков.

То есть меняем код для всех 6 блоков, изначально он выглядит так: 

$googlefont1 = $this->options['googlefonts_font1'];

if ($googlefont1!='off' && $googlefont1) {

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont1.'\' rel=\'stylesheet\' type=\'text/css\' />';

}

$googlefont2 = $this->options['googlefonts_font2'];

if ($googlefont2!='off' && $googlefont2) {

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont2.'\' rel=\'stylesheet\' type=\'text/css\' />';

}

$googlefont3 = $this->options['googlefonts_font3'];

if ($googlefont3!='off' && $googlefont3) {

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont3.'\' rel=\'stylesheet\' type=\'text/css\' />';

}

$googlefont4 = $this->options['googlefonts_font4'];

if ($googlefont4!='off' && $googlefont4) {

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont4.'\' rel=\'stylesheet\' type=\'text/css\' />';

}

$googlefont5 = $this->options['googlefonts_font5'];

if ($googlefont5!='off' && $googlefont5) {

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont5.'\' rel=\'stylesheet\' type=\'text/css\' />';

}

$googlefont6 = $this->options['googlefonts_font6'];

if ($googlefont6!='off' && $googlefont6) {

echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont16.'\' rel=\'stylesheet\' type=\'text/css\' />';

}

На следующий: 

$googlefont1 = $this->options['googlefonts_font1'];
if ($googlefont1!='off' && $googlefont1) {
echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont1.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';
}
$googlefont2 = $this->options['googlefonts_font2'];
if ($googlefont2!='off' && $googlefont2) {
echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont2.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';
}
$googlefont3 = $this->options['googlefonts_font3'];
if ($googlefont3!='off' && $googlefont3) {
echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont3.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';
}
$googlefont4 = $this->options['googlefonts_font4'];
if ($googlefont4!='off' && $googlefont4) {
echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont4.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';
}
$googlefont5 = $this->options['googlefonts_font5'];
if ($googlefont5!='off' && $googlefont5) {
echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont5.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';
}
$googlefont6 = $this->options['googlefonts_font6'];
if ($googlefont6!='off' && $googlefont6) {
echo '<link href=\''.$http.'://fonts.googleapis.com/css?family='.$googlefont6.'&subset=latin,cyrillic\' rel=\'stylesheet\' type=\'text/css\' />';
}

Далее жмем на кнопку “Обновить файл”.
Все теперь плагин WP Google Fonts будет распознавать кириллические шрифты и менять шрифт как английских, так и русских букв.
Теперь идем на страничку обновляем и смотрим:

 
 
PS: Также в данном плагине достаточно легко добавлять новые шрифты, которые уже есть на сайте http://www.google.com/webfonts, но которых еще нет в плагине, для этого нужно в коде данного плагина найти вот такие строчки: 

<option value="Zeyada">Zeyada</option>

Это последний добавленный шрифт и после него аналогично добавить новый, например: 

<option value="Zeyada">Zeyada</option>
<option value="Underdog">Underdog</option>

Тем самым я добавил в плагин еще один кириллический шрифт Underdog и он появиться в настройках плагина в списке для выбора шрифта.

 

Похожие записи:

Введите свой email адрес для того, чтобы подписаться на мой блог:

knopkisoc

Настройка плагина WP Google Fonts под кириллицу: 3 комментария

  1. Василий Сенченко

    Здравствуйте! Вы очень просто и доходчиво рассказали, как обращаться с плагином WP Google Fonts и настроить его под кириллицу. А я уж совсем отчаялся, хоте отказаться от такого замечательного инструмента создания сайта в своем проекте “Сайт – за 12 часов!”. Успехов вам!

    ↓
  2. Дарья

    Не получается. Ибо в моем случае в wp-google-fonts/google-fonts.php вообще нет такого участка. Единственный фрагмент с fonts.googleapis.com/css:

    // check to see if site is uses https
    $http = (!empty($_SERVER[‘HTTPS’])) ? “https” : “http”;
    $url = $http.’://fonts.googleapis.com/css’;
    $url .= $this->get_api_query();

    ↓

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