Печать блога

Дата публикации:Октябрь 6, 2010

Распечатка понравившейся статьи из блога — довольно актуальный вопрос. Иногда посетителю удобнее прочитать заинтересовавшую его статью на бумаге, нежели с экрана компьютера. Именно поэтому нужно предусмотреть такое представление записей, которое бы исключало лишние элементы. Начнем с добавления ссылки «Print This Page» («Распечатать эту страницу»). Делается это довольно просто с помощью небольшого Javascript:

<a href="javascript:window.print()" rel="nofollow">Print This Page</a>

Однако, приведенный скрипт пытается решить проблему «в лоб», без учета различных особенностей сайта. Скажем, если у вас имеется несколько столбцов или длинный заголовок, содержащий разнообразные изображения, текст и другие элементы, то распечатка страницы при помощи скрипта окажется неоптимальной. В таком случае можно добавить определенные стили, которые разграничили бы печатное содержимое (текст) и непечатное (заголовок, сайдбар и т.д.). Для этого придется создать отдельную таблицу стилей print.css, и добавить к ней следующие важные правила:

#sidebar, #footer { display:none; }

Здесь мы, конечно же, предполагаем, что сайдбар обладает атрибутом id=’sidebar’, а футер — id=’footer’.

Теперь добавим правила, относящиеся к представлению текста:

#content {
width:100%;
margin:0;
padding:0;
fl oat:none;
background: #fff;
color: #222;
}
a:link, a:visited { color: #000; }

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

Останется лишь подключить вновь созданную таблицу в header.php:

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

Подключение дополнительной стилевой таблицы должно стоять ниже подключения стандартной. Вы наверно заметили, что в данном примере я использовал параметр ‘stylesheet_directory’. Объясняется это тем, что стилевую таблицу print.css логичнее было бы расположить в той же самой папке, что и стандартный файл style.css.

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Предыдущая запись:

Следующая запись: