Эта статья рассказывает о том, как разместить в печатной версии страницы динамический QR-код с ссылкой на ресурс, используя простые приёмы CSS.
При печати материалов из интернета браузер автоматически добавляет URL сайта в нижней или верхней части печатных страниц. Благодаря этому адрес ресурса всегда оказывается под рукой.
Проблема в том, что URL может быть очень длинным – набирая его в браузере, легко допустить ошибку.
В качестве альтернативы можно использовать короткий URL, созданный при помощи сервисов bit.ly или goo.gl. Более удобный вариант – легко распознаваемый напечатанный QR-код с ссылкой на источник в интернете.
Разместить QR-код на странице из интернета – удивительно просто. Однако, прежде чем углубиться в технические детали, рассмотрим готовый пример.
Откройте любую статью (например, эту) и нажмите Ctrl+P (Cmd+P для Mac) для вызова окна с настройками печати и предпросмотром. Найдите последнюю страницу, и вы увидите там QR-код, который ведёт на страницу ресурса (если QR-код отсутствует, откройте заново окно с настройками печати).
Если вы хотите использовать подобное решение для своего сайта, просто добавьте в шаблон следующий сниппет:
<style type="text/css">
@media print {
body:after{
content:url(http://chart.googleapis.com/chart?
cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<<URL>>)
}
}
</style>
*Замените URL на URL вашего сайта
Фактически, изображение QR-кода добавляется после тега <body>
, и благодаря медиа-типу CSS для печати (print) QR-код появится лишь на распечатанной странице. Он генерируется динамически с помощью Google Charts API и меняется в зависимости от URL.
Чтобы добавить QR-код в таблицу стилей для печатной страницы WordPress, откройте файл шаблона, например, header.php или index.php, и вставьте где-либо внутри тега <head>
следующий код:
<?php if (is_single()) : ?>
<style type="text/css">
@media print {
body:after { content:url (
http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<?= the_permalink(); ?>)
}
}
</style>
<?php endif; ?>
Аналогичный код для классического шаблона Blogger будет выглядеть следующим образом (при работе с новым XML-шаблоном может потребоваться использование data:blog.canonicalUrl
(для постоянной ссылки) с указанием условия <b:if cond='data:blog.pageType == "item"'>
, так как мы размещаем QR-код только на последней странице):
<ItemPage><Blogger>
<style type="text/css">
@media print {
body:after { content:url (
http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<$BlogItemPermalinkURL$>)
}
}
</style>
</Blogger></ItemPage>
Если вы у вас еще нет QR-кода, это не проблема. Вы можете создать его бесплатно с помощью Генератора QR-кодов Logaster. Это очень простой и понятный в использовании инструмент.
Все что вам нужно сделать, это заполнить поля нужной информацией:
укажите название компании;
выберите сферу деятельности из указанного списка;
вставьте ссылку на сайт или страницу в соц.сети;
выберите формат расшифровки данных;
стиль QR-Code;
нажмите кнопку скачать.
После этого за несколько секунд вам будет доступен ваш QR-code в .png формате.
Оригинал: http://www.labnol.org/internet/qr-code-for-print-stylesheet/26064/
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.