I denne serien går vi gjennom hvordan du oppretter vedlikeholdbare WordPress-metakasser. Det er at vi ser på noen beste praksis som vi kan bruke i vår WordPress-utvikling for å sikre at vi skriver kode som kan vedlikeholdes av oss selv eller av teamet vårt, da det fortsetter å utvikle seg over tid.
I det første innlegget så vi på den opprinnelige katalogstrukturen og satt opp den grunnleggende koden som kreves for å få et plugin som kjører i WordPress. I dette innlegget skal vi fortsette å planlegge og bygge vårt plugin.
Vi skal også snakke om de avgjørelsene vi gjør når det gjelder å skille deler av koden og hvordan det påvirker vedlikeholdsegenskapen.
I forrige innlegg begynte vi å jobbe med et plugin som heter Forfatterens kommentar. Ideen bak plugin er at det vil tillate postforfattere å forlate ulike notater og eiendeler knyttet til innlegget som ble brukt enten som inspirasjon, som tanker etter at innlegget ble skrevet og mottatt, og annen lignende informasjon.
Når du skriver et innlegg, la oss si at vi ønsker å fange opp tre spesifikke deler av informasjonen:
For å være klar, vil vi ha mulighet til å vedlikeholde notatene som gikk inn i å skape innlegget før det ble skrevet, koblinger til ulike eiendeler - det være seg eksterne artikler, bilder, videoer, kodeprøver og så videre - og deretter opprettholde en liste over tweets, linker til kommentarer og ulike utdrag fra e-postmeldinger vi har mottatt.
På dette tidspunktet har vi nok til å fortsette for å begynne å forberede meta-boksen og tabbedesignet for det.
Før vi faktisk begynner å skrive noen kode, la oss navngi kategoriene som vil bli knyttet til hver av tilstandene i vårt innlegg som nevnt ovenfor. Å gjøre dette vil hjelpe oss å konseptuelt organisere våre inngangselementer slik at de logisk grupperes sammen.
Gitt, du kan nevne alt du vil, men hvis du følger med denne opplæringen og den angitte kildekoden, så er dette det du kan forvente å se.
Rett nok, ikke sant? Vi snakker mer om innspillingselementene for hver fane når vi kommer til det punktet i koden, men for nå må vi fokusere på å lage meta-boksen og implementere fanene.
For å lage metakassen, vil vi dra nytte av add_meta_box
Fungerer som dokumentert i WordPress Codex. For å gjøre dette skal vi introdusere en ny klasse, oppdatere pluginets bootstrap-fil, og introdusere noen visninger som vil bli brukt til å gjengi markup i nettleseren.
For å sikre at vår kode er godt innkapslet og at hver klasse representerer en enkelt ide, skal vi lage en Authors_Commentary_Meta_Box
klasse. Denne klassen vil være ansvarlig for å registrere en krok med add_meta_box
handling, oppsett av meta-boksen og gjengivelse av innholdet.
For de som ikke er vant til å skrive pluginer på en objektorientert måte med WordPress, tillater denne tilnærmingen oss å segmentere våre ansvarsområder - for eksempel en meta-boks - og ha en enkelt klasse som representerer alt som går inn i å skape en.
For å gjøre dette, må du først opprette klasse-forfattere-kommentar-meta-box.php
i administrasjonskatalogen. Deretter legger du til følgende kode:
* / klasse Authors_Commentary_Meta_Box / ** * Registrer denne klassen med WordPress API * * @since 0.2.0 * / offentlig funksjon __construct () add_action ('add_meta_boxes', array ($ dette, 'add_meta_box')); / ** * Funksjonen som er ansvarlig for å lage den faktiske meta-boksen. * * @since 0.2.0 * / offentlig funksjon add_meta_box () add_meta_box ("authors-commentary", "Forfatterens kommentar", array ($ this, 'display_meta_box'), 'post', 'normal', 'standard') ; / ** * Gjør innholdet i metakassen. * * @since 0.2.0 * / offentlig funksjon display_meta_box ()
Kommentarene og innholdet i klassen skal gjøre det relativt enkelt å forstå. Det gjør tre ting, men å være klar:
add_meta_box
Fungerer med den tilsvarende WordPress-handlingen.add_meta_box
funksjonen definerer egenskapene til metakassen.display_meta_box
funksjonen gjør ingenting ennå - vi jobber med dette på kort tid.Før vi går videre, er det noen få endringer vi må presentere til resten av plugin.
Først må vi inkludere denne nye filen i pluginens bootstrap-fil. I Forfatterne-commentary.php
, legg til følgende linje kode over gjeldende require_once
uttalelse:
/ ** * Klassen som representerer meta-boksen som vil dispalere navigasjonsfanene og hvert av feltene * for meta-boksen. * / require_once plugin_dir_path (__FILE__). 'Admin / klasse-forfattere-kommentar-meta-box.php';
Vi legger til denne linjen over den opprinnelige koden fordi den opprinnelige koden avhenger av denne filen som skal kjøres; derfor må den lastes først.
Deretter må vi introdusere en ny eiendom i side av admin / klasse-forfattere-commentary.php
som vil referere til en forekomst av meta-boksen:
/ ** * En referanse til meta-boksen. * * @since 0.2.0 * @access private * @var Authors_Commentary_Meta_Box $ meta_box En referanse til meta-boksen for plugin. * / privat $ meta_box;
Til slutt må vi ordne koden i konstruktøren til klassen:
/ ** * Initialiser klassen og sett dens egenskaper. * * @since 0.1.0 * @var string $ name Navnet på denne plugin. * @var string $ version Versjonen av dette plugin. * / offentlig funksjon __construct ($ navn, $ versjon) $ this-> name = $ name; $ this-> version = $ version; $ this-> meta_box = nye Authors_Commentary_Meta_Box ();
På dette tidspunktet bør du kunne aktivere pluginet, navigere til en innleggsside og se en tom meta-boks:
Ingenting er for spennende, men vi har det vi trenger for å begynne å introdusere vår flippte navigasjon.
På dette tidspunktet er vi klare til å introdusere tabbnavigasjonsdelen av meta-boksen. Til slutt er målet vårt å introdusere oppmerkningen og stilene for fanen i dette innlegget, og deretter implementere oppførselen og elementene i neste innlegg i serien.
Med det sagt, la oss først lage en visninger
underkatalogen i admin
katalogen. Teknisk gjorde vi dette i forrige artikkel; Vi har imidlertid ikke innhold i katalogen, slik at den ikke ble sjekket inn i kildekontrollen (derfor ble katalogen ikke lagt til - så hvis du følger sammen med depotet, er det nå dags å lage katalogen).
Deretter lager du en fil i visningsmappen som heter Forfatterne-kommentar-navigation.php
. Denne filen vil primært tjene som markering; Det vil imidlertid inkludere litt PHP når vi gjør med dette plugin.
Legg til følgende kode i filen. Vi diskuterer det mer grundig etter koden:
Utkast til ressurser utgitt
Når du er ferdig, sett inn følgende kode i Authors_Commentary_Meta_Box, legg til følgende kode for å importere dette bestemte oppslaget:
Bortsett fra
div
container som vi har, legg merke til følgende:
h2
element. De h2
elementet inneholder klassen attributter av nav-tab-wrapper
og nåværende
. Dette gjør at vi kan arve stiler direkte fra WordPress uten å gjøre noe fra vår side.nav-fanen
klasse den første som har nav-tab-aktive
klasse. Dette gir oss igjen litt styling som vi arver fra WordPress.href
attributt av javascript :;
fordi ankrene egentlig ikke skal ta oss hvor som helst. I stedet, i en fremtidig opplæring, bruker vi JavaScript til å kontrollere fanene og innholdet som vises i hver enkelt.På dette punktet bør du se følgende:
Legg merke til at alle stilene som er brukt på fanene, har blitt levert av WordPress. Det eneste du kanskje vil tilpasse er marginen som eksisterer mellom fanene og den horisontale linjen under dem.
La oss gjøre det nå.
I admin
katalog, legg til en annen underkatalog som heter eiendeler
og innenfor det en katalog kalt css
. Deretter oppretter du en tom fil som heter admin.css
.
Deretter inkluderer du følgende linjer i CSS-filen:
a.nav-tab margin-bottom: -4px;
Så sørg for å inkludere følgende samtale i konstruktøren til klasse-forfattere-commentary.php
:
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles'));
Til slutt legger du til følgende funksjon - den er ansvarlig for enqueuing selve stilarket:
/ ** * Enqueues alle filer spesifikt for instrumentbrettet. * * @since 0.2.0 * / offentlig funksjon enqueue_admin_styles () wp_enqueue_style ($ this-> name. '-admin', plugins_url ('authors-commentary / admin / assets / css / admin.css'), falsk, $ denne-> versjonen);
På dette punktet bør det se mye renere ut:
Med det gjort har vi fullført alt vi trenger for det grunnleggende grunnlaget for navigasjonsfanene for vår meta-boks.
I den neste artikkelen skal vi presentere innholdet for hver enkelt kategori, og vi skal jobbe gjennom JavaScript som er nødvendig for å bytte fanene og hvert innhold.
For de som er mer erfarne med WordPress, kan denne serien av artikler føles at den beveger seg i et langsommere tempo, men det er poenget - vi ønsker å være så uttømmende som mulig når det gjelder ikke bare å bygge brukergrensesnittet vårt, men også også i å forklare begrunnelsen bak hver av våre beslutninger.
I mellomtiden, ikke glem å sjekke kildekoden på GitHub, følg med, og la noen spørsmål eller kommentarer i feedet under.