Accentsconagua
Tekstområde: ". $ Textarea."
"; ekko "Avkrysningsboks: ". $ Avkrysningsboks."
"; ekko "Radio Knapper: ". $ Radio."
"; ekko "Dropdown: ". $ Select."
"; ekko "Sitemap
"; ekko "- ".wp_list_pages (array ('title_li' =>")). "
Share
I del 1 av denne opplæringsserien introduserte jeg det grunnleggende konseptet med dynamiske sidemaler og opprettet en standard sidemaler som grunnlag for fremtidig arbeid. Et WordPress-barn tema basert på tjue-sytten foreldre tema ble brukt til å implementere sidemalen.
I denne opplæringen lærer du mer detaljerte detaljer om dynamiske sidemaler og hvordan du kan bruke dem i dine egne WordPress-prosjekter.
Jeg vil også vise deg trinnvis hvordan du utvider sidemalen fra den første opplæringen, og gjør den til din aller første dynamiske sidemal!
Så hvordan kan vi gjøre sideskjemaene mer fleksible, og hvorfor ville dette være nyttig uansett?
La oss si at du har en porteføljeside-mal som lager et galleri av individuelle porteføljeposter. Hvert element vil være en fast størrelse, og bare så mange kan passe på hver rad.
Vi kunne selvfølgelig legge til en annen sidemal for å vise porteføljer i forskjellige størrelser. Men hva om vi ønsket å vise små, mellomstore eller store porteføljer? For dette vil vi trenge tre separate sidemaler, hver med forskjellige størrelser for porteføljepostene.
Dette kunne umiddelbart gjøres mer fleksibelt ved å legge til en rullegardinkontroll for å velge porteføljestørrelsen (dvs. Liten, Middels eller Stort). Dette er mer praktisk for brukeren, siden sidemalen er mindre rotete med unødvendige valg.
Det gir også større mening for utvikleren også, som bare har en sidemal for å opprettholde snarere enn tre! Dette følger utviklingsprinsippet Gjør ikke gjenta selv (DRY).
Det er verdt å merke seg at ikke hver sidemal ville nødvendigvis ha nytte av å være dynamisk. Hvis du har en sidemaler som gjør en ting, og bare én ting, så er det greit. Det ville ikke være fornuftig å legge til tilpassede kontroller, og ekstra logikk, til en sidemal i dette tilfellet.
Men som du vil se ved slutten av denne opplæringen, vil mange sidemaler ha stor nytte av å være mer fleksible.
Et annet nyttig eksempel på en dynamisk sidemaler vil være et kontaktskjema. Det er mange tilpassede kontroller som kan legges til for å gjøre denne sidemalen svært fleksibel.
For eksempel, i stedet for å utgjøre et fast sett med skjemafelter, kan sidemalereguleringer legges til for å tillate deg å utelate bestemte felter. Eller kanskje et Captcha-felt kan bli vist for å forhindre spammeldinger? Det er så mange måter du kan tilpasse et kontaktskjema på.
Jeg lager en dynamisk skjemaets sidemal i del 3 av denne opplæringsserien. Men først la oss komme i gang med å lage en generell dynamisk sidemal.
Til å begynne med oppretter vi en grunnleggende dynamisk sidemal for å demonstrere hvordan alle komponentene passer sammen. Egendefinerte kontroller blir lagt til i sideditoren som senere brukes til å kontrollere utskrift av sidemal.
De tilpassede sidemalene som vi legger til, er:
Ideelt sett bør kontrollene legges direkte under rullegardinmenyen for sidemalen for å gjøre det klart at de er relatert til en sidemal.
Imidlertid gir WordPress ikke noen kroker for dette, så du må gjøre (for nå) med å legge til tilpassede sidemalereguleringer til en egen tilpasset meta-boks. I del tre av denne opplæringsserien vil jeg vise deg hvordan du kan komme rundt dette problemet.
Kroker er grunnleggende for WordPress-utvikling. De tillater utviklere å utvide kodebasen uten å måtte ty til redigering av kjernefiler, som vanligvis betraktes som en dårlig ide. Dette skyldes at en egendefinert kode vil bli slettet når en WordPress-oppdatering utføres (som kan skje ganske regelmessig).
For å vise vår metakasse på sideditoredisplayet, legg til last post.php og load-post-new.php kroker til barnet temaet i det() Metode vi opprettet i del 1.
Vi bruker to WordPress-kroker for å sikre at meta-boksen vises på sideditoren, enten du oppretter en ny side eller redigerer en eksisterende. Det er også en
lagre postkrok som håndterer lagring av post-metadata, som jeg vil dekke litt senere.Legg til følgende fire klassemetoder for å lage, vise og lagre data for meta-boksen.
/ * Legg til metakassakrok. * / offentlig funksjon page_template_meta_box () add_action ('add_meta_boxes', array ($ dette, 'add_page_template_meta_box'));/ * Registrer meta-boksen. * / offentlig funksjon add_page_template_meta_box () add_meta_box ('side-template-meta-box', esc_html __ ('Sidemallet Meta Box', 'tjue-sytten-barn'), array ($ dette, 'display_page_template_meta_box') ',' side ',' standard ');/ * Render meta-boksen på sideditoren. * / offentlig funksjon display_page_template_meta_box ($ objekt) wp_nonce_field (basename (__FILE__), 'page_template_meta_box_nonce');Jeg vil ikke gå inn for mye detalj her om WordPress meta bokser, da det kan være en hel opplæring alene, men merk følgende punkter om koden jeg la til ovenfor:
page_template_meta_box () og add_page_template_meta_box () klassemetoder registrerer meta-boksen med WordPress.add_page_template_meta_box (), de 'side' parameteren angir at denne meta-boksen bare vises på «side» posttypeditoren i WordPress-administrasjonen.display_page_template_meta_box () klassemetode gjør meta-boksen og setter opp en nonce for å gjøre skjemakontrollene sikrere.Hvis alt er bra, bør du nå ha en metakasse som vises på sideditoren, som vist nedenfor.
Det er litt tomt for øyeblikket, skjønt, så la oss legge til noen kontroller.
Hvis du vil hente fra oven, skal vi legge til en tekstboks, tekstområde, avkrysningsboks, radioknapp og velg boksekontroller til meta-boksen. Begynn med å legge til følgende kode i display_page_template_meta_box () metode under nonce-funksjonen.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true);
Dette henter nåværende verdier av våre meta-boks kontroller og lagrer dem i lokale variabler. Legg nå følgende HTML direkte etter, for å gjøre meta-boksens kontroller.
?>
/>
>
>
>
Hver kontroll er inneholdt i en avsnittetikett, og dens nåværende verdi oppdateres via den lokale variabelen vi opprettet tidligere. Dette sikrer at meta-boksens kontroller alltid viser de riktige innstillingene.
Dette skjer imidlertid ikke med mindre vi lagrer de nåværende meta-boksens kontrolldata til WordPress-databasen.
Litt tidligere registrerte jeg en krok for å utføre en klassemetode hver gang sideditoren ble oppdatert. La oss legge til den metoden til vår barntemaklasse nå.
post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['side-maltekst'])? $ _POST ['side-maltekst']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['side-template-textarea'])? $ _POST ['side -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['side-template-align'])? $ _POST ['siden -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['side-template-select'])? $ _POST ['side-mal-velg']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value);De
save_page_template_meta ()klassemetode håndterer lagring av metakassens kontrolldata. Det sparer bare meta-boksens data hvis nonce er verifisert, de nåværende brukerne kan redigere innlegg, og vi er på sideditorens administrasjonsskjerm.Hvis disse betingelsene er oppfylt, trekker vi ut dataene for hver kontroll som er lagret i det globale
$ _POSTvariabel. Denne variabelen settes hver gang et skjema sendes inn.Endelig lagres meta-boksens kontrolldata i WordPress-databasen som metadata for gjeldende side.
Med de tilpassede sidemalenekontrollene lagt til, må meta-boksen se slik ut.
Skriv inn tekst for tekstboksen og tekstområdet, og velg merkene i avmerkingsboksen, alternativknappen og velg boksen. Treff oppdatering for å lagre endringene, og når sideditoren oppdaterer, må meta-boksens kontroller vise dataene du nettopp har skrevet inn.
Full kildekode for barnet tema functions.php filen er vist nedenfor.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true); ?>post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['side-maltekst'])? $ _POST ['side-maltekst']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['side-template-textarea'])? $ _POST ['side -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['side-template-align'])? $ _POST ['siden -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['side-template-select'])? $ _POST ['side-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value); $ ts_child_theme = nytt DPT_Twenty_Seventeen_Child (); $ ts_child_theme-> init ();
/>
>
>
>
Det endelige stykket av puslespillet er å bruke meta-boksens kontrolldata i vår sidemal på frontenden. Åpne opp
test-side-template.phpfil vi opprettet i del 1 og erstatte innholdet med denne oppdaterte koden.Tekstboks: ". $ Tekst.""; ekko " Tekstområde: ". $ Textarea."
"; ekko "Avkrysningsboks: ". $ Avkrysningsboks."
"; ekko "Radio Knapper: ". $ Radio."
"; ekko "Dropdown: ". $ Select."
"; ekko "Sitemap
"; ekko "".wp_list_pages (array ('title_li' =>")). "
"; Endelig; // Sluttens slutt.?>Pass på at "Test side mal" er den valgte sidemalen og se siden på forsiden.
Som du kan se, inneholder sidemalen nå verdiene som bare er angitt for metakassens kontroller på sideditoren. Dette er kjernen til resten av opplæringen som vi skal bygge på dette grunnleggende eksemplet og lage ulike eksempler på fullt fungerende dynamiske sidemaler som du kan bruke i dine egne WordPress-prosjekter.
Konklusjon
I denne veiledningen dekket vi hvordan du bygger en fungerende dynamisk sidemal. For øyeblikket, selv om det er funksjonelt, er vår grunnleggende sidemal ikke veldig nyttig.
I den tredje og siste delen av denne opplæringsserien vil jeg vise deg hvordan du bygger ulike dynamiske sidemaler, fra start til slutt, som du kan bruke (og utvide på) i dine egne WordPress-prosjekter.
Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene nedenfor. Jeg vil gjerne høre tankene dine på opplæringen.
