Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

А вы сделали версию сайта для печати

Здравствуйте уважаемые коллеги веб-мастера, сегодня на «Progress-project», как вы наверное уже догадались речь у нас с вами пойдёт о том, как сделать для своего сайта или блога версию для печати.

Если вы публикуете на своём ресурсе, какой либо полезный материал к примеру; диету, маршрут, рецепт или может быть какую то инструкцию. То ваши читатели непременно захотят её распечатать. И если заранее не позаботиться об этом в печать у них также уйдут и все ваши баннеры, меню, навигация и так далее и в лучшем случае всё это богатство может попросту не поместиться на стандартном листе для принтера формата А4. Но часто происходит и так, что при распечатке веб-сайта все его дополнительные элементы наплывают на основной материал. В результате чего на листе практически ничего нельзя разобрать.

Поэтому наша задача сделать так, чтобы в печать уходил только действительно полезный контент.

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

Сегодня ещё не очень многие веб-мастера организовывают на своих сайтах версию для печати. Но между тем поисковые системы при ранжировании вполне активно учитывают данный фактор.

В подтверждение давайте проверим abrek-ad-abra.ru в каком либо сервисе, например: analiz-saita.net.

Вот, что нам выдаёт данный сервис в разделе «Юзабилити» при неиспользовании версии для печати веб сайта:

И отсюда же становится ясно, что для поисковых систем необходимо обязательное наличие специально созданного css файл отвечающего за печать.

Как сделать версию сайта для печати

Сегодня в сети имеется просто огромное количество различной информации о том, как сделать версию сайта для печати. Но, как правило она подразумевает установку какого либо спец-плагина на подобии: «WP-Print», данный плагин автоматически генерирует печатную версию страницы при условии наличия определённых настроек ЧПУ.

Я лично не считаю оправданным устанавливать на блог дополнительный плагин из за одной лишь его печатной версии. Да если честно то я нигде и не видел, чтобы кто то его использовал на своём ресурсе.

Вторым по популярности способом создания печатной версии веб-сайта в сети идёт вариант с добавлением на свой блог скрипта от сервиса: «PrintFriendly», с генерировать его можно здесь.

Устанавливается он в том месте где необходимо вывести кнопку для печати, как правило это подвал либо сайт-бар. При клике по кнопке посетителю открывается окошко с предложением распечатать веб-страницу удобным для него способом.

Так же с помощью сервиса: «PrintFriendly», можно распечатать страницу в режиме онлайн абсолютно любого ресурса указав её адрес в соответствующем поле.

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

Специальный CSS файл для печатной версии веб-сайта

Намой взгляд данный вариант создания печатной версии сайта или блога самый лучший, мы не нагружаем ресурс дополнительными плагинами или скриптами, получаем уверенность, что в печать будет уходить только исключительно полезный контент и демонстрируем поисковым системам наличие css файла для печати.

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

Итак, в каком либо редакторе лучше всего для этого подходит notepad++, создаём и сохраняем на компьютер новый пустой файл под названием «print» и расширением «.css», далее можно уже сразу загрузить его на хостинг в файлы вашей темы туда же где находится и стандартный файл «style.css».

После того, как наш новый файл: «print.css» был удачно загружен на сервер, через админ-панель блога открываем для редактирования файл темы: «header.php» и сразу после строки подключающей стандартный css файл темы вставляем:

<link rel="stylesheet" type="text/css" media="print" href="https://название_сайта/wp-content/themes/название_темы/print.css"/>

Изменив «название_сайта» и «название_темы» на реальные названия вашего блога и его темы.

Теперь при печати страниц блога браузеры ваших посетителей будут знать, что им необходимо строго придерживаться значений именно файла: «print.css».

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

Лучше всего для этого воспользоваться каким либо дополнением для браузера, для: Firefox я использую: Firebug, но можно конечно же воспользоваться и стандартным установленным в браузере по умолчанию.

Наводим на какой либо элемент или блок сайта подлежащий скрытию курсором и кликаем по правой кнопке мыши, далее выбераем: «просмотр кода элемента» либо «исследователь элемент», но или, что то подобное.

Копируем куда либо данный класс элемента и идём дальше.

Думаю, что немного повозившись справятся с данной задачей все.

Далее все классы скрываемых элементов блога прописываем, через запятую в файл: «print.css» и придаём следующие значение:

.sidebar, .footer, .header, .sb_subs {
display: none;
}

Всё после этого указанные объекты в печать попадать уже не будут.

Самый простой способ посмотреть, как будет выглядеть страница вашего веб-сайта при печати это выбрав в меню браузера: «Печатать»

В вашем браузере конечно это может выглядеть немного иначе.

Дополнительные значения css стилей для печати

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

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

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

А именно прописываем в файл print.css следующую строку:

a:after {content:" <" attr(href) ">";

Теперь после каждого анкора будет выводиться полный адрес ссылки, например вместо:

  • Progress-project

будет:

  • Progress-project https://abrek-ad-abra.ru/

Чтобы данное преображение происходило только с исходящими ссылками на сторонние ресурсы код нужен такой:

a[href^=http]:after {content:" <" attr(href) ">";

сли у вас на сайте довольно объёмные посты их можно разделить на каком либо определённом заголовке, то есть указанный в коде заголовок будет печататься на новом листе:

h3 { page-break-before: always; }

Для печати списка постов применяйте следующий код который поможет разбить записи каждую на новый лист:

article + article { page-break-before: always; }

Но и напоследок хочу поделиться с вами ещё одним кодом который устанавливается в какое либо место шаблона и выводит ссылку на печать:

<a href="javaScript:window.print();">Распечатать эту страницу</a>

На сегодня у меня всё если вы знаете ещё какие либо приёмы или способы печати веб-сайта делитесь пожалуйста ими в комментариях.

Желаю всего доброго до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-21

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог