Удобен ли е вашият WordPress блог за печат?

Отпечатайте CSS

Като завърших вчерашната публикация на Възвръщаемост на инвестициите в социалните медии, Исках да изпратя предварителен преглед на изпълнителния директор на Dotster Clint Page. Когато отпечатах в PDF, обаче, страницата беше объркана!

Все още има много хора, които обичат да отпечатват копия на уебсайт, за да споделят, да се позовават по-късно или просто да пишат с някои бележки. Реших, че искам да направя блога си удобен за печат. Беше много по-лесно, отколкото си мислех, че ще бъде.

Как да покажете вашата версия за печат:

За да постигнете това, ще трябва да разберете основите на CSS. Най-трудната част е използването на конзолата за разработчици на браузъра ви, за да тествате показването, скриването и коригирането на съдържанието, така че да можете да напишете своя CSS. В Safari ще трябва да активирате инструментите за разработчици, щракнете с десния бутон върху страницата си и изберете Проверка на съдържанието. Това ще ви покаже свързания елемент и CSS.

Safari има хубава малка опция за показване на печатната версия на вашата страница в уеб инспектора:

Safari - Изглед за печат в Web Inspector

Как да направите своя блог на 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; 
     }
}

Другият начин е да добавите специфичен лист със стилове към вашата дъщерна тема, който определя опциите за печат. Ето как:

  1. Качете допълнителна таблица със стилове във вашата директория с теми, наречена print.css.
  2. Добавете препратка към новия лист със стилове във вашия 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:

Изглед за печат на WordPress

Разширен стил на печат

Важно е да се отбележи, че не всички браузъри са създадени еднакви. Може да искате да тествате всеки браузър, за да видите как изглежда вашата страница в тях. Някои дори поддържат някои разширени функции на страници за добавяне на съдържание, задаване на полета и размери на страниците, както и редица други елементи. 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;
  }
}

2 Коментари

  1. 1
  2. 2

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.