Как разместить QR-код на странице для печати

Маркетинг13 Создание сайтов10 Контекстная реклама7 SEO5 Комплекс услуг4 Дизайн7 Программирование1 SMM1 Digital2 Использование сервиса2 Мобильная разработка Юзабилити2 Брендинг4 Менеджмент1 Интернет-маркетинг Интранет

ВерсткаСтатья

QR-кодыСоветыВерсткаCSS

Эта статья рассказывает о том, как разместить в печатной версии страницы динамический QR-код с ссылкой на ресурс, используя простые приёмы CSS.

АА

Амит Агарвал

12 ноября 2012

При печати материалов из интернета браузер автоматически добавляет URL сайта в нижней или верхней части печатных страниц. Благодаря этому адрес ресурса всегда оказывается под рукой.

Проблема в том, что URL может быть очень длинным – набирая его в браузере, легко допустить ошибку.

В качестве альтернативы можно использовать короткий URL, созданный при помощи сервисов bit.ly или goo.gl. Более удобный вариант – легко распознаваемый напечатанный QR-код с ссылкой на источник в интернете.

Размещение QR-кода в печатной версии с помощью CSS

Разместить 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.

WordPress

Чтобы добавить 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

Аналогичный код для классического шаблона 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. Это очень простой и понятный в использовании инструмент.

Все что вам нужно сделать, это заполнить поля нужной информацией: