Opprette en Ajax Countdown Timer WordPress Plugin

Å bygge et WordPress-plugin er ikke så vanskelig, spesielt når du vet hva du gjør. Noen ganger kan det bli vanskelig, men når du arbeider med flere skript, stiler og ny funksjonalitet som noen ganger krever litt fantasi.
I denne opplæringen skal vi se på en måte å opprette et enkelt nedtellingstidsplugin for. Vi ser på å integrere den i WordPress-installasjonen som en widget og en kodenavn i innholdet ved hjelp av innstillinger fra en meta-boks inne i WordPress admin editor.
En forhåndsvisning av sluttresultatet av denne opplæringen ser slik ut:
Widget og Content Shortcode:

Widget og Meta-Box Admin Interface:

Et kort eksempel skjermbilde av hvordan widget admin og meta boksen i redigeringssiden / innlegget grensesnittet vil se ut på slutten av opplæringen:
Trinn 1 Plugin File Headers

Hver WordPress plugin mush har kompatibel, oppdatert kode i overskriftene, slik at den kan fungere og bli gjenkjent av WordPress. Dette gjør at den kan installeres, aktiveres og fjernes. Den typen informasjon som er tilgjengelig i headerinformasjonen er avgjørende for plugin, men inneholder også informasjon om det som tittel, versjon, beskrivelse, tagger, forfatterinformasjon, lisens, etc.
Først er plugin en fil plassert i en katalog. Vi skal nevne vårt plugin Timer Plugin og plasser den i vår wp-innhold / tillegg mappe under katalogen timer_plugin. Så inne i det, filen timer_plugin.php vil være vår viktigste plugin-fil der vi setter inn kildekode for topptekst.
  Vi skal bare bruke de grunnleggende variablene som trengs for å få plugin-programmet i gang. En av variablene er Plugin Name, som er svært viktig for å identifisere pluginet på plugin-installasjonssiden. I forbindelse med denne opplæringen skal vi bare nevne den Timer Plugin. Deretter Beskrivelse Det er en kort tekstlinje som beskriver plugin. Det vil også være synlig under plugin-installasjonssiden rett ved siden av pluginet, sammen med de neste variablene, Forfatter og Versjon.
   "Alle header plugin-variabler er tekststrenger skrevet etter: forrige navne variabelnavn." 
 
 
  Trinn 2 Legge til handlinger
 I WordPress er handlinger kroker til bestemte funksjoner som du kanskje vil bruke i funksjonaliteten din. I denne opplæringen skal vi bruke et antall kroker for å få ønsket resultat.
 Først vil handlingene bli lagt til ved hjelp av ADD_ACTION funksjon for hver handling, og vi skal legge dem til på slutten av PHP-filen som neste eksempel:
  add_action ('widgets_init', 'TP_widgets_init'); add_action ('admin_print_scripts', 'TP_admin_register_scripts'); add_action ('admin_print_styles', 'TP_admin_register_styles'); add_action ('wp_print_scripts', 'TP_register_scripts'); add_action ('wp_print_styles', 'TP_register_styles');
 Neste, i eksempelet ovenfor, er wp_print_scripts og wp_print_styles kroker legger til handlinger til funksjoner som brukes til å registrere og inkludere stiler og skript som trengs i WordPress frontend. Nærmere bestemt i nettstedstemaet, for funksjonaliteten til sidebar-widget-timeren og innholdskoden. De admin_print_scripts og admin_print_styles kroker brukes til å registrere WordPress admin panel script og CSS stil filer som brukes senere i opplæringen.
  add_action ('admin_init', 'TP_admin_init'); add_action ('save_post', 'TP_save_postdata');
 Endelig, den admin_init krok peker på funksjonen som kjører før toppene genereres og kjøres. En krok som vi vil dekke på slutten av opplæringen er lagre post. Denne kroken er nødvendig for å jobbe med innlegget eller siden innsendt informasjon i WordPress admin.
   "For mer detaljert informasjon om hvordan du bruker ADD_ACTION funksjon se ADD_ACTION i WordPress Codex. " 
 
 
  Trinn 3 Registrere og inkludere skript og stiler
 For denne opplæringen skal vi kreve en rekke skript og stilfiler som kreves for god funksjonalitet, og se på både admin og temaimplementering av Timer Plugin. Her er hvordan vi skal gjøre dette:
 Inkludert stiler for WordPress Admin Funksjonalitet:
 Timerplugin krever noen elementer i administrasjonspanelet som vi må stille litt ettersom standardutseendet ikke er akkurat veldig innbydende. For å gjøre dette har vi i trinn 3 kalt tagkrokene som hjelper oss med å gjøre det, nå skal vi se på funksjonene som kjører når krokene blir kalt og hvordan de fungerer akkurat.
 Først TP_admin_register_styles funksjon for de registrerte og inkludert admin panel stiler.
  funksjon TP_admin_register_styles () 
 Nedlasting av stilene
 Fordi vi bygger et nedtellingstidsplugin, krever vi en bestemt dato og klokkeslett for nedtelling til nåtiden. For å gjøre dette, blant annet integrasjoner, bruker vi wp_register_style Fungerer for å registrere den siste tilpassede jQuery UI-stilen, slik at vi kan bruke designen sin riktig i funksjonaliteten når du genererer glidebryterne og kalenderdatovalgeren senere. CSS-filen genereres ved å laste ned den nyeste jQuery-brukergrensesnittet fra http://jqueryui.com/download velge Core, Widget, Mouse, Slider, DatePicker fra listen over alternativer, jQuery Ui 1.8.20 i versjonen og UI Lightness i tema-dropdown-delen.
 Registrere stilene
 Det vil bli en CSS-fil som heter jquery-ui-1.8.20.custom.css og en bildemappe inne i css / jquery-ui mappe i det egendefinerte genererte og nedlastede arkivet som du får fra de forrige instruksjonene. Vi skal erstatte jquery-ui-1.8.20.custom.css filnavn til jquery-ui.css for et vennligere navn og kopier det sammen med bildemappen med alle dens filer i vår plugin-mappe.
 Deretter kan vi begynne å legge til registrerings- og inkluderingsfunksjonene i TP_admin_register_styles funksjon nevnt tidligere.
  // register wp_register_style ('jquery-ui-tema', plugins_url ('jquery-ui.css', __FILE__)); wp_register_style ('tp-admin-style', plugins_url ('admin-style.css', __FILE__));
 Det forrige eksempelet bruker wp_register_style å registrere jquery-ui.css fil med navnet på jquery-ui-tema som senere brukes i wp_register_style Fungerer i det neste eksemplet. Den samme tilnærmingen brukes til å inkludere hovedadministratoren style.css fil ved hjelp av denne gangen navnet tp-admin-stil brukt i de følgende eksemplene med wp_enqueue_style funksjon for å inkludere den i WordPress-overskrifter på riktig måte.
 Inkludert stilene
  // enqueue wp_enqueue_style ('jquery-ui-tema'); wp_enqueue_style ( 'tp-admin-stil');
 De tp-admin-stil er vant til å registrere og inkludere style.css fil som vil bli brukt til å utforme widgeten og meta-box-designet som kommer som standard i jQuery UI-implementeringen og WordPress-standardstilen.
 Inkludert stiler for temafunksjonalitet:
 Ved å bruke nøyaktig samme tilnærming som tidligere for å registrere og inkludere stilfiler, skal vi inkludere i WordPress-temaet stilfilene som er nødvendige for utformingen av widgettimeren og kortnummeret.
  funksjon TP_register_styles () // register wp_register_style ('tp-style', plugins_url ('style.css', __FILE__)); // enqueue wp_enqueue_style ('tp-style'); 
 I dette tilfellet er vi inkludert en enkel style.css fil fra vår plugin katalog som vi vil inkludere senere.
 Inkludert skript for WordPress Admin Funksjonalitet:
 Fordi vi skal bygge en widget og en meta-boks med jQuery UI-kalender og dato-tidspekerfunksjonalitet, må vi ha jQuery, jQuery UI og alle pluginene som er nødvendige for å inkludere og bruke glideren og datepicker som vi skal implementere seinere. For å gjøre dette må vi gjøre bruk av den tidligere skriftlige handlingen for admin_print_scripts kroken. Den neste funksjonen vil implementere funksjonaliteten vi trenger.
  funksjon TP_admin_register_scripts () // register wp_register_script ('tp-admin-script', plugins_url ('admin-script.js', __FILE__)); // enqueue wp_enqueue_script ('jquery-ui-core'); wp_enqueue_script ( 'jquery-ui-datepicker'); wp_enqueue_script ( 'jquery-ui-skyve'); wp_enqueue_script ( 'tp-admin-script'); 
 Når vi jobber inni WordPress-administrasjonspanelet, skal vi ha jQuery og jQuery UI allerede registrert og inkludert i toppteksten, samt avhengighetene og pluginene vi trenger: jquery-ui-mus og jquery-ui-widget. Alt vi er inkludert nå er jquery-ui-kjerne Det er ikke inkludert som standard og datopicker og skyveplugger som vi trenger og sist, admin-script.js fil som inneholder alle de egendefinerte reglene for vår date-time jquery-ui funksjonalitet.
 Inkludert skript for temafunksjonalitet:
 Vi må kunne ha inne i forkant av nettstedet, en timer som avtar til 0 et sted i sidelinjen som en widget og i innholdet som en kortkode. Som en veldig enkel måte å gjøre dette valgte jeg jQuery og noe vanlig javascript for å jobbe timeren. Som et resultat skal vi inkludere script.js fil inne i funksjonen som registrerer skript for frontendekroen som tidligere er oppgitt.
  funksjon TP_register_scripts () // register wp_register_script ('tp-script', plugins_url ('script.js', __FILE__), 'jquery'); // enqueue wp_enqueue_script ('tp-script'); 
 Vi skal også spesifisere jQuery som en avhengighet, da den fremre delen ikke har den som standard.
 
  Trinn 4 Opprette Widget
 Pluginet skal bruke en widget som en av de to metodene for å integrere en tidsur i temaet, nærmere bestemt sidebjelken i dette tilfellet. For å kunne legge til timeren til sidelinjen må vi implementere widgetfunksjonalitet for pluginet vårt i WordPress.
 Bygge klassen
 For å implementere widgetfunksjonalitet i pluginet må vi inkludere en widgetsklasse som heter TP_Widget. Dette navnet er selvfølgelig ikke obligatorisk, men det er obligatorisk for denne klassen å forlenge WP_Widget klasse for å arve sin funksjonalitet. Derfor lager vi klassen som neste eksempel:
  klassen TP_Widget utvider WP_Widget // den følgende koden vil være her
 Neste kommer koden vi legger til i klassen, slik at vi jobber med widgeten slik den er ment å være i WordPress, ved å bruke alle nødvendige funksjoner som kreves for å få en funksjonell widget laget i WordPress.
 Først skal vi skrive __construct Funksjonen for den første nødvendige kodenintegrasjonen. De __construct funksjonen er stedet der widgeten faktisk prosesser. Vi skal gi widgeten et navn og en beskrivelse inne i denne funksjonen ved å arve og bruke foreldrenes __construct metode som i følgende eksempel:
  offentlig funksjon __construct () // widget aktuelle prosesser foreldre :: __ konstruere ('TP_Widget', 'Timer Widget', array ('description' => __ ('En Timer Plugin Widget', 'text_domain'))); 
 Den første parameteren er en widget-ID, den andre er et widgetnavn, en tredje et array med beskrivelsen. Følgende funksjon skal være skjema funksjon. Vi skal bygge og bruke denne funksjonen til å sette inn og arbeide med administrasjonspanelet widget innholdsskjema. Den neste koden vil løpe inne i widgetplassholderen på siden for adminpanelet widgets:
  offentlig funksjonsskjema () if (! $ _ POST) $ tp_arr = unserialize (get_option ('tp_ID_'. $ dette-> tall));  ellers hvis ($ _POST ['tp-hidd'] == 'true') $ tp_arr ['tp-title'] = $ _POST ['tp-tittel']; $ tp_arr ['tp-date'] = $ _POST ['tp-dato']; $ tp_arr ['tp-time'] = $ _POST ['tp-time-val']; $ tp_arr ['tp-minute'] = $ _POST ['tp-minutt-val']; update_option ('tp_ID_'. $ this-> tall, serialize ($ tp_arr));  // outputs alternativet skjemaet på admin
 I denne delen har vi widgetinformasjon som tittel, dato, time og minutt. Denne informasjonen hentes fra en serialisert array-streng som er lagret i databasen etter navnet tp_ID_X, hvor X er en unik identifikator av widgeten, som brukes til å identifisere dataene som trekkes ut i forhold til den brukte widgeten.
 I denne delen lagres widgetverdiene også i arrayet en etter ett, serialisert og lagret i databasen som et alternativfelt for senere bruk.
 Den neste delen er admin-widget-formelementene som brukes i frontenden.
  Tittel:
 

 [ Redigere ]

 Velg en dato:
  
timer 
 
 Minutter 
 
 Det er to aspekter å se etter i denne delen:
 Først klasser kategoriene som tp-date, tp-timers, tp-minutters som senere jobbet med i javascript og For det andre, inngangsfeltene. For det første er det noen PHP-kode innført i de inputfeltene som finnes i koden ovenfor, kode som brukes til lagring av data enten for skjemaer for å bli sendt inn, eller for javascript å bli implementert i jQuery og jobbet med.
 På slutten av HTML-koden over skjema funksjonen er stengt.
 Oppdaterer Widget-dataene
 Når widgeten Lagre knappen er trykket i administrasjonspanelet, skjemainformasjonen blir sendt og behandlet av følgende funksjon:
  offentlig funksjon oppdatering () // prosesser widget alternativer som skal lagres hvis ($ _POST ['tp-hidd'] == 'true') $ tp_Arr ['tp-title'] = $ _POST ['tp-title' ]; $ tp_Arr ['tp-date'] = $ _POST ['tp-dato']; $ tp_Arr ['tp-time'] = $ _POST ['tp-time-val']; $ tp_Arr ['tp-minute'] = $ _POST ['tp-minutt-val']; $ tp_Arr ['tp-date'] = $ _POST ['tp-dato']; update_option ('tp_ID_'. $ this-> nummer, serialize ($ tp_Arr)); 
 De Oppdater funksjonen er funksjonen som brukes til å oppdatere informasjonen i widgeten i WordPress-widgets.
 Skriver Widget Output i sidefeltet
 Denne neste delen er koden som genererer og sender ut widgeten i sidefeltet som en widget. I utgangspunktet er det innholdet i den allerede genererte widgetskoden som har formålet med et kompatibelt omslag.
 Her er et eksempel på bare halvparten av funksjonen, nemlig PHP-koden som brukes til å få den nødvendige informasjonen for widgetutgangen.
  offentlig funksjon widget ($ args, $ forekomst) $ tp_arr = unserialize (get_option ('tp_ID_'. $ this-> tall)); $ temp_date = eksplodere ("/", $ tp_arr ['tp-date']); $ tp_arr ['tp-date'] = $ temp_date [2]. "/". $ temp_date [0]. "/". $ Temp_date [1]; pakke ($ args); $ title = apply_filters ('widget_title', $ tp_arr ['tp-title']); ekko $ before_widget; hvis (! tomt ($ tittel)) ekko $ before_title. $ tittel. $ After_title;
 Så vi trekker ut widgetdataene som tidligere ble lagret i administrasjonspanelet. Den neste delen er HTML- og PHP-koden som representerer timeren og / eller har verdiene brukt senere av jQuery å beregne tid og funksjon som en timer.
    : 0 "/>  YY
 DD
 HH
 MM
 SS
 
  -
 -
 -
 -
 -
 
 
 UL-taggen brukes til å lage senere i en rad- og kolonnestil, slik at timeren har et bestilt utseende og får en klasse for å enkelt kontrollere LI-kodene med jQuery senere.
 Du kan også merke inputelementene med PHP-data i dem. Disse elementene brukes også av jQuery til å lagre verdiene for den lagrede dato og klokkeslett.
 Funksjonen slutter etter HTML-koden med en dynamisk variabel som lukker widgeten ved hjelp av WordPress-kompatible verdier.
   Integrere klassen
 Sist men ikke minst, hvis du husker, brukte en av handlingene som ble skrevet i trinn 1, bruk av widgets_init tag og peker på TP_widgets_init funksjon. Vi må skrive sin funksjonalitet for å koble klassen riktig til WordPress.
  funksjon TP_widgets_init () register_widget ("TP_Widget"); 
   "For et mer omfattende utseende av standard WordPress widget funksjonalitet sjekk ut WordPress Widget API" 
 
 
  Trinn 5 Opprette Meta Box
 Meta-boksen er en boks som ligger i en av sidebjelkepanelene som er plassert i administrasjonsredaktøren av en hvilken som helst side eller post. Fordi vi bruker nesten samme HTML, CSS og JavaScript-kode, skal vi bruke nesten samme PHP og HTML-kode som widgeten. Noen modifikasjoner av noen foreldreelementklasser er nødvendige for jQuery-funksjonalitet. Men først må metakassen opprettes og implementeres i WordPress fra plugininnstillingene. En annen av handlingene som ble skrevet i trinn 1, som vi ikke fullførte, er implementeringen av admin init hook-taggen. Den kroken løper før overskriftene finner sted og skal brukes av oss til å implementere meta-boksens funksjonalitet med add_meta_box fungere som eksemplet nedenfor:
  funksjon TP_admin_init () add_meta_box ('TP_metaid', __ ('Timer Plugin Post Settings', 'TP_textdomain'), 'TP_inner_custom_box', 'post', 'side'); add_meta_box ('TP_metaid', __ ('Timer Plugin Page Settings', 'TP_textdomain'), 'TP_inner_custom_box', 'side', 'side'); 
 Hva denne koden gjør er det skaper en egendefinert boks på siden av hver post og sideredigeringsside i administrasjonspanelet med innholdet og funksjonaliteten til funksjonen TP_inner_custom_box. For en mer omfattende oversikt over hvordan add_meta_box bør brukes, se add_meta_box i WordPress Codex.
 Funksjonalitet og Front End Code
 Meta-boksen har en lignende frontend med widgeten og bakre endekoden er ikke så annerledes, bare litt forskjellige databasevalgsfeltnavn for å lagre. På samme måte som widgetadministrasjonsskjemaet er det laget av både PHP og HTML-funksjonalitet. Starter med TP_inner_custom_box funksjon vi oppretter meta-boksen admin front og back end funksjonalitet som den neste prøven:
  funksjon TP_inner_custom_box () global $ post; // Bruk nonce for verifisering wp_nonce_field (plugin_basename (__ FILE__), 'cuschost_noncename'); $ tp_arr = unserialize (get_option ('tp_pp_ID_'. $ post-> ID));
 Etter det er HTML-koden prøven påfallende lik. De eneste forskjellene er en ekstra inngangsknapp, hvorpå funksjonen er vedlagt semikolon og ender.
  [ Redigere ]

 Velg en dato:
  
timer 
 
 Minutter 
  
 Lagrer dataene
 Det forrige skjemaet sender data når innlegget eller siden er oppdatert, og vi må hente dataene og lagre den for senere bruker. For å gjøre det bruker vi en annen krok som vi allerede har implementert, hovedsakelig lagre post krokmerke som peker på tilbakeringingsfunksjonen TP_save_postdata. Tilbakeringingsfunksjonen får dataene fra postvariabler og lagrer den inn i databasen under et post-ID-unikt identifikatorformet navn, og det ser slik ut:
  funksjon TP_save_postdata () global $ post; hvis ($ _POST ['tp-hidd'] == 'true') $ tp_arr ['tp-date'] = $ _POST ['tp-dato']; $ tp_arr ['tp-time'] = $ _POST ['tp-time-val']; $ tp_arr ['tp-minute'] = $ _POST ['tp-minutt-val']; update_option ('tp_pp_ID_'. $ post-> ID, serialize ($ tp_arr)); 
 
  Trinn 6 Implementere kortnummeret
 For å implementere kortnummeret må vi legge til en ny handling til ADD_ACTION funksjonsliste. Neste prøve skal dekke det:
 add_shortcode ('tp-shortcode', 'tp_shortcode');
 Det sier seg selv at vi må skape tp_shortcode funksjon som håndterer den nye kortnummeret.
  funksjon tp_shortcode ($ atts, $ content = "") global $ post; $ tp_arr = unserialize (get_option ('tp_pp_ID_'. $ post-> ID)); $ temp_date = eksplodere ("/", $ tp_arr ['tp-date']); $ tp_arr ['tp-date'] = $ temp_date [2]. "/". $ temp_date [0]. "/". $ Temp_date [1]; komme tilbake '   YY
 DD
 HH
 MM
 SS
 
  -
 -
 -
 -
 -
 
 
'; 
 Kjent kode? Det er frontenden for sidebar-widgetskoden som tidligere ble brukt i widget fungere inne i TP_Widget klasse.
   "For mer detaljert informasjon om hvordan du bruker add_shortcode funksjon se add_shortcode i WordPress Codex. " 
 
 
  Trinn 7 Redigere stilfilene, styler timeren
 Dette er et veldig enkelt og raskt trinn, da det dekker bare 2 små filer som håndterer utformingen av timeren, kortkoden og admin-delen.
 Administrasjonsseksjonen:
 I denne delen er stilfilen lagt i trinn ett vi skal redigere nå er admin-style.css og det skal se slik ut:
  .tp-time, .tp-minutt polstring: 0px! viktig; z-indeks: 0; bredde: 100 piksler; margin: 10px 0px 10px 0px; høyde: 10px;  .tp-time-val, .tp-minute-val font-weight: bold; font-size: 16px; bredde: 20 piksler;  .tp-tid margin-top: 10px; margin-bunn: 10px; font-size: 12 piksler;  .widget .editable, .inside .editable bakgrunnsfarge: # FED22F;  .widget .ui-glidebryter-horisontal, .inside .ui-glidebryter-horisontal bakgrunn: # FED22F; 
 Denne stilarkfilen håndterer bredden, høyden, fargene og plasseringen av skyvekontrollene for admin-widgeten og kalender-jQuery-brukergrensesnittet når du velger timer og minutter fra fronten.
 Timer-forkant-stilen:
 De style.css filen er CSS-filen som dekker utformingen av UL, LI, OL i timeren i frontenden. Se neste eksempel:
  .timer-innhold bredde: 300px;  .timer-main ul, .timer-innhold ul float: left; display: inline; flow: hidden; bredde: 180 piksler; margin: 0 px; padding: 0 px; margin-topp: 0px; font-weight: bold;  .timer-hoved ul.tp-head, #content .timer-innhold ul.tp-head margin: 0px; padding: 0 px; margin-top: 20 piksler; font-size: 12 piksler;  .timer-main ul ol, .timer-innhold ul ol float: left; display: inline; flow: hidden; bredde: 20 piksler; margin: 0 px; padding: 0 px; margin-right: 2 piksler; tekst-align: center; grense: 1px solid #dcdcdc; padding: 4 piksler; bakgrunn: # f0f0f0;  .timer-main ul li, .timer-innhold ul li float: left; display: inline; flow: hidden; bredde: 20 piksler; margin: 0 px; padding: 0 px; margin-right: 2 piksler; tekst-align: center; padding: 4 piksler; grense: 1px solid hvit; 
 Noen elementer er floated, resized og posisjonert med marginer slik at de vil se ut som ønsket. Et resultat av denne stilen er designet i neste bilde:
  
  Trinn 8 Admin Widget og MetaBox Javascript Code
 Administrator Widget krever svært spesifikk jQuery-funksjonalitet blandet perfekt med HTML-klasser for koder. All følgende kode skal settes inn i admin-script.js fil.
  jQuery (dokument) .ready (funksjon ($) $ ('.tp-insert-shortcode'). klikk (funksjon () send_to_editor ('[tp-shortcode]';); $ ('.tp- time-edit '). live (' klikk ', funksjon () $ (' .tp-date '). datepicker (format:' m / d / Y ', timeGrid: 4, minuttGrid: 10, stilling:' høyre ", onBeforeShow: funksjon () $ (dette) .DatePickerSetDate ($ (dette) .val (), true);); $ ('.tp-date'). addClass ('redigerbar'); $ (".tp-time"). skyveknappen (verdi: 0, min: 0, maks: 23, trinn: 1, lysbilde: funksjon (hendelse, ui) $ (".tp-time-val") .val (ui.value);); $ (".tp-minutt") .slider (verdi: 0, min: 0, maks: 59, trinn: 1, lysbilde: funksjon (hendelse, ui) $ ".tp-minutt-val") .val (ui.value););););
 I dette eksemplet, etter en jQuery-initialisering og en dokumentlasthendelse, er all koden som fungerer med widgeten og kortnummer lastet for bruk.
 Nå, fordi widgeten har ajax-lastet dynamisk innhold i det, er alt innholdet usynlig for jQuery, med mindre det brukes med en bo handling. For dette formålet, en lenke med klassenavnet til tp-time-redigering og tag alternativ javascript funksjonalitet av void (0) ble opprettet, og når du klikker, kjører live kroken og gjør alle HTML-koder i hendelsesfunksjonen anrop tilgjengelig.
 Inne i tilbakeringingsfunksjonen bruker vi funksjonaliteten som trengs for å lage datepicker for datateksten ved å bruke tp-date CSS klasse.
 Sist men ikke minst, faktisk i begynnelsen av koden ligger kortnummer javascript-funksjonaliteten, nærmere bestemt jQuery-innføringen av tp-insert-snarvei CSS klasse verdi funnet i inntastingsfeltet inne i shortcode funksjonen tidligere skrevet i trinn 6. Når knappen med klassen tp-insert-snarvei er presset, bør den legge til [Tp-schortcode] strengverdien til WYSIWYG-editoren.
   "Veldig viktig! JQuery brukergrensesnitt krever klasser i tagegenskaper som skal brukes til skyvekontrollene og datepicker-plugins. Det virker ikke med IDs" 
 
 
  Trinn 9 Timer Javascript-kode
 Dette er det viktigste og litt vanskelig å visualisere ved første øyekast koden i hele opplæringen som det er den delen som omhandler mye matte.
 Denne delen refererer utelukkende til script.js fil som inneholder javascript kildekoden som omhandler den faktiske timeren både på widgetdelen og på shortcode-delen i frontenden.
  jQuery (dokument) .ready (funksjon ($) funksjon start_by_parent (tp_parentClass) var tp_timer = "; tp_date = $ (tp_parentClass + 'input.tp-widget-date') .val (); tp_time = $ (tp_parentClass +' input .tp-widget-time '). val ();' + tp_time + "');", 1000); start_by_parent ("tp_set '.timer-main'); start_by_parent ('. timer-innhold'););
 Foreldreklassen som håndterer widgeten, er timerhoved, som for kortkoden the tidtaker-innhold CSS-klassen brukes som et overordnet tagelement som brukes til å påvirke li tagelementer som inneholder tidsverdiene for DD (dager), HH (Timer), MM (Minutter) og SS (Sekunder). Ovennevnte implementering er en dynamisk tilnærming til begge i jQuery etter at verdiene er sendt til calc_data funksjon for å håndtere all matematikk.
 De tp_set funksjonen bruker faktisk calc_data Metode for å beregne verdiene før den legger dem inn i de aktuelle HTML-tagelementene. Her er det implementert tp_set metode som må gå inn i samme fil, script.js.
  funksjon tp_set (tp_parentClass, tp_date, tp_time) calc_data (tp_date, tp_time); jQuery (tp_parentClass + 'ul'). finn ('li: nth-child (1)'). html (tp_years); jQuery (tp_parentClass + 'ul'). finn ('li: nth-child (2)'). html (tp_days); jQuery (tp_parentClass + 'ul'). finn ('li: nth-child (3)'). html (tp_hours); jQuery (tp_parentClass + 'ul'). finn ('li: nth-child (4)'). html (tp_minutes); jQuery (tp_parentClass + 'ul'). finn ('li: nth-child (5)'). html (tp_seconds); var tp_timer = setInterval ('tp_set (\ "+ tp_parentClass +' \ ', \" + tp_date +' \ ', \ "+ tp_time +' \ ');' 1000); clearTimeout (tp_timer);
 Endelig er en av de viktigste delene av denne skriptfilen, den calc_data metode som beregner antall sekunder mellom nåværende og brukerens valgte dato og returnerer de riktige verdiene, slik at timeren viser hvor mye tid som er igjen til den datoen.
  funksjon calc_data (tp_date, tp_time) tempdate = tp_date.split ("/"); temptime = tp_time.split (":"); var sekunder = 1000; var minutter = sekunder * 60; var timer = minutter * 60; var dager = timer * 24; var år = dager * 365; var db_time = ny Dato (tempdate [0], tempdate [1] -1, tempdate [2], fristet [0], fristet [1], 00); var now_time = ny dato (); db_time = db_time.getTime (); now_time = now_time.getTime (); var tp_result = db_time-now_time; if (tp_result < 0)  tp_years=tp_days=tp_hours=tp_minutes=tp_seconds=0;  else tp_years = Math.floor(tp_result/years); tp_days = Math.floor(tp_result/days)-(tp_years*365); tp_hours = Math.floor(tp_result/hours)-(tp_days*24)-(tp_years*365*24); tp_minutes = Math.floor(tp_result/minutes)-(tp_hours*60)-(tp_days*24*60)-(tp_years*365*24*60); tp_seconds = Math.floor(tp_result/seconds)-(tp_minutes*60)-(tp_hours*60*60)-(tp_days*60*24*60)-(tp_years*365*24*60*60); singlebox=false; if(tp_years > 99) tp_years = 99;  hvis (tp_days> 99) singlebox = true;  hvis (tp_years < 0)tp_years=0; if(tp_days < 0)tp_days=0; if(tp_hours < 0)tp_hours=0; if(tp_minutes > 60) tp_minutes = 60; if (tp_minutes < 0)tp_minutes=0; if(tp_seconds < 0)tp_seconds=0;  
 Et svært viktig aspekt som må nevnes er at disse funksjonene bruker globale variabler som ikke er nevnt ennå. Det anbefales at du legger til følgende kode med globale variabler øverst på siden script.js filen før noen annen kode:
  tp_days = 0; tp_hours = 0; tp_minutes = 0; tp_seconds = 0;
 
 Konklusjon
 Å bygge en nedtellingstimer i jQuery er ikke akkurat et veldig raskt og enkelt prosjekt, da det er mange aspekter som må tas i betraktning når du starter. Ting som javascript klasser, plugins og stiler vil bli brukt, hvilken design den vil ha i front og back end, hvordan det lagrer data og hvordan det trekker det tilbake. Også kompatibiliteten til alle disse med andre plugins eller skript og hvordan nøyaktig alt beregnes og hva det utgir.
 Gi oss beskjed om hva du synes, og hvis du har noen ekstra anbefalinger, i kommentarene nedenfor!
 Oppdatering: Dette innlegget har blitt oppdatert for å endre problemene nevnt i kommentarene.
 Oppdater # 2: Kildefiler er nå tilgjengelig for nedlasting øverst i denne opplæringen.



		
			
	   
	




Kode