Share
Vi har nådd den endelige artikkelen av serien. I det siste innlegget tok vi en titt på å innføre validering, sanitisering og et par grunnleggende inngangselementer som vi kan dra nytte av når vi bygger tilleggsopsider.
I denne artikkelen skal vi se på det endelige settet med tre alternativer, og hvordan å knytte dem til forsiden av temaet.
Før vi kommer i gang: Som i de siste parene, antar denne artikkelen at du har fulgt med resten av serien, har en arbeidskopi av prøvekoden installert, og er nå relativt kjent med Innstillinger API og temaalternativer. Hvis du er usikker på noen av de ovennevnte, anbefaler jeg på det sterkeste å lese resten av artiklene før du går inn i dette innlegget.
Tidligere i denne serien la vi til avmerkingsbokser. Vi kunne gå tilbake og revidere dem, men la oss holde konsistens med hva vi har gjort opp til dette punktet og introdusere nye alternativer. Når vi er ferdige, kan du gå tilbake til koden vi la til i begynnelsen av serien for gjennomgang.
Først, la oss introdusere bokselementet til sandbox_theme_initialize_input_examples funksjon:
Accentsconagua
add_settings_field ('Checkbox Element', 'Checkbox Element', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Deretter må vi gå videre og definere tilbakeringingen som vi har angitt ovenfor. Legg til følgende funksjon for prosjektet ditt:
funksjon sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; ekko $ html; // slutt sandbox_checkbox_element_callback Vi vil se denne funksjonen på nytt øyeblikkelig, men først merk at jeg har lagt til et etikettelement ved siden av avmerkingsboksen. Avkrysningsbokser har ofte et element tilknyttet dem som også har råd til muligheten til å bli klikket for å utløse avmerkingsboksen. Dette gjør det enklere for brukerne å bytte et alternativ uten å måtte klikke nettopp i avmerkingsboksen.
For å knytte en etikett med en avkrysningsboks må du gi etiketten til Tilordne verdien av ID attributten til avkrysningsboksen som den er bundet til. Lett nok, rett?
Oppdater nå alternativsiden din, og du bør se det nye elementet synlig på opsjonssiden. Men for nå lagrer det faktisk ikke eller henter en verdi. Først, la oss introdusere en verdi attributt i avkrysningsruten. Dette er noe vilkårlig, men det er en vanlig praksis å gi et kontrollert element en verdi på '1.' La oss gjøre det nå:
$ html = '';
La oss da tenke gjennom nøyaktig hva som må skje når vi lagrer en verdi. Ideelt sett:
Relativt klart, ikke sant? I stedet for å lese alternativet, sette opp en betinget, og sjekke forvær eller mangel på en verdi, kan vi dra nytte av WordPress ' sjekket funksjon.
Funksjonen aksepterer tre argumenter, kun den første er nødvendig:
sjekk = "merket" til nettleserenSå la oss oppdatere koden vår for å bruke denne funksjonen:
$ html = '';
Oppdater siden og sjekk alternativet, lagre og gjenta.
Hvis noe av dette virker litt forvirrende, kan du se gjennom forrige artikkel hvor vi dekker betydningen av hvert attributt på et alternativelement.
Til slutt, la oss oppdatere forsiden av temaet for å sjekke dette alternativet og gjengi en streng tekst basert på om alternativet er blitt sjekket. Husk at når vi opprettet elementet, ga vi det verdien av "1'. Dette betyr at når avkryssingsboksen er merket og serialisert, vil den opprettholde en verdi på én. Enkelt sagt, vi må skrive en betinget som kontrollerer verdien av alternativet, og deretter gjengir teksten riktig. I index.php, legg til denne koden:
Avkrysningsruten er sjekket.
Avkrysningsruten er ikke sjekket.
Gå nå tilbake til innstillingssiden, velg avkrysningsruten og oppdater siden din.
Som nevnt i begynnelsen av denne delen, se tilbake på "Visningsalternativer" som vi introduserte tidligere i denne serien, og se om det er mye klarere nå at vi har undersøkt hvordan å introdusere og administrere avkrysningselementer.
Radio Knapper er elementer som er nyttige i grupper - du kommer aldri til å bruke en enkelt radioknapp. Saken om radioelementer er at de gir en måte å tillate brukere å velge en ut av et gjensidig eksklusivt sett med alternativer.
Av en eller annen grunn er radioknapper ofte en utfordring for WordPress-utviklere. Forhåpentligvis vil vi gjøre det så enkelt som mulig å ta med i prosjektene våre. Som med resten av eksemplene i denne serien, detaljer hva vi skal gjøre:
Synes klart nok - la oss gå videre og legge til feltelementet på vår valgside:
add_settings_field ('Radio Button Elements', 'Radio Button Elements', 'sandbox_radio_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Og la oss implementere radioelementets tilbakeringing. Først vil vi spesifisere koden, så vurderer vi den:
funksjon sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ''; ekko $ html; // slutt sandbox_radio_element_callback Det første du må legge merke til når du arbeider med radioknapper, er det de gjør ikke følg de typiske eksemplene på hvordan du setter inn ID og Navn egenskaper. Legg merke til at ID Attributtet er unikt og har ikke noe forhold til resten av attributter på elementet. Legg også merke til at hvert elements tilhørende label bruker ID for dens til Egenskap. Dette binder etiketten til radioknappen slik at brukerne kan klikke på etiketten for å velge radioelementet.
Legg merke til at Navn Attributene er de samme for hvert radioelement, men verdier er forskjellig. Dette er det som gjør at radioknappene gjensidig ekskluderer - hvert radioelement må ha det samme Navn men verdiene må være unike.
Til slutt kan vi sette opp en betingelse for hjemmesiden ved å sjekke elementets verdi. I temaet ditt functions.php, legg til følgende kodenavn:
Det første alternativet ble valgt.
Det andre alternativet ble valgt.
Last inn temaets hjemmeside, veksle alternativene og oppdatere. Du bør se de to setningene som endres basert på verdien av alternativelementene.
Det siste elementet som vi skal gjennomgå, er valgelementet. Dette elementet gir brukerne en rullegardinmeny med alternativer for å velge. La oss planlegge nøyaktig hva vi trenger å introdusere for dette elementet:
På dette punktet i serien, bør dette være ganske rutinemessig. La oss komme i gang - først presenterer vi innstillingsfeltet:
add_settings_field ('Select Element', 'Select Element', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Deretter definerer vi tilbakeringingsfunksjonen. Gå gjennom koden og deretter diskuterer vi det etter eksemplet:
funksjon sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; ekko $ html; // slutt sandbox_radio_element_callback Først oppdater oppsettsiden for å sikre at valgelementet vises. Forutsatt at det gjør det, la oss se gjennom koden ovenfor.
Når vi definerer seleksjonselementet, har vi gitt det en ID attributt og a Navn Tilskrive mye som vi gjør med resten av elementene som vi har demonstrert. Deretter har hvert alternativ en unik verdi og tekst som tilsvarer verdien. Selv om du ikke trenger å gjøre dette, har jeg vanligvis funnet det nyttig når du jobber i prosjektene mine. Til slutt har vi tatt fordel av valgt hjelper som WordPress tilbyr. Dette er mye som sjekket funksjon som vi har brukt i forrige eksempel bortsett fra at det er rettet mot valgte alternativer.
Det siste trinnet vil være å oppdatere forkant av temaet slik at det kontrollerer verdien av seleksjonselementet etter at det er lagret. Legg til følgende kodenavn til din index.php:
Vis aldri dette. Noe ironisk å selv vise dette.
Noen ganger viser dette.
Vis alltid dette.
Gå gjennom hjemmesiden til temaet ditt, endre opsjonene og oppdater deretter siden - du bør legge merke til tekstoppdateringen basert på alternativet du har valgt.
Med det kommer vi endelig til slutten av denne serien. Innstillings-API er en kraftig funksjon av WordPress og gir oss muligheten til å implementere godt utformede, sikre tilleggssider, men det krever at vi bruker det riktig. Dessverre er dette nok en av de mest ignorerte funksjonene til plattformen av mange utviklere.
Til slutt var målet mitt å gå utviklere gjennom API fra begynnelsen av å forstå hvorfor det er viktig, til innstillinger, fra menysider, til flippert navigering, og hvordan man arbeider med hver enkelt elementtyper.
Endelig husk at du kan finne eksempelkoden på GitHub. Når du fortsetter å jobbe med innstillingsgrensesnittet eller finne en funksjon som er uklart, vennligst bidra. Jeg vil gjerne ha denne serien og eksempelkoden for å fortsette å gi en kilde til utdanning for WordPress-fellesskapet.
sjekketvalgt