html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

13.11.2012 | Автор: Амит Агарвал

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

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

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

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

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>
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с cmsmagazine.ru

5

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • anatoly.denisov
          • домен cmsmagazine.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции