Opprette kommende hendelser Plugin i WordPress Introduksjon

WordPress er ikke bare en blogging plattform lenger, men kan brukes til å utvikle komplekse webapplikasjoner til mange formål. WordPress tilbyr forskjellige APIer, slik at vi kan utvikle videre på sin base.

Vi kan utvide WordPress for å imøtekomme våre behov ved hjelp av Plugins API. Med denne kraftige API kan vi utvikle løsninger som tilfredsstiller våre behov for nesten endeløse scenarier; Derfor, for å bli en mester i WordPress, må en gang mestere sine APIer.

I denne serien ser vi på WordPress Plugins API, samt Widget API og hvordan vi kan bruke dem til å utvikle løsninger som er spesifikke for våre behov.

Hva vi gjør

I løpet av denne tredelte serien vil vi bygge et WordPress-plugin fra grunnen opp. Dette pluginet viser en liste over kommende hendelser på forsiden for å la brukerne få vite hva som kommer neste gang. Administrasjonen vil kunne publisere informasjon om nye hendelser, og vil kunne redigere eller slette dem.

Det er et ordtak:

Unnlatelse av å planlegge planlegger å mislykkes.

Vi vil planlegge ut hver detalj og aspekt av pluginet vårt før vi begynner å skrive kode. På den måten skal vi klargjøre hva vi skal gjøre og hvordan Vi skal gjøre det. Vi vil også sørge for at vi har alle nødvendige eiendeler vi skal bruke senere før vi begynner å skrive vår kode.

Vi begynner med å registrere en egendefinert innleggstype for våre arrangementer. Dette vil gjøre det lettere for oss å håndtere ting effektivt. Den tilpassede innleggstypen vil inkludere:

  • et tittelfelt
  • et beskrivelsesfelt
  • feltet for kjennetegnet bilde

I tillegg til disse standardfeltene vil vi også inkludere tre tilpassede metafelt for:

  • begivenhets startdato
  • Hendelses sluttdato
  • arrangement sted

For startdato for begivenhet og begivenhetsdato, vil vi inkludere jQuery UI-datovelger i vårt innleggs dashbord.

Ovennevnte tre egendefinerte felt vil lagre verdiene i postmeta, og vi vil spørre våre hendelser på forsiden på grunnlag av disse egendefinerte feltene ved hjelp av meta-spørringen.

Når det gjelder tilpassede posttyper, viser WordPress bare kolonner for tittelen, forfatteren og publiseringsdatoen for innlegget på skjermen etter redigering, men vi er ikke begrenset til det. Vi legger til egendefinerte kolonner for begivenhets startdato, sluttdato og arrangementet for bedre tilgjengelighet for brukeren.

Endelig, når det gjelder front-end, er det hensiktsmessig å lage en widget som viser en liste over alle hendelser som er planlagt i nær fremtid. Med den kraftige Widget API, vil vi kode vår tilpassede widget som vi vil kunne legge til i sidelinjen eller bunntekstområdet.

Legger grunnlaget

La oss begynne med å lage den grunnleggende katalogen / filstrukturen. Naviger tilwp-innhold / tillegg katalog og lag en ny katalog som heter Kommende arrangementer. Inne i det, opprett flere kataloger for:

  • css
  • js
  • img

Lag også følgende PHP-filer:

  • index.php
  • kommende-events.php

Som du kanskje har lagt merke til at vi har opprettet en ekstra kommende-events.php fil i tillegg til standarden index.php fil. Vi vil skrive all vår kode inne i kommende-events.php fil. Det er en god praksis å slippe en index.php filen i eiendomsmappene dine, så vel som det vil blokkere alle som prøver å finne ut innholdet i katalogen i nettleseren.

Vi vil skape style.css og script.js filer inne i css og js mapper henholdsvis.

Inne i index.php fil, legg til følgende kode:

 

Her plasserer vi bare en plassholdertekst inne i index.php.

Inne i kommende-events.php fil, legg til følgende plugin-erklæring:

 

Etter å ha blitt ferdig med den grunnleggende filstrukturen, vil vi fortsette å samle de nødvendige eiendelene vi trenger i plugin. En av disse eiendelene er stilarket for jQuery UI datepicker. Som standard bruker WordPress jQuery og jQuery UI-kjerne på alle sidene i dashbordet. Vi trenger bare å inkludere stilene for datepicker-widgeten.

For å gjøre det, naviger nettleseren din til http://jqueryui.com og:

  1. Klikk på Tilpasset nedlasting knappen til høyre
  2. På den neste siden fjerner du merket for Bytt alle boksen under komponenter tittel. Dette vil fjerne merket for alle avmerkingsboksene
  3. Rull ned til widgets delen og sjekk Datovelger avkrysnings
  4. Nederst på siden, velg fargetemaet du ønsker, fra temaer seksjon. Vi vil bruke standard UI Letthet tema for vår opplæring
  5. Klikk på nedlastningsknappen for å laste ned den egendefinerte pakken

Trekk ut den nedlastede pakken og kopier over innholdet i css / ui-lyshet til kommende-events / css katalog.

Hva skjer neste gang?

Det handler om planlegging. I neste del av serien begynner vi å skrive vår kode.

Vi vil:

  • registrer egendefinert innleggstype for begivenhet
  • legg til metakasser til hendelsesredigeringsskjermen
  • legg til nødvendige stiler og skript til vår admin
  • innlemme jQuery UI datovelger for å legge inn hendelsesdatoer
  • legg til egendefinerte admin kolonner til "Alle hendelser" skjermen

Hold deg oppdatert på neste artikkel i serien.