Здравствуйте, дорогие друзья!

Рассмотрим как добавить кнопку печати на страницу вашего сайта. В последнее время всё чаще сталкиваюсь с этой задачей. В основном такие кнопки печати используют на страницах интернет-магазина чтобы посетитель мог распечатать и сравнить товары или прийти с этой распечаткой в магазин и осмотреть заинтересовавший его товар перед покупкой или показать кому то.

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

Так же кнопка для печати страницы сайта может быть полезной на страницах статей для сайтов некоторых тематик, особенно если там есть какие то инструкции или рецепты или ещё что то в этом духе.

Как добавить кнопку печати страницы сайта?

Как это ни странно, функционал отправки страницы на печать изначально заложен в любом браузере и для добавления кнопки печати на сайт не нужно изобретать велосипед, а достаточно просто добавить в том месте, где вы хотите расположить кнопку отправки страницы на печать, вот такой вот код:

Вместо надписи «Распечатать» может быть любой текст, иконка или картинка.

Вместо класса print-doc можете указать свой.

Вот, например, вариант кода с картинкой:

На сайте это будет выглядеть так:

И всё бы ничего, но если бы ни одно но. Дело в том, что большинство современных сайтов имеют ширину в среднем 980 – 1280 пикселей, а так как размер бумаги для печати ограничен, то влезет на неё страница с шириной приблизительно 650px. Это приводит к тому, что некоторые элементы страницы будут налазить друг на друга или будут некорректно отображаться.

Что же делать в этом случае? Вот здесь придётся немного попотеть и создать версию страницы для печати.

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

Как сделать версию для печати при помощи медиазапроса?

1. 1.Открываем файл стилей активной темы (style.css или stylesheet.css или другое название, в зависимости от движка сайта).
2. 2.В самом конце пишем код медиазапроса:
   
   PHP

   @media print { }

   1 2 3

   @media print {   }

3. 3.В фигурных скобках указываем классы или идентификаторы элементов, которые нам нужно скрыть или изменить.
   
   PHP

   @media print { .menu { display:none; } }

   1 2 3 4 5

   @media print { .menu { display:none; } }

Скрыть элемент можно вычислив его класс или идентификатор и присвоив ему свойство display:none;

Как сделать версию для печати при помощи отдельного css файла?

1. 1.В первую очередь создаём отдельный файл и называем его print.css
2. 2.Загружаем файл на свой хостинг в папку с «css». Если такой папки нет, то желательно её создать.
   Если ваш сайт работает на движке то эта папка должна быть в папке с активной темой
3. 3.Далее нам нужно подключить этот файл стилей при помощи вот такого кода:
   
   PHP

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

   1	<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

   В атрибуте href в кавычках нужно указать путь к вашему созданному файлу print.css. У вас он будет отличаться.

   Для WordPress существует специальня функция для определения пути к папке с шаблоном, внутри которой и находятся css файлы.
   

   В коде ссылки это будет выглядеть так:

   PHP

   <link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo(' template_url'); ?>/css/print.css" />

   1	<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo(' template_url'); ?>/css/print.css" />

   Подключение файла стилей осуществляется между тегами …

   У сайтов, работающих на движке, этот фрагмент кода находится в файле header.php, head.php и т.д., в зависимости от движка. Данный файл обычно лежит в папке с темой.

4. 4.В файле print.css нам нужно скрыть лишние элементы страницы, которые не понадобятся в версии для печати, а так же изменить ширину некоторых блоков с контентом, чтобы они нормально поместились в пределы страницы для печати.
   PHP

   .menu { display:none; }</li>

   1 2 3

   .menu { display:none; }</li>

Как можно просмотреть версию для печати?

Для того чтобы посмотреть как наша страница будет выглядеть при печати нужно в меню браузера выбрать пункт «Файл» → «Печать» или просто «Печать» (в зависимости от браузера)

Добавить кнопку печати при помощи плагина WordPress

Если ваш сайт работает на WordPress – считайте что вам повезло! Разработчики этого движка день и ночь трудятся над плагинами упрощающими жизнь пользователей.

Для добавления кнопки печати воспользуемся плагином Print-O-Matic

Его достоинства:

• Не нужно лезть в код темы чтобы вывести кнопку печати
• Наличие страницы настроек
• Поддержка шорткодов
• Возможность задавать для печати только определённые элементы
• Поддержка иконки печати и возможность управлять её оформлением.

Устанавливается и настраивается как обычно в разделе «Плагины» → «Добавить новый» в строке поиска вводим название и нажимаем на кнопку «Установить» а затем «Активировать»

Страница настроек плагина находится в разделе «Настройки» → «Print-O-Matic»

Здесь можно задать:

• Default Target Attribute – можем указать тег, класс или идентификатор элемента, который нужно распечатать. Подробнее описано на странице «Target Attribute»
  
• Default Print Title – надпись, которая выведется на кнопке печати.
• Use Print Icon – использовать ли иконку принтера.
• Printer Icon – выбор вида иконки.
• Custom Style – здесь можно дописать свои CSS стили.
• Use Theme CSS For Print Page – использовать стили темы для печатаемой страницы.
• Custom Print Page Style – здесь можно дописать ваши CSS стили для элементов страницы.
• Do Not Print Elements – можно указать классы или идентификаторы элементов, которые не нужно печатать.
• Print Page Top HTML – вывод кода в начале HTML документа.
• Print Page Bottom HTML — вывод кода в конце HTML документа.
• Shortcode Loads Scripts – выводить кнопку печати там где задан шорткод [print-me] (моя любимая настойка!).
• Pause Before Print – задаётся пауза в миллисекундах перед началом печати.
• Close After Print – закрыть окно печати после распечатки.

После задания настроек обязательно нажимаем на кнопку «Сохранить изменения».

Теперь мы можем вставить шорткод [print-me], там где нам нужно разместить кнопку печати и дело сделано!

Печать страницы при помощи онлайн сервиса Print Friendly and PDF Button

1. 1.Переходите на страницу сервиса Print Friendly and PDF Button
2. 2.Задаём настройки (выбираем CMS, вид кнопок и т.д.) и задаём настройки печати
   
3. 3.Копируем сгенерированный код и вставляем в том месте, где хотим вывести кнопку печати
   

Пожалуй, это все известные мне способы добавления кнопки печати на. Если вы знаете ещё какие то – буду рада если поделитесь ими в комментариях.

Удачи вам и до скорых встреч на страницах моего сайта и не только!

С уважением Юлия Гусарь