Blogul dvs. WordPress este imprimabil?

Imprimați CSS

După cum am completat postarea de ieri pe ROI pe rețelele sociale, Am vrut să trimit o previzualizare a acestuia către CEO-ul Dotster, Clint Page. Totuși, când am tipărit într-un PDF, pagina era o mizerie!

Există încă mulți oameni cărora le place să tipărească copii ale unui site web pentru a le distribui, a le consulta mai târziu sau doar să le arhiveze cu niște note. Am decis că vreau să fac blogul meu imprimabil. A fost mult mai ușor decât credeam că va fi.

Cum să afișați versiunea dvs. tipărită:

Va trebui să înțelegeți elementele de bază ale CSS pentru a realiza acest lucru. Cea mai dificilă parte este utilizarea consolei de dezvoltator a browserului dvs. pentru a testa afișarea, ascunderea și ajustarea conținutului, astfel încât să puteți scrie CSS. În Safari, va trebui să activați instrumentele pentru dezvoltatori, să faceți clic dreapta pe pagina dvs. și să selectați Inspectați conținutul. Aceasta vă va arăta elementul și CSS asociate.

Safari are o mică opțiune frumoasă pentru a afișa versiunea tipărită a paginii dvs. în inspectorul web:

Safari - Vizualizare tipărire în Web Inspector

Cum să creați blogul dvs. WordPress pentru imprimare:

Există câteva moduri diferite de a vă specifica stilul pentru imprimare. Unul este doar să adăugați o secțiune în foaia dvs. de stil curentă, specifică tipului de suport „tipărit”.

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

Cealaltă modalitate este să adăugați o foaie de stil specifică temei copilului dvs., care specifică opțiunile de imprimare. Iată cum:

  1. Încărcați o foaie de stil suplimentară în directorul temei numit print.css.
  2. Adăugați o referință la noua foaie de stil în functions.php fişier. Veți dori să vă asigurați că fișierul dvs. print.css este încărcat după foaia de stil părinte și copil, astfel încât stilurile acestuia să fie încărcate ultima. De asemenea, am plasat o prioritate de 100 pe această încărcare, astfel încât să se încarce după plugin Iată cum arată referința mea:

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

Acum puteți personaliza fișierul print.css și puteți modifica toate elementele pe care le doriți ascunse sau afișate diferit. Pe site-ul meu, de exemplu, ascund toate navigarea, antetele, barele laterale și subsolurile, astfel încât să fie tipărit doar conținutul pe care doresc să îl afișez.

My print.css fișierul arată așa. Observați că am adăugat și margini, o metodă acceptată de browserele moderne:

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

Cum arată vizualizarea de imprimare

Iată cum arată vizualizarea mea de tipărire dacă este tipărită din Google Chrome:

Vizualizare imprimare WordPress

Stil de imprimare avansat

Este important să rețineți că nu toate browserele sunt create egal. Poate doriți să testați fiecare browser pentru a vedea cum arată pagina dvs. peste ele. Unii acceptă chiar și unele caracteristici avansate ale paginii pentru a adăuga conținut, a seta margini și dimensiuni de pagină, precum și o serie de alte elemente. Smashing Magazine are o foarte articol detaliat despre aceste tipăriri avansate opțiuni.

Iată câteva detalii despre aspectul paginii pe care le-am încorporat pentru a adăuga o mențiune privind drepturile de autor în partea stângă jos, un contor de pagini în dreapta jos și titlul documentului în partea stângă sus a fiecărei pagini:

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

4 Comentarii

  1. 1
  2. 2

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.