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

Печати CSS

Како што го завршив вчерашниот пост на ROI на социјалните медиуми, Сакав да испратам преглед на истиот до извршниот директор на Дотстер, Клинт Пејџ. Кога печатев на PDF, страницата беше хаос!

Сè уште има многу луѓе што сакаат да печатат копии на веб-страница за споделување, повикување подоцна или само датотека со некои белешки. Одлучив дека сакам да го направам мојот блог погоден за печатење. Беше многу полесно отколку што мислев дека ќе биде.

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

Accompе треба да ги разберете основите на CSS за да го постигнете ова. Најтешкиот дел е користење на конзолата за развој на вашиот прелистувач за тестирање на прикажување, криење и прилагодување на содржината за да можете да ја напишете вашата CSS. Во Safari, ќе треба да ги овозможите алатките за програмери, десен клик на вашата страница и изберете Inspect Content. Тоа ќе ви ги покаже поврзаниот елемент и CSS.

Safari има убава мала опција да ја прикаже печатената верзија на вашата страница во веб-инспекторот:

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; 
     }
}

Другиот начин е да додадете специфичен лист за стилот на вашето дете што ги специфицира опциите за печатење. Еве како:

  1. Поставете дополнителен лист на стилови во вашиот директориум за теми наречен печати.css.
  2. Додадете упатување на новиот лист на стилови во вашиот functions.php досие. Wantе сакате да се осигурате дека вашата датотека 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:

Преглед на печатење во 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) " Highbridge, 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

    Интересно Даглас, само што гледав на страницата наречена PrintFriendly кога го прочитав твојот пост. Тоа го прави многу од ова за вас и за која било друга локација што сакате да ја испечатите. Прилично слатко, проверете:

    http://www.printfriendly.com

  2. 2

Што мислите?

Оваа страница користи Akismet за намалување на спам. Научете како се обработува вашиот коментар.