Share
Aggiungere un foglio di stile di stampa al tuo sito Wordpress è una mossa saggia. L'ambiente ti ringrazierà per aver applicato questo articolo al tuo sito web. È una funzionalità così semplice da implementare e la maggior parte delle persone semplicemente la trascura. Ti mostrerò quanto è facile aggiungere un semplice foglio di stile al tuo sito Wordpress. Ti fornirò le basi di una che puoi usare nel tuo sito immediatamente e ti mostrerò alcuni suggerimenti per portarlo al livello successivo.
Dovrai aggiornare il file header.php del tema per far sapere che il foglio di stile che aggiorneremo verrà utilizzato anche per la stampa. Apri header.php, cerca:
Dobbiamo aggiornare l'attributo multimediale per includere la stampa. Lo schermo dice al browser "Questo è il foglio di stile che dovresti usare per sapere come visualizzare gli elementi all'interno del browser". Dobbiamo dirgli "Puoi usare questo foglio di stile anche quando l'utente sta stampando". Quindi ora sembra:
Quindi, apri il tuo foglio di stile, style.css. Alla fine del documento, aggiungi:
@import "print.css";
È fondamentale che il codice si trovi nella parte inferiore del foglio di stile per essere sicuro che gli stili dello schermo non ereditino gli stili che stiamo utilizzando per la stampa e in modo che gli stili di stampa non vengano sovrascritti con gli stili del tuo sito. Fatto ciò, crea un file nella stessa directory con il nome print.css. Qui è dove aggiungeremo tutto il nostro stile per la stampa.
Di seguito è riportata una versione modificata dello stile di stampa per il tema predefinito "TwentyTen" di Wordpress. Molti siti web condividono questi stessi elementi, quindi non c'è bisogno di reinventare la ruota con lo sviluppo. Quello che sto per fare è scomporre gli elementi chiave, quindi sai perché sono stati inclusi e quali stili dovresti essere alla ricerca di aggiungerlo ai tuoi elementi personalizzati.
@media print body background: #fff none! important; colore: # 000; #wrapper clear: both! important; display: block! important; fluttuante: nessuno! importante; posizione: relativa! importante; #header border-bottom: 2pt solid # 000; imbottitura-fondo: 18pt; #colophon border-top: 2pt solid # 000; # site-title, # site-description float: none; line-height: 1.4em; margine: 0; padding: 0; # site-title font-size: 13pt; .entry-content font-size: 14pt; line-height: 1.6em; .entry-title font-size: 21pt; #access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important; #container, #header, #footer margin: 0; larghezza: 100%; #content, .one-column #content margin: 24pt 0 0; larghezza: 100%; .wp-caption p font-size: 11pt; # site-info, # site-generator float: none; larghezza: auto; #colophon width: auto; img # wpstats display: none; # site-generator a margin: 0; padding: 0; # entry-author-info border: 1px solid # e7e7e7; #main display: inline; .home .sticky border: none;
Innanzitutto, dovresti notare come tutti gli stili di stampa sono racchiusi all'interno:
@media print
Tutti gli oggetti che corrispondono alla funzionalità di stampa sono in stile tra queste parentesi. Se aggiungi uno stile, assicurati che sia all'interno di queste parentesi. Se è all'esterno, i CSS non sapranno nulla di meglio e presumeranno che faccia parte del media dello schermo.
body background: #fff none! important; colore: # 000;
Questo è uno degli elementi chiave per creare uno stile di stampa. In genere, qualsiasi cosa stampabile non dovrebbe avere uno sfondo e tutta la colorazione dovrebbe essere in bianco e nero.
# wrapper clear: both! important; display: block! important; fluttuante: nessuno! importante; posizione: relativa! importante;
Questi sono gli stili di base che si assicurano che tutto si mostri uno sull'altro. Cancellandolo si assicurerà che tutto in #wrapper ricada sotto l'elemento precedente, e qualsiasi cosa dopo di esso cadrà dopo il wrapper in modo che le cose non vengano spinte l'una accanto all'altra. Non dovrebbe avere un float e la posizione dovrebbe rimanere relativa. Ciò che farà sarà assicurarsi che il contenuto sia letto da sinistra a destra e che nessun oggetto si sovrapponga a vicenda; sarà un documento scorrevole.
#header border-bottom: 2pt solid # 000; imbottitura-fondo: 18pt;
Noterai alcune proprietà che effettivamente modellano l'elemento in tutto il foglio di stile di stampa. Questi sono assolutamente accettabili. Un sacco di volte, il colore separerà gli elementi in un disegno. Dal momento che tutto è in bianco e nero, è difficile farlo. Quindi cose come l'aggiunta di un bordo nero alla base di un elemento e l'aggiunta di uno spazio al di sotto di esso contribuiranno a separarli chiaramente.
.entry-content font-size: 14pt; line-height: 1.6em; .entry-title font-size: 21pt;
È una buona idea considerare la dimensione del testo del contenuto che stai stampando. Le dimensioni che vedi sullo schermo rispetto a ciò che gli occhi sono in grado di leggere sono molto diverse. Considerare una dimensione del carattere più piccola, 14 pt è un sacco mi sento. Potrei considerare persino di andare più piccolo di quello. Anche avere un'altezza della linea che aiuti il flusso dei contenuti è molto utile. Assicurati di lasciare un po 'di spazio tra le linee in modo che il testo stampato non sia illeggibile. Inoltre, dare ai titoli una dimensione del carattere più grande aiuterà a distinguerli dal contenuto.
#access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important;
Questo sarà uno degli attributi degli elementi più utilizzati. 'display: none' nasconderà interamente l'elemento. La pagina stampata la tratterà come se non fosse nemmeno lì per cominciare, quindi se nascondi tutte le tue immagini non mostrerà un punto vuoto dove sarebbero normalmente; l'elemento verrà rimosso completamente dal layout e il prossimo contenuto disponibile verrà renderizzato. Uso molto questo per elementi non necessari da includere nella mia stampa come immagini, navigazione e barre laterali.
#container, #header, #footer margin: 0; larghezza: 100%;
Questo elemento si assicura che tutti gli elementi che avvolgono il contenuto della pagina abbiano una larghezza del 100%, in modo che occupino l'intero margine disponibile sul documento stampato. A volte i designer imposteranno una larghezza di 900 px o simili, il che consentirebbe solo la stampa di accadere in un'area di 900px.
#content, .one-column #content margin: 24pt 0 0; larghezza: 100%;
Nel foglio di stile dello schermo, questo sarebbe il pezzo sinistro del contenuto. Avrebbe una barra laterale alla sua destra. Noterai ora che non ha più una larghezza limitata a quello spazio, occuperà tutto il margine disponibile sul documento stampato. Ha una larghezza del 100% e la barra laterale non sarà più in grado di adattarsi accanto ad essa. In effetti, la barra laterale dovrebbe avere un display: nessuno da qualche parte nel foglio di stile di stampa. C'è anche un attributo di margine che lo separerà dal contenuto che lo circonda, in modo che risulti chiaro.
img # wpstats display: none;
Questo è un grande esempio di nascondere le immagini che hanno l'ID di "wpstats". È possibile creare la propria classe denominata hideInPrint per aggiungerla alle immagini che si desidera rimuovere durante la stampa. Il codice per questo sarebbe:
img.hideInPrint display: none;
Questo articolo è solo una base - puoi ovviamente aggiungere i tuoi stili di marca unici a questo per creare uno stile di stampa personalizzato. Qui, ti abbiamo mostrato gli elementi che dovresti tenere a mente quando implementi un foglio di stile di stampa nel tuo progetto; Il resto dello styling spetterà a te nel tuo progetto! Conoscere il pensiero che sta dietro "perché" sono stati utilizzati alcuni attributi, ti aiuterà a capire quale sarà il tuo progetto.
Accentsconagua