Удобен ли е вашият WordPress блог за печат?
Като завърших вчерашната публикация на Възвръщаемост на инвестициите в социалните медии, Исках да изпратя предварителен преглед на изпълнителния директор на Dotster Clint Page. Когато отпечатах в PDF, обаче, страницата беше объркана!
Все още има много хора, които обичат да отпечатват копия на уебсайт, за да споделят, да се позовават по-късно или просто да пишат с някои бележки. Реших, че искам да направя блога си удобен за печат. Беше много по-лесно, отколкото си мислех, че ще бъде.
Как да покажете вашата версия за печат:
За да постигнете това, ще трябва да разберете основите на CSS. Най-трудната част е използването на конзолата за разработчици на браузъра ви, за да тествате показването, скриването и коригирането на съдържанието, така че да можете да напишете своя CSS. В Safari ще трябва да активирате инструментите за разработчици, щракнете с десния бутон върху страницата си и изберете Проверка на съдържанието. Това ще ви покаже свързания елемент и CSS.
Safari има хубава малка опция за показване на печатната версия на вашата страница в уеб инспектора:
Как да направите своя блог на WordPress удобен за печат:
Има няколко различни начина за определяне на вашия стил за печат. Едното е просто да добавите раздел в текущата си таблица със стилове, който е специфичен за типа носител „print“.
@media print {
header,
nav,
aside {
display: none;
}
#primary {
width: 100% !important
}
.hidden-print,
.google-auto-placed,
.widget_eu_cookie_law_widget {
display: none;
}
}
Другият начин е да добавите специфичен стилов лист към вашата дъщерна тема, който определя опциите за печат. Ето как:
- Качете допълнителна таблица със стилове във вашата директория с теми, наречена print.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 print.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;
}
}