Training WordPress Code – wpdev.training

Deze training is erop gericht om verder onder de motorkap van WordPress te kijken. Meer oog voor de code en objecten. Hoe is het CMS opgebouwd? Child thema tweaken. Actions en Filters toepassen. De kracht van je eigen shortcodes onderzoeken. Wat kun je doen met de Code editor (onder de tab blok)?
Doelstelling is dan je aan het eind beter begrijpt hoe WordPress in elkaar zit. Je kunt zeker niet zelfstandig alles verbouwen, maar wel doelgerichter in de code lezen. Beter lezen welke code een rol speelt. Beter inzicht hebt in de broncode van webpagina’s in het algemeen en WordPress in het bijzonder.

Inhoudsopgave

Inhoudsopgave
Nieuwe LocalWP site
Bestandssysteem
De Inspector
Template mutaties
Actions, filters en shortcodes
Een plugin maken
- My First Plugin Hartslag
Code editor
Contact

Nieuwe LocalWP site

Om te kunnen oefenen hebben we een verse WordPress installatie nodig. Maak er 1 aan in LocalWP. Noem die bijvoorbeeld wpcode. Pas de instellingen aan zoals we eerder hebben besproken. We gaan voor het thema Twenty Twenty-One, maar dan met het Child thema actief.

twentytwentyone-child Download

Open het bestandssysteem van je LocalWP site.

Bestandssysteem

Er zijn vier niveaus waarop je kunt kijken naar het bestandssysteem van WordPress.

Root

De hosting biedt altijd een zogenaamde root-map aan, waar het bestandssysteem in ‘woont’. Dat zou je kunnen duiden als het huis van je installatie. Soms heet die map: public, public_html, httpdocs, web, rootweb.

Op dit niveau vind je alle rootbestanden:

index.php

Op een webserver zie je vaker in mappen een index.php. Soms ook index.html. De webserver zal als eerste altijd op zoek gaan naar een index. In dit bestand wordt de hele weergave keten van objecten opgestart en worden allerlei gekoppelde bestanden opgevraagd en uitgelezen die tesamen een view genereren. Maar dit laatste is het werk van de browser.

wp-login.php

Dit bestand leidt naar het inlogscherm. Zou je wp-admin in de url typen na de domeinnaam dan wordt je doorgezet naar de wp-login.php (mits je niet bent ingelogd).

wp-config.php

In dit bestand wordt de basisconfiguratie opgezet. Dit bestand geldt als connector tussen bestanden en database. Er vindt continu een wisselwerking plaats tussen beide. Bestanden hebben soms instellingen nodig of de waarde van variabelen, constanten om objecten te kunnen laden. Die halen ze met zoekopdrachten (queries) uit de database. Vanuit de back-end worden die settings ook soms overschreven. Dus verzoeken om informatie én opslaan van wijzigingen lopen door elkaar heen.

.htaccess

Een tekstbestand met een vreemde naam. Soms wordt het door een instelling op je systeem zelfs niet eens weergegeven. Het is een verborgen bestand. Via FileZilla zie je hem natuurlijk wel. Hierin worden afwijkende settings opgenomen die de toegang tot bepaalde (onder-)delen van je bestandssysteem beperken of juist mogelijk maken.

wp-content

Deze map bevat alle mappen en bestanden om je content weer te geven. Plugins, thema’s, uploads en andere.

plugins

Elke plugin die je installeert wordt via het interne FTP programma van WordPress voorzien van alle bestanden. Er wordt een map aangemaakt. En de plugin zal eventueel een of meerdere tabellen aanmaken in de database. Na het verwijderen van een plugin wordt dit allemaal netjes opgeruimd.

themes

Hier gebeurt hetzelfde voor thema’s. In de options tabel zal worden geregistreerd welk thema het actieve thema is. Wanneer er via de Customizer settings zijn gewijzigd zijn die ook in die tabel weggeschreven.

wp-admin

De complete back-end functionaliteit komt hiervandaan. Zodra je in de url ziet dat er wp-admin staat, bevind je je op de back-end. In de broncode zul je altijd wel url’s tegenkomen waarin wp-admin voorkomt, aangezien WordPress een dynamisch gegenereerd systeem is.

wp-includes

De map wp-includes zorgt globaal voor de verbinding tussen back- en front-end. We gaan niet dieper in op de inhoud van de mappen wp-admin & wp-includes.

De Inspector

Het lezen van de broncode is nogal intimiderend als je net komt kijken 😉 maar je raakt als snel gewend en kunt sneller begrijpen waar het over gaat als je oefent!
De hele broncode, toegankelijk via een link in het hoofdmenu is onverbiddelijk. Een gemiddelde webpagina bestaat uit veel code. Je ziet in de eindversie van een webpagina alleen html, css en javascript. Het is allemaal geschreven in PHP, maar dat zie je niet, tenzij je in de templates kijkt.

De inspector laat je elementen onderling analyseren wat hun styling is. Vanuit de font-end van een pagina klik je boven een element met de rechter muisknop. In het contextvenster klik je op Inspector, inspecteren. Het moet gezegd worden, je hebt meer zicht op de onderdelen van de inspector op een grotere monitor!

Het principe: je klikt boven een element zodat dat element in de inspector wordt geselecteerd, tevens zie je de styling en het element is gearceerd.

Je moet dan wat meer weten over de html structuur (tags en elementen, attributen) en css selectoren (id, class, div, p, header, article) en css declaraties (eigenschappen en waarden). Een goede inleiding en de mogelijkheid om realtime te oefenen vind je op: w3schools.com. Is dit belangrijk? Zeker! Als je een thema wilt wijzigen naar je eigen smaak, inzicht of wens van een opdrachtgever, moet je kennis en ervaring hebben met webtalen.
Wil je hier thuis verder mee aan de slag (dit is geen training CSS of HTML!) volg dan de volgende links:

CSS Selectoren ( id, class )
Kleuren gebruiken ( hexa: #FFFFFF, rgb(0,0,0) )
Achtergrond ( background-color, opacity )

Template mutaties

Een groot voordeel van een child theme is dat je templatebestanden van de parent – naar de child theme map kunt kopiëren. Daar mutaties kunt doorvoeren zonder je het origineel kapot maakt. Als de parent geupdate moet worden zullen je template mutaties blijven bestaan. Het meest eenvoudig is om elementen of codeblokken uit te zetten of uit te hashen. Maar je kunt ze ook verwijderen en als het fout gaat, herhaal je de kopie gewoon weer.

Pas op dat je altijd in de kopie (uit de child theme map) zit te werken en niet per ongeluk in het parent origineel!!

html uitzetten

<p>This is a paragraph.</p>
<!--<p>This is a paragraph.</p>-->

Probeer het hier.

php uit-hashen

<?php echo "My first PHP script!"; ?>
<?php #echo "My first PHP script!"; ?>

Probeer het hier.

PHP Functions

WordPress is gebouwd in PHP en zit dus ook boordevol met functies. Een introductie vind je hier. Soms wil je dat een functie niet wordt uitgevoerd.

<?php
function writeMsg() {
  echo "Hello world!";
}
#writeMsg();
?>

Probeer het hier.

header.php naar child map

Laten we iets wijzigen in de header.php en footer.php. Kopieer beide en plak ze in de child theme map.
Open ze in een (html-) teksteditor (tip: sublime text).

Voeg FB pixelcode toe aan de head

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
</head>
/* Voorbeeld 1 : pixel image code FICTIEF*/
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/>
</head>
/* Voorbeeld 2 : pixel image code FICTIEF*/
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
<!-- Facebook Pixel Code -->
<script>
fbq('track', 'ViewContent', {
  content_name: 'Really Fast Running Shoes',
  content_category: 'Apparel & Accessories > Shoes',
  content_ids: ['1234'],
  content_type: 'product',
  value: 0.50,
  currency: 'USD'
 });
</script>
<!-- End Facebook Pixel Code -->
</head>

Voeg Google Tag Manager ID toe aan de head

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
</head>
/* Voorbeeld FICTIEF*/
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>

<script src='https://www.googletagmanager.com/gtag/js?id=UA-123456789-1' id='google_gtagjs-js' async></script>
<script id='google_gtagjs-js-after'>
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}
gtag('set', 'linker', {"domains":["wpdev.training"]} );
gtag("js", new Date());
gtag("set", "developer_id.fTgfYud", true);
gtag("config", "UA-123456789-1", {"anonymize_ip":true});
</script>
</head>

footer.php naar child map

/* Open footer.php in Sublime tekst
* Op regel 55 staat het blok met de tekst
* Met trots aangedreven door WordPress
* uiteraard in de footer.php in de Child map!
*/

</div><!-- .site-name -->
			<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Vanaf <div class=”powered-by”> tot en met </div><!– .powered-by –> weghalen, of html uitzetten. Opslaan en de front-end refreshen.

CSS declaratie: display: none

Er is nog een andere methode. We kunnen de class ‘powered-by’ ook de eigenschap ‘display: none’ meegeven. Het blok staat er dan nog wel, maar wordt door de browser niet weergegeven. Voor het gemak demonstreren we dat met een inline style attribuut (meer info).

</div><!-- .site-name -->
<div class="powered-by" style="display: none;">
	<?php
	printf(
	/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
	'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

404.php naar child map

Als een pagina of bericht niet kan worden gevonden, status 404, dan zal deze pagina worden weergegeven. We kunnen deze template ook aanpassen naar ons eigen inzicht.
Plaats een kopie in de child map en open het templatebestand met Sublime Text.

/*
* de php functie esc_html_e() vertaalt tekst
* naar de taal zoals ingesteld. Je kunt het 
* hele php blok weghalen en je eigen tekst
* plaatsen. Of 'Nothing here' wijzigen in 
* een andere (Engelse) tekst. 
*/
r16
<h1 class="page-title">
<?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?>
</h1>
wijzig in:
<h1 class="page-title">
Dat is jammer! </h1>

Iets verderop op regel 20 kunnen we ook nog tekst wijzigen en een H3 toevoegen. Ook de zoekbox uitzetten.
Als html, css en javascript geen geheimen meer kennen kun je natuurlijk ook een geheel eigen pagina opmaken.

/* r20 */
<div class="page-content">
<h3>Geen resultaat</h3>
  <p>De pagina die je wilde zien kan verwijderd zijn of tijdelijk niet toegankelijk. Helaas bieden we gaan zoekfunctie.
<?php #esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
	<?php #get_search_form(); ?>
</div><!-- .page-content -->

comments.php naar child map

Er is een plugin voor nodig om overal het reactieformulier te blokkeren. Maar we kunnen dit ook zelf natuurlijk!
We halen alles weg uit de template comments.php die reacties bouwt en laten alleen het basis div element staan.
Dan blijft er onderstaande over. Wil je toch een keer reacties toestaan, zet dan het origineel uit de parent map terug.

<div id="comments">
<h3>Reacties zijn niet mogelijk</h3>
<p>U kunt wel reageren via onze socials: 
<a href="https://facebook.com/gebruikersnaam">Facebook</a> | <a href="https://twitter.com/gebruikersnaam">Twitter</a>
</p>
</div><!-- #comments -->

Bovenstaande oplossing levert een kader op over de hele breedte, met de tekst naar links uitgelijnd. Tekst uitlijnen doen we via de eigenschap: text-align. De waarde center zou de tekst moeten centreren. Laten we dit als volgt via style.css toepassen. De parent div heeft het id: comments. Die selector gebruiken we voor onze styling.

#comments {
	text-align: center;
}

Styling met style.css in de child theme map

Hierin schuilt een grote kracht of bereik om een thema te tweaken. We moeten wel steeds weten welke eigenschap we moeten toekennen aan een specifieke selector. Dus de Inspector hebben we zeker nodig.

Tip: hoverify (een browser extensie als alternatief voor de inspector)

body class

Elke pagina in WordPress krijgt een unieke body class waar we verdere styling onder kunnen hangen om uitzonderingen te maken. Open het bericht Hallo Wereld. Bepaal de body class waarin het id is verwerkt. Een nummerieke waarde die alleen voor dit bericht geldt. Tip: bekijk de broncode en analyseer de bodyclasses.

/*
Op regel 25 vinden we de body met een 
postid-1. Dus willen we alleen voor dit 
bericht styling toepassen, dan moeten 
we die class gebruiken als hoofd selector. 
*/
<body class="post-template-default single single-post postid-1 single-format-standard wp-embed-responsive is-light-theme no-js singular">

Laten we Hallo World! een background verloop of gradient geven. Die kunnen we genereren via CSS Gradient. Als je iets hebt gegenereerd kopieer dan de code uit het CSS code block (Copy to Clipboard). Vervolgens gaan we die gradient alleen voor Hallo World uitrollen via style.css in de child theme map.

/*
alleen Hallo World krijgt een gradient
*/
.postid-1 {
 background: rgb(93,164,103);
background: linear-gradient(90deg, rgba(93,164,103,1) 0%, rgba(153,153,153,1) 10%, rgba(255,255,255,1) 50%); 
}

Analyseer de body classes van het Halle World nogmaals. Kun je aanwijzigingen vinden die voor alle berichten zou kunnen gelden? De meest voor de hand liggende class is single. Laten we class postid-1 vervangen door single. Sla style.css op en refresh de front-end. Bekijk of het klopt door de pagina Sample Page te openen. Die zou de standaard achtergrond moeten hebben.

/*
alle berichten krijgen een gradient bg
*/
.single {
 background: rgb(93,164,103);
background: linear-gradient(90deg, rgba(93,164,103,1) 0%, rgba(153,153,153,1) 10%, rgba(255,255,255,1) 50%); 
}

Query Monitor van John Blackbourn

Deze plugin geeft ons op de front-/back-end veel inzicht in welke templates en andere functies een rol spelen bij elke view (is gegenereerde weergave van bericht, pagina, archief en homepage). Na installatie en activatie van deze plugin krijgen we in de wp-admin-bar op elke pagina een overzicht van alle relevante objecten. We hebben er maar een paar nodig. Beweeg je muis over het kader, ongeveer in het midden. Het contextmenu wat openklapt geeft ons o.a. inzicht in welke template een bepaalde view genereert. Op de front-end bij de pagina Sample Page lezen we daar: page.php in de parent theme map. Bij Hello World is dat single.php.

Met deze contextuele informatie kunnen we onze thema tweaks heel gericht uitvoeren. Geef alle pagina’s een andere gradient achtergrond. Bepaald de body class en genereer een background gradient voor je pagina’s.

.page {
 background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(193,193,193,1) 10%, rgba(93,164,103,0.14607849975927867) 50%); 
}

Uitzonderingen

Elk thema is weer anders gebouwd. De pagina achtergrond werkt, alleen ligt er nog een vlak boven dat een andere background heeft. Bepaald met de inspector welk vlak dat is, welke selector we daarvoor moeten gebruiken. Het blijkt de class hentry te zijn. Die moet geen background krijgen, dus een waarde none.

.page .hentry {
	background: none;
}

Lettertype, fonts en de @import regel

Als je andere fonts wilt gebruiken is het advies, gebruik er niet teveel naast elkaar. Eenheid in fonts geeft rust voor de gebruiker zo blijkt uit onderzoek. Google fonts importeren we via een zogenaamde @import regel die resulteert in het declareren van een font-family.

Ga naar Google Fonts. Selecteer een font naar keuze (b.v. het font Bungee). Op de font detailpagina klik je op de link ‘+ Select this style‘. Een kader ‘Selected family’ schuift in beeld.
Onder de tab ‘Use for the web’ selecteren we @import. In het code blok eronder selecteren we alleen de @import regel (dus niet de <style> open en sluit tags!).
We plakken de import-regel bovenaan de style.css zodat de font-family voor alle selectoren beschikbaar is.

/* r15 */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

Vervolgens moeten we bepalen welke selector we een Bungee font willen geven. Laten we alle H1-tags gebruiken. Op de Google pagina selecteren we onder ‘CSS rules to specify families’ de font-family regel en declareren die eigenschap aan de h1 tag.

h1 {
font-family: 'Bungee', cursive;
}

Geef een waarde !important mee

CSS gedraagt zich als een waterval. Soms blijken declaraties initieel niets te doen. Zoals nu. Kennelijk wordt er op een andere plek in de CSS stack een andere font-family gedeclareerd. Die moeten we overrulen door de waarde een !important statement mee te geven. Let op de syntax!

h1 {
font-family: 'Bungee', cursive !important;
}

Hoe krijg ik het voor elkaar om alleen op pagina’s dit font aan de h1 tag toe te voegen en tevens dat de tekst gecentreerd wordt?

.page h1 {
font-family: 'Bungee', cursive !important;
text-align: center;
}

Selectoren combineren

Hoe kun je één declaratie toepassen op meerdere selectoren? Daarvoor kunnen we gebruik maken van een komma. Stel we willen alle h1-tags op pagina’s én berichten zoals boven stijlen.

.page h1, .single h1 {
font-family: 'Bungee', cursive !important;
text-align: center;
}

Maar we willen voor de pagina Contact een uitzondering maken. Maak een pagina Contact. Bepaald de body class met vermelding van het ID. Hier willen we de h1-tag een andere, grijze kleur geven. Hieronder twee kleurmodellen (hexadecimaal en rgb). En rgba met een alpha of opacity kanaal. Je weet, de /* */ dient voor commentaar. Dus varieer welke eigenschap ‘aan staat’.

.page-id-6 h1 {
/* color: #C0C0C0;
color: rgb(192,192,192); */
color: rgba(192,192,192,75%);
}

Font border en font shadow

Sommige eigenschappen zijn nog zo nieuw dat niet alle browsers ze hebben geimplementeerd. Voor browsers waarbij het standaard nog niet werkt, gebruiken we een prefix. We gaan op de h1 van Contact een rand toepassen van 1px zwart en een tekst schaduw (online generator).

.page-id-6 h1 {
/* color: #C0C0C0;
color: rgb(192,192,192); */
color: rgba(192,192,192,75%);
-webkit-text-stroke: 2px black; /* width and color */
text-shadow: 2px 2px 2px #797B7C; /* h-shadow v-shadow blur-radius color */
}

Box shadow en blok class

Een kader een schaduw meegeven kan ook gerealiseerd worden om er extra de aandacht op te vestigen.

Voeg een paragraaf toe onder de pagina Contact en vul die met een vijftal regels tekst. Nu geef je het paragraaf blok een class mee: contactparag. Klik onder de tab blok van het contentpanel op de tab Geavanceerd zodat de opent en voer deze class in onder ‘Extra CSS-class(es)’. Overigens kun je meerdere classes toevoegen, altijd gescheiden door een spatie.

Ook de eigenschap box-shadow is nog niet in alle browsers aanwezig, dus je hebt een webkit nodig (online generator). Door deze class aan andere elementen toe te voegen, geef je ze deze specifieke box schaduw mee.

.contactparag {
-webkit-box-shadow: 0px 0px 15px -3px #444444; 
box-shadow: 0px 0px 15px -3px #444444;
}

Padding en margin

Het effect is er, maar de ruimte tussen de content en de rand omheen is een beetje karig. Geeft een beetje opgesloten gevoel. Dit is de padding van een element. Die moeten we iets vergroten, maar dan alleen voor deze class op de pagina Contact.

.page-id-6 .contactparag {
padding: 15px;
}

Je kunt de padding (en dit geldt overigens ook voor de margin) ook per zijde instellen. Per 4 zijden. Waarbij we altijd de volgende richting volgen: boven, rechts, onder en links. Klokgewijs dus.

.page-id-6 .contactparag {
padding: 15px 20px 25px 30px;
}

Voeg een tweede paragraaf toe onder Contact. Nu zorgen we dat we in deze padding declaratie ook de ruimte buiten het element wordt vergroot. Vooral de ruimte onder het element.

.page-id-6 .contactparag {
padding: 15px 20px 25px 30px;
margin-bottom: 50px;
margin: 0 0 50px 0; 
}

Om het effect nog dramatischer te maken, wijzig je de tweede margin declaratie van 50px naar 150px. De laatste declaratie overruled de eerste margin-bottom declaratie volgens het principe van de waterval (Cascading). Elk element onder deze paragraaf wordt altijd 150px lager gepositioneerd.

Rounded en utility classes

We kunnen elementen ook een ronde vorm geven of ronde hoeken. Door hiervoor classes aan te maken waarin in de naamgeving duidelijk wordt wat ze doen, worden het utility classes of classes die ons veel meer in staat stellen om de opmaak verder in classes te duiden. Geef de tweede paragraaf de class: rounded20-white. De eigenschap border-radius geeft de hoeken een ronde radius mee (online generator).

.rounded20-white {
background: white;
border: 2px solid #A42424;
border-radius: 20px;
padding: 10px;
text-align: center;
}

Border radius 50% heeft breedte en hoogte nodig

Als je de border-radius op 50% zal de browser er een cirkel van proberen te maken. De inhoud is hierbij wel van belang. Wanneer je de width en height niet definieert, is de inhoud maatgevend.
Voeg nog een paragraaf toe onder de bestaande met als inhoud de tekst: Ronde paragraaf. Geef die de utility class mee: rounded50p-300wh-white.

.rounded50p-300wh-white {
background: white;
border: 2px solid #A42424;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 50%;
}

Om de content van een rond vorm goed te centreren en te middelen moet je wat meer trucjes uit de doos halen.
Werken met utility classes kan je werkflow eenvoudiger maken én vooral sneller. Bovendien, al die classes zijn vanaf de stylesheet (style.css) te wijzigen. Controle en beheer vanuit een centraal punt. De naam van de classes bepaalt het gemakt waarop je ze gebruikt en hoe ze in je design passen.

Nieuw Child thema

Hoe maak je nu voor een ander (parent) thema een nieuw Child thema? Realiseer je dat alles wat je tot nu toe aan CSS declaraties hebt toegepast alleen geldt voor dit Child thema. Dus activeer je een ander thema dan begin je weer met een schone lei.

Werkwijze

Maak van de style.css en de functions.php kopieën en zet die in een (tijdelijke) map. Verwijder alle styling in de stylesheet zodat alleen het header blok overblijft. Bepaal de naam van de map van je parent theme en gebruik deze als Constante Template in het header block. Stel twentynineteen is de nieuwe parent dan is dit je nieuwe headerblok:

/*
 Theme Name:   Twenty Nineteen Child
 Theme URI:    http://jouwdomein.nl/twenty-nineteen-child/
 Description:  Basic Child theme constructie: 2 bestanden. Template variabele moet 1 op 1 gelijk zijn aan de mapnaam van het parent theme;
 Author:       Mamma Loe
 Author URI:   http://mammaloe.nl
 Template:     twentynineteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         basic functionality, child 20 11
 Text Domain:  twentynineteen-child
*/

De functions.php is voor elk child theme bruikbaar. Je kunt de screenshot.png van het parent thema nog bewerken en dat aan de map toevoegen. Zip alles. En gebruik de methode Weergave > Nieuwe toevoegen > Thema uploaden om een child thema uit te rollen. Let wel op dat het parent thema ook aanwezig is.

Probeer nu declaraties te ontwikkelen en dit thema naar je hand te zetten.
Als je zover bent voor de volgende oefeningen, maak dan weer het Twenty Twenty-One Child thema het actieve thema.

twentynineteen-child-1 Download

Actions, filters en shortcodes

WordPress is opgebouwd volgens objecten (‘object-oriented’). Hierdoor kunnen allerlei deel-functies die zeg maar toeleverancier zijn van componenten, netjes in een eigen core bestand worden geschreven en samenkomen in templates.

We kunnen in deze keten van objecten ingrijpen door de functie add_action. Op een bepaald punt in de WordPress keten kunnen we een actie invoegen. Meer informatie over actions. We kunnen ook content filteren met de functie add_filter. Meer info. Met de functie add_shortcode kunnen we zelf een shortcode maken. Tussendoor moeten we ons verdiepen in PHP!

We kunnen de volgende bewerkingen in principe in de functions.php van ons Child thema zetten, maar dan blijven die gekoppeld aan het thema. We kunnen een plugin installeren waarmee we thema onafhankelijk functies kunnen toevoegen via snippets, dat zijn codefragmenten.

Plugin: Code Snippets van Code Snippets Pro

Installeer en activeer deze plugin.

Je eigen shortcode maken

We kennen een shortcode vooral van het contactformulier. Het staat tussen haken [shortcode] en heeft vaak attributen of parameters [shortcodenaam attribuut=”waarde”]. Wanneer je een shortcode toevoegt via een shortcode blok, zal het op de front-end worden vervangen door een html object. Dus een volledig werkend contactformulier.

Stel we willen overal op de site waar dat zinvol is een bepaalde boodschap neerzetten. Dan kunnen we daarvoor een speciale shortcode maken. Maak een nieuwe fragment aan:

wp-navmenu > Snippets > Add New > Naam = boodschap_sc

Neem onderstaande code over in het Code venster van het nieuwe fragment (we maken hier gebruik van de utility class rounded20-white) die we eerder hebben gemaakt. Activeer de optie ‘Alleen uitvoeren op de website’. Een omschrijving is handig als je met anderen samenwerkt, daar zou in kunnen opnemen hoe je deze shortcode gebruikt.
Bij label

add_shortcode( 'boodschap_sc', function () {

	$out = '<p class="rounded20-white">Ik hoef dit dus maar op 1 plek te beheren!!</p>';

	return $out;
} );

Klik onderaan op de blauwe knop ‘Wijzigingen opslaan en activeren‘. Heb je alleen wijzigingen aangebracht (de snippet is al actief) klik dan alleen op de knop rechtsboven ‘Save changes‘.

Verklaring:
De WordPress php functie add_shortcode kent op de eerste plaats een naam toe aan de shortcode.
Daaraan wordt een functie geplakt (function() {
In de functie wordt een variabele out gedeclareerd ($out =)
De waarde van $out is gelijk aan een p-tag, met een class en inhoud of content. Omdat de inhoud html bevat, moeten we die omsluiten met enkelvoudige quotes ( ‘ inhoud ‘ ) zodat we de dubbele quotes om de class waarde kunnen gebruiken.
Ik kan nu niet PHP helemaal voor je duiden en verhelderen en zal hier moeten volstaan met bepaalde conventies.

Overal waar we in WordPress berichten of pagina’s een shortcode blok toevoegen met de waarde [boodschap_sc] zal bovenstaande inhoud verschijnen, in de stijl van de utility class (mits thema 20 21 one child actief is).

Wanneer je de plugin Code Snippets op een later tijdstip deactiveert, ben je deze functionaliteit ook kwijt.

Open het bericht Hallo World en voeg deze shortcode toe. Werk bij en bekijk de front-end.

Shortcode naam en leeftijd

Met PHP is rekenen een makkie. Plus, we kunnen attributen meenemen in de weergave van shortcodes. In dit voorbeeld nemen we de naam over en gaan we de leeftijd berekenen op basis van de functie date().

Maak een nieuw fragment aan. Noem die naam_leeftijd_sc. We gaan deze ‘Alleen uitvoeren op de website’ (dus niet in de back-end). Omschrijving en labels is voor je eigen administratie.

function shortcode_waarden( $atts ) {
	
   $a = shortcode_atts( array( 'naam' => 'world', 'geboren' => '1981' ), $atts );
	
	/* Even de leeftijd uitrekenen */
	$leeftijd = date('Y') - $a['geboren'];
	
   $out = '<p><h4>Hallo ' .$a['naam']. ' je bent ' .$leeftijd. ' jaar jong !</h4></p>';
	
   return $out;
}

add_shortcode( 'naam_leeftijd_sc', 'shortcode_waarden' );

Open het bericht Hallo World. Dupliceer de shortcode. Wijzig de shortcode in:

[naam_leeftijd_sc naam="Piepo de Clown" geboren="1971"]

Verklaring:

De variabele $a bevat een array die we toekennen aan de functie shortcode_atts. Dit zijn attributen die we in onze shortcode willen gebruiken en extern kunnen invoegen. Meer attributen toevoegen kan tricky zijn vanwege de syntax of wijze van notatie. Bovendien moet je dan in de $out ook nog een toevoeging doen, anders zie je het toegevoegde attribuut niet op de front-end terug. Zie hieronder waar we geboorteplaats hebben toegevoegd en de $a anders hebben uitgeschreven.

function shortcode_waarden( $atts ) {
	
   #$a = shortcode_atts( array( 'naam' => 'world', 'geboren' => '1981' ), $atts );
	
   $a = shortcode_atts( array( 
'naam' => 'world',
'geboren' => '1981',
'geboorteplaats' => 'Amsterdam'
 ), $atts );		
	
	/* Even de leeftijd uitrekenen */
	$leeftijd = date('Y') - $a['geboren'];
	
   $out = '<p><h4>Hallo ' . $a['naam'] . ' je bent '.$leeftijd.' jaar jong en geboren in ' .$a['geboorteplaats']. '!</h4></p>';
	
   return $out;
}

add_shortcode( 'naam_leeftijd_sc', 'shortcode_waarden' );

Nog meer atts? Kopieer de laatste combinatie name => value, plak die eronder en vergeet dan niet om een komma achter de voorlaatste combi te zetten.
Werk de shortcode die je had gebruikt bij en bekijk de output op de front.

copyright_sc

We kunnen een shortcode het actuele moment van de dag laten weergeven. Dat is prettig, want elke wijziging passen we dan op één plek toe (in de snippet). Nieuw fragment: copyright_jaar_sc. Alleen uitvoeren op de website.

add_shortcode( 'copyright_jaar_sc', function () {
echo '<p>copyright ' .date("Y").'</p>';
} );

Toepassing is zoals gebruikelijk via een shortcode blok. Maar we kunnen de php code ook direct in een template schrijven. Bijvoorbeeld de footer.php (een kopie in de Child thema map) en deze paragraaf onderaan elke pagina laten verschijnen.

<?php echo '<p>copyright ' .date("Y").'</p>'; ?>

Een plugin maken

Het is minder moeilijk dan je denkt! Het is vooral een kwestie van weten hoe je dat doet. En … ja het kan heel snel te ingewikkeld worden. Het gaat in deze training vooral om bekend raken met en weten waar en hoe je ‘deurtjes’ kunt openen.

Doel: onder berichten en pagina’s verschijnt een kloppend hart met daaronder een h3 tag met tekst.

My First Plugin Hartslag

Elke plugin heeft een header. Die is belangrijk voor WordPress. We gaan een nieuw bestand aanmaken en slaan dat op als hartslag_plugin.php. Hierin openen we met deze header:

<?php /**
* Plugin Name: My First Plugin Hartslag
* Plugin URI: http://www.mijndomein.nl/my-first-plugin
* Description: The very first plugin that I have ever created. * Version: 1.0
* Author: Clownesk persoon
* Author URI: http://www.mijndomein.nl
*/

/* We gaan voor deze plugin ook wat CSS declaraties in de head toevoegen 
Overgenomen van https://codepen.io/fivera/pen/rzepn
 */

We houden het eenvouding! Dan komt een add_action functie die na the_content zal worden toegevoegd. Dus op de plek waar alle content is opgehaald uit de database.

add_action( 'the_content', 'mijn_hartslag_onder_content' );

function mijn_hartslag_onder_content ( $content ) {
	return $content.= <<<EOD
	<style>
	#parent_container { text-align: center; }
	.heart {
		font-size: 50px;
		color: #e00;
		animation: beat .5s infinite alternate;
		transform-origin: center;
	}

	/* Heart beat animation */
	@keyframes beat{
		to { transform: scale(1.4); }
	}
	</style>

	<div id="parent_container">
		<div class="heart">&#x2665;</div>
		<h3>Volg de hartslag</h3>
	</div>
	EOD;
} 
?>

<<<EOD en als afsluiting EOD; heet de HEREDOC methode, waarbij we in een PHP variabele meerdere regels HTML kunnen toepassen. Dat is super handig omdat we nu een style-tag blok kunnen toevoegen en wat html. Zonder dat we ons hoeven bezig te houden met de syntax van php wat betreft het combineren van php met html of css.

Zie erop toe dat je na de afsluitende ?> geen spaties hebt staan!! Dat zal een foutmelding kunnen opleveren.

Zip dit php bestand. Hernoem de zip naar: hartslag_plugin.php en installeer die op je LocalWP site. Activeer en check de front-end op Hello World en Sample Page. Op de homepage is de output kleiner en is het knipperend hart zwart.

hartslag_plugin Download

Code editor

We zijn altijd gewend om in WordPress met de Visuele editor te werken (What You See Is What You Get). We kunnen lering trekken uit de systematiek van het werken met Gutenberg Blokken. Schakel maar eens op het bericht Hello World naar de Code editor. Rechtsboven op Opties (drie vertikale puntjes) en onder Editor.

Paragraaf

<!-- wp:paragraph -->
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<!-- /wp:paragraph -->

Shortcodes

<!-- wp:shortcode -->
[naam_leeftijd_sc naam="Piepo de Clown" geboren="1971" geboorteplaats="Amsterdam"]
<!-- /wp:shortcode -->

Kolom (50 /50)

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Koptekst</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Tekst in een paragraaf</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Groep

<!-- wp:group {"backgroundColor":"purple","textColor":"gray"} -->
<div class="wp-block-group has-gray-color has-purple-background-color has-text-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Koptekst</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Tekst in een paragraaf</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

Eigen html

Het blok ‘Eigen html’ biedt diverse mogelijkheden omdat we daarmee een eigen draai kunnen geven. Iets dat beperkter is bij de hiervoor gedemonstreerde blokken. Omdat niet alles wat we binnen een paragraaf blok aan code zouden schrijven wordt geaccepteerd.

<!-- wp:html -->
<div>Dit is een div</div>
<!-- /wp:html -->

Dit kan hier ook mee worden gedaan.

<!-- wp:html -->
<style>
	#parent_container { text-align: center; border: 1px solid red;}
	.heart {
		font-size: 100px;
		color: #e00;
		animation: beat .5s infinite alternate;
		transform-origin: center;
	}

	/* Heart beat animation */
	@keyframes beat{
		to { transform: scale(1.4); }
	}
	</style>

	<div id="parent_container">
		<div class="heart">&#x0260E;</div>
		<h3>Bel 010 - 1234567</h3>
	</div>
<!-- /wp:html -->

Voor inspiratie zou je eens op codepen.io moeten kijken.

Contact

Vragen of opmerkingen graag via onderstaand contactformulier:

Naar de top