Kas teie WordPressi ajaveeb on printerisõbralik?

Prindi CSS

Nagu ma eile postituse lõpetasin Sotsiaalse meedia investeeringutasuvus, Tahtsin selle eelvaate saata Dotsteri tegevjuhile Clint Pageile. Kui ma PDF-ile printisin, oli leht aga jama!

Seal on endiselt palju inimesi, kellele meeldib printida veebisaidi koopiad, et neid hiljem jagada, viidata või lihtsalt mõne märkusega faili lisada. Otsustasin, et tahan muuta oma ajaveebi printerisõbralikuks. See oli palju lihtsam kui arvasin.

Prindiversiooni kuvamine:

Selle saavutamiseks peate mõistma CSS-i põhitõdesid. Kõige keerulisem on oma brauseri arendajakonsooli kasutamine sisu kuvamise, peitmise ja kohandamise testimiseks, et saaksite oma CSS-i kirjutada. Safaris peate lubama arendaja tööriistad, paremklõpsake oma lehel ja valige Kontrolli sisu. See näitab teile seostatud elementi ja CSS-i.

Safaril on väike kena võimalus oma lehe trükiversiooni kuvamiseks veebiinspektoris:

Safari - veebivaaturi printivaade

Kuidas muuta oma WordPressi ajaveeb printerisõbralikuks:

Prinditöö stiilide määramiseks on paar erinevat viisi. Üks on lihtsalt lisada oma praegusesse stiililehte jaotis, mis on spetsiifiline meediumitüübi “print” jaoks.

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

Teine võimalus on lisada lapseteemale konkreetne stiilileht, mis määrab printimisvalikud. Nii toimige järgmiselt.

  1. Laadige oma teemakataloogi nimega täiendav stiilileht üles print.css.
  2. Lisage viide uuele stiililehele functions.php faili. Veenduge, et fail print.css laaditakse pärast vanema ja lapse stiililehte, et selle laadid laaditaks viimasena. Panin sellele laadimisele ka prioriteedi 100, nii et see laaditakse pärast pistikprogrammi. Minu viide näeb välja selline:

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

Nüüd saate faili print.css kohandada ja muuta kõiki peidetavaid või erinevalt kuvatavaid elemente. Näiteks peidan oma saidil kogu navigeerimise, päised, külgribad ja jalused nii, et prinditakse ainult sisu, mida soovin kuvada.

My print.css fail näeb välja selline. Pange tähele, et lisasin ka veerised, meetodi, mida tänapäevased brauserid aktsepteerivad:

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

Kuidas prindivaade välja näeb

Google Chrome'ist printimisel näeb minu prindivaade välja järgmine:

WordPressi printimisvaade

Täpsem printimisviis

Oluline on märkida, et mitte kõik brauserid ei ole võrdsed. Võite testida kõiki brausereid, et näha, kuidas teie leht neid välja näeb. Mõni toetab isegi mõningaid täpsemaid lehefunktsioone sisu lisamiseks, veeriste ja lehesuuruste määramiseks ning mitmete muude elementide lisamiseks. Ajakirjas Smashing on väga üksikasjalik artikkel nende täpsemate trükiste kohta võimalusi.

Siin on mõned lehe paigutuse üksikasjad, mille lisasin autoriõiguse mainimise vasakusse alanurka, leheloenduri paremasse alanurka ja dokumendi pealkirja iga lehe vasakusse ülanurka:

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

  1. 1
  2. 2

Mis sa arvad?

Sellel saidil kasutatakse rämpsposti vähendamiseks Akismetit. Vaadake, kuidas teie andmeid töödeldakse.