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.
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:
I tillegg til disse standardfeltene vil vi også inkludere tre tilpassede metafelt for:
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.
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:
- Klikk på Tilpasset nedlasting knappen til høyre
- På den neste siden fjerner du merket for Bytt alle boksen under komponenter tittel. Dette vil fjerne merket for alle avmerkingsboksene
- Rull ned til widgets delen og sjekk Datovelger avkrysnings
- Nederst på siden, velg fargetemaet du ønsker, fra temaer seksjon. Vi vil bruke standard UI Letthet tema for vår opplæring
- Klikk på nedlastningsknappen for å laste ned den egendefinerte pakken
Trekk ut den nedlastede pakken og kopier over innholdet i
css / ui-lyshet
tilkommende-events / css
katalog.Hva skjer neste gang?
Det handler om planlegging. I neste del av serien begynner vi å skrive vår kode.
Vi vil:
Hold deg oppdatert på neste artikkel i serien.