Onko WordPress-blogisi tulostinystävällinen?

Kun sain eilisen viestin 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:

Tämän saavuttamiseksi sinun on ymmärrettävä CSS: n perusteet. Vaikeinta on käyttää selaimesi kehittäjäkonsolia sisällön näyttämisen, piilottamisen ja säätämisen testaamiseksi, jotta voit kirjoittaa CSS: n. Safarissa sinun on otettava kehittäjätyökalut käyttöön, napsauttamalla sivua hiiren kakkospainikkeella ja valitsemalla Tarkasta sisältö. Se näyttää yhdistetyn 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ä lapsesi teemaan tietty tyyli, joka määrittää tulostusasetukset. Näin:

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 lapsen tyylitaulukon jälkeen, jotta sen tyylit ladataan viimeisenä. Asetin myös 100: n prioriteetin tälle lataukselle, jotta se latautuu laajennuksen jälkeen. Viitteeni näyttää tältä:

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, menetelmä, jonka modernit selaimet hyväksyvät:

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ää

Näin tulostusnäkymä näyttää, kun se tulostetaan Google Chromesta:

Edistynyt tulostustyyli

On tärkeää huomata, että kaikkia selaimia ei luoda tasavertaisesti. Haluat ehkä testata jokaisen selaimen nähdäksesi, miltä sivusi näyttää niistä. Jotkut jopa tukevat joitain sivun lisäominaisuuksia sisällön lisäämiseksi, marginaalien ja sivukokojen sekä useiden muiden elementtien lisäämiseksi. Smashing Magazine on erittäin yksityiskohtainen artikkeli näistä edistyneistä painatuksista vaihtoehtoja.

Tässä on joitain sivun asettelutietoja, jotka olen sisällyttänyt lisäämään tekijänoikeusmerkinnän vasempaan alakulmaan, sivulaskurin oikeassa alakulmassa ja asiakirjan otsikon 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) " 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;
  }
}