Is u WordPress-blog drukkervriendelik?

Soos ek gister se pos voltooi het op Sosiale media-ROI, Ek wou 'n voorskou daarvan aan Clint Page, uitvoerende hoof van Dotster, stuur. Toe ek na 'n PDF gedruk het, was die bladsy 'n gemors!

Daar is nog steeds baie mense wat daarvan hou om afskrifte van 'n webwerf af te druk om dit te deel, later te verwys, of net 'n paar aantekeninge in te dien. Ek het besluit dat ek my blog drukvriendelik wil maak. Dit was baie makliker as wat ek gedink het dit sou wees.

Hoe u u gedrukte weergawe vertoon:

U moet die basiese beginsels van CSS verstaan ​​om dit te bereik. Die moeilikste is om die ontwikkelaarskonsole van u blaaier te gebruik om die inhoud te wys, weg te steek en aan te pas sodat u u CSS kan skryf. In Safari moet u die ontwikkelaarhulpmiddels aktiveer, regsklik op u bladsy en kies Inspekteer inhoud. Dit wys u die element en CSS wat verband hou.

Safari het 'n lekker opsie om die gedrukte weergawe van u bladsy in die webinspekteur te vertoon:

Hoe u u WordPress-blog drukvriendelik kan maak:

Daar is 'n paar verskillende maniere om u styling vir druk te spesifiseer. Een daarvan is net om 'n gedeelte in u huidige stylblad by te voeg wat spesifiek is vir die mediasoort "druk".

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

Die ander manier is om 'n spesifieke stylblad by u kindertema te voeg wat die drukopsies spesifiseer. Dit is hoe:

1. Laai 'n bykomende stylblad op na u temagids genaamd druk.css.
2. Voeg 'n verwysing na die nuwe stylblad in u Organisch lêer. U moet seker maak dat u print.css-lêer na u ouer- en kind-stylblad gelaai word, sodat die style laas gelaai word. Ek het ook 'n prioriteit van 100 op hierdie laai geplaas, sodat dit laai na die inprop. Hier is hoe my verwysing lyk:

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

Nou kan u die print.css-lêer aanpas en al die elemente wat u wil versteek of vertoon, verander. Op my webwerf verberg ek byvoorbeeld al die navigasie, koptekste, sybalke en voetskrifte sodat slegs die inhoud wat ek wil vertoon, gedruk word.

My druk.css lêer lyk soos volg. Let op dat ek ook marges bygevoeg het, 'n metode wat deur moderne blaaiers aanvaar word:

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

Hoe die drukweergawe lyk

Hier is hoe my drukweergawe lyk as dit van Google Chrome afgedruk word:

Gevorderde drukstyling

Dit is belangrik om daarop te let dat nie alle blaaiers gelyk is nie. U kan elke blaaier toets om te sien hoe u bladsy daaroor lyk. Sommige ondersteun selfs sommige gevorderde bladsy-funksies om inhoud by te voeg, kantlyne en bladsygroottes in te stel, asook 'n aantal ander elemente. Smashing Magazine het 'n baie gedetailleerde artikel oor hierdie gevorderde druk opsies.

Hier is 'n paar bladsy-uitlegbesonderhede wat ek opgeneem het om 'n kopiereg-vermelding links onder, 'n bladsyteller regs onder en die dokumenttitel links bo op elke bladsy toe te voeg:

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