Как сделать ваш сайт WordPress удобным для печати в кратчайшие сроки

Ваш веб-сайт WordPress совместим с принтером? Если вы не понимаете, о чем идет речь, возможно, это не ...

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

В этом посте вы узнаете, что делает веб-сайт удобным для печати, а также как вы можете сделать свой собственный веб-сайт WordPress удобным для печати с помощью CSS или плагина.

Что делает веб-сайт удобным для печати?

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

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

Кроме того, иногда шрифты и их размер, используемые на вашем веб-сайте, не соответствуют размерам печатной страницы.

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

По этой причине создание вашего веб-сайта для печати в основном включает в себя:

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

Так как же на самом деле это сделать? Давайте разберемся…

Как сделать ваш сайт удобным для печати с помощью CSS

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

Базовый строительный блок CSS для вашего удобного для печати контента:

 @media print {
/ * Здесь идут стили для конкретного принтера * /
}

Любые стили CSS, которые вы добавляете в это объявление мультимедиа, будут влиять только на печатную версию вашей страницы.

Куда вы оттуда пойдете? Что ж, сложно дать точный ответ, потому что многое зависит от ваших конкретных предпочтений и темы.

Но в целом вот некоторые вещи, которые вы захотите делать с помощью CSS:

• Используйте display: none для удаления таких элементов, как боковые панели, меню навигации, формы поиска и всего остального, что не помогает на печатной странице.
• Установите четкий размер шрифта. Таблица точек к пикселям компании Reed Design полезна для выяснения того, как пиксели соотносятся с размерами шрифтов, с которыми вы знакомы в более удобных для печати программах, таких как Microsoft Word или Google Docs.
• Используйте шрифт с засечками для стилей вашего принтера, так как большинству людей легче читать на распечатанной странице.
• Измените цвета, особенно если вы используете насыщенный чернилами цвет фона. Большинство браузеров по умолчанию использует белый фон во многих ситуациях, но лучше убедиться, что любая проблема может привести к потере тонны чернил.

Выполнив всего четыре вышеуказанных действия, у вас уже должен быть удобный для печати веб-сайт. Но если вы хотите пойти еще дальше, вы также можете применить более продвинутую тактику. Например, вы можете использовать: after, чтобы распечатать URL-адреса любых ссылок. Это удаляет ненужные медиафайлы из сообщений (например, видео - не очень полезно в печати) и многое другое.

Если вам нужны более конкретные примеры удобных для печати стилей CSS в действии, неплохо было бы прочитать эту публикацию из журнала Smashing Magazine, потому что они проходят через всю страницу с примером.

Некоторые плагины WordPress, чтобы сделать ваш сайт удобным для печати

Если вы предпочитаете не пачкать руки с CSS, вы можете, как обычно, обратиться за помощью к плагину WordPress. У вас есть множество разных вариантов, но вот пара рекомендаций.

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

WP-Print

WP-Print - популярный бесплатный плагин, который поможет вам создать удобный для печати сайт WordPress. Помимо добавления специальной кнопки Print This , плагин также предоставляет удобный интерфейс. Это всегда нужно для настройки многих параметров, которые я обсуждал в предыдущем разделе CSS.

Мне было любопытно посмотреть, как этот плагин работает с Divi и Divi Builder. Итак, я создал быстрый тестовый пост, чтобы увидеть, как все работает. Вот как выглядит веб-версия моего тестового поста:

А вот как выглядит версия этого сообщения для печати ( помните - вы можете настроить работу изображений - в моем примере просто используется значение по умолчанию ):

Что особенно приятно в плагине, так это то, что он автоматически добавляет цитаты для внутренних ссылок. Он также удаляет все параметры навигации.

Просто имейте в виду - вам должно быть удобно копаться в файлах шаблонов вашей темы, чтобы добавить кнопку «Распечатать» . Это в значительной степени просто копирование и вставка, но новичков это может немного запутать.

Цена: Бесплатно | Больше информации

Печать, PDF, электронная почта через PrintFriendly

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

Если это не проблема или вы хотите перейти на профессиональную версию, продолжайте читать ...

Плагин WordPress PrintFriendly интегрирует службу PrintFriendly на ваш сайт. Это классная услуга, которая, помимо удаления посторонних частей вашей темы WordPress, также дает вашим пользователям некоторый контроль над тем, как выглядит их печатная страница.

Как и WP-Print, плагин дает вам кнопку печати. При нажатии этой кнопки открывается окно лайтбокса. Здесь пользователи могут предварительно просмотреть версию для печати, а также настроить размер изображения и текста:

В нем нет классной функции цитирования ссылок из WP-Print, но я думаю, что это здорово, потому что он предлагает вашим посетителям контроль. И еще одна приятная вещь - это то, что это также позволяет читателям легко делиться или загружать ваш пост в формате PDF или по электронной почте.

Цена: Бесплатно с рекламной поддержкой. Pro-версия начинается от 4 долларов в месяц | Больше информации

Подведение итогов

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

Теперь к вам - вы когда-нибудь печатали контент с веб-сайта? Что вам нравится и / или не нравится в версиях для печати большинства веб-сайтов?

Миниатюрное изображение статьи от AVIcon / shutterstock.com