Я около года или больше назад писал в своем блоге о использовании оригинальных шрифтов на WordPress с помощью плагина WP Cufon, даже перевел его и выложил для скачивания.
Оригинальные шрифты — это те шрифты, которые не поддерживаются браузерами и, соответственно, вы не можете их использовать на своем сайте. Для использования оригинальных шрифтов было разработано несколько способов, один из которых сегодня стал очень популярным.
Подробно рассказывать о использовании скрипта Cufon с помощью плагина WP Cufon не буду. Если интересно — можете прочесть здесь.
Сегодня я хочу показать, как можно внедрить скрипт cufon в тему шаблона WordPress и использовать оригинальный шрифт без плагина WP-Cufon.
Наверняка, вы уже читали о том, что чем меньше сторонних плагинов — тем лучше, тем быстрее работает ваш сайт, потому что внешнее подключение стороннего кода всегда чуть «тормозит» работу сайта, а все плагины — это и есть внешне подключаемый код PHP. Есть даже жесткие правила и требования к ускорению сайта через объединение общего кода в одинаковых файлах: например, того же стиля в файлах CSS — в один файл, скриптов JS — в один файл, и так далее.
Итак, что нам, а точнее, вам понадобится для внедрения кода Cufon?
Сначала нужен сам скрипт JS.
Его можно скачать на сайте разработчиков, а можно — у меня по ссылке ниже:
Скрипт cufon-yui.js (5,9 Кб, 85 скачиваний)
Далее, вам нужен скрипт шрифта. Я могу вам посоветовать почитать мои статьи о плагине, там я давал пошаговую инструкцию — как создать из файла шрифта скрипт шрифта. Те, кто хочет просто попробовать — могу предложить небольшой сборник готовых скриптов нескольких шрифтов, которые я периодически использую. В этот сборник вошли такие популярные и известные шрифты, как:
Скрипты кириллических шрифтов (320,6 Кб, 106 скачиваний)
Чтобы у вас заработали скрипты в шаблоне — советую сделать следующие действия:
Например, вы хотите заменить все теги H2 (это обычно заголовки записей) на оригинальный. Отлично! В том же файле header.php, чуть ниже строк, которые вы уже добавили, ДО закрытия тега </head>, вставьте следующий скрипт:
Теперь сохраните файл (не забывайте, что файлы PHP нужно редактировать правильным редактором!). Перегрузите сайт и посмотрите, работает оригинальный шрифт или нет. Должен работать, отвечаю сразу на вопросы в комментариях
.
Еще примеры использования скрипта который указывает на замену тех или иных свойств начертания шрифтов на сайте. Много других примеров ищите в Сети:
Надеюсь, моя шпаргалка кому-нибудь поможет.
Ваши отзывы и комментарии — чуть ниже, пожалуйста
Оригинальные шрифты — это те шрифты, которые не поддерживаются браузерами и, соответственно, вы не можете их использовать на своем сайте. Для использования оригинальных шрифтов было разработано несколько способов, один из которых сегодня стал очень популярным.
Подробно рассказывать о использовании скрипта Cufon с помощью плагина WP Cufon не буду. Если интересно — можете прочесть здесь.
Сегодня я хочу показать, как можно внедрить скрипт cufon в тему шаблона WordPress и использовать оригинальный шрифт без плагина WP-Cufon.
Наверняка, вы уже читали о том, что чем меньше сторонних плагинов — тем лучше, тем быстрее работает ваш сайт, потому что внешнее подключение стороннего кода всегда чуть «тормозит» работу сайта, а все плагины — это и есть внешне подключаемый код PHP. Есть даже жесткие правила и требования к ускорению сайта через объединение общего кода в одинаковых файлах: например, того же стиля в файлах CSS — в один файл, скриптов JS — в один файл, и так далее.
Итак, что нам, а точнее, вам понадобится для внедрения кода Cufon?
Сначала нужен сам скрипт JS.
Его можно скачать на сайте разработчиков, а можно — у меня по ссылке ниже:
Скрипт cufon-yui.js
Скрипт cufon-yui.js (5,9 Кб, 85 скачиваний)Далее, вам нужен скрипт шрифта. Я могу вам посоветовать почитать мои статьи о плагине, там я давал пошаговую инструкцию — как создать из файла шрифта скрипт шрифта. Те, кто хочет просто попробовать — могу предложить небольшой сборник готовых скриптов нескольких шрифтов, которые я периодически использую. В этот сборник вошли такие популярные и известные шрифты, как:
- Calibri
- Compact
- Arabic
- Burlak
- Monotype Corsiva
- Myriad Pro
- Palatino Linotype
Набор кириллических шрифтов в формате JS
Скрипты кириллических шрифтов (320,6 Кб, 106 скачиваний)Чтобы у вас заработали скрипты в шаблоне — советую сделать следующие действия:
- Создайте папку в шаблоне и назовите ее /js
- Загрузите в эту папку два файла: cufon-yui.js и любой на ваш выбор скрипт шрифта, например — Burlak_400.font.js.
- Откройте файл header.php и где-нибудь внутри тега HEAD, до его закрытия /HEAD впишите такие строки:
<script src=»<?php bloginfo(‘template_directory’); ?>/includes/js/cufon-yui.js» type=»text/javascript»></script>
<script src=»<?php bloginfo(‘stylesheet_directory’); ?>/fonts/Burlak_400.font.js» type=»text/javascript»></script>
Первая строка вызывает к работе скрипт Cufon, вторая — скрипт шрифта. Но этого пока недостаточно. Шрифту нужно показать, в каком контейнера свойств, описанных в файле style.css, выполнить необходимую замену стандартнго шрифта на ваш, оригинальный шрифт.<script src=»<?php bloginfo(‘stylesheet_directory’); ?>/fonts/Burlak_400.font.js» type=»text/javascript»></script>
Например, вы хотите заменить все теги H2 (это обычно заголовки записей) на оригинальный. Отлично! В том же файле header.php, чуть ниже строк, которые вы уже добавили, ДО закрытия тега </head>, вставьте следующий скрипт:
<script type=»text/javascript»>
Cufon.replace(‘h2′, {hover: true});
</script>
Параметр replace дает команду скрипту выполнить замену шрифта там, где есть теги h2, обязательно учитывая функцию наведения курсора на заголовок H2 (hover:true).Cufon.replace(‘h2′, {hover: true});
</script>
Теперь сохраните файл (не забывайте, что файлы PHP нужно редактировать правильным редактором!). Перегрузите сайт и посмотрите, работает оригинальный шрифт или нет. Должен работать, отвечаю сразу на вопросы в комментариях
.Еще примеры использования скрипта который указывает на замену тех или иных свойств начертания шрифтов на сайте. Много других примеров ищите в Сети:
Cufon.set(‘fontFamily’, ‘NiftyFont’);
Cufon.replace(‘#welcome’);
Cufon.replace(‘#sidebar h2′);
Cufon.replace(‘#content .title’);
Cufon.set(‘fontFamily’, ‘AnotherNiceFont’);
Cufon.replace(‘h4′);
Cufon.replace(‘.quote’);
Cufon.replace(‘#message’);
Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)
Cufon.replace(‘#your_div_id &gt; h1:first-child’, { fontFamily: ‘FontName With Spaces’ });
Cufon.replace(‘#your_div_id a’, { fontFamily: ‘FontName’ });
Cufon.replace(‘#your_div_id’, { fontFamily: ‘FontName-Medium’ });
Other Examples:
Cufon.set(‘fontFamily’, ‘Vegur’);
Cufon.replace(‘#blog-title a’, { hover: true });
Cufon.replace(‘.menu a’, { hover: true, fontWeight: ’800′ });
Cufon.replace(‘.aside h3′);
Cufon.replace(‘h1.page-title’ , { fontWeight: ’400′ });
Cufon.replace(‘h1.entry-title’, { fontWeight: ’400′ });
Cufon.replace(‘h2.entry-title’, { fontWeight: ’400′, hover: true });
Все эти варианты — с учетом ваших свойств в файле стилей style.css.Cufon.replace(‘#welcome’);
Cufon.replace(‘#sidebar h2′);
Cufon.replace(‘#content .title’);
Cufon.set(‘fontFamily’, ‘AnotherNiceFont’);
Cufon.replace(‘h4′);
Cufon.replace(‘.quote’);
Cufon.replace(‘#message’);
Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)
Cufon.replace(‘#your_div_id &gt; h1:first-child’, { fontFamily: ‘FontName With Spaces’ });
Cufon.replace(‘#your_div_id a’, { fontFamily: ‘FontName’ });
Cufon.replace(‘#your_div_id’, { fontFamily: ‘FontName-Medium’ });
Other Examples:
Cufon.set(‘fontFamily’, ‘Vegur’);
Cufon.replace(‘#blog-title a’, { hover: true });
Cufon.replace(‘.menu a’, { hover: true, fontWeight: ’800′ });
Cufon.replace(‘.aside h3′);
Cufon.replace(‘h1.page-title’ , { fontWeight: ’400′ });
Cufon.replace(‘h1.entry-title’, { fontWeight: ’400′ });
Cufon.replace(‘h2.entry-title’, { fontWeight: ’400′, hover: true });
Надеюсь, моя шпаргалка кому-нибудь поможет.
Ваши отзывы и комментарии — чуть ниже, пожалуйста
Я с Ником сотрудничаю, перевожу его шаблоны и выкладываю в своем магазине платных премиум-тем по адресу skininfo.ru.
Кто находит шаблоны Ника на варезах, сталкиваются с проблемой отображения кириллических символов. И не только с этой проблемой. Наверняка, в таких шаблонах еще куча закодированного кода.
Сделал все как написано у вас на сайте
_http://www.bestwordpress.org.ua/archives/15040
но не получилось. В заголовках поста появляется мой шрифт, но когда наводишь на него мышкой, шрифт остается прежним… и больше не возвращается. Только после перегрузки страницы.
Сайт _http://paneliriko.pllaneta.ru/blog
Тема avisio
Подскажите, пожалуйста, как вы вышли из данной ситуации.
Шаблон ведь одинаковый, какой шрифт вы заменили и где.
Откройте панель настроек шаблона, страница Главные опции (Avisio Options) и выберите в списке шрифтов вариант шрифта — Droid Sans. Этот шрифт — единственный в списке шрифтов автора, который поддерживает кириллические символы.
/ваш_шаблон/js/
Еще раз пс!
/ваш_шаблон/js/ — это на хостинге: сайт.ru/js ?
ваш сайт
ваш шаблон
Конечно, шаблон, который лежит в папке wp-content/themes/
Если вы сделали все по инструкции — должно получиться. Если не получилось, значит, что-то пропустили или сделали не правильно.
сначала вот этот:
&lt;head&gt;
….
&lt;script src=&quot;&lt;?php bloginfo(‘template_directory’); ?&gt;/js/cufon-yui.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;&lt;?php bloginfo(‘stylesheet_directory’); ?&gt;/js/Calibri_400.font.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
…
&lt;/head&gt;
потом этот:
&lt;script type=&quot;text/javascript&quot;&gt;
Cufon.replace(‘h1′, {hover: true});
&lt;/script&gt;
…
&lt;/head&gt;
Обновила, не работает!?
Из того, что вы мне показывает, я ничего разобрать не могу.
Есть отличный ресурс — http://pastebin.com/, здесь можно вставить код и он будет корректно отображен, а потом в комментарии просто прислать на него ссылку.
Во-вторых, из вашего комментария мне не понятно — где именно, в каком файле, в каком месте, вы вставляли этот код.
В-третьих, я вижу в коде два раза закрывающийся тег HEAD. Каким образом?
Пожалуйста, когда задаете сложные вопросы, пишите подробно, ведь я не Кашпировский угадывать на расстоянии не умею.
Хотите бесплатный совет?
Почитайте правила, — как задавать правильные вопросы. Здесь — http://codex.wordpress.org/Правила_форума
Чем правильней и информативней ваш вопрос — тем больше шансов получить быстрый и точный ответ, а не вести часовую переписку ни о чем…
Сори, если зацепил или обидел.
И еще вопрос:
Вы написали коды, я их вставила в header.php как сказано и куда сказано! Нужно ли в них менять под свой сайт ( именно для названия сайта) и еще менять сам шрифт в вставляемом коде?
P.S. как у вас закрывается тег HEAD два раза так и вставляю! Извините елси я ничего не понимаю в кодировке.
Кто в этом виноват? Уж точно — не я…
Вы или не читаете, или не видите, или считаете ниже своего достоинства обращать внимание на полезные советы.