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

Вчера я опубликовал статью, которую можно назвать вводной, или предисловием. Сегодня мой рассказ о самом плагине, его настройке и использовании. Плагин wp-cufon я перевел, но все равно дам подробное пояснение, потому что для любого начинающего пользователя движка WordPress он представляет определенную сложность, а если вы еще слабо знакомы с стилями, описанными в шаблоне в файле style.css, и не знаете, что такое Дивы (<div>), вам будет тяжело разобраться и правильно настроить этот плагин. Поэтому усаживайтесь поудобней, рассказ будет длинным, с картинками…

Итак. Вчера я рассказал вам о том, что такое скрипт cufon и для чего он служит, когда подключен и работает. У вас уже есть свой шаблон WordPress, или вы еще находитесь в поиске. Вам хочется, чтобы некоторые элементы ваших страниц (главная, страница просмотра одной записи и другие) выглядели более совершенно. Например, заголовки были написаны более оригинальными шрифтами, чем те, которые отображаются у вас сейчас. Плагин wp-cufon как раз и служит выполнению этой задачи.

Установка плагина обычная. Закачиваем его двумя способами. Я обычно пользуюсь FTP-соединением. Качаю не архив, а папку плагина в директорию /wp-content/plugins. Есть еще способ установки архива из Панели администратора. Но он мне не нравится тем, что я не вижу, что там происходит. И если вдруг что-то пойдет не так – придется переходить к первому способу. Поэтому я не морочусь и делаю через FTP.

Закачали. Зашли в Панель управления плагинами. Активировали. У вас появится вкладка Cufon в секции Дизайн (или Внешний вид, у кого Вордпресс еще не обновлен до версии 2.9):

Заходим на страницу настроек плагина:

Плагин приглашает открыть (показать) Инструкцию по установке. Нажимаем, открываем:

Перед вами – короткая пошаговая инструкция: с чего надо начинать и что делать последовательно. Я немного раскрою каждый ваш шаг.

Действие 1. Сначала давайте выберем нужный нам шрифт, который, к примеру, вы хотите поставить в навигационное меню и заменить новым шрифтом тот, который стоит у вас сейчас по умолчанию и настройкам вашего шаблона. Я покажу вам на примере шаблона Estetica (автор – newwpthemes.com), который сегодня планирую перевести и выложить у себя в Коллекции WordPress:

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

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

У каждого из вас наверняка есть редактор Microsoft Word. У меня стоит Office 2007. Открываю редактор. Пишу три слова моих будущих названий страниц сайта: ГЛАВНАЯ, О САЙТЕ, АРХИВ. Пишу заглавными, так как так они и будут выглядеть на сайте, и мне надо визуально сравнить и выбрать нужный мне шрифт.

Я добавлял много новых нестандартных шрифтов в папку /fonts директории Windows, и соответственно, все они мне отличны видны в редакторе Word:

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

Мой выбор остановился на шрифте Adver Gothic. Как видите, он нестандартный, достаточно оригинальный и как по мне – будет неплохо смотреться в навигации страниц. Имя шрифта – больше ничего не надо. Хотя я еще не знаю – одно дело в Ворде, другое – на сайте. Так что посмотрим…

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

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

Ссылка, на которую вы нажмете в Инструкции, выведет вас на страницу создания скрипта шрифтов на сайте cufon.shoqolate.com. Ваши действие по-шагово должны быть такими:

1 – Вам надо в первой строке нажать на кнопку Обзор и найти ваш шрифт в папке /fonts директории Windows. Я выбрал A_ALBIONICB&W. Его и подставляю в это первое окно. Здесь я указываю генератору, какой мне нужен шрифт для свойства Regular Typeface (регулярный, стандартный шрифт).

2 – Во втором окне я также подставляю этот шрифт A_BOSANOVA, так мне нужно будет свойство Bold Typerface (мало ли).

Все. Другие свойства – курсивное начертание, мне не нужно. Если вы хотите – можете выбрать.

3 – Обязательно ставим галочку в секции — The EULAs of these fonts allow Web Embedding (without Adobe Flash). Этим самым вы как-бы подтверждаете, что ваш шрифт имеет свободное распространение и не ворованный:

4 – В разделе Include the following glips (if available) выбираете галочки возле WordPress Punctuation, Basic latin, Cyrillic Alphabet, Russian Alphabet. Вы создаете список символов вашего будущего скрипта шрифтов. Достаточно только этих четырех блоков.

5 – В разделе Performance & file size ставим галочку возле No, thanks (будем размеры шрифта регулировать самостоятельно)

6 – В разделе Terms (Соглашение с Правилами) обязательно ставим галочку, что мы согласны.

Я перечислил все основные действия на этой странице. Если вы что-то сделаете не так как я написал – будет выдана ошибка. Итак: нажимаем внизу кнопку Let’s do this! – ждем пару секунд…

Повторяю, если вы все сделали правильно, если ваш шрифт поддерживается в конвертации в скрипт cufon, – у вас откроется окно загрузки файла шрифта:

Как видите, название файла получилось достаточно длинным, но это не страшно. Сохраняем файл.

Мы завершили Действие 1 – выбрали шрифт и создали для него скрипт в онлайн – генераторе на сайте cufon.shoqolate.com. Идем дальше.

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

Действие 2 – В директории нашего сайта wp-content/plugins создаем папку /fonts.

Действие 3 – Переносим наш файл скрипта шрифта AlbionicBW в эту папку.

Действие 4 – Возвращаемся на страницу настроек плагина wp-cufon. Перезагружаем её. Ниже Инструкции видим секцию Ваши шрифты. Плагин увидел в папке шрифт и показал его нам:

Теперь самое важное. Нам надо настроить правильно плагин. Надо написать ему команду на замену стандартного шрифта на новый. Ниже на странице настроек есть несколько примеров. Но это обобщенные, часто встречающиеся примеры. А нам нужен конкретный для нашего случая. Напомню: цель – заменить стандартный шрифт в навигационной панели страниц шаблона Estetica.

Открываем файл style.css шаблона и ищем свойство, обрабатывающее команду вывода шрифта для панели страниц. Находим его на строке 114.

Нас интересует только заголовок до открывающейся фигурной скобки: #pagemenu li a, #pagemenu li a:link

Копируем его, возвращаемся на страницу настроек плагина:

По умолчанию у плагина идет скрипт шрифта Vegur, лежит в папке плагина /examples. Нам надо заменить на свой. Сначала надо точно выяснить название шрифта. Открываем файл a_AlbionicBW_400-a_AlbionicBW_400.font.js и смотрим:

Название шрифта я подчеркнул красной чертой – между кавычками видим имя шрифта – Adver Gothic. Копируем его и вставляем в настройку плагина вместо имя Vegur:

Удаляем стоящие там по умолчанию команды замены (‘h1’) и (‘h2’). Нам они сейчас не нужны. Находим свойство в файле стилей, которое отвечает за вывод стандартного шрифта в навигационном меню страниц шаблона: #pagemenu li a, #pagemenu li a:link. Копируем его и вставляем в настройки плагина с нужной командой:

По настройке команд все. Смотрим ниже настройки плагина:

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

После этого нажимаем кнопку Сохранить опции. Теперь открываем нашу главную страницу шаблона, перегружаем ее и смотрим в навигационное меню:

Было:

Стало:

Сказать, что стало лучше – я не могу. В Ворде смотрелся этот шрифт привлекательнее. Но дело не в шрифте. Главное, что мы с вами все сделали правильно, подключили новый оригинальный шрифт, который будет теперь отображаться в нашем навигационном меню. Шрифтов в сети – очень много. В течение пары минут можно найти ссылки на скачку десятков и сотен (и тысяч тоже) архивов с бесплатными шрифтами с поддержкой кириллицы. Не все эти шрифты вы сможете конвертировать в онлайн – генераторе. Я уже писал об этом выше. Причину не знаю. Возможно, что кодировка шрифта не нравится генератору. Поэтому надо искать, подбирать и пробовать.

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

  Плагин WP-Cufon — внедряем оригинальные шрифты (45,6 KiB, 674 скачиваний)

По просьбе читателя сделал скрипт шрифта Ижица — Izhitsa. Выкладываю отдельно:

  Кириллический шрифт Ижица для плагина WP-Cufon (30,6 KiB, 10 скачиваний)

Ваши вопросы, пожелания, благодарности и критику принимаю всю – пишите в комментариях.

Если хотите следить за новыми интересными публикациями в моей Коллекции бесплатных шаблонов и плагинов WordPress, переведенных и адаптированных для использования в Рунете – подпишитесь на RSS ленту.

Всем удачи!