Cufon — добавляем оригинальные шрифты

Впервые с этим словом я столкнулся несколько месяцев назад. Был у меня заказ на перевод платного шаблона Object от команды WooThemes. Столкнулся с ним таким образом: в ходе перевода обратил внимание на непонятный мне скрипт, который лежал в папке шаблона /js, где обычно лежат скрипт на языке Java.

Да, почему подробно об этом пишу, с таким предисловием? Чтобы вы тоже понимали – что и где у вас лежит в шаблоне.

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

Ладно, проехали… В ходе перевода я обычно делаю так: перевожу небольшое количество кода а потом проверяю на работе сайта. Бывает, что-то пропущу или некорректно расставлю. В общем, смотрю, а у меня после перевода тега Рубрики в сайдбаре слово не отобразилось (??). В смысле: перевел Текст между тегами <h2> – английское слово Categories, а русского слова Рубрики не появилось. В чем дело? Я еще раз внимательно пересмотрел. Но там и рассматривать особо нечего (кто знает – поймет меня). Я отложил работу. Когда не знаешь ответа – надо думать. Мысленный анализ последовательности своих действий вернул меня к тому месту, когда я задумался о новом скрипте. Стал искать в файлах его отображение. Обычно, все скрипты, установленные в шаблоне, описаны в файле header.php, в мета-тегах шаблона. И вот там я увидел код, который меня и заинтересовал. Сейчас я его писать не буду, об этом немного позже. В общем, в коде вывода скрипта в Хидере как раз и была видна обработка тегов <h2> и <h1>. Я стал внимательно смотреть файлы шаблона и увидел, что в тех местах, где моя рука еще не коснулась перевода английских слов, заключенных в эти теги вывода заголовков, английские слова еще выводились. А вот русских слов – не было. Я стал смотреть все папки шаблона, ища там ответ, и увидел папку /fonts, на которую сразу не обратил внимание. В ней лежал файл с расширением .js, но название файла говорило о том, что это – шрифт. Обыкновенный шрифт, которые у всех нас лежат в папке /fonts директории Windows.

Мне стало легче. Ответ я нашел. Почему не отображался русский текст – мне тоже стало понятно. Был применен шрифт без кириллических символов. Задача мне стала понятна: надо найти замену латинскому шрифту на кириллический. Но как создать скрипт из него? Вот это для меня была загадка…

Любая загадка решается с помощью поиска. Грамотного и правильного поиска. Сегодня Google и Яндекс знают очень много. Введите в строке поиска одно слово – cufon – и вы увидите сотни и тысячи страниц с этим словом. Главное теперь – выудить из этого потока те страницы, где авторы грамотно и полно описали этот скрипт и его особенности настройки. Честно – потратил пол-дня и толкового мануала так и не нашел. Сплошь и рядом было: вот вам ссылка на онлайн – ресурс, там вы делаете себе шрифт, затем ставите себе на сайт, пишите вот так и вот так код – и “вуаля”, — все работает!

Когда не нахожу толкового мануала – сам пишу, потому как знаю, что только так можно чему-то научится. Я попробовал несколько вариантов внедрения скрипта cufon, и с очередной (не помню, какая по счету) попытки у меня это получилось. Планировал обязательно написать об этом в своем блоге, но все не доходили руки. И вот время настало.

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

Оказывается, на сегодняшний день существует минимум три корректных варианта. Так вот, оказывается, в недрах официального сайта wordpress.org, среди более 9 тысяч плагинов (сейчас посмотрел – ровно 9 684 штуки; чуть более месяца назад было 8,5 тысяч) есть плагин, который так и называется – wp-cufon.

Я знаю мнение, и разделяю его на сто процентов, что чем меньше в вашем блоге плагинов – тем лучше. И лучше, если вы умеете внедрять плагины в файлы шаблона. Но. Таких умельцев, работающих на Вордпресс – около 8 процентов от общей массы. Остальные – пользуются плагинами и радуются, что они есть и они бесплатные.

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

В чем основная задача этого плагина – WP-Cufon? Он генерирует замену стандартных шрифтов, описанных в вашем файле стилей style.css. Я не буду вас посвящать в сложности работы Ява – скриптов, а просто покажу на примере. Допустим, вы активировали у себя шаблон и ваша главная страница выглядит вот так:

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

А теперь я активирую плагин (о настройках плагина – чуть позже). Смотрим на картинку ниже:

Разницу видите? Из заголовка сайта пропали слова: Коллекция и ниже – шаблоны и плагины. А слово WordPress осталось, но выглядит иначе (другой шрифт). Изменилось начертание слова Categories в Сайдбаре слева (другой шрифт) и пропало слово в заголовке статьи – Запись 10. Осталось только число… Вот вам эффект работы скрипта по имени cufon.

Шрифт, подключенный с помощью скрипта, называется Vegur и идет в папке примеров самого плагина. Шрифт не особо красивый и лежит здесь как образец работы. И для нашего сайта он не стал бы таким привлекательным, чтобы из-за него морочиться. А теперь представьте, что мы хотим внедрить шрифт, допустим, старославянской кириллицы. Называется он – CyrillicOld. Я тут работал над сайтом для русской православной церкви, как раз этим и занимался. Попробуем? Правда, наш шаблон не совсем удачно для этого подходит: море, чайки, супер-катер Абрамовича (шутка) и наш старославянский шрифт. Но для примера работы шрифта – в самый раз. Итак: считаем до трех – раз-два-…. и:

Ну что, вам хорошо видно? Смотрите в белых овалах: появились русские слова, отображаемые новым шрифтом – CyrillicOld. И заметьте, этот шрифт отлично будет виден всем посетителям вашего сайта, у которых нет этого шрифта в его наборе на компе! Скажите, класс? И я говорю, что здорово. И знаю, что примерно каждый третий, зашедший в мой каталог шаблонов, или уже думал о способе – как заставить работать на сайте нестандартные шрифты, или, прочитав мой пост и увидев мои картинки своими глазами – тоже захочет себе это сделать.

А вот о том, как установить и настроить плагин wp-cufon на своем сайте, я расскажу вам завтра, тем более, что сейчас уже вечер, и мой второй пост “сольется” по времени вашего чтения с первым, и вы практически ничего не потеряете. А я сэкономлю себе время, так как этот рассказ писал почти час.

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