Блог Seotouareg

Прежде всего, поздравляю всех тех, кто надеялся на этот долгожданный ап выдачи у яндекса! Поистине мощный апдейт выдался сегодня!

Но об этом и об алгоритме «Снежинск» вы можете почитать на серче. Сегодня совсем иная тема поста – статья будет посвящена блого-платформе WordPress, а именно ее косметическим причиндалам! Ведь блог – это лицо его владельца, также как и тетрадь – лицо ученика

Может кто-то из читателей замечал на блогах красивые заголовки постов (например, на моем блоге), на первый взгляд похожих на картинки? Если честно, то в Рунете я такого не видел. См. рисунок ниже:

Скриншот сделан с моего блога-хобби про личностную эффективность.

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

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

Прежде всего, описание и ссылку на данный плагин вы можете найти тут.

Итак, скачиваем его.

Далее загружаем распакованный файл плагина в директорию “/wp-content/plugins/“. После этого, в той же папке plugins создаем папку под названием «fonts». Данная директория будет использоваться для загрузки сконвертированных шрифтов, откуда непосредственно плагин их и берет для оформления заголовков постов.

О том как конвертировать обычный файл шрифтов в формат JavaScript мы поговорим чуть позже. Оговорюсь заранее, что плагин wp-cufon использует Javascript формат файла шрифтов. Не забудьте активировать загруженный нами плагин через панель админа в Wordpress.

В базовой поставке плагина в директории examples лежит готовый файл шрифтов для скрипта – Vegur_400-Vegur_700.font.js. Его вы можете засунуть в созданную нами папку fonts в директории plugins.

Не обращайте внимания на другие файлы, о них мы поговорим чуть позже.
Итак, после того, как плагин активирован, нам следует его как следует настроить. Настройка плагина расположена в разделе «Appearance», это в английской версии Wordpress, в русской название должно быть что-то вроде «Оформление», «Внешний вид». Извините, просто русской не пользуюсь.

Итак, после того, как мы внутри wp-cufon плагина, следует обратить внимание на два пункта.

Во-первых, это список доступных шрифтов (сконвертированных и готовых к работе).

В моем случае, это 3 шрифта:

1. Arkhive_400.font.js
2. Arlekino_400.font.js
3. Vegur_400-Vegur_700.font.js

Из них, как мы уже знаем, базовым идет только файл Vegur_400-Vegur_700.font.js. Остальные два я сконвертировал самостоятельно.

Во-вторых, стоит обратить внимание на окно хуков, которое расположено внизу:

В настройке по умолчаниюб вместо строки
“Cufon.replace(’h2′, { fontFamily: ‘Arkhive’ });”

у вас будет:

“Cufon.replace(’h1′, { fontFamily: ‘Vegur’ });”

Т.е. данная функция меняет тег «h1» свойство шрифта. Т.е. тег «h1» теперь будет отображаться шрифтом «Vegur» в случае по умолчанию, в моем же случае тег «h2» отображается шрифтом «Arkhive», который, как уже сказано ранее, я сконвертировал самостоятельно.

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

Смотрите рисунок ниже:

Как видите, в случае с моим блогом, это тег «h2», поэтому на него я и установил перехват.

Также, поясню еще один момент, а именно, откуда брать название шрифта для прописывания хука, в нашем случае – это «Vegur».

Откройте файл Vegur_400-Vegur_700.font.js, который находится в папке examples в директории плагина.

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

Предупреждаю: НЕ НУЖНО использовать в название пробелы или какие-либо спецсимволы, это отражается на неработоспособности шрифта. Поэтому, когда в дальнейшем будете конвертировать шрифт, после конвертации открывайте его блокнотом и проверяйте правописание его имени (на картинке видно, где смотреть). В случае обнаружения в названии спецсимволов или пробелов, смело их удаляйте!

После того, как вы верно определились с тегом заголовка и прописали его, смело сохраняйте настройки!

Смотрим сайт! Что? Ничего не изменилось?

Отсутствием изменений является факт присутствия кириллицы в названии постов (т.е. русские буквы)! Попросту говоря, базовый шрифт «Vegur» не умеет работать с русским текстом. Для того, чтобы увидеть изменения, вам стоит создать пост с английским названием (правда, если у вас посты на англ, то проблем с отображением у вас не будет).

Но согласитесь, это не дело! Мы патриоты «нашинских» названий, поэтому ситуацию в корне будем менять! Как раз сейчас я и хочу раскрыть таинственную тему конвертации обычных шрифтов формата ttf, которые расположены в директории /WINDOWS/Fonts/ в формат, понятный нашему новенькому плагину для Wordpress.

Существует замечательный онлайн-сервис, который нам и поможет с конвертацией. Расположен он тут.

Прежде чем начать конвертацию, нам нужен подопытный «кролик», т.е. шрифт с поддержкой кириллицы. Любой русский шрифт вы сможете отыскать самостоятельно в сети (к примеру по запросу: красивые русские шрифты для photoshop), я в качестве примера взял шрифт под названием «Arkhive», можете скачать вот тут.

Итак, после скачивания файла, распаковываем и видим в директории файл Arkhive.ttf, т.е. True Type Font формат. Онлайн-конвертатор работает с несколькими форматами шрифтов: TTF, OTF, PFB и PostScriptum. Выбор велик.

Заходим на сайт конвертатора. Опишу те поля, который нам интересны:

“Regular typeface” – тут указываете путь к скачанному шрифту, т.е. путь к Arkhive.ttf.

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

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

Basic Latin uppercase letters (A-Z) – это заглавные буквы латинского алфавита (т.е. английские грубо говоря)

Basic Latin lowercase letters (a-z) – соответственно строчные буковки того же алфавита.

Basic Latin digits (0-9) – циферки.. Странно, что написали Латинские, ведь от 0 до 9 – это арабские.

Punctuation – символы пунктуации.

Basic Latin – латинские в формате Unicode.

Russian Alphabet и Cyrillic Alphabet. Тут без комментариев, все и так понятно.

Касательно пунктика «Scale the font to the following size», то тут НЕ НУЖНО ставить галочку напротив «No thanks, use the font’s own value», т.е. по опыту, чаще всего сконвертированный шрифт работает неправильно!

Далее соглашаемся с последним пунктом в разделе Terms и нажимаем Let’s do this!
Через несколько секунд начнется загрузка уже готового к работе файла-шрифта, который в дальнейшем вам нужно будет загрузить все в ту же директорию /wp-content/plugins/fonts/. В нашем случае файл будет называться Arkhive_400.font.js

Прежде, откройте полученный файл и проверьте правильное написание его имени (чтобы не было спецсимволов и пробелов).

Как видно по рисунку, все в поряде. Смело можете прописывать хук и наслаждаться результатов проделанной работы!

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

Ссылка на архив 2-х сконвертированных шрифтов (с поддержкой кириллицы) для wp-cufon.

Tags: wordpress, плагин wp-cufon

This entry was posted on суббота, ноября 14, 2009 at 9:33 pm and is filed under Сайтостроительство. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.