Onko WordPress-blogisi tulostinystävällinen?

Kuten sain eilisen postauksen valmiiksi Sosiaalisen median ROI, Halusin lähettää sen esikatselun Dotsterin toimitusjohtaja Clint Page: lle. Kun kuitenkin tulostin PDF-tiedostoksi, sivu oli sotkuinen!

Siellä on edelleen monia ihmisiä, jotka haluavat tulostaa kopioita verkkosivustosta jakamista, viittaamista myöhemmin tai vain tiedostojen tekemistä muistiinpanojen kanssa. Päätin, että halusin tehdä blogistani tulostinystävällisen. Se oli paljon helpompaa kuin luulin olevan.

Tulostusversion näyttäminen:

Sinun on ymmärrettävä CSS: n perusteet tämän saavuttamiseksi. Vaikeinta on käyttää selaimesi kehittäjäkonsolia sisällön näyttämisen, piilottamisen ja säätämisen testaamiseen, jotta voit kirjoittaa CSS: n. Safarissa sinun on otettava käyttöön kehittäjätyökalut, napsautettava sivua hiiren kakkospainikkeella ja valittava Tarkista sisältö. Se näyttää elementin ja CSS: n.

Safarilla on mukava pieni vaihtoehto näyttää sivusi tulostettu versio verkkotarkastuksessa:

Kuinka tehdä WordPress-blogistasi tulostinystävällinen:

On olemassa pari erilaista tapaa määrittää tyylisi tulostusta varten. Yksi on vain lisätä osa nykyiseen tyylitaulukkoon, joka on ominaista tulostustyypille.

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

Toinen tapa on lisätä lapsiteemaan tietty tyylitaulukko, joka määrittää tulostusasetukset. Toimi seuraavasti:

1. Lataa ylimääräinen tyylitaulukko teemahakemistoon nimeltä print.css.
2. Lisää viite uuteen tyylitaulukkoon functions.php tiedosto. Varmista, että print.css -tiedosto ladataan vanhemman ja alityylityylin jälkeen, jotta sen tyylit ladataan viimeisenä. Asetin myös tälle lataukselle prioriteetin 100, jotta se latautuu laajennuksen jälkeen. Tältä referenssini näyttää:

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

Nyt voit mukauttaa print.css-tiedostoa ja muokata kaikkia piilotettavia tai näytettäviä elementtejä eri tavalla. Esimerkiksi sivustollani piilotan kaikki navigointi-, otsikot, sivupalkit ja alatunnisteet siten, että vain sisältö, jonka haluan näyttää, tulostetaan.

My print.css tiedosto näyttää tältä. Huomaa, että lisäsin myös marginaalit, joka on nykyaikaisten selainten hyväksymä menetelmä:

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

Kuinka tulostusnäkymä näyttää

Tulostusnäkymä näyttää tältä, jos se tulostetaan Google Chromesta:

Edistynyt tulostustyyli

On tärkeää huomata, että kaikki selaimet eivät ole tasavertaisia. Haluat ehkä testata jokaisen selaimen nähdäksesi, miltä sivusi näyttää eri sivustoilla. Jotkut jopa tukevat joitakin sivun lisäominaisuuksia sisällön lisäämiseen, marginaalien ja sivukokojen asettamiseen sekä useita muita elementtejä. Smashing Magazine on erittäin yksityiskohtainen artikkeli näistä edistyneistä painatuksista vaihtoehtoja.

Tässä on joitain sivun asettelutietoja, jotka olen lisännyt lisätäkseni tekijänoikeuden maininnan vasemmassa alakulmassa, sivun laskurin oikeassa alakulmassa ja asiakirjan nimen jokaisen sivun vasemmassa yläkulmassa:

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