Is jo WordPress-blog printerfreonlik?

Ofdrukke CSS

Doe't ik de post fan juster foltôge Sosjale media ROI, Ik woe in foarbyld derfan stjoere nei Dotster CEO Clint Page. Doe't ik lykwols op in PDF drukte, wie de pagina in rommel!

D'r binne noch in soad minsken dy't d'r kopyen fan in webside ôfdrukke wolle om te dielen, letter te ferwizen, of gewoan mei guon notysjes yn te tsjinjen. Ik besleat dat ik myn blog printerfreonlik woe meitsje. It wie folle makliker dan ik tocht dat it soe wêze.

Hoe kinne jo jo printferzje werjaan:

Jo moatte de basis fan CSS begripe om dit te berikken. It heulste diel is it brûken fan de ûntwikkelderskonsole fan jo browser om de werjefte te testen, te ferbergjen en oan te passen sadat jo jo CSS kinne skriuwe. Yn Safari moatte jo de ûntwikkelders ark ynskeakelje, rjochts klikke op jo pagina en selektearje Ynhâld ynspektearje. Dat sil jo it assosjeare elemint en CSS sjen litte.

Safari hat in leuke lytse opsje om de printe ferzje fan jo side wer te jaan yn 'e webynspekteur:

Safari - Ofdruk werjaan yn webynspekteur

Hoe kinne jo jo WordPress-blog printerfreonlik meitsje:

D'r binne in pear ferskillende manieren om jo styling op te jaan foar print. Ien is gewoan in seksje ta te foegjen yn jo hjoeddeistige stylblêd dat spesifyk is foar it mediatype "ôfdruk".

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

De oare manier is om in spesifyk stylblêd ta te heakjen oan jo bernetema dat de printopsjes oantsjut. Hjir is hoe:

  1. Upload in ekstra stylblêd nei jo tema-map neamd print.css.
  2. Foegje in ferwizing ta oan it nije stylblêd yn jo functions.php map. Jo wolle derfoar soargje dat jo print.css-bestân wurdt laden nei jo stylblêd fan jo âlder en bern, sadat de stilen as lêste wurde laden. Ik haw ek in prioriteit fan 100 pleatst op dizze laden, sadat it nei plugin laden Hjir is myn referinsje:

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

No kinne jo it print.css-bestân oanpasse en alle eleminten feroarje dy't jo wolle ferburgen of oars werjaan. Op myn side ferbergje ik bygelyks alle navigaasje, kopteksten, sydbalken en foetteksten, sadat allinich de ynhâld dy't ik werjaan wol wurdt ôfprinte.

My print.css bestân sjocht der sa út. Let op dat ik ek marzjes tafoege, in metoade dy't aksepteare is troch moderne browsers:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

Hoe sjocht de Ofdruk werjefte derút

Hjir is hoe myn printwerjefte derút sjocht as ôfprinte fan Google Chrome:

WordPress Ofdruk werjefte

Avansearre Print Styling

It is wichtich om te notearjen dat net alle browsers gelyk binne makke. Jo wolle miskien elke browser testen om te sjen hoe't jo pagina der oerhinne sjocht. Guon stypje sels guon avansearre pagina-funksjes om ynhâld ta te foegjen, marzjes en sidegrutte yn te stellen, lykas in oantal oare eleminten. Smashing Magazine hat in heul detaillearre artikel oer dizze avansearre print opsjes.

Hjir binne wat details oer de side-yndieling dy't ik opnommen haw om in copyright-fermelding ta te foegjen linksûnder, in paginateller rjochtsûnder en de dokumintitel linksboppe op elke pagina:

@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 Comments

  1. 1
  2. 2

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.