Categorie├źn
Wordpress-Website

Shortcode met countdown functie

Een functie, die via shortcode een countdown teller toont.

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-07-2021 16:30" subject="Pensioen?"]
	$datestring = $atts['targetdate'];
	$subject = $atts['subject'];
	$fromdate = new DateTime();
	$todate = new DateTime($datestring);
	$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');
	if ($year > 0) {
		$resultstring = $subject." Over ".$totalday." dagen.</br>Ofwel nog ".$year." jaar, ".$month." maanden, ".$day." dagen, ".$hour." uren en ".$minute." minuten!";
	} elseif ($month > 0) {
		$resultstring = $subject." Over ".$totalday." dagen.</br>Ofwel nog ".$month." maanden, ".$day." dagen, ".$hour." uren en ".$minute." minuten!";
	} elseif ($day > 0) {
		$resultstring = $subject." Over ".$day." dagen, ".$hour." uren en ".$minute." minuten!";
	} elseif ($hour > 0) {
		$resultstring = $subject." Over nog maar ".$hour." uren en ".$minute." minuten!";
	} elseif ($minute > 0) {
		$resultstring = $subject." Het is een feit sinds ".$datestring." uur!";
	} else {
		$resultstring = $subject.' Het is een feit!';
	}
	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: In de $datestring variabele slaan we de op te geven datum/tijd string op.
  • 10: In $subject slaan we het onderwerp op.
  • 11: In $fromdate slaan we huidige (start)tijdstip op
  • 12: In $todate stoppen we het opgegeven (eind)tijdstip van de gebeurtenis in een nieuw datetime object.
  • 13: In $interval bewaren we de met diff functie berekende tussenliggende tijd.
  • 14-19: 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.
  • 20-29: 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.
  • 31: Als alle tellers op nul staan, dan is de gebeurtenis een feit.
  • 33: 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-07-2021 16:30" subject="Pensioen?"]

Resultaat

Pensioen? Over 80 dagen.
Oftewel nog 2 maanden, 19 dagen, 18 uren en 6 minuten!

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.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *