“Hello Elementor” Childtheme

Den “gratis” version af “Hello Elementor” har låst editoren til skabelonerne. Men med et childtheme og lidt kodegymnastik kan du udvilkle dit eget design på alle sider, headere, footere, sidebar og lignende skabeloner.

I denne tutorial viser jeg som et eksempel, hvordan du kan ændre 404-skabelonen. Du kan selvfølgelig ændre alle andre skabeloner – og tilføje dine egne.

404 skabelonen

Skabelonen 404 anvendes af WP, når en side ikke findes. “Hello Elementor” viser en side med en kort engelsk tekst. Den oversættes ikke, selv om sproget ændres. Den side ville blive meget bedre, hvis vi kunne tilføje nogen andre blokke.

Herunder kan du se, hvad vi skal bygge:

Childtheme

Når du ændrer i et tema, så vil dine rettelser typisk bliver overskrevet, når der er en opdatering. Dette kan undgås, når du bruger et childtheme. Første trin er altså at skabe et childtheme.

Kopier mapper og filer

“Hello Elementors” skabeloner befinder sig i mappen:

./template-parts/

Kopier denne mappe til dit childtheme.

Du får også brug for at redigere i theme.json. Den skal også kopieres til dit childtheme. Strukturen i dit childtheme skal se sådan ud:

Temaets skabeloner ligger i template-parts. Skabelonen som definerer udseendet af din 404-side hedder:

404.php

Det er med andre ord en PHP-fil. Så du får brug for at forstå lidt om, hvordan PHP fungerer.

PHP do_blocks()

Det er relativt enkelt at bygge WP-blokke ind i PHP’en. WP har en indbygget funktion til formålet:

do_blocks(string, $var)

Det betyder, at du kan skrive Gutenbergs WPML ind i PHP. Og det er hele hemmeligheden.

På 404-siden vil vi gerne have et søgefelt og at indholdet vises med præcis den danske tekst vi ønsker. Samtidig skal det være muligt at ændre indholdet i editoren.

I “page-header” containeren skal der være en passende overskrift.
I “page-content” containeren skal der være et søgefelt og en passende illustration.

Vi får altså brug for to do_blocks() funktioner og den WPML, der skal indsættes. Det er relativt enkelt at kopiere den WPML.

Det som skal bygges ind i siden skabes i Gutenberg. Derefter kopieres koden (WPML) ved at markere lagene og vælge “Copy styles”.

Byg en synkroniseret blokgruppe

Byg indholdet til din 404-side, fx med billede, noget tekst og et søgefelt i en synkroniseret blokgruppe.

I “Hello Elementor” oprettes blokgruppen under:

Åbn Udseende > Design > Blokgrupper

Her skal du oprette det indhold du vil vise på skabelonen.

Klik på Tilføj blokgruppe
Giv blokgruppen et navn og sørg for at synkroniseret er markeret.

Nu åbnes editoren og du kan bygge det indhold, som du vil vise på 404-skabelonen.

Når du er tilfreds med dit arbejde, så skal blokgruppen sættes ind i PHP.

Indsæt blokgruppen i PHP

Nu skal blokgruppen indsættes i PHP.

Lav en midlertidig side.
Indsæt din blokgruppe.
Kopier laget i Dokumentpanel.

Hvis du indsætter kopien af laget i en editor (fx Visual Studio Code) ser det sådan ud:

<!-- wp:block {"ref":20} /-->

Denne streng skal du så indsætte med do_blocks(), dér hvor den skal være:

<?php 
    echo do_blocks('<!-- wp:block {"ref":20} /-->'); 
?>

Lav en overskrift

Det eneste vi mangler er en overskrift. Igen skal du lave en synkroniseret blokgruppe. Kopiere laget og sætte koden ind i 404.php. Hele koden i main 404.php skabelonen ser sådan ud nu:

<?php
/**
 * The template for displaying 404 pages (not found).
 * HACK: Ved at tilføje WPML kan du ændre udseendet.
 * Men det kræver lidt kodearmbøjninger.
 *
 * @package HelloElementor
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

?>
<main id="content" class="site-main">

	<?php if ( apply_filters( 'hello_elementor_page_title', true ) ) : ?>
		<div class="page-header">
			<!-- INDSÆT DIN BLOKGRUPPE TIL OVERSKRIFTEN HERUNDER -->
			<!-- ... din kode her ... -->
		</div>
	<?php endif; ?>

	<div class="page-content">
		<!-- HER ER BLOKGRUPPEN MED INDHOLDET -->
		<?php echo do_blocks('<!-- wp:block {"ref":20} /-->'); ?>
	</div>

</main>

Derfor skal du bruge en synkroniseret blokgruppe

Hvis du ændrer indholdet i en synkroniseret blokgruppe, så ændres indholdet overalt, hvor den bruges.

Derfor kan du nu redigere indholdet på din 404-side ved at redigere blokkene i blokgruppen direkte fra kontrolpanelet. Så slipper du for at redigere PHP.

Skabeloner

Alle skabeloner ligger i mappen ./template-parts/ Hvis du kan redigere en fil, så kan du redigere dem alle sammen. Så 404 skabelonen er kun et eksempel på, hvordan alle temaets skabeloner kan tilrettes.

Du kan endda lave dine egne skabeloner, hvis det er nødvendigt. Det sker lettest ved at kopiere filen single.php – den er et godt udgangspunkt, når koden skal tilrettes.

Skabelonerne i ./template-parts

Skabelon	Styrer visning af
404.php	Siden vises, når WordPress ikke kan finde en bestemt side eller et indlæg.
archive.php	Bruges til visning af tags, kategorier og lignende taksonomier.
dynamic-footer.php	Dynamiske footere
dynamic-header.php	Dynamiske headere
footer.php	Footere
header.php	Headere
search.php	Siden vises, når en søgning foretages.
single.php	Bestemmer, hvordan sider og indlæg vises.

Disse skabeloner kommer med “Hello Elementor”; men du kan tilføje dine egne. Det sker lettest ved at kopiere fx single.php – eller en anden skabelon, der kommer tæt på.

Skabelonerne navngives efter de særlige konventioner i skabelon hierarkiet. Klik på knappen for yderligere informationer:

Template Hierarchy

Hvorfor lave skabeloner

Når du navngiver dine skabeloner korrekt efter principperne i hierarkiet kan du lave meget avancerede WordPress-løsninger med særlige visninger til udvalgte tags, kategorier og endda særlige indlæg og sider.