Share
Adăugarea unei foi de stil pentru imprimare pe site-ul dvs. Wordpress este o mișcare înțeleaptă. Mediul vă va mulțumi că ați aplicat acest articol pe site-ul dvs. web. Este o caracteristică simplă de implementat și majoritatea oamenilor o ignoră. Vă voi arăta cât de ușor este să adăugați o foaie de stil simplu la site-ul Wordpress. Am să vă dau o fundație extraordinară pe care o puteți folosi imediat pe site-ul dvs. și vă arăta câteva sfaturi, astfel încât să puteți trece la nivelul următor.
Va trebui să actualizați fișierul header.php al temei pentru al informa că foaia de stil pe care o vom actualiza va fi utilizată și pentru tipărire. Deschideți header.php, căutați:
Trebuie să actualizăm atributul media pentru a include imprimarea. Ecranul spune browserului "Aceasta este foaia de stil pe care ar trebui să o utilizați pentru a afla cum să afișați elementele din browser". Trebuie să-i spunem "Puteți folosi și această foaie de stil atunci când utilizatorul imprimă". Deci, acum se pare că:
Apoi, deschideți foaia de stil, stil.css. La sfârșitul documentului, adăugați:
@import "print.css";
Este esențial ca codul să fie în partea de jos a foii de stil pentru a vă asigura că stilurile de pe ecran nu moștenesc stilurile pe care le folosim pentru tipărire și astfel încât stilurile de imprimare nu vor fi suprascrise de stilurile site-ului dvs. După ce sa terminat, creați un fișier în același director cu numele print.css. Aici vom adăuga întregul stil pentru imprimare.
Mai jos este o versiune modificată a stilului de imprimare pentru Wordpress "Tema implicită" TwentyTen ". O mulțime de site-uri internet au aceleași elemente, deci nu este nevoie să reinventezi roata cu una în curs de dezvoltare. Ceea ce am de gând să fac este să descompun elementele cheie, așa că știi de ce au fost incluse și ce stiluri ar trebui să fii în căutarea afară pentru a le adăuga la propriile elemente personalizate.
@media print corp fundal: #fff none! important; culoare: # 000; #wrapper clar: atât! important; afișare: bloc! important; float: nici unul! important; poziția: relativă! importantă; #header margin-bottom: 2pt solid # 000; pad-bottom: 18pt; #colophon border-top: 2pt solid # 000; # site-title, # site-description float: none; linie înălțime: 1,4; marja: 0; umplutura: 0; # site-title font-size: 13pt; . conținut-conținut font-size: 14pt; linie înălțime: 1,6; .entry-title font-size: 21pt; #acces, #branding img, #respond, .comment-edit-link, .edit-link, .navigație, .page-link, .widget-area display: none! important; #container, #header, #footer margin: 0; lățime: 100%; #content, .one-coloană #content margin: 24pt 0 0; lățime: 100%; .wp-caption p font-size: 11pt; # site-info, # generator de site-uri float: none; lățime: auto; #colophon width: auto; img # wpstats afișare: niciunul; # generator de site-uri a margin: 0; umplutura: 0; # intrare-autor-info border: 1px solid # e7e7e7; #main display: inline; . home limită: nici una;
În primul rând, ar trebui să observați cum toate stilurile dvs. de imprimare sunt înfășurate în interiorul:
@media print
Toate obiectele care corespund funcționalității de tipărire sunt decorate între aceste paranteze. Dacă adăugați un stil, asigurați-vă că este în interiorul acestor paranteze. Dacă este în afara, CSS nu va cunoaște mai bine și va presupune că face parte din mediile de ecran.
corp fundal: #fff nici unul! important; culoare: # 000;
Acesta este unul dintre elementele cheie pentru crearea unui stil de imprimare. De obicei, orice tip de imprimare prietenos nu ar trebui să aibă un fundal pentru ea, și toate colorarea ar trebui să fie alb-negru.
#wrapper clar: atât! important; afișare: bloc! important; float: nici unul! important; poziția: relativă! importantă;
Acestea sunt stiluri de bază care vă asigură că totul apare unul peste celălalt. Îndepărtarea se va face să se asigure că totul în #wrapper va cădea sub elementul anterior și orice după ce va cădea după ambalaj, astfel încât lucrurile să nu se împingă unul lângă celălalt. Nu ar trebui să aibă un flotor și poziția trebuie să rămână relativă. Ceea ce va face este să vă asigurați că conținutul citește de la stânga la dreapta și că niciun obiect nu se va suprapune unul pe celălalt; acesta va fi un document care curge.
#header margin-bottom: 2pt solid # 000; pad-bottom: 18pt;
Veți observa câteva proprietăți care efectiv elementele de pe întreaga foaie de stil de imprimare. Acestea sunt absolut acceptabile. De multe ori, culoarea va separa elementele într-un design. Deoarece totul este în alb și negru, este greu să faci asta. Astfel, lucrurile cum ar fi adăugarea unei margini neagră în partea de jos a unui element și adăugarea unui spațiu sub el va ajuta să le separați în mod clar.
.intrare-conținut font-size: 14pt; linie înălțime: 1,6; .entry-title font-size: 21pt;
Este o idee minunată să luați în considerare dimensiunea textului conținutului pe care îl tipăriți. Dimensiunea pe care o vedeți pe ecran în comparație cu ceea ce ochii sunt capabili să citească sunt foarte diferite. Luați în considerare o dimensiune a fontului mai mic, 14 pt este o multime simt. S-ar putea să mă gândesc chiar să merg mai mică decât asta. Având o înălțime a liniei care ajută fluxul de conținut este, de asemenea, foarte util. Asigurați-vă că ați dat un spațiu între liniile dvs. astfel încât textul imprimat să nu fie ilizibil. De asemenea, oferirea de titluri cu o dimensiune mai mare a fontului îi va ajuta să le distingă de conținut.
#access, #branding img, #respond, .comment-edit-link, .edit-link, .navigație, .page-link, .widget-area display: none! important;
Acesta va fi unul dintre atributele elementului cel mai folosit. "display: none" va ascunde complet elementul. Pagina imprimată o va trata ca și cum nu ar fi fost chiar acolo pentru a începe, deci dacă ascundeți toate imaginile dvs. nu va arăta un loc gol unde ar fi în mod normal; elementul va fi luat complet în afara aspectului și va fi afișat următorul conținut disponibil. Folosesc acest lucru foarte mult pentru elemente inutile pentru a include în imprimarea mea imagini, navigație și bare laterale.
#container, #header, #footer margin: 0; lățime: 100%;
Acest element se asigură că toate elementele dvs. care înfășoară conținutul paginii au o lățime de 100%, astfel încât să poată prelua întreaga marjă disponibilă pe documentul imprimat. Uneori, designerii vor stabili o lățime de 900 de pixeli sau acelea care le plac, ceea ce ar permite doar imprimarea să se întâmple într-o zonă de 900 de pixeli.
#content, .one-coloană #content margin: 24pt 0 0; lățime: 100%;
În foaia de stiluri de ecran, aceasta ar fi partea stângă a conținutului. Ar avea o bara laterala in dreapta. Veți observa acum că nu mai are o lățime limitată la acel spațiu, acesta va prelua marja completă disponibilă pe documentul tipărit. Are o lățime de 100%, iar bara laterală nu va mai fi capabilă să se potrivească lângă acesta. De fapt, bara laterală ar trebui să aibă un afișaj: nici unul undeva în foaia de stil de imprimare. Există, de asemenea, un atribut de marjă care îl va separa de conținutul din jur, astfel încât acesta să iasă în evidență.
img # wpstats afișare: niciunul;
Acesta este un exemplu excelent de ascundere a imaginilor care au ID-ul "wpstats". Puteți crea propria clasă numită hideInPrint pentru a adăuga imaginile pe care doriți să le eliminați la imprimare. Codul pentru care ar arata ca:
img.hideInPrint display: none;
Acest articol este doar o fundație - puteți adăuga, evident, propriile stiluri de brand unice pentru a crea un stil de imprimare personalizat. Aici v-am arătat elementele pe care trebuie să le țineți cont atunci când implementați o foaie de stil pentru imprimare în propriul proiect; Restul stilului va fi de până la tine în propriul proiect! Știind gândul din spatele "de ce" anumite atribute au fost folosite, vă va ajuta să înțelegeți ce proiect va avea nevoie de dvs..
Accentsconagua