Share
Denne serien er fokusert på tips og strategier som vi kan bruke til å skrive WordPress-plugins - spesielt de som bruker metakasser - som er logisk organisert og lett å vedlikeholde.
I de to første innleggene i serien la vi ut den første katalogstrukturen, satt opp koden for pluginet, og diskutert hva plugin vil gjøre. I det siste innlegget begynte vi å lage meta-boksen og introdusere fanene som vil inneholde hver av funksjonene som vi skal jobbe.
Denne artikkelen vil fortsette å bygge videre på det vi har gjort hittil. Vi skal introdusere innhold i hver av kategoriene, implementere funksjonalitet som gjør at vi kan bytte det nevnte innholdet, og vi begynner å introdusere feltene for innhold på den første kategorien.
Før vi går på å implementere fanene som vil bytte mellom alle mulige muligheter, må vi presentere deler, maler, visninger eller hva du vil ringe dem, slik at vi har filer spesielt for å håndtere vår informasjon.
Først, navigere til admin / visninger / partials katalog og legg til følgende filer (alle som kan være tomme, for nå selv om jeg har gitt noen grunnleggende kode nedenfor):
Accentsconagua
drafts.phpresources.phppublished.phpHver av disse filene samsvarer med en av kategoriene i meta-boksene. La oss gå videre og introdusere noe plassholderinnhold for hver av kategoriene. Før vi er ferdige med artikkelen, implementerer vi brukergrensesnittet til den første kategorien, men dette vil gi oss noe visuelt å jobbe før vi fortsetter å jobbe med den aktuelle flippefunksjonaliteten.
Legg til følgende kode til drafts.php.
Dette er hvor Draft-innholdet vil oppholde seg.
Vi tar en titt på dette delvis senere i artikkelen.
Legg til følgende kode til resources.php.
Dette er hvor ressursinnholdet vil oppholde seg.
Vi tar en titt på dette delvis senere i serien.
Legg til følgende kode tilpublished.php.
Det er her Publisert innhold vil ligge.
Vi vil også se på dette delvis senere i serien.
Vi har en ting å gjøre før vi tester dette ut i WordPress Dashboard: Vi må faktisk inkludere disse filene i meta boxvisningen slik at vi kan se informasjonen.
Dette er enkelt å gjøre. Først, åpen Forfatterne-kommentar-navigation.php. Legg til følgende kode i filen (merk at hele den nye koden er en serie av include_once uttalelser).
Utkast til ressurser utgitt
Forutsatt at du opprettet alle filene dine og inkluderte dem riktig, er vi klar til å ta en titt på oversikten. Hvis alt er implementert riktig, bør du se noe slikt:
Åpenbart vil vi ikke at alt innholdet vises i den første kategorien, så vi må gjøre noen endringer. Så la oss gjøre det.
Til slutt er målet vårt å bruke som innebygde stiler og funksjoner som WordPress gir. Hver gang du introduserer noe som er utenfor den kjente WordPress-funksjonaliteten, er det noe du vil være ansvarlig for å opprettholde over tid.
Dessuten jobber du også med å lage et plugin som er så tett integrert med WordPress brukergrensesnittet som mulig. Til slutt bruker vi en kombinasjon av innebygde stiler og tilpassede stiler og JavaScript for å oppnå nøyaktig hva det er som vi håper å oppnå.
Vi vet at det første vi vil gjøre er å skjule alt unntatt den første visningen (det vil si alt unntatt utkast).
For å gjøre dette må vi legge til en klasse attributt av skjult til partials for ressurser fanen og til publisert tab.
Hver av følgende filer skal se slik ut:
drafts.php:
Dette er hvor Draft-innholdet vil oppholde seg.
resources.php:
Dette er hvor ressursinnholdet vil oppholde seg.
published.php:
Det er her Publisert innhold vil ligge.
Og resultatet av denne mindre endringen bør være følgende:
Enkelt, ikke sant? Dette er nøyaktig hvorfor jeg anbefaler å holde fast med kjernen WordPress-funksjonalitet og stiler så mye som mulig.
Selvfølgelig trenger vi fortsatt å introdusere koden for å bytte data mellom fanene, ikke sant? Så la oss gjøre det nå.
Først må vi sørge for at den første kategorien er merket som aktivt. Forutsatt at du har fulgt sammen med denne opplæringen og tilhørende GitHub-depot, bør koden din se slik ut:
Utkast til ressurser utgitt
Det er bra fordi det allerede markerer din første fane som aktiv med å bruke nav-tab-aktive klassen attributt. Vi har vårt arbeid skåret ut for oss:
Nå er det en rekke måter å oppnå trinn to. Vi gjør det på en måte som er dokumentert og forklart i løpet av denne artikkelen, men vet det der er andre alternativer som du sannsynligvis vil se, og at de ikke nødvendigvis er feil.
Bunnlinjen er at det finnes en rekke måter å håndtere dette, vi håndterer det en av de mange måtene som er tilgjengelige.
Så først la vi legge til en JavaScript-fil til admin / eiendeler / js og vi ringer er tabs.js. Skjelettet for filen skal se ut som følgende:
(funksjon ($) 'bruk streng'; $ (funksjon () );) (jQuery);
Deretter må du kontrollere at vi bare importerer JavaScript på innleggssider. For å gjøre dette, presenterer vi en krok i konstruktøren der vi allerede har tatt med noen stilark. Den fulle konstruktøren er under:
navn = $ navn; $ this-> version = $ version; $ this-> meta_box = nye Authors_Commentary_Meta_Box (); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles')); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_scripts')); Og så implementerer vi funksjonen:
id) wp_enqueue_script ($ this-> name. '-tabs', plugins_url ('authors-commentary / admin / assets / js / tabs.js'), array ('jquery'), $ this-> versjon); På dette tidspunktet har vi alt vi trenger for å implementere JavaScript for å kontrollere fanene. Nedenfor finner du kommentert kode for det og en kort forklaring som følger kodestykket, også:
(funksjon ($) 'bruk strenge'; $ (funksjon () // Ta tak i wrapper for navigasjonsfanene var navTabs = $ ('# authors-commentary-navigation'). barn ('.nav-tab-wrapper '), tabIndex = null; / * Når hver av navigasjonsfanene klikkes, må du sjekke om den har klassenavnet' nav-tab-active '. Hvis ikke, merk det som aktivt, ellers ikke gjør noe (som det allerede er * merket som aktivt. * * Når en ny fane er merket som aktiv, må den tilhørende barnvisningen merkes * som synlig. Dette gjøres ved å bytte til den "skjulte" klassen attributtet til den tilsvarende variabler. * / navTabs.children (). hver (funksjon () $ (dette) .on ('klikk', funksjon (evt) evt.preventDefault (); // Hvis denne kategorien ikke er aktiv ... hvis $ (dette) .hasClass ('nav-tab-active')) // Unmark den aktuelle kategorien og merk den nye som aktiv $ ('.nav-tab-aktiv') .removeClass ('nav-tab-aktiv '); $ (dette) .addClass (' nav-tab-active '); // Lagre indeksen for kategorien som bare er merket som aktiv. være 0 - 3. tabIndex = $ (dette) .index (); // Skjul det gamle aktive innholdet $ ('# authors-commentary-navigation') .barn ('div: not (.inside.hidden)') .addClass ('hidden'); $ ('# authors-commentary-navigasjon') .barn ('div: nth-child (' + (tabIndex) + ')') .addClass ('hidden'); // og vise det nye innholdet $ ('# authors-commentary-navigation') .barn ('div: nth-child (' + (tabIndex + 2) + ')') .removeClass ('hidden'); ); ); ); ) (jQuery);Bare i tilfelle kodenes kommentarer ikke er klare, oppretter de ovennevnte kodesettene en hendelseshåndterer for alle fanene. Når en fane klikkes, ser det ut til å se om den har nav-tab-aktive klasse. I så fall skjer ingenting.
Ellers skifter vi kategorien og skjuler innholdet som var aktiv og vis det nye innholdet ved å fjerne skjult klassenavn som vi la til tidligere i artikkelen.
Nå skal du kunne bytte mellom faner og se hver av de tre forskjellige implementeringer uten problem. Med det sagt, la oss gå videre og fortsette å implementere funksjonaliteten for den første kategorien.
Selv om vi ikke fullfører den fulle funksjonaliteten under denne opplæringen, vil vi få se vårt arbeid kuttet ut for oss i følgende artikkel. La oss anta at i forbindelse med dette pluginet, utkast Brukergrensesnittet vil være et sted hvor brukeren bare behandler den som et skrapelodd for ideer.
Det kan inneholde lenker til artikler, lenker til tweets, korte notater om omrisset, noen få setninger og så videre. Generelt fungerer det som en "catch-all" for alle gjenstander som forfatteren kan bruke gjennom hele hans eller hennes innlegg.
For det formål skal vi bruke en enkel, enkel textarea. Videre ønsker vi ikke å introdusere flere UI-elementer enn nødvendig, slik vi vil ikke bli innført en send-knapp. I stedet lagrer vi dataene når brukeren klikker "Oppdater" på postredigeringsprogrammet.
På den måten lagres alt på samme tid.
Igjen vil vi ikke komme inn i validering, sanitisering og serialiseringsprosessen, men vi vil plassere et tekstområde innenfor utkast delvis for å få oss på et fint sted for oppfølgingsartikkelen.
Åpen drafts.php, Legg til følgende kode, og din endelige kode skal se slik ut:
Deretter oppdaterer du admin.css fil for å sikre at textarea passer godt inn med resten av meta-boksen:
# forfattere-kommentarer-utkast bredde: 100%; høyde: 250px;
Nå, når du ser meta-boksen, bør du se en godt formatert textarea med meta-boksen med faner som fungerer når de klikkes.
I neste artikkel fortsetter vi å implementere brukergrensesnittet for hver av kategoriene som finnes i meta-boksen.
Da begynner vi prosessen med sanitisering, serialisering og validering som vi begynner å faktisk lagre informasjon som brukeren legger inn i meta-boksen. Vi vil også gå videre med å introdusere flere felt i plugin.
.
