– WordPress kan meget; men ikke alt. Hvordan tilføjer jeg min egen HTML, CSS og scripts?

Når du får brug for at programmere dele af løsningen selv er der mange kreative muligheder i de blokbaserede temaer:

• Blokken “Tilpasset HTML”
• Plugin: “Custom CSS & JS”
• Child Theme
• Styling med theme.json
• Style variations

Kernen i WordPress er programmeret i PHP, der henter dine sider og indlæg i databasen. PHP klistrer det hele sammen til HTML, CSS og JavaScript. Dette sendes til brugerens browser.

Og derfor kan du både style og modificere den kode som WP genererer vil at tilføje tilpasset kode i PHP, HTML, CSS og JavaScript.

Styling med CSS

CSS er relativt nemt at modificere. Her kan du bruge browserens inspect tool. Du kan give mange blokke en id (“HTML anker”) eller CSS klasser efter behov. Under stilarter kan du tilføje ekstra CSS. Muligheden er godt gemt under de tre prikker øverst i Stilarter.

Blokkken “Tilpasset HTML”

Med denne blok kan du nemt tilføje HTML, CSS og JavaScript til enhver side eller indlæg. Som regel får vi kun brug for nogen kodestumper. Længere kodestykker kan evt. redigeres i Visual Studio Code, og sættes ind ved copy-paste i blokken.

Rækkefølgen af dine tags er vigtig:

1. CSS
2. HTML
3. JavaScript

Her er et par eksempler til inspiration:

<!-- CSS -->
<style>
   /** Jow, du må godt! */
   h1 { color: red; }
</style>

<!-- HTML -->
<div> Er ganske enkelt: HTML </div>

<!-- JAVASCRIPT -->
<script>
   alert("Mojn do!")
</script>

Øvelse:
Vi bygger en billed-karrusel med HTML, CSS og måske JavaScript.

Gør sådan: Find en karrusel lavet i HTML, CSS og JavaScript – f.eks. på W3 Schools eller et andet sted. Brug billeder fra dit mediebibliotek på WordPress. De skal helst have ens bredde og højde, ellers risikerer du at din karrusel “hopper”.

Plugin: “Custom CSS and JavaScript”

WordPress kernekoden er programmeret i PHP, der sender HTML, CSS og JavaScript til browseren. Koden kan manipuleres, fx hvis du finder id, class, etc. ved hjælp af browserens “Inspect tool” (Undersøg).

Dette plugin er let at bruge, når du får brug for at tilføje scripts eller anden kode til dine indlæg og sider. Her tilføjes HTML, CSS og JavaScripts til hele websitet eller specielle dele som: adminpanelet, header, footer eller login-vinduet.

Child theme

Et childtheme bliver ikke overskrevet, når du opdaterer parentthemet. Med et childtheme kan du køre en WP som altid er opdateret.

Hvis du får brug for at redigere filer i temaets mappe, så skal du bruge et childtheme til formålet. Nogen vælger så at lade være med at installere sikkerhedsopdateringer. Det er mildt sagt en udforsigtig beslutning. Hvis du kender lidt til webprogrammerin, så kan du selv lave et childtheme.

Et childtheme er nemt at bruge: kopier de filer, som skal ændres fra parent-theme mappen til childtheme mappen. Det er vigtigt, at filerne skal ligger i mapper med præcis som parent themet.

Du skal bruge et child theme, hvis du f.eks. vil ændre:

• functions.php
• style.css
• theme.json
• screenshot.png
• eller andre filer i temaet

Child themes kan laves ved hjælp af plugins, som “Create Block Theme“; men det er lettere at kode det selv.

Filerne i et Childtheme

Her er en kort oversigt over de filer, der minimum bør være i et childtheme. Klik på filnavnet for at se koden.

I de følgende afsnit bygger vi et childtheme og styler det med theme.json og bygger style variations.

Øvelse:
Vi bygger et childtheme

I denne øvelse bygger vi et childtheme med editoren Visual Studio Code. Du lærer, hvordan du kan tilføje farver, fonte og stilvarianter til kontrolpanelet.

• Parent theme: Twenty twenty-five
• Child theme: som du selv giver et navn

Både parent og child theme skal være til stede på serveren, hvor det er childthemet, der er aktiveret.

Koden

Begynd med at downloade Twenty twenty-five fra WordPress.org. Pak filerne ud i mappen themes.

Derefter får du brug for koden, som laver dit childtheme. Knappen linker til den kode du har brug for. Download eller klon dette repository:

Rediger theme.json i childthemet

Hvis du er vant til at arbejde med HTML og CSS kan det nok undre, at stylingen primært foregår i theme.json. I WP temaer redigeres style.css relativt sjældent. Farver, fonte og de enkelte blokkes udseende styles i JSON.

Prøv et eller flere disse eksperimenter:

Eksperimentér med dit Childtheme

1. Kopier theme.json fra mappen med parenttheme til mappen med childtheme.
2. Åbn theme.json fra childtheme-mappen.
3. (Let) Tilføj dine egene farver til farvepalette i theme.json.
4. (Let) Tilføj en standard webfont til fontpaletten.
5. (let) Opret nogen gradienter i theme.json.
6. (Let) Skab nogen duotones i theme.json
7. (Avanceret) Hvordan er fonte fra filer tilføjet i theme.json?
8. (Avanceret) Når du kan svare på det, og hvis du tør, så prøv at tilføje en displayfont som er downloadet fra Google Fonts eller en anden udbyder af fonte. Filen skal formatteres til .woff2.
9. Gem filen.
10. Gå ind i kontrolpanelet. Aktiver din farvepalette. Juster farverne, hvis kontrasterne er uheldige. Aktiver de fonte du har installeret. Displayfonte kan med fordel anvendes på H1 og H2 overskrifter.
11. Gem dit tema.

Eksempel på en løsning

Her er et eksempel på ændret farvepalet i theme.json.

Style variations i childthemet

Style variations er kopier af theme.json
Kopien omdøbes til noget passende, fx
foraarsfarver.json
Opret mappen /styles
Flyt foraarsfarver.json til mappen /styles

Eksempel: style variation

Herunder kan du se, hvordan farvepaletten “Variationen” tilføjes i Childtheme-mappen:

styles/variationen.json

Videoen viser resultatet:

Det er mere kompliceret at tilføje fonte. Her skal du oprette en mappe til fontens filer og tilføje den i theme.json (eller en stilvariation).

Tilføj scripts i functions.php

Ekstra scripts og stylesheets kan – blandt meget andet – tilføjes functions.php. Selv om den er skrevet i PHP, så er den relativt let at redigere – så længe du lader <?php blive stående i den første linje.

Functions.php i mit eksempel installerer to stylesheets:

• Parent theme style.css loades først
• Childtheme style.css loades til sidst

Det sker fordi det er det sidste stylesheet i kaskaden, som bestemmer, hvordan tingene endelig skal se ud. Så childthemets stylesheet for altså forrang – og du kan tilføje ekstra CSS dér, når noget skal ændres.

Hvis du læser, at noget kode skal tilføjes functions.php får du altid brug for et childtheme.

<?php

// kalder funktionen med stylesheets
add_action( 
	'wp_enqueue_scripts', 
	'petj_enqueue_styles' );

// her tilføjes nogle CSS'er
function petj_enqueue_styles() {
	
	// parent theme css
	wp_enqueue_style( 
		'petj-tt5-parent-style',  
		get_parent_theme_file_uri( 'style.css' ) );

	// child theme css
	wp_enqueue_style( 
		'petj_child_enqueue_style', 
		get_stylesheet_uri() );
}

På en lignende måde kan du tilføje JavaScript; men her skal du bruge wp_enqueue_script() i stedet for wp_enqueue_style.

Upload Childtheme serveren

Når du er tilfreds med dit childtheme skal det uploades til serveren. Playground i VSC er selvfølelig kun en skitse, så det er ikke her vi fremstiller egentligt indhold.

Det vi har lavet er et tema som du kan arbejde videre med i en “rigtig” WP.

Childthemet uploades til serveren ved at komprimere (zip) mappen mitChildTheme (eller hvad den hedder). Videoen viser det: