Dynamiske sidemaler i WordPress, del 3

I de to første delene av denne opplæringsserien dekket vi hvilke dynamiske sidemaler var og hvorfor de trengte. Vi så også på koden som kreves for å implementere dem. 

I denne tredje og siste opplæringen i serien skal jeg lage to eksempler på fullt fungerende dynamiske sidemaler du kan bruke i dine egne prosjekter. Disse ble spesielt valgt for å være lett uttrekkbare for å dekke dine egne behov, og er ment som inspirasjon for andre typer dynamiske sideskjermer du kan tenke på.

De to dynamiske sideskjemaene vi skal se nærmere på, er:

• Enkel kontaktskjema
• Blogginnleggarkiv

I tillegg til å implementere våre sidemaler, vil jeg også vise deg hvordan du legger til ekstra polsk, via tilpasset CSS og JavaScript, for å gjøre samhandling mye mer intuitiv for sluttbrukere.

I tillegg tar vi en titt på hvordan du kan bruke sidemaler for noen posttype. Siden WordPress 4.7 kan du spesifisere posttypen en sidemal er knyttet til. Vi ser hvordan du kan endre en eksisterende dynamisk sidemal for å utnytte denne nye funksjonen, slik at den fungerer med alle posttyper.

Vi har mye å dekke i denne opplæringen, så la oss komme i gang!

Temaoppsett

Vi bruker et WordPress Twenty Seventeen barntema igjen, akkurat som vi gjorde i del 2 i denne opplæringsserien, for å legge til vår dynamiske sidemalekode. La oss begynne med et tomt barn tema.

Opprett en barnemagemappe som heter twentyseventeen-barn og legg til følgende filer:

• functions.php
• style.css

Innsiden style.css, Legg til:

/ * Tema navn: Twenty Seventeen Child Beskrivelse: Twenty Seventeen Child Theme Forfatter: David Gwyer Mal: ​​Twentyseventeen Versjon: 0.1 Lisens: GNU General Public License v2 eller nyere Lisens URI: http://www.gnu.org/licenses/gpl- 2.0.html Tekstdomen: tjue-sytten-barn * /

Og inni functions.php, Legg til:

i det(); 

Legg barnetemaet til WordPress-temakatalogen som vi gjorde før. Hvis du ikke er sikker på hvordan du gjør dette, vennligst se tilbake til del 2 i denne opplæringsserien.

Vi har nå et fungerende (tomt) barn tema som er klart for oss å legge til vår dynamiske sidemalen kode til.

Dynamisk formsside-mal

Vår første virkelige implementering av en dynamisk sidemal er et enkelt kontaktskjema. Vi legger til følgende felt:

• Overskrift
• Navn
• Emne
• e-post
• Telefonnummer

Dette er tekstinntastingsfelter, bortsett fra overskriften, som er en standard HTML-overskriftstag.

Før vi implementerer den faktiske sidemalen, må vi imidlertid legge til egendefinerte kontroller til sideditoren som gjør det mulig for oss å endre sidemalemuttak. Da, når vi oppretter sidemalen, blir den gjengitt i henhold til sideditorens kontrollinnstillinger.

I del 2 av denne opplæringsserien nevnte jeg at det ikke er noen enkel måte å legge til tilpassede kontroller direkte på meta-boksen «Sidetegnskaper», der rullegardinen for sidemalen er plassert.

Dette betyr at vi må legge til våre dynamiske sidemalenekontroller andre steder for nå. Jeg vil vise deg hvordan du kan komme rundt denne begrensningen litt senere, med litt CSS og JavaScript magi. Men for nå må vi gjøre med å legge til våre tilpassede kontroller til en egen meta-boks.

I DPT_Twenty_Seventeen_Child klasse, registrer to nye handlingskroker i i det metode, og en ny metode kalt page_template_meta_boxes.

De last post.php og load-post-new.php Handlingskroker løpe når et innlegg (av hvilken som helst type) er redigert eller opprettet. Når dette skjer, registrerer vi en annen handlingskrog add_meta_boxes som vil utløse etableringen av vår tilpassede metakasse, som gjøres via add_page_template_meta_boxes tilbakeringingsfunksjon. La oss implementere den funksjonen nå.
Den faktiske gjengivelsen av metakassens kontroller vil bli håndtert via display_form_page_template_meta_box tilbakeringingsfunksjon, som ble spesifisert ovenfor som en av argumentene til add_meta_box ().
Legg til kontroller her ... 
For nå har jeg lagt til noen plassholdertekst slik at vi kan se vår nye metakasse på sideditoren.
Husk fra tidligere at skjemaets sidemal vil ha en overskrift og fire tekstfelter. Det er mange måter vi kan velge å tilpasse skjemautgangen, men i tilfelle la vi legge til boksene for hvert felt som gjør at vi kan bytte til synlighet. Oppdater display_form_page_template_meta_box () å inkludere følgende kode.
ID, 'pt_chk_form_heading', true); $ name = get_post_meta ($ object-> ID, 'pt_chk_form_name', true); $ subject = get_post_meta ($ object-> ID, 'pt_chk_form_subject', true); $ email = get_post_meta ($ object-> ID, 'pt_chk_form_email', true); $ phone = get_post_meta ($ object-> ID, 'pt_chk_form_phone', true); ?> 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
 
Vi inkluderer et nonce-felt for sikkerhet som vil bli verifisert senere, like før vi lagrer skjemaverdiene i databasen.
Merk: Hvis ikke-verdiverdien ikke kan verifiseres, vil innstillingene ikke bli lagret. 
Derefter hentes nåværende formverdier fra databasen før de egendefinerte skjermfeltene sendes ut i meta-boksen.
For øyeblikket blir våre boks ikke lagret når innlegget er oppdatert. For å gjøre skjemainnstillingene vedvarende, må vi registrere en ny krok i i det() metode som utløser seg under a lagre post handling, og deretter implementere tilbakeringingen for å manuelt oppdatere innleggets metainnstillinger.
post_type) return $ post_id;  $ heading = isset ($ _POST ['pt_chk_form_heading'])? $ _POST ['pt_chk_form_name']: "; update_post_meta ($ post_id, 'pt_chk_form_heading', $ heading); $ name = isset ($ _POST ['pt_chk_form_name'])? $ _POST ['pt_chk_form_name']:"; update_post_meta ($ post_id, 'pt_chk_form_name', $ navn); $ subject = isset ($ _POST ['pt_chk_form_subject'])? $ _POST ['pt_chk_form_subject']: "; update_post_meta ($ post_id, 'pt_chk_form_subject', $ emne); $ email = isset ($ _POST ['pt_chk_form_email'])? $ _POST ['pt_chk_form_email']:"; update_post_meta ($ post_id, 'pt_chk_form_email', $ email); $ phone = isset ($ _POST ['pt_chk_form_phone'])? $ _POST ['pt_chk_form_phone']: "; update_post_meta ($ post_id, 'pt_chk_form_phone', $ telefon); 
Når formverdien og brukerrettighetene er blitt bekreftet, sammen med en sjekk for å sikre at vi er på riktig posttype, kan vi teste for de oppgitte skjemaverdiene og lagre verdiene i databasen på en trygg måte..
Våre avmerkingsbokser er nå fullt funksjonelle, så vi kan fortsette å implementere den faktiske sidemalen! Inne i roten barn tema mappen, legg til en ny mappe som heter page-maler, og legg til det en ny fil som heter skjema-side-template.php.
Legg til følgende kode i den nye filen for å opprette en blank sidemal.
 
 
 
  
 
 
 
For å redusere kodekompleksiteten, bekrefter ikke vårt kontaktskjema validering av brukerinngang, og vi har begått de vanlige skjemakontrollene og valideringene, da vi ønsker å fokusere rent på å gjøre skjemautdataene dynamiske uten ekstern kode.
Først må vi hente verdiene for dynamisk kontaktskjema.
Da kan vi legge til i skjema koden. Dette er veldig lik for hvert formfelt. La oss ta en titt på Navn feltkode.
  
 
Vi tester verdien av avmerkingsboksen fra innstillingene for sidemal og sender kun skjemafeltet hvis det er merket. Ellers blir ingenting utgitt. Dette gjentas for hvert formfelt.
Når skjemaet er sendt, sender vi en e-post til administrasjonen og viser en melding på skjermen. Når vi legger sammen dette, har vi vår siste side malekode.
 
 
 
 E-post sendes vellykket!
";?> 
  
Dynamisk formsside-mal!
    
    
    
    
  
 
  
 
 
 
For å teste alt fungerer som det skal, må du kontrollere at alle skjemafeltene for skjemasider er merket og oppdater innlegget. Ta en titt på sidemalen på forsiden.
Prøv nå å fjerne merket av skjemabokene for skjemasider. Bare feltene som er angitt, sendes ut. Du har full kontroll over hvordan skjemaet vises! I skjermbildet under, fjernet jeg bare avmerkingsbokser for e-post og telefon.
Merk: Hvis du jobber med et lokalt WordPress-miljø, så vil post funksjonen kan ikke faktisk sende e-posten. Det fungerer bare hvis du har en e-postserver opprettet og kjørt.
Skjemaet kan enkelt utvides for å legge til noen antall kontroller av noe slag. For eksempel kan du legge til et valgfritt CAPTCHA-felt i skjemaet ditt, eller du kan angi rekkefølgen på feltene som er utstedt, eller til og med teksten for skjemaets overskrift / etiketter. Poenget her er at du kan bruke dynamiske sidemaler til å tilpasse skjemaet ditt, men du vil. Mulighetene er bokstavelig talt uendelige!
Organisering av vår side mal kontroller
Du har kanskje lagt merke til at det er et par bruksproblemer med administrasjonskontrollene for vår dynamiske sidemal. Funksjonelt er det greit, men ideelt sett bør de dynamiske sidemalene kontrolleres i samme meta-boks som rullegardinmenyen. 
Husk at grunnen til at vi måtte legge til vår sidemaleregulering til en egen meta-boks i utgangspunktet var fordi det for øyeblikket ikke er noen WordPress-krok tilgjengelig for å legge til tilpassede kontroller direkte til sidemalen meta-boksen.
Også, når en dynamisk sidemal er valgt, vil vi bare at kontrollene som er knyttet til den aktuelle mal, skal være synlige. Vi kan fullføre begge kravene ved å legge til noen egendefinerte CSS og JavaScript til sideditoren.
Spesielt må vi:
 
Skjul form-meta-boksen.
 
Vent til administrasjonssiden for å fullføre.
 
Flytt skjemakontrollene til meta-boksen «Sideattributter».
 
Bare vis administrasjonsskjermkontrollene hvis den tilhørende sidemalen er valgt.
 
Begynn med å legge til css og js mapper til barnets tema root-mappe. Inne i css mappe opprette en style.css fil, og i js mappe opprette en script.js fil. Du kan ringe disse alt du vil, skjønt. Bare husk å notere filnavnene hvis det er tilfelle, og erstatt dem i enqueue-skriptkoden.
Da må vi enqueue begge filene bare på siden redigeringsskjerm. Vi vil ikke ha dem lagt til alle admin sider. Registrer en ny handlingskrok i i det() Metode for å laste inn skript på admin sider, og legge til tilbakeringingsfunksjonen for å skanne skriptfilene.
Legg merke til hvordan vi målretter mot side posttype og deretter enten post-new.php eller post.php admin sider. Så, i utgangspunktet, med mindre vi er på sideditoren, blir ikke våre skript lastet, noe vi vil.
La oss fortsette nå, og begynn å legge til CSS og JavaScript for å tilpasse skjermens sidemalekontroller. For det første, skjul hele meta-boksen med CSS ved å legge til dette til style.css:
# form-side-template-meta-box display: none; 
Vi kunne ha gjort dette med JavaScript, men vi vil at skjemaet meta-boksen skal gjemmes umiddelbart. Hvis vi gjorde det via JavaScript, måtte vi vente til siden lastet inn, og du vil se en liten flash som meta-boksen gjengis på skjermen og deretter skjult med JavaScript. Så bruk CSS i dette tilfellet er bedre.
Nå for JavaScript. Legg til dette til script.js.
jQuery (dokument) .ready (funksjon ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); // Flytt skjermkontroller til meta-boksen «Sidetributer» og skjul dem ved standard form_controls.insertAfter ('#page_template') .hide (); funksjon displayControls (ptStr, sel) if (ptStr! == pt.val ()) sel.hide (); else sel.toggle ; // Ring på side last displayControls ('side-maler / form-side-template.php', form_controls); // Ring hver gang, slipp ned endringer pt.on ('change', function () displayControls this.value, form_controls);););
Jeg skal ikke gå inn i en stor detalj med hensyn til JavaScript, men her er oversikten.
Vi cache først et par CSS selectors og flytte administrasjonsskjemakontrollene til Sideattributter meta boks. Da har vi en displayControls () funksjon som enten skjuler eller viser skjemakontrollene avhengig av gjeldende verdi for rullegardinmenyen. Vi ringer displayControls () på sidebelastning, og deretter hver gang rullegardinmenyen endres, for å sikre at vi alltid er synkronisert.
Med CSS og JavaScript lagt til, vises skjermbildet sjablong kontrollene nå i riktig meta-boks, og viser kun om den tilhørende sidemalen er valgt.
Dette ser mye bedre ut og er langt mer intuitivt for brukeren. Fordi metakasser kan flyttes rundt WordPress-administrasjonsskjermene, ville våre dynamiske sidemalerkontroller ikke nødvendigvis ha vært hvor som helst i nærheten av nedlastingsmenyen for sidemalen! Vi har løst dette problemet på en elegant måte for å sikre at kontrollene våre alltid vises direkte under rullegardinmenyen!
Blogginnlegg Dynamisk sidemaler
Vår neste dynamiske sidemal viser en liste over de siste blogginnleggene dine. Men i stedet for å bare oppgi alle innlegg, implementerer vi en listeboks (ligner på en rullegardinmeny) slik at du kan velge postkategori. Ikke bare det, du vil også kunne velge flere postkategorier.
Start med å legge til en ny meta-boks i add_page_template_meta_boxes ().
Og nå må vi implementere tilbakeringingsfunksjonen for å gjengi vår meta-boks.
ID, 'blog_category', true); $ kategorier = get_categories (); ?> 
 :  % 3 $ s (% 4 $ s)'esc_attr ($ category-> cat_ID), esc_attr (valgt ($ kategori-> cat_ID, $ this-> q ($ kategori-> cat_ID, $ blog_category))), esc_html ($ category-> cat_name), esc_html $ kategori-> category_count)); ?>  
 
La oss bryte dette ned. Vi definerer først en variabel for å holde listen over postkategorier valgt (hvis noen) fra siste gang innlegget ble oppdatert. En annen variabel lagrer en rekke av alle eksisterende kategorier.
Merk: Vi har allerede et nonce-felt fra vår tidligere skjemasidemal, slik at vi ikke trenger å bruke en annen her, siden vi er på samme admin side.
Vi slår deretter over listen over nettstedskategoriene og fyller en rullegardinkontroll når vi går. Enhver kategori som tidligere ble valgt, er valgt igjen for å holde alt synkronisert.
Du har kanskje lagt merke til, det er en av argumentene til valgt () er et funksjonsanrop. Normalt bruker vi bare valgt () å sammenligne to verdier for å avgjøre om det aktuelle elementet skal markeres som valgt. Men fordi vi kan velge mer enn én kategori, er vår databaseinnstilling alltid en rekke verdier (selv om vi faktisk bare velger en kategori).
Funksjonen q () er en hjelpefunksjon som gjør det mulig for oss å sjekke gjeldende listepost mot mengden lagrede kategorier.
For hver kategori sendes kategori ID til q () sammen med den lagrede kategorioppstillingen. Hvis den nåværende kategorien er i listen over lagrede kategorier, blir den nåværende kategorien returnert til valgt () og vil samsvare med det første argumentet. Dette vil forårsake valgt () for å markere gjeldende kategori som valgt. Dette er en elegant måte å håndtere flere alternativer for en enkelt kontroll.
Alt vi trenger å gjøre nå er oppdatering save_page_template_meta () å håndtere lagring av blogginnleggskategorier. Legg til denne koden for å gjøre nettopp det.
Nå må vi opprette blogginnleggets sidemal. Inne i barnas temaer page-maler mappe, opprett en ny fil som heter blogg-side-template.php, og legg til følgende kode.
 
 
 
  $ paged, 'cat' => $ cat, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'innlegg'); $ blog_posts = ny WP_Query ($ query_args); ?> have_posts ()):?> have_posts ()): $ blog_posts-> the_post (); ?>    
 
 
 
Den eneste virkelige forskjellen fra vår tidligere dynamiske sidemal er koden inne i 
 HTML-tag, så la oss se nærmere på det nå.
Vi setter først verdien av paged spørringsvariabelen, som brukes til å vise innlegg over flere sider, avhengig av antall sider som returneres fra vår WordPress-spørring. Deretter får vi alle kategoriene valgt i meta-boksen for sideditor. Kategorien array er konvertert til en streng og gitt en standard verdi hvis den er tom. En ny WordPress-spørring blir deretter opprettet, og resultatene sendes ut i en standardløkke.
Nøkkelen her er at vi kan kontrollere nøyaktig hvilke kategorier som sendes til spørringsobjektet, via valgene som er gjort på sideditorens meta-boks. 
Alt vi trenger å gjøre nå, er å skjule meta-boksen for blogkategorier og flytte listekontrollen til Sideattributter meta boks. Akkurat som vi gjorde før.
Innsiden style.css oppdater stilene for å skjule meta-boksen for blogginnlegg:
# form-side-mal-meta-boks, # blog-side-mal-meta-boks display: none; 
De script.js filen trenger litt mer kode som skal legges til. Her er den fullt oppdaterte filen.
jQuery (dokument) .ready (funksjon ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); var blog_post_controls = $ ("#blog_pt_wrapper"); // Flytt skjemakontroll til 'Page Attributes' meta box og skjul dem som standard form_controls.insertAfter ('#page_template') .hide (); blog_post_controls.insertAfter ('#page_template') .hide (); funksjon displayControls (ptStr, sel) if ptStr! == pt.val ()) sel.hide (); else sel.toggle (); // Ring på side last displayControls ('side-maler / form-side-template.php', form_controls); displayControls ('sideskjemaer / blog-side-template.php', blog_post_controls); // Ring hver gang, slett ned endringer pt.on ('change', function () var kontroller; === 'side-maler / form-side-template.php') controls = form_controls; blog_post_controls.hide (); else if (this.value === 'side-maler / blog-side-template.php ') controls = blog_post_controls; form_controls.hide () annet // skjul alle blog_post_controls.h ide () form_controls.hide ();  displayControls (this.value, controls); ); );
De fleste endringene som er verdt å merke seg er i .på ( 'endre') funksjon. Fordi vi nå har mer enn én dynamisk sidemal, må vi teste for å se hvilken som ble valgt fra rullegardinmenyen, og deretter sende denne i den tilhørende elementvelgeren til displayControls ().
Vi må også skjule alle andre sidemalenekontroller bortsett fra den valgte. Og hvis standardblankermalen vises, skjuler vi alle sidemalenekontrollene. JavaScript-koden kan optimaliseres ytterligere, men da vi bare har to dynamiske sidemaler aktiv, gjør det en god jobb for våre behov.
Med disse endringene på plass har vi nå to fungerende dynamiske sidemaler med hver av de tilhørende kontrollene som vises direkte under rullegardinen for sidemalen.
Sidemaler for alle
Tidligere fortalte jeg hvordan i WordPress 4.7+ kan du nå tilordne sideskjemaer til noen posttype. Før WordPress 4.7, kan du bare tildele dem til sider, men ikke lenger!
Alt du trenger å gjøre er å legge til en ekstra linje i kommentarblokken i sidemalenhovedet, og angi en kommaseparert liste over posttyper du vil ha sidemalen tilgjengelig på.
Posttypenavnet må være det samme som sluggen ble angitt når posttypen ble registrert, ellers vil den bli ignorert.
Så vi kan vise sidemaler for alle posttyper, men hva med dynamiske sidemaler? Med bare noen få modifikasjoner, kan disse støttes også. La oss ta en titt på hva som trengs.
Heldigvis, bortsett fra å legge til en linje med kode øverst på sidenes mal, er alle nødvendige endringer i en fil: functions.php.
For det første må vi enqueue den dynamiske sidemalen CSS og JavaScript, ikke bare på sider, men for alle posttyper vi ønsker å støtte dynamiske sidemaler. Så, i enqueue_editor_scripts (), vi kan gjøre noe sånt.
Nå blir de dynamiske sidemalen skript lastet på sider og filmen tilpasset posttype.
Neste, i add_page_template_meta_boxes (), oppdater hver forekomst av add_meta_box () du vil vise på en egendefinert innleggstype. I stedet for bare å spesifisere side, vi kan passere i en rekke nødvendige posttyper.
Endelig oppdater save_page_template_meta () å støtte flere posttyper akkurat som vi gjorde for enqueue_editor_scripts (). Og det er det!
Ved å bare følge disse få korte trinnene, kan du endre de dynamiske sideskjemaene dine for å arbeide for alle posttyper.
Merk: For alle WordPress-nettsteder som kjører mindre enn versjon 4.7, Malen posttype Overskriftstekst vil ganske enkelt bli ignorert, og alle Sidemaler vil bli vist for sider som standard. Hvis dette ikke er ønskelig, kan du legge til egendefinert kode for å gjøre sidemalerne bakoverkompatible.
Denne brikken er hentet fra Make WordPress-bloggen, der du finner mer informasjon om bakoverkompatibilitet, og de nye sidemalerne er mer detaljert.
Konklusjon
Vi har dekket en del bakken i den siste delen av denne opplæringsserien. Spesielt har vi implementert to fullt fungerende dynamiske sidemaler og brukt tilpasset CSS og JavaScript for å legge til noe polsk til brukeropplevelsen.
Selv om dynamiske posttyper introdusert i denne opplæringsserien har vært relativt enkle, ville det være veldig enkelt å utvide dem til å lage kraftige og fleksible sidemaler. Det er bare så mye mulighet for å legge til noen funksjon på neste nivå. Og fra WordPress 4.7 er du ikke begrenset til å utvikle dem bare for sider heller.
Hvis du leter etter andre verktøy for å hjelpe deg med å bygge ut ditt voksende sett med verktøy for WordPress eller koden for å studere og bli mer kjent med WordPress, ikke glem å se hva vi har tilgjengelig i Envato Market.
Har denne opplæringsserien inspirert deg til å lage dynamiske sidemaler? I så fall, gi meg beskjed i kommentarene nedenfor. Jeg vil gjerne høre dine ideer og hvordan du kan bruke dem i dine egne prosjekter.



		
			
	   
	




Kode