Ваш блог WordPress удобен для печати?
Поскольку я завершил вчерашний пост на ROI в социальных сетях, Я хотел отправить предварительный просмотр его генеральному директору Dotster Клинту Пейджу. Однако когда я распечатал в PDF-файл, страница была в беспорядке!
Есть еще много людей, которые любят распечатывать копии веб-сайта, чтобы поделиться ими, ссылаться позже или просто сохранить в виде заметок. Я решил, что хочу сделать свой блог удобным для печати. Это было намного проще, чем я думал.
Как отобразить версию для печати:
Для этого вам необходимо понимать основы CSS. Самая сложная часть - использовать консоль разработчика вашего браузера для тестирования отображения, скрытия и настройки содержимого, чтобы вы могли написать свой CSS. В Safari вам нужно включить инструменты разработчика, щелкнуть страницу правой кнопкой мыши и выбрать «Проверить содержимое». Это покажет вам связанный элемент и CSS.
В Safari есть небольшая приятная опция для отображения печатной версии вашей страницы в веб-инспекторе:
Как сделать свой блог WordPress доступным для печати:
Есть несколько разных способов указать стиль для печати. Один из них - просто добавить в вашу текущую таблицу стилей раздел, специфичный для типа носителя «печать».
@media print {
header,
nav,
aside {
display: none;
}
#primary {
width: 100% !important
}
.hidden-print,
.google-auto-placed,
.widget_eu_cookie_law_widget {
display: none;
}
}
Другой способ - добавить в дочернюю тему конкретную таблицу стилей, в которой указаны параметры печати. Вот как:
- Загрузите дополнительную таблицу стилей в каталог вашей темы под названием печать.css.
- Добавьте ссылку на новую таблицу стилей в свой functions.php файл. Вам нужно убедиться, что ваш файл print.css загружается после родительской и дочерней таблиц стилей, чтобы его стили загружались последними. Я также установил приоритет 100 для этой загрузки, чтобы она загружалась после плагина. Вот как выглядит моя ссылка:
function theme_enqueue_styles() {
global $wp_version;
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);
Теперь вы можете настроить файл print.css и изменить все элементы, которые вы хотите скрыть или по-разному отображать. На моем сайте, например, я скрываю всю навигацию, заголовки, боковые панели и нижние колонтитулы, чтобы печатался только контент, который я хочу отобразить.
My печать.css файл выглядит так. Обратите внимание, что я также добавил поля - метод, принятый в современных браузерах:
header,
nav,
aside {
display: none;
}
#primary {
width: 100% !important
}
.hidden-print,
.google-auto-placed,
.widget_eu_cookie_law_widget {
display: none;
}
Как выглядит режим печати
Вот как выглядит мое представление для печати, если оно распечатано из Google Chrome:
Расширенный стиль печати
Важно отметить, что не все браузеры одинаковы. Вы можете протестировать каждый браузер, чтобы увидеть, как ваша страница выглядит в них. Некоторые даже поддерживают некоторые расширенные функции страницы для добавления содержимого, установки полей и размеров страницы, а также ряда других элементов. Журнал Smashing Magazine очень подробная статья об этих расширенных печатных настройки.
Вот некоторые детали макета страницы, которые я добавил, чтобы добавить упоминание об авторских правах в нижнем левом углу, счетчик страниц в правом нижнем углу и заголовок документа в верхнем левом углу каждой страницы:
@page {
size: 5.5in 8.5in;
margin: 0.5in;
}
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "© " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
font-size: 9pt;
color: #333;
}
@bottom-right {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: counter(page);
font-size: 9pt;
}
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 9pt;
color: #333;
}
}