Opprette Vedlikeholdbare WordPress Meta Bokser Oppsettet

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.

Planlegger Forfatterens kommentar

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:

  1. Notater som brukes når du klargjør innlegget
  2. Eiendeler og ressurser brukt i hele innlegget
  3. Tweets og lenker til kommentarer og tilbakemelding etter publiseringen

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.

Meta Box-fanene

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.

  1. Den første kategorien blir kalt utkast som det vil inneholde alle bullet poeng, setninger og andre notater som gikk inn i forberedelsen av innlegget.
  2. Den andre kategorien vil bli kalt ressurser som det vil inkludere informasjon om andre innlegg, linker, videoer og så videre som vi kan referere til i vårt innlegg eller at vi kan legge inn i vårt innlegg.
  3. Den endelige kategorien blir kalt publisert som det vil inneholde linker til kommentarer, felt for e-post og annen informasjon som alle er relevante for innlegget etter at det har blitt publisert.

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.

Opprette Meta Box

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.

Meta Box Class

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:

  1. Konstruktøren registrerer add_meta_box Fungerer med den tilsvarende WordPress-handlingen.
  2. De add_meta_box funksjonen definerer egenskapene til metakassen.
  3. De 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.

Legge til faner

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:

  • Vi har pakket tre ankre i en 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.
  • Hvert anker har a nav-fanen klasse den første som har nav-tab-aktive klasse. Dette gir oss igjen litt styling som vi arver fra WordPress.
  • Hvert anker har også 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å.

Inkludert et stilark

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.

Forbereder å flytte fremover

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.