Best Practice Marketing

Best Practice Marketing header image 2

Opsætning af WordPress til udskrivning

10,595 Comments · Other

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.:

<link rel="stylesheet" href="”
type=”text/css” media=”screen” />

Dette instruerer browseren til at se efter print styles I style sheet’et:

<link rel="stylesheet" href="”
type=”text/css” media=”screen, print” />

Du skal som regel indsætte dette I bunden af dit style sheet.

Indsæt følgende i dit print styles sheet:

/* Print Styles */
@media print {
body { background:white; color:black; margin:0 }
}[edit]

Tilføj et Print Style Sheet

Gør følgende for at skabe et uafhængig style sheet som indeholder alle udskrivnings egenskaberne:

1. Opret en tekstfil og kald den print.css.
2. Gem den i WordPress Theme folderen.
3. Indsæt følgende for at starte print styles og gem filen.

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
}

4. Lav et link i din header.php template file, det kan gøres som:

<link rel="stylesheet" type="text/css" media="print"
href="/print.css” />

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:

<form action="/wp-comments-post.php”
method=”post” id=”commentform”>

CSS ID’et for kommentarerne er commentform. For ikke at udskrive kommentarerne kan du tilføje følgende i printing style sektionen i din style sheet.

#commentform { display:none }

Sideskift
Dette virker ikke for alle browser eller printer, men du kan instruere dem i ikke at lave sideskift midt i et billede, i et citat eller lige efter en overskrift.

Du kan bruge følgende kode:

h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }

Print Style eksempel
Der er mange aspekter af din blog du kan styre når du udskriver, som f.eks. størrelse, farver, udsende af links, overskrifter, header, forfatter info, meta data og hvilke dele af dine blog du vil udskrive.

Her er et eksempel du kan bruge som reference.

@media print {
body {background:white;
font-size:10pt;
margin:0 }
#sidebar { display:none }
#header { height:75px }
#content{ margin-left:0;
float:none;
width:auto }
.demo .red { color:black;
font-weight:bold }
#content a { font-weight:bold;
color:#000066;
text-decoration:underline }
#content{ margin-left:0;
float:none;
width:auto }
#footer, .ad { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
h3 { margin-left:10px;
margin-bottom:0px;
padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
img.centered { display: block;
margin-left: auto;
margin-right: auto; }
img.right { padding: 4px;
margin: 0 0 2px 7px;
display: inline; }
img.left { padding: 4px;
margin: 0 7px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid;
page-break-after:avoid; }
}

Du kan gøre bruge af følgende resurser skrevet på Englisk:< a href=”http://ideas.arikfr.com/make-your-blog-printer-friendly.html”>Make your blog printer friendly! and CSS Printer Friendly for WordPress.

Denne artikel er også oversat til: Portugisiske og Amharisk.

Efterskrift:

Har du så selv gennemført disse ændringer?
Nej, det har jeg ikke. Grunden er at jeg syntes at udskriften af denne blog er rimelig god og jeg henvender mig til webmasters som med stor sandsynlighed ikke udskriver sider for at læse dem.

Hvorfor har du så oversat denne artikel?
For at give noget tilbage til WordPress projektet.

Hvad vil du selv gøre hvis du ville udskrive en webside?
Jeg ville kopier de elementer som jeg er interesseret i over i word (eller et lignende program), slette det elementer der ikke høre med i min udskrift og skriv ud.

Beklager den ringe kvalitet af min oversættelse.

Tags:

10,595 Comments so far ↓