at bygge en nedtælling timer dims

, opbygning af en nedtælling timer dims,,,,, andel,,,,,,,, 4,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, vi alle elsker en fest, og nu er det påske er slut, og vi ser frem til næste gang.hvor langt væk er den næste gang, du vil fejre det?hvad det end er, lad os bygge en dims stik af at tilføje en nedtælling timer til vores gruppemøde, der viser, hvor lang tid vi har tilbage at vente.,,, 1.at få et forspring, er der en række ting, vi skal gøre, hver gang vi er ved at udvikle en wordpress stik af, og endnu mere specifikt, en dims.takket være en af vores forfattere på wptuts +, tom mcfarlin, kan vi komme i gang hurtigt ved hjælp af wordpress dims boilerplate. - for at bruge den wordpress dims boilerplate, downloade det, lyn den op og flytte den fortegnelse, dims boilerplate, i dine, /wp indhold /plugins /, fortegnelse.så omdøbe det, wptuts countdowner,., i det register, du vil finde de vigtigste php fil, stik af. folkesundhedsprogrammet, er, som vi vil også omdøbe til wptuts countdowner. php,., nu er vi klar til at gå i kode., 2.det er badging boilerplate, indenfor, wptuts-countdowner.php, filen er alt det hårde arbejde har gjort for os, som boilerplate.til at begynde med, vi har bare brug for at tilpasse det til at afspejle vores navn. stik af.så når vi har skrevet vores egen kode, vi kan også smide de ekstra dele af boilerplate, som vi ikke har brug for., stik af header oplysninger vil se sådan ud:, <?php /* stik af navn, stik af uri: todo beskrivelse: todo version 1.0. forfatter: todo forfatter uri: todo forfatter e - mail: todo tekst domæne: widget navn locale område vej: /lang /net: falske kørekort: gplv2 eller senere kørekort uri: http://www.gnu.org/licenses/gpl-2.0.html ophavsret 2012 todo ([email protected]) programmet er gratis software. du kan omfordele og /eller ændre det, inden for rammerne af den nationale samlingsregering i offentligheden, kørekort, 2. udgave, som blev offentliggjort af fri software - fonden.dette program er fordelt i det håb, at det vil være nyttigt, men uden nogen garanti, selv uden underforstående garantier for merchantability eller egnethed til et bestemt formål.se den nationale samlingsregering generelle offentlige licens for flere detaljer.du skulle have modtaget en kopi af den nationale samlingsregering generelle offentlige kørekort med dette program; hvis ikke, skrive til gratis software - instituttet, inc., 51, franklin st. femte sal, boston, mor 02110-1301 usa * /er, så ordner det sig med detaljer om vores stik af:, <?php /* stik af navn: wptuts + countdowner stik af uri: todo beskrivelse: en dims til at udvise en nedtælling timer i dit sted er gruppemøde.version 1.0. forfatter: japh forfatter uri: http://wp.tutsplus.com/author/japh tekst, område: wptuts countdowner locale område vej: /lang /net: falske kørekort: gplv2 eller senere kørekort uri: http://www.gnu.org/licenses/gpl-2.0.html ophavsret 2013 japh dette program er gratis software; man kan omfordele og /eller ændre det, inden for rammerne af den nationale samlingsregering i offentligheden, kørekort, version 2, som er offentliggjort af fri software - fonden.dette program er fordelt i det håb, at det vil være nyttigt, men uden nogen garanti, selv uden underforstående garantier for merchantability eller egnethed til et bestemt formål.se den nationale samlingsregering generelle offentlige licens for flere detaljer.du skulle have modtaget en kopi af den nationale samlingsregering generelle offentlige kørekort med dette program; hvis ikke, skrive til gratis software - instituttet, inc., 51, franklin st. femte sal, boston, mor 02110-1301 usa * /, bliver vi også nødt til at ændre et par henvisninger i boilerplate kode for at ændre den generelle henvisninger til brug vores stik af navn.de fleste af de steder, hvor man bliver nødt til at gøre dette, er angivet med en ",,,., finde og erstatte" dims navn, "med", wptuts countdowner, "samt", widget_name, "med", wptuts_countdowner ".- stik af har sit eget navn!nu har du et stik af, du kan aktivere din wordpress instrumentbræt.når de er aktiveret, når man ser på udseende - > widgets, vil du se begyndelsen på vores widget:,,,,, så du kan se, det ser ret generiske i øjeblikket.- ajourføring af følgende kode: //todo: ajourføring classname og beskrivelse //todo: i stedet for "wptuts countdowner locale 'nævnt flere stik af specifikke.i andre tilfælde findes i kodeksen, også.forældre: __construct ('wptuts-countdowner-id, __ ("dims navn, wptuts countdowner locale ') system ('classname = >'wptuts-countdowner-class,'description = > __ (kort beskrivelse af den dims er her.", "wptuts countdowner locale')), for at afspejle navnet på og en beskrivelse af vores widget: //todo: ajourføring classname og beskrivelse //todo: i stedet for" wptuts countdowner locale 'nævnt flere stik af specifikke.i andre tilfælde findes i kodeksen, også.forældre: __construct ('wptuts-countdowner-id, __ ('wptuts + countdowner "," wptuts countdowner locale') system ('classname = >'wptuts-countdowner-class,'description = > __ ("en dims til at udvise en nedtælling timer i dit sted er gruppemøde.", "wptuts countdowner locale ')), nu har vi denne:,,,, 3.indsamle oplysninger fra brugere, vores widget skal have et navn og datoen for den begivenhed, der skal tælle ned (eller op til, så er vi nødt til at skabe en formular, der skal anvendes, når vores dims er tilsat en konference for konfiguration.den wordpress dims boilerplate adskiller html del i betragtning, filer til en dejlig ren adskillelse af bekymringer.vi kan fælde vores variabler i metoden, og så formularen i admin synspunkt. her er metoden.ændringer til vores stik af angivet med højdepunkter., * * * skaber administration form for widget.* * @ param array instans den vifte af nøgler og værdier for den dims.* /offentlige funktion form ($instans) (//todo: fastsætte standardværdier for din variabler $instans = wp_parse_args (array) $instans); //todo: opbevares værdierne i den dims i deres egen variabel, hvis!tom ($) ['event ']) (= $$omstændigheder instans ['event']} andre {$begivenhed = __ ("hændelse navn, wptuts countdowner locale ');} hvis (!tom ($) ['event_date '])) ($event_date = $instans ['event_date']} andre ($event_date = dato ('y-m-d)) //- administrationen form omfatter (plugin_dir_path (__file__)./synspunkter /admin. folkesundhedsprogrammet)} //ende form, du vil se ved afslutningen af den metode, der er en, der omfatter for udsigten.- luk op, /wp indhold /plugins /wptuts countdowner /synspunkter /admin. folkesundhedsprogrammet.der tilføjes følgende kode ind i filen:, < p > < etiket til = "<?php echo $- > get_field_id ("begivenhed").> "> <?folkesundhedsprogrammet aspektet _e ("begivenhed").> < /etiketten > < input = "klasse widefat" id = "<?php echo $- > get_field_id ("begivenhed").> "navn =" <?php echo $- > get_field_name ("begivenhed").> "type =" tekst "værdi =" <?php echo esc_attr ($tilfælde).> "/> < /p > < p > < etiket til =" <?php echo $- > get_field_id ('event_date)?> "> <?folkesundhedsprogrammet aspektet _e ("begivenhed:").> < /etiketten > < input = "klasse widefat wptuts begivenhed" id = "<?php echo $- > get_field_id ('event_date)?> "navn =" <?php echo $- > get_field_name ('event_date)?> "type =" tekst "værdi =" <?php echo esc_attr ($event_date)?> "/> < /p >, nu kan du fylde den wordpress instrumentbræt og tilføje den dims til din aftale, som vil se sådan ud:,,,, desværre, uanset hvad du har på disse områder vil ikke redde endnu, så vi er nødt til at ændre, ajourføre, metode som følger: /* * * processer, den dims er muligheder for at blive reddet.* * @ param array new_instance tidligere tilfælde af værdier, før den opdatering.* @ param array old_instance nye tilfælde af værdier, der frembringes via opdatering.* /offentlige funktion ajourføring ($new_instance, $old_instance) ($) = $old_instance; //todo: her er, hvor du ajourføre din dims er gamle værdier med de nye, kommende værdier $instans ['event '] = strip_tags ($new_instance ['event']); $instans ['event_date '] = strip_tags ($new_instance ['event_date']); tilbage $instans.} //ende dims, nu har vi en dims administration.du kan få den dims i dit gruppemøde, og redde de nærmere detaljer for en begivenhed, som jul:,,,, 4.viser på den front, vi har nu, hvis detaljer til nedtællingen, lad os vise det på forenden af hjemmesiden i samråd., * * * output indholdet af den dims.* * @ param array args den vifte af form elementer * @ param array - f.eks. den aktuelle eksempel på den dims * /offentlige funktion widget ($args $instans) (ekstrakt ($args, extr_skip); echo $before_widget; //todo: her er hvor du manipulerer din dims er værdier, der er baseret på input områder, hvis apply_filters (= $wptuts_countdowner_event, $instans ['event ']); $event_date = apply_filters (' wptuts_countdowner_event_date, $instans ['event_date ']); omfatter (plugin_dir_path (__file__)./synspunkter /widget. folkesundhedsprogrammet) echo $after_widget;} //ende dims, som administrationen form, vi bruger en opfattelse, i front for at holde html særskilt.åbn jeres, /wp indhold /plugins /wptuts countdowner /synspunkter /widget.php, fil, og tilføje følgende:, <?folkesundhedsprogrammet aspektet om.tom ($begivenhed) echo $before_title.$begivenhed.$after_title; hvis (!tom ($event_date) echo $event_date;,, 5.at tælle dage, så vi har en begivenhed og en dato /tidspunkt viser nu, men det giver os ikke en nedtælling.vi er nødt til at tilføje en lille smule af kode i at afgøre, hvor mange dage mellem vores begivenhed er date, og datoen i dag.fordi vores date, kunne være i fortiden eller fremtiden, vil vi også tilføje suffikset ord til at angive, hvilke. her er den kode, vi lægger op foran en del af widget: /* * * output indholdet af den dims.* * @ param array args den vifte af form elementer * @ param array - f.eks. den aktuelle eksempel på den dims * /offentlige funktion widget ($args $instans) (ekstrakt ($args, extr_skip); echo $before_widget; //todo: her er hvor du manipulerer din dims er værdier, der er baseret på input områder, hvis apply_filters (= $wptuts_countdowner_event, $instans ['event ']); $event_date = apply_filters (' wptuts_countdowner_event_date, $instans ['event_date ']); $event_date_seconds = dato ("u", strtotime ($event_date) $today_date_seconds = dato ("u"); $event_date = human_time_diff ($event_date_seconds); $suffiks = ($event_date_seconds > $today_date_seconds? "væk ":" siden '), omfatter (plugin_dir_path (__file__)./synspunkter /widget. folkesundhedsprogrammet) echo $after_widget;} //ende dims, hvad vi laver, der er ved at blive den nuværende timestamp i sekunder til begivenheden, og til i dag.vi får en menneskeligt læsbar udgave (dvs. 267 dage).vi arbejder også ud på grundlag af, hvorvidt tilfælde dato er i fortiden eller fremtiden som suffiks ord at bruge. nu har vi et suffiks ord, vi må tilføje det til betragtning:, <?folkesundhedsprogrammet aspektet om.tom ($begivenhed) echo $before_title.$begivenhed.$after_title; hvis (!tom ($event_date) echo $event_date. ". $suffix; nu har vi noget, der ser lidt mere respektabelt og får lidt mere følelse.,,,, 6.vælg en dato, det er en lille, grimme til manuelt at type i en dato, så lad os tilføje i jquery ui datepicker, eftersom det er medtaget i wordpress., en ting, der ikke er medtaget, er css til dato - piller.så tag css fil og billeder fortegnelse fra helen hou sandis wp admin - register på jquery github, og læg dem i din, /wp indhold /plugins /wptuts countdowner /css /, fortegnelse., så vi er nødt til at få wordpress at laste dem ved at ændre boilerplate er, register_admin_scripts, og register_admin_styles metoder - som så:,, register_admin_scripts, /* * * registre og enqueues admin specifikke javascript.* /offentlige funktion register_admin_scripts() {wp_enqueue_script ('jquery ui datepicker); //todo: ændringer wptuts countdowner til navnet på din stik af wp_enqueue_script (' wptuts countdowner admin manuskript, plugins_url ('wptuts countdowner /er /admin. j' er ")} //ende register_admin_scripts register_admin_styles,,,, /* * * registre og enqueues admin specifikke styles.* /offentlige funktion register_admin_styles() (//todo: ændringer wptuts countdowner til navnet på din stik af wp_enqueue_style (wp admin - jquery, plugins_url ('wptuts countdowner /css /jquery ui frisk. css)); wp_enqueue_style (' wptuts countdowner admin styles, plugins_url ('wptuts countdowner /css /admin. css));} //ende register_admin_styles endelig tilføje jquery kode i den boilerplate er, admin.js, fil til den datepicker op til området. (funktion ($) {"strenge" $(funktion () (//sted din administration specifikke javascript her jquery (". wptuts begivenhed dato). datepicker ((dateformat: åå mm dd))))) (jquery), 7.rydde op, boilerplate indeholder et par ting, vi ikke har brugt i dette stik af, så ville det være en god idé at lette belastningen og fjerne dem.den ekstra er disse filer:,,, /css /admin. css, /css /widget. css... /er /widget. js,,, og disse metoder i, wptuts-countdowner.php, fil:,,, aktiver,,,,, register_widget_scripts deaktivere, register_widget_styles,,,,,,,, også, wp_enqueue_style ('wptuts countdowner admin styles, plugins_url (' wptuts countdowner /css /admin. css)), fra den, register_admin_styles, metode, konklusioner, der har du det!en wordpress stik af baseret på den dims boilerplate så du kan vise, hvor mange dage før eller siden) en begivenhed. jeg håber, du fandt det nyttigt, vær venlig at dele dine tanker i bemærkningerne nedenfor.

Figure-01
Figure-02
Figure-03
Figure-04
Figure-05



Previous:
Next Page: