Content Marketing

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

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

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.