как сделать печать страницы сайтаСегодня поисковые системы большое значение придают удобству юзабилити сайта. Один из параметров, которые оценивают различные онлайн анализаторы сайтов – возможность печати страниц сайта, наличие кнопки-ссылки на печатную версию.

Да, именно так, раньше владельцы веб-сайтов ставили всевозможную защиту от копирования, а сегодня сами дают возможность распечатывать веб-страницы. Да и посетителям удобнее, если с сайта можно скачать версию для печати.

Как отобразить версию страницы для печати

Для удобства пользователей приветствуется размещение на страницах сайта кнопки для отправки статей на печать. Кнопку Печать документа организуем, используя функцию print. Вывод страниц на печать с использованием javascript делаем в виде текста, кнопки либо графически (рисунок принтера). Скрипт ставьте между тегами < body > ....< /body > в нужном вам месте. Вот примеры скриптов и результаты на странице сайта.

Текстовая ссылка для вывода на печать javascript
1.

<a href="#" onClick="window.print()"> Распечатать </a>

2.

<a href="javascript:(print());"> Печать документа</a>

3.

<a href="javascript:window.print()"> Распечатать</a>

Результат отобразить версию страницы для печати

Кнопка печать документа
1.

<input type="button" value="Печать документа" onClick="javascript:print(document);"/>

2.

<input type="button" value="Печать" onClick="javascript:print(document);">

3.

<button onclick='print();'>Распечатать</button>

Результат Кнопка для отправки статей на печать

 

Графическая кнопка для отправки статей на печать

<a href="javascript:window.print()"><img src="адрес-картинки"></a>

Вот, что получилось

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

Блогер должен позаботиться, чтобы на печать не попадали меню, баннеры, навигация.

CSS для печатной версии веб-сайта

Отредактируйте файл header.php, сразу после строки подключения стандартного css файла темы вставьте код

<link rel="stylesheet" type="text/css" media="screen" href="css/stylе.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />

Теперь браузеры посетителей будут учитывать инструкции , которые вы пропишете для print.css.

В конце файла stylе.css пропишите медиазапрос

@media print{.b-share_theme_counter, .pagesidebar .widget ul li, .pagesidebar .widget h3, .pagesidebar .widget img, .pagesidebar .widget .textwidget, #header {display:none;}

Конкретные стили элементов, которые надо скрыть,  узнайте, нажав Просмотр кода элементов (для Хрома) или Исследовать элемент (для Firefox). Скройте в версии для печати все элементы, которые не заинтересуют посетителя.

Вот код, который устанавливайте в нужное место шаблона, он выводит ссылку на печать:

<a href="javaScript:window.print();">Распечатать эту страницу</a>

Для начинающих вебмастеров есть более простые способы сделать версию сайта для печати:

  • установить плагин WP-Print или Print Post and Page. Они автоматически генерируют печатную версию страницы;
  • установить код скрипта от сервиса PrintFriendly.

После установки скрипта для печати страниц сайта ваш веб-ресурс станет более конкурентоспособным.