Vi dekker mange emner på denne bloggen - alt fra noe så enkelt som hvordan å inkludere og krever malfiler i WordPress-prosjekter til noe som en hel serie på Innstillinger API, men jeg tror det er alltid plass til å dekke en enkel Hvordan -Om det dekker en enkelt, spesifikk oppgave i sammenheng med WordPress.
Så i denne todelte serien skal vi se på hvordan du introduserer en jQuery date picker i vår postredaktør, slik at vi kan knytte en dato med et bestemt innlegg.
Om Plugin
Vi gjør alt dette i sammenheng med et plugin, slik at kildekoden blir enkelt nedlastbar via GitHub, og vil gi et fungerende eksempel på opplæringen.
Den første tingen å merke seg er at å inkorporere jQuery date picker er ikke ment å erstatte publiseringsdato for innlegget. I stedet er det ment å gi en enkel måte å velge en dato på, lagre den i post-metadataene, og deretter vise den til en annen hensikt som for eksempel når en hendelse skal skje.
Planlegger plugin
For alle som har lest noen av mine tidligere innlegg, vet du at jeg er fan av å planlegge prosjektet fra begynnelsen, og deretter implementere hvert trinn om gangen for å sikre at vi er klare på alt som skjer.
Så la oss gjøre det nå:
Vi gir skelettklassen for plugin
Vi skriver koden som er ansvarlig for å generere post-meta-boksen som lar brukeren velge dato
Vi implementerer jQuery date picker slik at brukerne faktisk kan velge en dato
Vi lagrer dataene når innlegget blir publisert og / eller oppdatert
Vi viser datoen på forsiden av innlegget
Rettferdig, ikke sant? Med det sagt, la oss komme i gang.
Bygg pluggen
På slutten av denne artikkelen vil hele pluginet være tilgjengelig i dette GitHub-depotet, men jeg anbefaler på det sterkeste å følge med og skrive koden selv for å sikre at du følger alt vi gjør.
Koden vil bli kommentert, så det burde være lett å følge. Hvis ikke, vær alltid velkommen til å legge igjen kommentarer etter innlegget.
1. Stub ut Plugin Class
Forutsatt at du allerede har opprettet WordPress-jQuery-Date-Picker katalog i din wp-innhold / tillegg katalog, gå videre og opprett to filer:
plugin.php
README.txt
Vi vil besøke README filen i litt, men la oss gå videre og stub ut klassen som fungerer som plugin.
Her er koden med flere forklaringer etter koden:
Selvfølgelig er det ikke mye til det ennå. Vi har bare definert klassen, satt en tom konstruktør og instansert pluginet utenfor klassen.
Før vi går videre, la oss gå videre og forberede pluginet for lokalisering. For å gjøre dette må vi gjøre flere ting:
Innfør en lang katalog
Legg til lang / plugin.po
Sett tekstdomenet for pluginet i konstruktøren
Husk at lokalisering brukes til å være sikker på at oversettere kan gjøre pluginet kompatibelt med andre språk, og at Poedit er det valgfrie verktøyet.
De plugin.po filen skal inneholde noe som følger (din vil åpenbart være annerledes basert på dato, klokkeslett og konfigurasjon av Poedit):
msgstr "" "Prosjekt-ID-Versjon: WordPress jQuery Date Picker 1.0 \ n" "Rapport-Msgid-Bugs-To: \ n" "POT-Opprettelsesdato: 2013-02-07 13: 36-0500 \ n "" PO-Revision-Date: 2013-02-07 13: 36-0500 \ n "" Siste oversetter: Tom McFarlin \ n "" Språk-team: Tom McFarlin \ n "" Språk: en_US \ n "" MIME - versjon: 1.0 \ n "" Innholdstype: tekst / vanlig; charset = UTF-8 \ n "" Content-Transfer-Encoding: 8bit \ n "" X-Poedit-NøkkelordListe: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0: ... \ n "
Deretter må vi sette tekstdomenet i konstruktøren. Først inkluderer du følgende linje i konstruktøren din:
// Legg til plugin-tekstdomenet add_action ('init', array ($ this, 'plugin_textdomain'));
Deretter legger du til følgende funksjon i filen din:
/ ** * Laster plugin-tekstdomenet for oversettelse * * @ version 1.0 * @since 1.0 * / public function plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker', falsk, dirname (plugin_basename (__FILE__)). '/ lang'); // end plugin_textdomain
Det viktigste å merke seg her er bruken av wp-jquery-date-picker nøkkel som dette er hva vi skal bruke til å lokalisere strenger gjennom resten av plugin.
Til slutt vil vi se dette sammen med README fil senere i opplæringen.
2. Lag Meta Box
På dette tidspunktet er vi klare til å definere koden som vil gjøre meta-boksen. Dette består av flere trinn:
Definere kroken i konstruktøren
Registrer meta-boksen med WordPress
Definere en funksjon som brukes til å gjengjøre den faktiske metakassen
I konstruktøren legger du til følgende linje av kode. Dette er hva vi skal bruke til å registrere vår post-meta-boks:
Vi har dekket meta bokser i dybden i ulike opplæringsprogrammer, og WordPress Codex har en fantastisk artikkel som forklarer hva hver parameter gjør, så jeg vil ikke belabor poenget her.
Når det er sagt, er det en spesifikk ting vi må legge merke til i samtalen ovenfor. Merk at meta-boksen ønsker å registrere skjermen med en funksjon som kalles the_date_display.
Som sådan må vi definere denne funksjonen. Heldigvis kan metakassen være veldig enkel: For å utløse dataplukkeren trenger vi bare et enkelt element. Siden vi skal gjengi datoen, la oss velge å bruke en enkel innboks boks.
Deretter legger du til følgende funksjon i klassen din:
/ ** * Gjør brukergrensesnittet for å fullføre prosjektet i tilhørende metakasse. * * @version 1.0 * @since 1.0 * / offentlig funksjon the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); ekko ''; // avslutt the_date_display
Lett å forstå, riktig?
Vi definerer en ikke-verdi for sikkerhetsformål, noe som gir oss de sikkerhetsfunksjonene vi trenger for å sikre at brukeren har tillatelser for å lagre verdier for dette feltet, og deretter gir vi et innspillingselement til skjermen.
Legg merke til at inngang elementet inneholder en ID for "datepicker" og et navn på "datoen". Dette vil bli importert senere, men for nå kan du lagre arbeidet ditt.
Hvis du aktiverer plugin akkurat nå, bør du se noe som følger:
Selvfølgelig trenger dette litt lys styling for å få det til å se litt bedre ut. Så la oss gjøre følgende:
Lage en css katalog
Legg til en css / admin.css fil
I filen, ta med følgende kode:
#datepicker bredde: 100%;
Deretter legger du til denne linjen i konstruktøren:
På dette tidspunktet bør bredden på inngangsruten for datoperktøren strekke seg over bredden av metakassens beholder. Gjør det ser bare litt finere ut, etter min mening.
3. Lagre datoen
Før vi faktisk begynner å implementere dataplukkeren, la oss gå videre og sørg for at vår nye post-meta-boks kan lagre informasjonen riktig. Akkurat nå er det ikke mulig fordi vi ikke har skrevet koden for den.
Dette bestemte trinnet vil innebære følgende:
Definere en funksjon for lagring av data
Kontroller at brukeren har mulighet til å lagre dataene
Faktisk lagrer dataene
Først må vi definere kroken for å lagre dataene. Til dette legger du følgende linje til konstruktøren din direkte under linjen der vi definerte kroken for å lage meta-boksen:
add_action ('save_post', array ($ this, 'save_project_date')); [php] Deretter må vi faktisk definere save_project_date funksjon. Denne funksjonen skal være ansvarlig for at brukeren har tillatelse til å lagre dataene og da vil faktisk lagre innholdet i inntastingsfeltet i postmetaen for det tilknyttede innlegget. Så legg til følgende funksjon i pluginet ditt: [php] / ** * Lagrer prosjektets sluttdata for innkommende post-ID. * * @param int Nåværende Post-ID. * @version 1.0 * @since 1.0 * / offentlig funksjon save_the_date ($ post_id) // Hvis brukeren har tillatelse til å lagre metadataene ... hvis ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker -nonce)) // Slett alle eksisterende metadata for eieren hvis (get_post_meta ($ post_id, 'the_date')) delete_post_meta ($ post_id, 'the_date'); // slutt hvis update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date']))); // ende if // end save_the_date
Denne funksjonen fungerer ved å i utgangspunktet sjekke for å se om denne brukeren kan lagre. Hvis det er tilfelle, vil det slette alle eksisterende postmetoder for ikke å rote databasen, og deretter legge til datoen som er angitt for dette innlegget.
Men det er en fangst: Vi ringer til en funksjon som heter user_can_save. Denne spesielle funksjonen er en hjelpefunksjon som vi trenger å definere ettersom det forenkler mye av den kjelekode som er nødvendig for å sikre at brukeren har tillatelse til å lagre filen.
Så i området "Hjelperfunksjoner" i klassen din, legg til følgende funksjon:
/ ** * Bestemmer om den nåværende brukeren har muligheten til å lagre metadata knyttet til dette innlegget eller ej. * * @param int $ post_id IDen til innlegget blir lagret * @param bool Hvorvidt brukeren har muligheten til å lagre dette innlegget eller ikke. * @version 1.0 * @since 1.0 * / privat funksjon user_can_save ($ post_id, $ nonce) $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST [$ nonce]) && wp_verify_nonce ($ _POST [$ nonce], plugin_basename (__FILE__)))? sant: false; // Retur sant hvis brukeren er i stand til å lagre; ellers falsk. komme tilbake ! ($ is_autosave || $ is_revision) && $ er_valid_nonce; // sluttbruker_can_save
Legg merke til at denne funksjonen tar i gjeldende post-ID og nonce-verdien (som vi satt tidligere i dette innlegget). Endelig returnerer denne funksjonen sann hvis dette ikke er en autosave, en postrevisjon, og at nonce er gyldig.
Hvis det er sant, har brukeren tillatelse til å lagre.
Konklusjon
På dette punktet, la oss prøve ut hva vi har. Aktiver plugin, og du bør se meta-boksen på Dashboard-postredigeringen. Akkurat nå bør du kunne lagre verdi som du vil ha i det aktuelle feltet.
Du kan ta en kopi av pluginet i sin nåværende versjon for dette innlegget ved hjelp av denne linken.
I den neste artikkelen skal vi se på å faktisk implementere datovelgeren. Dette vil inkludere import av nødvendige JavaScript-avhengigheter, skrive litt av vårt eget JavaScript, og deretter gjengi datoen på forsiden av innlegget.
Til slutt skal vi forberede plugin for utgivelse ved å generere lokaliseringsfilene og deretter forberede README.
Share
Accentsconagua
