Shortcode met countdown functie

Doel

Toevoegen van een teller, die het resterende aantal maanden, dagen, uren en minuten op de website kan tonen via een shortcode, waarin datum/tijd en gebeurtenis kunnen worden opgegeven.

Aanleiding/overwegingen

De familie verwachtte toch wel dat ik digitaal zou aftellen naar mijn pensioen (naast de afkruis kalender op mijn werk). Daarom maar aan de website toegevoegd. Liever gebruik ik geen plug-in. Ik streef ernaar het zo eenvoudig mogelijk te houden. Het hoeft niet als een benzinepomp de seconden af te tellen. Verversen bij openen van de pagina is voldoende.

Voorbereiding

Ik ga er vanuit dat er al gewerkt wordt met een Child thema. Dat is het handigst en veiligst indien aanpassingen aan de standaard functionaliteit worden gemaakt. De aanpassing hieronder voegen we toe aan het nieuw te maken of bestaande functions.php in het child thema.

Uitvoering

• Open functions.php en voeg onderstaande code toe.
• Sla het bestand op en ready is case.

//--------------------------------------------------------
// Jan Peppink - https://ict.peppink.nl
// Add countdown shortcode.
add_shortcode('count_down_to', 'count_down_shortcode');

function count_down_shortcode ($atts = [])
{
	//Example shortcode: [count_down_to targetdate="31-7-2021 16:30" subject="Pensioendatum"]
	date_default_timezone_set('Europe/Amsterdam');
	$datestring = $atts['targetdate'];
	$subject = $atts['subject'];
	$fromdate = new DateTime();
	$todate = new DateTime($datestring);
	// Calculate counter values
	$interval = $fromdate->diff($todate);
	$totalday = $interval->format('%a');
	$year = $interval->format('%y');
	$month = $interval->format('%m');
	$day = $interval->format('%d');
	$hour = $interval->format('%h');
	$minute = $interval->format('%i');
	// Calculate singular or plural string
	$strtotalday = ( $totalday > 0 ) ? ' dagen.' : ' dag.';
	$strpasttotalday = ( $totalday > 0 ) ? ' dagen geleden.' : ' dag geleden.';
	$stryear = ( $year > 0 ) ? ' jaren, ' : ' jaar, ';
	$strmonth =  ( $month > 0 ) ? ' maanden, ' : ' maand, ';
	$strday = ( $day > 0 ) ? ' dagen, ' : ' dag, ';
	$strhour = ( $hour > 0 ) ? ' uren en ' : ' uur en ';
	$strminute = ( $minute > 0 ) ? ' minuten.' : ' minuut.';
	$strpastminute = ( $minute > 0 ) ? ' minuten geleden.' : ' minuut geleden.';

	// Event is still in future
	if ( ( $year > 0 ) && ( $fromdate < $todate ) ) {
		$resultstring = $subject . ' is over ' . $totalday . $strtotalday . '<br />Oftewel nog ' . $year . $stryear . $month . $strmonth . $day . $strday . $hour . $strhour . $minute . $strminute;
	} elseif ( ( $month > 0 ) && ( $fromdate < $todate ) ) {
		$resultstring = $subject . ' is over ' . $totalday . $strtotalday . '<br />Oftewel nog ' . $month . $strmonth . $day . $strday . $hour . $strhour . $minute . $strminute;
	} elseif ( ( $day > 0 ) && ( $fromdate < $todate ) ) {
		$resultstring = $subject . ' is al over ' . $day . $strday . $hour . $strhour . $minute . $strminute;
	} elseif ( ( $hour > 0 ) && ( $fromdate < $todate ) ) {
		$resultstring = $subject . ' is over nog maar ' . $hour . $strhour . $minute . $strminute;
	} elseif ( ( $minute > 0 ) && ( $fromdate < $todate ) ) {
		$resultstring = $subject . ' is om precies te zijn over ' . $minute . $strminute;
	}
	// Event is in past
	if ( ( $year > 0 ) && ( $fromdate > $todate ) ) {
		$resultstring = '<strong>' . $subject . '</strong> Was ' . $totalday . $strpasttotalday . '<br />Oftewel ' . $year . $stryear . $month . $strmonth . $day . $strday . $hour . $strhour . $minute . $strminute;
	} elseif ( ( $month > 0 ) && ( $fromdate > $todate ) ) {
		$resultstring = $subject . ' was ' . $totalday . $strpasttotalday . '<br />Oftewel nog ' . $month . $strmonth . $day . $strday . $hour . $strhour . $minute . $strminute;
	} elseif ( ( $day > 0 ) && ( $fromdate > $todate ) ) {
		$resultstring = $subject . ' was ' . $day . $strday . $hour . $strhour . $minute . $strpastminute;
	} elseif ( ( $hour > 0 ) && ( $fromdate > $todate ) ) {
		$resultstring = $subject . ' was nog maar ' . $hour . $strhour . $minute . $strpastminute;
	} elseif ( ( $minute > 0 ) && ( $fromdate > $todate ) ) {
		$resultstring = $subject . ' was om precies te zijn ' . $minute . $strpastminute;
	}
	return $resultstring;
}

Toelichting bij de regels

• 1-3: Commentaar.
• 4: Voeg shortcode toe met naam ‘count_down_to’. Deze roept vervolgens de functie genaamd ‘count_down_shortcode’ aan.
• 6: Aan de functie kunnen meerdere argumenten worden doorgegeven, die in de array $atts worden geplaatst.
• 8: Toont een voorbeeld voor de aanroep. targetdate geeft de datum/tijd op en subject toont het onderwerp van de gebeurtenis.
• 9: Zet de tijdzone op Europa/Amsterdam.
• 10: In de $datestring variabele slaan we de op te geven datum/tijd string op.
• 11: In $subject slaan we het onderwerp op.
• 12: In $fromdate slaan we huidige (start)tijdstip op
• 13: In $todate stoppen we het opgegeven (eind)tijdstip van de gebeurtenis in een nieuw datetime object.
• 15: In $interval bewaren we de met diff functie berekende tussenliggende tijd.
• 16-21: Vervolgens stoppen we het aantal jaar, maanden, dagen, uren en minuten in een variabele om hierop te kunnen checken en om deze weer te kunnen geven.
• 23-30: Afhankelijk van aantal stellen we de weer te geven string voor jaren, maanden, dagen, uren en minuten in op enkelvoud of meervoud.
• 33-43: Afhankelijk van de resterende tijd geven we op grond van de waarde van de variabelen een ander resultaat weer. De weergave wordt naar wens geformatteerd, waarbij ook het opgegeven onderwerp in het resultaat wordt opgenomen.
• 45-55: Als het tijdstip gepasseerd is, dan is de gebeurtenis een feit en wordt de sindsdien verstreken tijd berekend.
• 56: Het resultaat wordt geretourneerd en daarmee getoond op de plaats waar het werd aangeroepen.
• Voor onderstaand resultaat wordt de shortcode op de volgende wijze aangeroepen:

[count_down_to targetdate="31-7-2021 16:30" subject="Pensioendatum"]

Resultaat

Tips

• Zie php.net voor info over de formatering.
• De shortcode is ook opgenomen in een ’text widget’ die aan de footer van de website is toegevoegd.