Рассмотрим как сделать кнопку “Распечатать страницу”, а также как создать/отредактировать “Версию для печати” на сайте, в том числе с помощью 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("https://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/”