Best Practice Marketing

This article is a translation from English to Danish of Styling for print. We hope this will help to give something back to the great WordPress project.

WordPress har gjort det let at designe din hjemmeside ved hjælp af temaer, som er testet på mange forskellige computer og med forskellige browsere før de er udgivet. Disse temaer er optimeret til en computerskærm.

Er din WordPress hjemmeside så optimeret til at blive udskrevet?

Mange mennesker bryder sig ikke om at læse på en computerskærm og printer derfor siden ud. Derfor er det vigtig at din blok tager sig godt ud når den er udskrevet.

WordPress er ikke optimeret til udskrivning fra starten. Det resulterer i at udskriften starter med din header, efterfulgt af en lang linie med dit indhold og ender med dine sidebar og footer. Ikke særligt kønt. Grunden er at style sheet’et ikke bruges ved udskrivning og din side derfor bliver udskrevet uden style sheet.

For at se hvordan din udskrift ser ud. Går til Filer => Vis udskrift.

Optimer din udskrift
Vores mål er at få en funktionel og smuk udskrift. Til det formål er vi er vi nød til at se nærmere på blogens arkitekturen. WordPress er opbygget med en klar modulær tilgang, hvilket gør vore opgave meget lettere, fordi hoved områderne på hjemmesiden er klart adskilt.

Hovedstrukturen for din WordPress blog er som følgende, selv om navnene måske er anderledes for dit tema.

#header
#content
#comments
#sidebar (or #menu)
#footer

Du vil finde dine “styles” i Presentation => Theme editor under style.css.

Hvordan du ønsker at din blog skal ser ud, når den bliver udskrevet, er op til dig. Jeg vil give nogle eksampler.

Du kan vælge at udskrive sidebaren, men ikke headeren, ændre skrift type og størrelsen og medtage eller undlade at printe billeder med ud.

Design udskrivning formatet
Du kan ændre udskrivnings formatet på to måder. Den lette måde er at gå direkte ind i style.css og tilføje dine udskrifts ønsker. For at opnå fuld kontrol med udskrivningen er det lettest at oprette et selvstændig print.css style sheet.

Bemærk at nogle af Wordpress temaerne er designere til at blive udskrevet og derfor allerede har inkluderet en print.css file. Du kan tjekke det ved at se efter i Presentation => Theme editor eller ved at se hvordan dit udskrift ser ud (Filer => Vis udskrift) i din browser.

Inde fra Style Sheet’et.
Udskrift designet kan sætte indefra style sheet’et. Browseren skal instruksers til at se efter ”print styles” i style sheet’et og de skal have deres egen sektion.

For at instruerer browseren til at se efter print styles i style sheet’et, skal du indsætte et link i head section i din header.php tema som f.eks.:

Dette definer hvordan udskriften kommer til at se ud.

Inden i print Style sektionen som kan være i din style sheet eller I din print style sheet, tilføjer du følgende (navne kan adskille sig fra disse i dit tema):

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
#header { }
#content { }
#comments { }
#sidebar { }
#footer { }
}

For tilføje en sektion til udskrivning tilføjer du bare display:block inden i paratesen. Som f.eks.:

#content { display:block }

For ikke at inkluderer en sektion tilføjer du display:none inden for parenteserne. Som f.eks.:

#footer { display:none }

Ved at bruge display:none kan du få en section til at forsvinde fra udskriften. Hvis du har reklamer i en sektion og som du ikke ønsker skal med på udskriften kan du tilføje { display:none } for den sektion.

Udskrivning af Headeren
Mange WordPress blogs har store headers. Mange mener at det er unødvendigt at bruge papir og blæk på at udskrive headers. Du kan ændre udsene og størrelse på headeren i print styles.

Lad os antage at headeren er sat til en højde på 200 pixel, tekst der er 2,5 gang større end normal front og i skarpe gul farve. Header billedet eller header baggrunden bliver for det meste opfattet som baggrund og udskrives derfor ikke. Det betyder at du i vores ekssample vil få et meget stor header overskrift med meget plade udeomkring. De fleste ønsker at reducerer størrelsen på headeren og fronten.

Det kan gøres på følgende måde:

#header { display:block;
height: 100px;
font-size: 150%;
color:black; }

Det eneste det ændre er størrelsen.

Struktur ændringer
Det løser ikke altid alle problemer at sætte visse elementer til ikke at blive udskrevet. Mange gange efterlader det ikke udskrevet elementer som tomme områder

Mange temaer har referencer til speciale steder på websiden som f.eks. 150 pixel fra venstre side af skærmen. Så selv om sidebaren er sat til display:none så vil det stadig efterlade et mellemrum på 150 pixel.

Følgende vil løse problemet:

#sidebar { display:none }
#content{ margin-left:0;
float:none;
width:auto }

Dette vil få sidebaren til at forsvinde og bruge den margen som printeren er indstillet til.

Skrift størrelse ved udskrift
Der er muligt at styre skrift størrelsen ved at bruge point i modsætning til pixel.

Du kan f.eks. bruge denne kode.

#header { height:75px;
font-size: 24pt;
color:black }
#content { margin-left:0;
float:none;
width:auto;
color:black;
font-size:12pt }

Udskrift af kommentarer
De fleste Internetbruger kan godt lide at læse kommentarer på blogs, men de ønsker ikke at få dem udskrevet.

Prøv at find enten comment.php eller comment-popup.php i WordPress templet folderen. Find stedet hvor comment formen starter og find ID nummert eller navnet.

Koden ser måske sådan ud: