Child-theme: Sådan laver du et child-theme til WordPress
Skal du tilføje eller redigere noget i det tema du bruger? Hvis ja, så er du kommet til det rette sted.
Når man arbejder med WordPress er det ofte nødvendigt at lave tilpasninger i det tema man bruger for, at det opfylder ens behov og mål.
Hvis temaet har masser af tilpasningsmuligheder så kan dette hjælpe med at opfylde dine behov, men uanset hvor mange muligheder der kan være tilgængelige, så kan der stadig være noget, som det aktuelle tema, du har, er ude af stand til at gøre eller det ikke er den måde, du kan li’ at gøre det på.
Så hvis du er fortrolig med koder og WordPress, så kan du dykke ned i temafilerne og begynde at redigere disse. Du bruger måske nogle minutter eller timer på at lave ændringer i dit tema for kun, at opdage at du har mistet disse ændringer, næste gang dit tema opdateres.
For at undgå dette, kommer ”Child Theme” ind i billedet. Oprettelse af en child-theme giver dig mulighed for, at foretage ændringer af dit websted uden, at ændre noget i det oprindelige temas kode. Selv hvis du kun laver et par mindre ændringer(tweaks), betaler det sig at bruge et par minutter på at lave et child-theme i stedet for at bruge et plugin til det. Plugins er med til at ”sløve” din websides load-tid.
Child-theme: Sådan laver du et child-theme til WordPress
Først skal der oprettes en ny mappe i din tema-mappe. Det kan du f.eks. gøre ved hjælp af cPanel, din webhosts filemanager eller via FTP, alt afhængig af hvad du bedst kan li’ at arbejde med. Din tema-mappe hedder wp-content/temaer (wp-content/themes).
Opret en mappe under wp-content/themes, du kan navngive mappen med hvad du vil, men som tommelfingerregel bør du altid navngive child-temaet efter moder-temaet efterfulgt af betegnelsen ”–child”, så man ved hvilket child-tema man arbejder med. Eks. wp-content/themes/twentyfifteen-child hvor twentyfifteen-child er den nye mappe i themes-mappen.
For det andet, i mappen med child-temaet skal der oprettes style.css-fil og den skal udfyldes med oplysninger som vist nedenfor. Dette er den eneste fil det er nødvendigt at lave, for at man har et child-tema.
/*
Theme Name: Twenty Fifteen Child Theme – navn på det nye child-tema Theme URI: http://xxxxx.com/themes/spacious/ – moder-temaets URL Description: Twenty Fifteen Child – en kort beskrivelse af temaet ThemeAuthor: WordPress – hvem har lavet temaet Author URI: http://domænenavn.com – Forfatter URL Template: Twenty Fifteen – hvilket tema er moder-temaet Version: 1.0 */
@import url(“../twentyfifteen/style.css”);
/* =Theme customization starts here ————————————————- */
For at gøre det på den letteste made, så kopier style.css fra dit tema til din computer. Åben filen med f.eks. notepad, dreamweaver eller tilsvarende.
Hent kun de tilsvarende 7 linier i style.css’en:
/*
1. Theme Name: Twenty Fifteen
2. Theme URI: https://wordpress.org/themes/twentyfifteen/
3. Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen’s simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
4. Author: the WordPress team
5. Author URI: https://wordpress.org/
6. Version: 1.2
7. Template: Twenty Fifteen */
@import url(“../twentyfifteen/style.css”);
/* =Theme customization starts here ————————————————- */
Gem filen som style.css. Overfør filen til din child-tema-mappe du lavede tidligere.
HUSK HUSK!!
- Template navn(I dette tilfælde Twenty Fifteen) skal være matche moder-temaets mappe-navn og der må ikke være nogle “blanke” mellemrum efter navnet.
- I linien @import url(“../twentyfifteen/style.css”); skal ordet twentyfifteen være det samme som moder-temaets mappe-navn.
- Andre detaljer kan ændres og tilføjes som du gerne vil have det
Mens style.css er påkrævet for at lave et child-theme, så er functions.php-filen, template-filer og andre filer ikke påkrævede, men kan laves hvis det er nødvendigt.
For at aktivere dit nye child-tema, skal du gå til kontrolpanelet – Udseende – Temaer. Se efter child-temaet som du lavede tidligere og aktivér det. Det var det!
Det smarte er nu, at selvom dit tema opdateres, så vil det ikke ændre udseendet af din webside, så længe du har lavet rettelserne i dit child-tema.
Sådan laver du yderligere ændringer til dit child-tema
Man skal normalt altid lade være med, at redigere I moder-temaets filer og i stedet for lave ændringerne i ens child-tema.
Hvad nu hvis det er en funktion som du vil tilføje eller rette? Ikke noget problem. Så laver du en functions.php-fil til dit child-tema.
Functions.php filen er der, hvor temaets hovedfunktioner normalt findes. Hvis du har brug for at tilføje brugerdefinerede funktioner så er du nødt til at oprette en functions.php-fil inde i child-temaets mappe og tilføje dine funktioner kode det inde i det.
Disse funktioner vil blive indlæst før og i tillæg til forældre temaets funktioner. Functions.php filen skal indeholde følgende:
/*
* Child theme functions file
*Your functions php code starts here just before ?>
*/
Denne linie overskrives med din nye function.
?>
En funktion som du muligvis gerne vil have I stedet for at bruge et plugin er, at du vil ændre “Howdy, ditnavn” i kontrolpanelets bjælke øverst oppe til ”Velkommen, ditnavn” i stedet for. Det eneste du skal gøre er at tilpasse funktionen og indsætte denne i ovenstående functions.php-fil. Som her:
/*
* Child theme functions file
*Your functions php code starts here just before ?>
*/
function howdy_message($translated_text, $text, $domain) { $new_message = str_replace(‘Howdy’, ‘Logged in as’, $text); return $new_message; } add_filter(‘gettext’, ‘howdy_message’, 10, 3);
?>
Se hvordan du tilpasser velkomstmeddelelsen her: https://www.balonline.dk/4-gode-wordpress-hacks-snippets/
