Share
I denne serien jobber vi med et plugin for det enkle formålet med å introdusere en jQuery date picker i postredigeren ved hjelp av en post-meta-boks og deretter vise den på fronten på siden.
I stedet for å gjøre en omfattende, detaljert serie om et dypt tema i WordPress - formålet med denne serien er å fokusere på et veldig nisjemne.
I den første artikkelen i serien oppnådde vi følgende:
I denne artikkelen vil vi fortsette arbeidet ved å implementere jQuery Date Picker, lagre datoen i innlegget, og deretter forberede plugin for utgivelse.
Vi har allerede fullført tre av de seks trinnene som trengs for å implementere pluginet vårt. Nå er det et spørsmål om å inkorporere alle nødvendige JavaScript for å vise fargeren og hente dataene.
Men takket være WordPress, dette er egentlig ikke så vanskelig så mye av det vi trenger er allerede sammen med kjerneprogrammet.
For å implementere jQuery date picker trenger vi flere avhengigheter:
Først legger du til følgende linje for konstruktøren din:
Accentsconagua
add_action ('admin_enqueue_scripts', array ($ dette, 'register_admin_scripts')); Deretter må vi faktisk definere funksjonen som vil enqueue jQuery date picker biblioteket samt vår egen tilpassede JavaScript-fil.
Så gå videre og definer register_admin_scripts og linjen for å inkludere jQuery date picker:
/ ** * Registrerer og krever admin-spesifikk JavaScript. * * @version 1.0 * @since 1.0 * / offentlig funksjon register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // slutt register_admin_scripts Sett deretter inn en js katalog i pluginet ditt og legg deretter til en admin.js filen til den katalogen.
Filen skal inneholde følgende JavaScript:
(funksjon ($) $ (funksjon () // Sjekk for at innsjekkingsboksen eksisterer hvis (0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if ); (jQuery)); Enkelt sagt, denne filen vil utføre JavaScript for hver side dashbordet er lastet inn. Der er en alternativ måte å håndtere dette på, men det er utenfor rammen av denne artikkelen.
I stedet har vi vår JavaScript-kontroll for eksistensen av elementet. Hvis det eksisterer, gjelder det Datovelger plugin til elementet.
Til slutt må vi registrere stilarken for jQuery Date Picker med vårt plugin. For å gjøre dette, legg til følgende linje i din register_admin_styles funksjon:
wp_enqueue_style ('jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css'); Oppdater nå pluginet, og du bør kunne klikke på inngang element og se noe slikt:
Ganske kul, ikke sant? Legg merke til at når du velger en dato, vil den automatisk bruke datoen til inngangselementet. Hvis du er interessert i å tilpasse datoformatet (eller andre aspekter av datoperioden) enda mer, må du sjekke ut API-dokumentene.
På dette tidspunktet er vi klare til å vise datoen på selve innlegget. For formålet med pluginet vårt, skal vi forberede dette til innholdet.
For å gjøre dette, definer du følgende krok i konstruktøren til pluginet ditt:
add_action ('the_content', array ($ this, 'prepend_the_date')); Deretter må vi faktisk definere funksjonen. Det er veldig enkelt, skjønt. Sjekk det ut, så skal jeg forklare det etter kodestykket:
/ ** * Lagrer prosjektets ferdighetsdata for innkommende post-ID. * * @param int Nåværende Post-ID. * @version 1.0 * @since 1.0 * / offentlig funksjon prepend_the_date ($ content) // Hvis postmetaen ikke er tom for 'the_date', gjør du det i innholdet hvis (0! = ($ the_date = get_post_meta ( get_the_ID (), 'the_date', true))) $ content = ''. $ the_date. '
'. $ Innhold; // slutt hvis retur $ innhold; // end prepend_the_date
I denne funksjonen kontrollerer vi postdataene for gjeldende innlegg. Siden denne funksjonen brenner innenfor The Loop, kan vi bruke get_the_ID ().
Hvis datastrengen - det vil si postmetaen som er tastet av dato - er ikke tom, så pakker vi den inn i en avsnittetikett og legger den til $ innhold; ellers returnerer vi bare $ innhold som det er.
På dette punktet er det bare to ting igjen å gjøre:
Å lage lokaliseringsfilen er enkel. Siden vi definerte plugin.po fil i den første artikkelen, alt vi trenger å gjøre er å åpne filen med Poedit, klikk "Update", og lagre filen. Dette vil generere en plugin.mo fil i lang katalog.
Deretter må vi opprette en README fil som følger WordPress Readme-konvensjonene. Selv om du kan være så kreativ som du vil, har jeg delt min nedenfor.
=== WordPress jQuery Date Picker === Bidragsytere: tommcfarlin Tags: dato, innlegg Kreves minst: 3.5 Testet opp til: 3.5.1 Stabil tag: 1.0 En sample plugin som brukes til å demonstrere hvordan du inkluderer jQuery Date Picker i posten redaktør. == Beskrivelse == WordPress jQuery Date Picker er et enkelt plugin som brukes til å demonstrere hvordan man kan dra nytte av tilpassede innleggmeta-bokser, metadata og jQuery-plugins, slik at brukerne kan velge datoer som skal vises i innleggene sine. == Installasjon == = Bruke WordPress Dashboard = 1. Naviger til 'Add New' Plugin Dashboard 2. Velg 'wordpress-jquery-date-picker.zip' fra datamaskinen din 3. Last opp 4. Aktiver plugin på WordPress Plugin Dashboard = Bruke FTP = 1. Trekk ut 'wordpress-jquery-date-picker.zip' til datamaskinen din 2. Last opp 'wordpress-jquery-date-picker'-katalogen til' wp-content / plugins'-katalogen 3. Aktiver Plugin på WordPress Plugins dashboard == Ofte stilte spørsmål == = For øyeblikket vises datoen bare øverst på innlegget. Kan jeg endre posisjonen sin? = Nei == Changelog == = 1.0 = * Første utgivelse
Ingenting banebrytende - bare sier akkurat hva det gjør.
Hvis du ikke allerede har det, må du ta den nyeste versjonen av plugin-modulen fra GitHub, les kommentarene og følg med for å sikre at du forstår alt som skjer i plugin-modulen.
Og det er alt - lett nok, ikke sant?
Som vanlig, vennligst legg igjen kommentarer og spørsmål i kommentarskjemaet nedenfor.
