Как сделать версию для печати на сайт
Я уже рассказывала ранее как распечатать страницу из интернета, но это была статья для интернет-серферов, сегодня же я расскажу о том, как вебмастерам сделать версию для печати своего блога, чтобы упростить жизнь ваших посетителей, которые хотели бы читать ваши статьи и в печатном виде.
Конечно, не для всех сайтов есть необходимость добавлять кнопку “Печать” и создавать упрощенную версию для печати. Особенно популярностью версии для печати пользуются на кулинарных сайтах, так как именно рецепты больше всего любят распечатывать интернет-пользователи. Версию для печати можно установить на сайты с инструкциями, в т.ч. и по использованию компьютерных программ, сайты с рефератами, картами, графиками, статистическими данными, с книгами и документами и другие.
Ранее я уже публиковала информацию как установить кнопку печать на сайт. Посмотрите различные варианты. Далее в этой статье речь пойдет не только о размещении кнопки для распечатывания веб-страницы, но и создании простой страницы для печати без лишних элементов для сайтов на wordpress и blogspot.
Как сделать версию для печати на wordpress
Это можно сделать с помощью простых плагинов:
- WP-Print
- Print Friendly and PDF – я рекомендую.
Установить каждый, из вышеперечисленных плагинов можно через админпанель WordPress. Для этого нужно воспользоваться поиском по плагинам в разделе Плагин –> Добавить новый.
Мне больше всего понравился плагин Print Friendly and PDF. В отличие от WP-Print, он не создает дублей страниц, которые бы пришлось закрыть от индексации в robots.txt. WP-Print не вырезает контекстную рекламу из тела статьи. Кроме того, плагин Print Friendly and PDF открывает версию для печати в всплывающем окне, в котором пользователь может найти удобные настройки печати.
Версия печати от Print Frienly and PDF:
Вы можете не пользоваться плагинами, тогда вам нужно будет установить код кнопки “Печать”. Вы можете воспользоваться этим кодом:
<a href="#" onClick="window.print()" class="printer"></a>
Отредактировать @media print в файле style.css
Значения @media print могут принять следующий вид:
@media print {
body {
background: #fff none !important;
color: #000;
}
#wrapper {
clear: both !important;
display: block !important;
float: none !important;
position: relative !important;
}
#header {
border-bottom: 2pt solid #000;
padding-bottom: 18pt;
}
#colophon {
border-top: 2pt solid #000;
}
#site-title,
#site-description {
float: none;
line-height: 1.4em;
margin: 0;
padding: 0;
}
#site-title {
font-size: 13pt;
}
.entry-content {
font-size: 14pt;
line-height: 1.6em;
}
.entry-title {
font-size: 21pt;
}
#access,
#branding img,
#respond,
.comment-edit-link,
.edit-link,
.navigation,
.page-link,
.widget-area {
display: none !important;
}
#container,
#header,
#footer {
margin: 0;
width: 100%;
}
#content,
.one-column #content {
margin: 24pt 0 0;
width: 100%;
}
.wp-caption p {
font-size: 11pt;
}
#site-info,
#site-generator {
float: none;
width: auto;
}
#colophon {
width: auto;
}
img#wpstats {
display: none;
}
#site-generator a {
margin: 0;
padding: 0;
}
#entry-author-info {
border: 1px solid #e7e7e7;
}
#main {
display: inline;
}
.home .sticky {
border: none;
}
}
Как сделать печатную версию блога Blogspot
В редакторе HTML шаблона блога найдите тег </head> и добавьте перед ним код вида:
<style media='print' type='text/css'>
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #google-ad, #backlinks-container, #navbar-iframe,.noprint {display: none;}
.post-body, .post, #content-wrapper,#main-wrapper,#main{width:100%;
font-size: 16px;}
</style>
Теперь найдите отрезок <data:post.body/> и добавьте код (смотри ниже) после него ( в этом случае кнопка окажется в конце поста) или перед ним (кнопка печати установится сразу после заголовка). А вот и сам код:
<b:if cond='data:blog.pageType == "item"'> <span style='background: url(https://1.bp.blogspot.com/-Mb4-GV4oQWg/T3dJoGapyrI/AAAAAAAAC_Y/VcQicRYQcW0/s1600/print-icon1.png) left no-repeat; padding-left: 25px;display:inline;'><a class="noprint" href='javascript:window.print()' rel="nofollow" >Распечатать</a></span> </b:if>
Для того, чтобы в ваших постах не публиковалась контекстная реклама, добавьте идентификатор google-ad к div, окружающим блоки рекламы. Тоже самое вы можете сделать с другими нежелательными блоками, которые не перестали отображаться после установки кодов.
Примечание. Если вы используете блок ссылок социальных сетей, в котором имеется кнопка распечатать, то у вас отпадает необходимость в первом шаге установки кнопки.
