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

Эта запись 2 из 2 в серии wp-cufon

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

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

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

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

wp-cufon04

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

wp-cufon05

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

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

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

wp-cufon06

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

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

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

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

wp-cufon07

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

wp-cufon08

Мой выбор остановился на шрифте 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). Этим самым вы как-бы подтверждаете, что ваш шрифт имеет свободное распространение и не ворованный:

wp-cufon10

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, – у вас откроется окно загрузки файла шрифта:

wp-cufon11

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

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

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

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

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

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

wp-cufon12

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

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

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

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

wp-cufon13

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

wp-cufon14

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

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

wp-cufon16

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

wp-cufon17

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

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

Было:

wp-cufon06

Стало:

wp-cufon18

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

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

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

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

Всем удачи!


Понравилась статья? Поделись с друзьями!

22 коммент.

  1. У меня тоже ничего не получается изменить.все вроде просто,
    хочу изменить в заголовке и в рубриках,меню…разные значения пробовала писать,никак.. druidglade.ru

    Ответить
  2. Здравствуйте!

    Уже всё перепробовала.
    Через Кафан, через Гугль фонтс никак не получается отобразить шрифт в сафари. Во всех браузерах показывает шрифт philosopher, а здесь нет( сайт vinokoma.ru
    Помогите пожалуйста!

    Ответить
  3. Ничего не получилось((( Пробовал на протяжении 3-х часов и тщетно!!! Менял и h1,2,3,4,5,6 и всё подряд… Ни один блок так и не изменился(((

    Ответить
  4. Привет. Спасибо за хорошую статью. Скрипт с n-го раза работать заставил, теперь проблема в активации свойств ссылки. Необходимо, чтобы при наведении курсора текст менял цвет. Бьюсь второй день, как был черным., так им и остается. Урл для публикации на усмотрение admina mamochkavdekrete.ru/
    Если кто сталкивался, помогите.

    Ответить
  5. Спасибо автору за урок. Но у меня на сайте почему-то не хочет работать. Помогите пожалуйста разобраться. Мой сайт — hotel4sezona.ru. Зараенее спасибо

    Ответить
    • Непонятно — где именно не работает? Заголовки записей вижу с помощью скрипта, а где НЕ работает?

      Ответить
  6. Доброго времени суток!
    Вот а у меня с самого начала проблема…:(
    я не могу ввести шрифт в онлайн-генератор… какой-бы то ни было…
    открывается окно просмотра шрифта и все:(
    как быть?
    И хотел, пользуясь случаем, Автору сказать спасибо за шаблоны — отличная работа!
    Придется мне, наверное, связаться с вами и познакомится поближе…
    С уважением.

    Ответить
    • Как быть? — не знаю, почему у вас не получается. Вероятно, что-то делаете неправильно, не в той последовательности о которой я писал в обзоре.

      Ответить
  7. Хороший плагин. Спасибо. Вот только я запарился бороться с проблемой вывода стиля hover. (тоесть пункт меню, когда мышка наведена)

    Вот как у меня прописаны шрифты:
    Cufon.set(‘fontFamily’, ‘Micra’).replace(‘#nav’);
    Cufon.replace(‘#nav a’, { hover: true });
    Cufon.set(‘fontFamily’, ‘Verdana’).replace(‘#nav ul li’)(‘#nav ul li a:hover’);
    Cufon.replace(‘#nav ul li’, {textShadow: ‘#000 1px 1px’});

    Добавляю Cufon.replace(‘#nav a’, { hover: true }); — перестают отображаться шрифты, которые добавляю. В одной из гугл групп нашел такое решение:
    Cufon.replace(‘#nav li’,{hover:true,hoverables:{a:true}});

    Тоже ничего не помогает. Внедренные шрифты перестают работать.
    В чем может быть причина?

    Ответить
  8. После применения текст отображается не полностью !
    Например: в Меню — О КОМПАНИИ — показывает только КОМПАНИИ буква «О» Не отображается !!!!!
    Что делать ??????

    Ответить
  9. Синтаксис сабжа прокатил только как было в оригинале:
    Cufon.set(‘fontFamily’, ‘EpsilonCTT’).replace(‘.nav li a’)(‘.nav li a:hover’)(‘#header h1’);
    по-другому почему-то не работало.
    а где собственно менять размер шрифта теперь??

    Ответить
    • смотреть настроки вывода того или иного элемента заголовков в файле style.css, и оттуда брать синтаксис, я так делал, а что касается размера шрифта — надо смотреть настройки при создании самого скрипта шрифта, я там пытался разобраться, но не до конца все понял…

      Ответить
      • Поковырявшись нашел что отвечает за размер шрифта:
        «units-per-em»:»500″
        только там надо уменьшать эту цифру.чем она меньше тем шрифт больше.

        а насчет синтаксиса я имел ввиду что если писал отдельно
        Cufon.set(‘fontFamily’, ‘EpsilonCTT’);
        cufon.replace(‘h1’);
        или даже
        Cufon.set(‘fontFamily’, ‘EpsilonCTT’).replace(‘h1,h2’);
        то не работало. заработало только как я написал выше,когда все в одну строчку и разные элементы из styles.css в разных скобках.

        теперь на моем сайте красивый шрифт)спасибо вам!

        Ответить
        • Не за что, Ваня, вам спасибо за дополнительные пояснения, посетителям надеюсь пригодится, меньше ковыряться будут 🙂
          Удачи.

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

    Ответить

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