Introduktion
En af de bedste ting ved at bruge WordPress som dit CMS, er det store udvalg af temaer (themes) man kan finde gratis eller købe – men intet tema er selvfølgelig perfekt. Du får uden tvivl lyst til at ændre eller er andet, så temaet passer den stil du ønsker, at din hjemmeside skal have og præsentere. I længden vil du måske have lavet små til store ændringer og måske sågar betalt for det, men så længe dit temas base (det tema dit "child theme" er bygget på) forbliver det samme, så er det slet ikke noget problem. Men temaer bliver løbende generelt opdateret og det er her et "child theme" kan være utrolig brugbart. Skal du fx opdatere grundet en sikkerheds opdatering, så er det vigtigt, at du kan opdatere temaet uden at du mister alle dine ændringer og skal starte forfra.
Vi har prøvet det en gang her hos Webhotelmatch.dk og det kan være meget smertefuldt at "miste alt" på grund af det. Hvilket er grunden til, at vi i dag selv kører med "child theme".
Måden du også kan undgå det på, er ved at benytte et "child theme". Dette giver dig muligheden for at bruge et andet tema ovenpå dit hoved-tema, hvilket givet dig muligheden for at lave ændringer uden at direkte påvirke dit hoved-tema. Du kan lave ændringer lige fra PHP til styling. Det de fleste WordPress-brugere nok ville ændre er deres stylesheet (CSS). Det kunne f.eks. være font, farver, header, baggrunden, sidebar, styling af links, tekst, billeder.
Grunden til at det virker, er fordi at styles overskriver hinanden. Fx hvis dit hoved-tema har defineret at h1 skal være rød og med fed, hvor derimod dit "child theme" har defineret h1 til at være sort og med skråskrift, så overskriftes den første definering. Hvilket kan være utrolig brugbart hvis du starter ud med et hoved-tema og så laver alle dine styling-ændringer i dit "child theme" – så når du skal opdatere dit hoved-tema, så kan gøre det uden at frygte tab af styling. Din WordPress installation vil se ud og være lige præcis som den var før ændringen.
Selv hvis dine tanker er at bruge hoved-temaet lige præcis som det er fra standard, så mister du ingen funktioner ved at tilføje et "child theme" ovenpå. Bestemmer du dig i fremtiden så for at lave ændringer, så er du allerede forbered – det kan gøre din WordPress-oplevelse så meget bedre og der er ingen ulemper ved at gøre det. Du kan læse yderligere om "child themes" i WordPress' eget codex.
Sæt op dit child theme
Det er utrolig nemt, så nemt at du faktisk bare kan kopiere vores eksempel nedenfor.
For at lave et "child theme" for dit theme, så du igennem følgende tre trin.
- Oprette en ny mappe i din WordPress' tema-mappe
- Lav en stylesheet (style.css) med information om dit "child theme"
- Hent styling fra dit hoved-tema
Når du har gennemført de tre ovenstående tre trin, så kan du activate dit "child theme" i dit WordPress kontrolpanel og din hjemmeside vil nu fuldstændig se ud som den gjorde før (vi har ikke lavet nogle styling-ændringer endnu).
For at gøre det nemmest for alle, så tager vi i vores eksempel udgangspunkt i WordPress' standard tema "twentysixteen". Bruger du et andet tema, så kan du simpelt bare udskifte "twentysixteen" med navnet på dit eget tema.
1. Først skal du gå til din WordPress' installations "theme" mappe (/wp-content/themes/). Det kan du enten gøre via din webhoteludbyders kontrolpanel, eller også kan du gøre det via en FTP-klient. Navngiv denne mappe for twentysixteen-child.
2. Det næste du skal gøre er at oprette en ny fil (stylesheet) og navngive den style.css. Og så skal du "copy paste" nedenstående kode ind i din nyoprettede fil.
/* Theme Name: Twenty Sixteen Child Theme Description: Child theme for Twenty Sixteen Template: twentysixteen Version: 1.0 */
De vigtigste felter ovenfor er linjerne med "Theme Name" og "Template", de fortæller nemlig WordPress hvilket hoved-tema det skal kigge på. De restende felter er lidt selvforklarende og de er faktisk ikke nødvendige, for at få dit tema til at virke – oplysninger bliver kun vist når du vælger dit tema i WordPress' kontrolpanel.
3. I stedet for, at "copy paste" alle de forskellige styles fra dit hovedtema til dit "child theme", så kan du bruge en egen kode til at importere det hele @import url('../twentysixteen/style.css');. Denne kode skal stå som det første i din style.css, så alle dine ændringer du laver nedenunder @import bliver overskrevet.
Vi ender derfor med følgende kode:
/*
Theme Name: Twenty Sixteen Child Theme
Description: Child theme for Twenty Sixteen
Template: twentysixteen
Version: 1.0
*/
@import url('../twentysixteen/style.css');
Afsluttende
Du kan nu gå ind i dit WordPress kontrolpanel og aktivere dit nye "child theme". Navigerer du nu til at forsiden af din hjemmesider, så er der overhovedet inden forskel fra før og til nu – det er fordi du ikke har lavet nogle ændringer i dit tema endnu. Du kan nu lave alle de ændringer som du har lyst til, enten kan du gøre det ved hjælp af en text editor og FTP eller også gøre under dit WP kontrolpanel > Udseende > Editor > style.css. Du kan også gøre meget andet end bare at style din hjemmeside, fx kan du lave php ændringer, scripts osv., men det er ikke et emne denne artikel vil berøre.
Nedenfor kan du se det færdige resultat af vores style.css, hvor vi også har lavet lidt tilføjelser og ændringer til vores styling som eksempel.
/*
Theme Name: Twenty Sixteen Child Theme
Description: Child theme for Twenty Sixteen
Template: twentysixteen
Version: 1.0
*/
@import url('../twentysixteen/style.css');
blockquote {
background: # f2f2f2;
border-left: 12px solid #bfbfbf;
margin: 1.6em 12px;
padding: 0.6em 12px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #bfbfbf;
content: open-quote;
font-size: 5em;
line-height: 0.15em;
margin-right: 0.3em;
vertical-align: -0.5em;
}
blockquote p {
display: inline;
}
.button {
background-color: #0099ff;
border: none;
color: white;
padding: 20px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px 5px;
cursor: pointer;
}
