кнопка распечатать страницу на сайте

Версия для печати для сайта

Рассмотрим как сделать кнопку «Распечатать страницу», а также как создать/отредактировать «Версию для печати» на сайте, в том числе с помощью wordpress плагинов.

Скачать исходники для статьи можно ниже

Как сделать кнопку «Распечатать страницу»:

Можно воспользоваться следующим кодом:

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

Для сайтов на wordpress — для того чтобы создать данную кнопку — нужно зайти в «Редактор записей/страниц» — открыть вкладку «Текст» и вставить вышеуказанный код в нужно месте.

Чтобы превратить ссылку в кнопку — можно указать ссылке класс, например так:

<a href="#" onClick="window.print()" class="printer"></a>

А в файле стилей — style.css прописать к этой ссылке следующие стили:

.printer{width:86px;height:25px;display:block;background:url("http://mnogoblog.ru/wp-content/uploads/2015/07/printer.gif")}

В итоге у вас получиться вот такая симпатичная кнопочка:

кнопка Распечатать на сайте

Как создать/отредактировать «Версию для печати» для сайта:

В большинстве тем для wordpress «Версия для печати» создается с помощью правила «@media print».

Чтобы отредактировать «Печатную версию сайта» нужно — зайти в панель управления wordpress, в левом меню выбрать пункт «Внешний вид» и его подпункт «Редактор» и у нас откроется файл стилей — style.css текущей темы сайта.

Если взять стандартную тему Twenty Fifteen (можно взять любую другую: Twenty Fourteen, Twenty Thirteen, Twenty Twelve — все их вы можете бесплатно скачать с «wordpress.org/themes/search/twenty/»), то правило «@media print» расположено в конце кода файла стилей и начинается следующим образом:

@media print {
	body {
		background: none !important; /* Brute force since user agents all print differently. */
		font-size: 11.25pt;
	}

	.secondary-toggle,
	.navigation,
	.page-links,
	.edit-link,
	#reply-title,
	.comment-form,
	.comment-edit-link,
	.comment-list .reply a,
	button,
	input,
	textarea,
	select,
	.widecolumn form,
	.widecolumn .mu_register form {
		display: none;
	}
...

Здесь части используется свойство «display» со значением «none» — что позволяет скрыть ненужные элементы для печати.

Также для печати удаляется фон сайта — background: none и частенько изменяют шрифты.

Еще один способ — создать «Печатную версию сайта» — это создать дополнительный файл стилей — например — print.css.

Для того, чтобы сайт обращался к файлу print.css, нужно прописать мета-тегах следующий код:

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

Метатеги — это необязательные теги языков HTML и XMTL, которые не преднаназчены для посетителей сайта. Они содержат служебную информацию о Web-странице и ее описание для браузеров и поисковых машин в структурированном виде. Размещаются метатеги внутри тега «HEAD»»/HEAD» (заголовка страницы).

Мета-теги в wordpress обычно размещаются в файле header.php — чтобы его открыть нужно — зайти в админку, в левом меню выбрать пункт «Внешний вид», его подпункт «Редактор», справа в списке шаблонов выбрать файл — header.php.

WordPress Плагины для создания «Кнопки Распечатать» и
«Печатной версии сайта»:

1. WP-Print
Сведения о плагине WP-Print:
Последнее обновление: 2015-4-21
Количество активных загрузок: 40,000+
Сайт плагина: «wordpress.org/plugins/wp-print/screenshots/»

2. Print Friendly and PDF Button
Сведения о плагине Print Friendly and PDF Button:
Последнее обновление: 2015-6-9
Количество активных загрузок: 60,000+
Сайт плагина: «wordpress.org/plugins/printfriendly/»

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc