Een Countdown Timer Widget bouwen

We houden allemaal van een feest, en nu Pasen voorbij is, kijken we uit naar de volgende gelegenheid. Hoe ver weg is de volgende gelegenheid die je graag viert? Wat het ook is, laten we een widget-plug-in bouwen om een ​​afteltimer aan onze zijbalk toe te voegen die laat zien hoe lang we nog moeten wachten.

1. Een voorsprong nemen

Er zijn een aantal dingen die we moeten doen elke keer dat we een WordPress-plug-in ontwikkelen, en nog specifieker, een widget. Dankzij een van onze auteurs hier bij Wptuts +, Tom McFarlin, kunnen we snel van start gaan door de WordPress Widget Boilerplate te gebruiken.

Om de WordPress Widget Boilerplate te gebruiken, download hem, pak hem uit en verplaats de directory widget-standaardtekst in jouw / Wp-content / plugins / directory. Hernoem het dan wptuts-countdowner.

In die map vind je het belangrijkste PHP-bestand, plugin.php, waar we ook naar hernoemen wptuts-countdowner.php.

Nu zijn we klaar om in de code te komen.

2. Re-Badging van de ketelplaat

Binnen in de wptuts-countdowner.php dossier is al het zware werk gedaan voor ons door de standaardplaat. Om te beginnen, we moeten het aanpassen aan de naam van onze plug-in. Als we dan onze eigen code hebben geschreven, kunnen we ook de extra stukjes van de boilerplate weggooien die we misschien niet nodig hebben.

De header-informatie van de plug-in ziet er als volgt uit:

  
Dus repareer dat met de details van onze plug-in:
 
  
We moeten ook een paar verwijzingen door de standaardcode wijzigen om de generieke verwijzingen te wijzigen om onze plugin-naam te gebruiken. De meeste plaatsen waar je dit moet doen, worden aangegeven met een 'TE DOEN'.
 
Zoek en vervang 'widget-naam'met'wptuts-countdowner', en ook 'WIDGET_NAME'met'Wptuts_Countdowner'. Nu heeft de plug-in een eigen naam!
 
Nu heb je een plug-in die je kunt activeren in je WordPress Dashboard. Eenmaal geactiveerd, ziet u onder Uiterlijk -> Widgets het begin van onze widget:
  
 
Zoals je ziet, ziet het er op dit moment behoorlijk algemeen uit. Dus update de volgende code:
 
 // TODO: update classname en beschrijving // TODO: vervang 'wptuts-countdowner-locale' om meer plugin-specifiek te worden genoemd. Andere gevallen bestaan ​​ook in de hele code. parent :: __ construct ('wptuts-countdowner-id', __ ('Widgetnaam', 'wptuts-countdowner-locale'), array ('classname' => 'wptuts-countdowner-class', 'description' => __ ('Korte beschrijving van de widget komt hier.', 'Wptuts-countdowner-locale')));
 
Om de naam en beschrijving van onze widget weer te geven:
 
 // TODO: update classname en beschrijving // TODO: vervang 'wptuts-countdowner-locale' om meer plugin-specifiek te worden genoemd. Andere gevallen bestaan ​​ook in de hele code. parent :: __ construct ('wptuts-countdowner-id', __ ('Wptuts + Countdowner', 'wptuts-countdowner-locale'), array ('classname' => 'wptuts-countdowner-class', 'description' => __ ("Een widget om een ​​afteltimer weer te geven in de zijbalk van uw site.", 'Wptuts-countdowner-locale')));
 
Nu hebben we dit:
  
 
 
 3. Verzamel informatie van de gebruiker
 
Onze widget heeft een naam en datum nodig voor het aftellen (of maximaal) van de gebeurtenis.
 
We moeten dus een formulier maken dat kan worden gebruikt wanneer onze widget wordt toegevoegd aan een zijbalk voor configuratie. De WordPress Widget Boilerplate scheidt het HTML-gedeelte in uitzicht bestanden voor een mooie, schone scheiding van zorgen. We zullen onze variabelen in de methode instellen en vervolgens het formulier zelf in de beheerdersweergave.
 
Dit is de methode. Wijzigingen voor onze plug-in die worden aangeduid met hoogtepunten.
 
 / ** * Genereert het beheerformulier voor de widget. * * @param array-instantie De reeks sleutels en waarden voor de widget. * / public function form ($ instance) // TODO: Definieer standaardwaarden voor uw variabelen $ instance = wp_parse_args ((array) $ instantie); // TODO: sla de waarden van de widget in hun eigen variabele op als (! Empty ($ instance ['event'])) $ event = $ instance ['event'];  else $ event = __ ('Naam evenement', 'wptuts-countdowner-locale');  if (! empty ($ instance ['event_date'])) $ event_date = $ instance ['event_date'];  else $ event_date = date ('Y-m-d');  // Toon het admin formulier include (plugin_dir_path (__ FILE__). '/Views/admin.php');  // eindvorm
 
U merkt aan het einde van de methode dat er een is omvatten voor het uitzicht. Dus open /wp-content/plugins/wptuts-countdowner/views/admin.php. Voeg de volgende code toe aan dat bestand:
 
 
   
 
   
 
Nu kunt u het WordPress Dashboard vernieuwen en de widget aan uw zijbalk toevoegen, die er als volgt uitziet:
  
 
Helaas zal alles wat je in die velden stopt nog niet opslaan, dus we moeten de bijwerken methode als volgt:
 
 / ** * Verwerkt de opties van de widget om te worden opgeslagen. * * @param array new_instance Het vorige exemplaar van waarden vóór de update. * @param array old_instance Het nieuwe exemplaar van waarden dat via de update moet worden gegenereerd. * / update openbare functie ($ new_instance, $ old_instance) $ instance = $ old_instance; // TODO: Hier voert u de oude waarden van uw widget bij met de nieuwe, inkomende waarden $ instance ['event'] = strip_tags ($ new_instance ['event']); $ instance ['event_date'] = strip_tags ($ new_instance ['event_date']); return $ instantie;  // einde widget
 
Nu hebben we een werkende widget admin! U kunt de widget naar uw zijbalk slepen en de details voor een gebeurtenis opslaan, zoals Kerstmis:
  
 
 
 4. Weergeven op de voorkant
 
Nu hebben we afspraakdetails voor de afteltijd, laten we dit aan de voorkant van de site in de zijbalk weergeven.
 
 / ** * Voert de inhoud van de widget uit. * * @param array args De array met formulierelementen * @param array-instantie Het huidige exemplaar van widget * / public function widget ($ args, $ instance) extract ($ args, EXTR_SKIP); echo $ before_widget; // TODO: Hier manipuleer je de waarden van je widget op basis van hun invoervelden $ event = apply_filters ('wptuts_countdowner_event', $ instance ['event']); $ event_date = apply_filters ('wptuts_countdowner_event_date', $ instance ['event_date']); include (plugin_dir_path (__FILE__). '/ views / widget.php'); echo $ after_widget;  // einde widget
 
Net als bij het beheerdersformulier gebruiken we een uitzicht voor de voorkant ook, om de HTML gescheiden te houden. Open je /wp-content/plugins/wptuts-countdowner/views/widget.php bestand en voeg het volgende toe:
 
  
 
 5. Teldagen
 
Dus we hebben nu een evenement en een datum / tijd-weergave, maar dat betekent niet dat we aftellen. We moeten een klein beetje code toevoegen om te bepalen hoeveel dagen er tussen de datum van het evenement en de datum van vandaag zitten. Omdat onze datum in het verleden of de toekomst kan zijn, moeten we ook een achtervoegselwoord toevoegen om aan te geven welk.
 
Hier is de code die we toevoegen aan het frontend gedeelte van de widget:
 
 / ** * Voert de inhoud van de widget uit. * * @param array args De array met formulierelementen * @param array-instantie Het huidige exemplaar van widget * / public function widget ($ args, $ instance) extract ($ args, EXTR_SKIP); echo $ before_widget; // TODO: Hier manipuleer je de waarden van je widget op basis van hun invoervelden $ event = apply_filters ('wptuts_countdowner_event', $ instance ['event']); $ event_date = apply_filters ('wptuts_countdowner_event_date', $ instance ['event_date']); $ event_date_seconds = datum ('U', strtotime ($ event_date)); $ today_date_seconds = datum ('U'); $ event_date = human_time_diff ($ event_date_seconds); $ suffix = ($ event_date_seconds> $ today_date_seconds? 'away': 'ago'); include (plugin_dir_path (__FILE__). '/ views / widget.php'); echo $ after_widget;  // einde widget
 
Wat we daar doen, is het verkrijgen van de huidige tijdstempel in seconden voor het evenement en voor vandaag. We krijgen dan de voor mensen leesbare versie (d.w.z.. 267 dagen). We werken ook uit, op basis van de vraag of de datum van het evenement in het verleden of de toekomst ligt, welk achtervoegselwoord moet worden gebruikt.
 
Nu hebben we een achtervoegselwoord, we kunnen het maar beter aan de weergave toevoegen:
 
  
Nu hebben we iets dat een beetje meer respectabel lijkt en wat logischer is.
  
 
 
 6. Kies een datum
 
Het is een beetje lelijk om handmatig een datum in te typen, dus laten we de jQuery UI Datepicker toevoegen, aangezien deze is opgenomen in WordPress.
 
Een ding dat niet is inbegrepen, is de CSS voor de datumkiezer. Dus pak de CSS-bestand en de afbeeldingen-map uit de WP Admin jQuery UI repository van Helen Hou-Sandi op GitHub en plaats ze in je / Wp-content / plugins / wptuts-countdowner / css / directory.
 
Dan moeten we WordPress downloaden om ze te laden door de boilerplate's aan te passen register_admin_scripts en register_admin_styles methoden, zoals:
 
register_admin_scripts
 
 / ** * Registreert en voorziet in beheerdersspecifieke JavaScript. * / public function register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // TODO: Wijzig 'wptuts-countdowner' in de naam van uw plug-in wp_enqueue_script ('wptuts-countdowner-admin-script', plugins_url ('wptuts-countdowner / js / admin.js'));  // end register_admin_scripts
 
register_admin_styles
 
 / ** * Registreert en brengt beheerdersspecifieke stijlen bij elkaar. * / public function register_admin_styles () // TODO: Wijzig 'wptuts-countdowner' in de naam van je plug-in wp_enqueue_style ('wp-admin-jquery-ui', plugins_url ('wptuts-countdowner / css / jquery-ui-fresh .css ')); wp_enqueue_style ('wptuts-countdowner-admin-styles', plugins_url ('wptuts-countdowner / css / admin.css'));  // end register_admin_styles
 
Voeg ten slotte uw jQuery-code toe aan de standaard van de boilerplate admin.js bestand om de datepicker tot aan het veld te haken.
 
 (functie ($) "gebruik strict"; $ (function () // Plaats hier je beheerspecifieke JavaScript jQuery ('. wptuts-event-date'). datepicker (dateFormat: 'yy-mm-dd' );); (jQuery));
 
 
 7. Opruimen
 
De standaard bevat een aantal dingen die we niet in deze plug-in hebben gebruikt, dus het is een goed idee om de lading lichter te maken en ze te verwijderen. De extra's zijn deze bestanden:
 
 
/css/admin.css
 
/css/widget.css
 
/js/widget.js
 
 
En deze methoden in de wptuts-countdowner.php het dossier:
 
 
activeren
 
deactiveren
 
register_widget_scripts
 
register_widget_styles
 
Ook regel wp_enqueue_style ('wptuts-countdowner-admin-styles', plugins_url ('wptuts-countdowner / css / admin.css')); van de register_admin_styles methode
 
 
 
Conclusie
 
Daar heb je het! Een WordPress plug-in op basis van de Widget Boilerplate waarmee je kunt laten zien hoeveel dagen tot (of sinds) een evenement.
 
Ik hoop dat je het nuttig hebt gevonden, deel je mening in de reacties hieronder.



		
			
	   
	




Code