Share
I denne serien av artikler vurderer vi en håndfull tips og strategier som vi kan bruke for å bygge mer vedlikeholdbare WordPress-plugins, og vi går det hele gjennom konteksten av et plugin som utnytter tabbed meta-bokser.
I forrige innlegg implementerte vi funksjonaliteten spesielt for våre faner, og vi implementerte også den første textarea som vil bli brukt til å fange noen av brukerinngangene. For de som har fulgt sammen, vet du at vi bare har fått så langt som:
Vi har ikke fullført den faktiske prosessen med å sanitisere, validere og lagre dataene, og vi har ikke plaget oss med å introdusere innholdet for resten av kategoriene. I løpet av de neste to artiklene skal vi gjøre akkurat det.
Spesielt i denne artikkelen vil vi fortsette med å introdusere resten av brukergrensesnittet, og da skal vi flytte på faktisk skrive kode som er ansvarlig for å verifisere brukerinngangen og knytte den til det angitte innlegget.
Med det lagt ut foran oss, la oss komme i gang.
Som nevnt, i det siste innlegget introduserte vi en textarea inn i vår utkast fane. Hvis du har fulgt opp med veiledningene og / eller bruker koden i det tilgjengelige arkivet, bør du se noe slikt:
Tanken bak utkast fanen er enkel: Dette er et sted hvor brukerne kan skrive ned notater, samle ideer og i utgangspunktet ha et notisblokk på plass for å hjelpe dem med å samle sine ideer før de skriver et innlegg.
Hva med Ressurss tab? Tanken bak denne fanen er at brukerne vil kunne samle ulike nettadresser til sider, tweets, bilder og annen informasjon relatert til innholdet de vil skrive, slik at de kan legge inn, lenke og / eller referere dem i innlegget sitt.
Slik fungerer det:
Når det gjelder de to siste punktene, tar vi oss av det i neste artikkel. For nå, la oss ta vare på dynamisk legge til feltene.
Lokaliser admin / synspunkter / partials / resources.php og oppdater koden slik at den ser slik ut:
Neste, la oss lage en fil i admin / eiendeler / js og ring det resources.js. Stub ut filen slik at den ser ut som følgende:
(funksjon ($) 'bruk streng'; $ (funksjon () );) (jQuery);
Deretter må vi sette opp en hendelseshåndterer slik at når brukeren klikker på Legg til ressurs knappen, gjør det følgende:
Her er den fullt kommenterte koden for hvordan du oppnår det med mer informasjon nedenfor:
Accentsconagua
/ ** * Oppretter et nytt innspillingselement som skal legges til DOM som brukes til å representere en enkelt * ressurs (det være seg en adresse, tweet, bildeadresse, etc.) som skal refereres til i innlegget. * * @since 0.4.0 * @param object $ En referanse til jQuery-objektet * @return-objekt Et innspillingselement som skal legges til DOM. * / funksjon createInputElement ($) var $ inputElement, iInputCount; / * Teller først antall inntastingsfelt som allerede finnes. Slik skal vi * implementere navn og ID-attributter til elementet. * / iInputCount = $ ('# authors-commentary-resources'). barn (). lengde; iInputCount ++; // Deretter lager du det faktiske inputelementet og returnerer det til den som ringer $ inputElement = $ ('') .attr (' type ',' tekst ') .attr (' navn ',' authors-commentary-resource- '+ iInputCount) .attr (' id ',' authors-commentary-resource- '+ iInputCount). attr ('verdi', '); return $ inputElement; (funksjon ($) ' bruk streng '; $ (funksjon () var $ inputElement; $ (' # authors-commentary add-resource ' ("klikk", funksjon (evt) evt.preventDefault (); / * Opprett et nytt innspillingselement som skal brukes til å fange opp brukerne * og legg det til beholderen rett over denne knappen. * / $ ('# forfattere-kommenteringsressurser ') .append (createInputElement ($));););) (jQuery);I koden ovenfor er det en funksjon som er spesielt utviklet for å skape et inngangselement og bruke antall eksisterende elementer for å gi det et unikt navn og ID.
Det er også en DOM-klar handler som setter opp en funksjon som skal brennes når brukeren klikker på Legg til ressurs knapp. Når knappen klikkes, kalles den nevnte funksjonen, og deretter legges innelementet til foreldrebeholderen.
For å sikre at dette ser best ut, må vi skrive noen få stiler. Så akkurat som vi gjorde med JavaScript-kilden, finn admin / assets / css / admin.css og legg deretter til følgende kode nederst i filen:
# forfattere-kommenteringsressurser input [type = "text"] bredde: 100%; margin-bunn: 10px;
Dette sikrer at hvert inngangselement har en bredde på 100% slik at de hver bor på egen linje.
Til slutt må vi kalkulere JavaScript som vi skrev med WordPress slik at det reagerer riktig på elementene som vi har vist på vår del. For å gjøre dette, finn enqueue_admin_scripts fungere i admin / klasse-forfattere-commentary.php, og oppdater funksjonen slik at den ser slik ut:
id) wp_enqueue_script ($ this-> navn. '-tabs', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / tabs.js', array ('jquery'), $ this-> versjonen) ; wp_enqueue_script ($ this-> name. '-resources', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / resources.js', array ('jquery'), $ this-> versjonen); På dette tidspunktet bør du kunne laste inn postredigeringsprogrammet i nettleseren din, klikk på ressurser og start deretter dynamisk legge til flere inntastingsfelter på siden din.
Husk at vi ikke faktisk gjør noe på server-siden ennå, så vi er ikke sanitizing, validering eller lagring av denne informasjonen. Vi gjør dette i neste artikkel.
Nå som vi har et sted å samle ulike notater og ressurser som skal brukes i hele vårt innlegg, hvilke elementer ville det publisert fanen inneholder?
Alle tre er helt akseptable ting å introdusere i publisert kategorien; Men for å ikke gjenoppfinne hjulet og for å fortsette å introdusere ny funksjonalitet, så vel som andre måter å jobbe med WordPress API, går vi med det endelige alternativet.
Spesielt skal vi laste inn en liste over alle kommentarene som finnes på innlegget. Ved siden av hver kommentar vil det være en avkrysningsboks. Hvis kommentaren har mottatt et svar, blir det kontrollert; Ellers vil det være ukontrollert.
Vi vil ikke være inkludert pingbacks for dette siden en forfatter vanligvis ikke reagerer på pingbacks.
Med det sagt, last admin / synspunkter / partials / published.php og legg til følgende kode:
load_post_comments (); ?>
COMMENT_AUTHOR; ?>: COMMENT_CONTENT; ?>
Legg merke til at vi ringer til en funksjon som kalles load_post_comments. Siden vi ennå ikke har definert det, la oss hoppe inn i admin / klasse-forfattere-kommentar-meta-box.php og legg til følgende kode:
get_the_ID (), 'status' => 'godkjenne'); $ comments = get_comments ($ args); returner $ comments;
Denne funksjonen henter en samling av alle godkjente kommentarer for det angitte innlegget. Delepartiet som er oppført ovenfor, vil deretter gjenta gjennom kommentarene og deretter lage en etikett og en avkrysningsboks som gjør at brukeren kan velge om kommentaren har mottatt et svar eller ikke.
Under etiketten vil du legge merke til kommentarforfatteren og kommentaren. Dette er ment hovedsakelig som en måte å enkelt identifisere kommentaren som er igjen.
Til slutt må vi legge til en ting til stilarket vårt:
# author-commentary-comments label font-weight: bold;
Og vi er ferdige.
Til slutt bør du ende opp med en skjerm som du ser ovenfor.
I den neste artikkelen skal vi gå tilbake til server-siden og begynne å jobbe med kode for å validere, sanitisere, serialisere og hente all koden som er knyttet til brukergrensesnittet som vi nettopp har opprettet.
I mellomtiden husk å koble koden på GitHub (tilgjengelig på høyre side av dette innlegget), og vær så snill å legge alle spørsmål og kommentarer i feedet under.
