Ці зручны ваш блог WordPress для друку?

Раздрукаваць CSS

Як я скончыў учорашні пост на Рэнтабельнасць інвестыцый у сацыяльныя сеткі, Я хацеў адправіць яго папярэдні прагляд генеральнаму дырэктару Dotster Клінту Пэйджу. Аднак, калі я надрукаваў у PDF, на старонцы быў беспарадак!

Ёсць яшчэ шмат людзей, якія любяць раздрукоўваць копіі вэб-сайтаў, каб дзяліцца імі, спасылацца пазней ці проста пісаць з нататкамі. Я вырашыў, што хачу зрабіць свой блог зручным для друку. Гэта было нашмат прасцей, чым я думаў.

Як адлюстраваць версію для друку:

Для гэтага вам трэба зразумець асновы CSS. Самая складаная частка - выкарыстанне кансолі распрацоўшчыка вашага браўзэра для тэставання адлюстравання, схавання і налады змесціва, каб вы маглі пісаць CSS. У Safari вам трэба ўключыць інструменты распрацоўніка, пстрыкнуць правай кнопкай мышы на вашай старонцы і выбраць Праверыць змест. Гэта пакажа вам звязаны элемент і CSS.

У Safari ёсць добры маленькі варыянт для адлюстравання версіі для друку вашай старонкі ў вэб-інспектары:

Safari - Прагляд друку ў Web Inspector

Як зрабіць свой блог 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. Загрузіце дадатковую табліцу стыляў у каталог тэм пад назвай 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 для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.