Share
Å lage temaer for å gi bort eller selge er flott, men ikke alle som bruker temaet ditt, vil ha en solid forståelse av HTML / CSS. Å gi ditt tema med en tilleggsside gjør det lettere for ikke-tekniske brukere å lage temaendringer uten å få hendene skitne med kode. Jeg skal vise deg hvordan du lager en fra begynnelsen!
Før vi begynner, hva søker vi egentlig for? Hva skal vi gjøre tilpasses om temaet vårt? Vel, denne opplæringen vil fokusere mest på programmatisk side, men for å forandre noe om oppsettet, må vi også ha noen designideer på ermene. Her er hva vi har:
Det er mange redigerbare elementer vi kan legge til i et tema, men etter dagens veiledning som illustrerer hvordan du implementerer de fem funksjonene som er oppført ovenfor, bør du ha en god følelse for hvordan du lager din egen tilleggsside.
Vi skal konsentrere oss helt på opsjonssiden først før vi begynner å gjøre temaendringen. Først trenger vi et sted å sette all vår kode som skal administrere alternativsiden. Alle denne koden kommer til å ligge i en fil som heter functions.php, som vil gå inn i vår tema-mappe. Så, hvis temaet vårt heter «eksempel», så vil banen til vår funksjonsfil være wp-content / themes / eksempel / functions.php.
Vi trenger ikke å fortelle WordPress å inkludere vår functions.php fil, kalles den automatisk under WordPress-utføringssyklusen.
Så først må vi faktisk lage den tomme alternativsiden - lerretet for vårt arbeid. For å gjøre dette må vi informere WordPress om den nye opsjonssiden som vi ønsker å opprette. Vi oppnår denne oppgaven ved å bruke handlinger. Handlinger kalles på en bestemt tid i WordPress 'utførelse; for eksempel når menyen i instrumentbrettet blir opprettet, handlingen admin_menu er kalt. Vi kan knytte funksjoner til disse handlingene; slik at vi kan utføre våre funksjoner til bestemte tider. Her er de grunnleggende funksjonene vi trenger for å lage vår optionsside.
Vår første funksjon, themeoptions_admin_menu er det bare å legge til en link til vår side i admin sidebar, det forteller også WordPress hvilken funksjon å ringe for å vise siden som i vårt tilfelle er themeoptions_page ().
Parametrene for add_theme_page () funksjonen er som følger:
Hvis du har temaet aktivert, da, i temaer rullegardinmeny, bør du se din nye lenke til en opsjonsside som for øyeblikket er tom. Vi har nå lerretet på siden vår, og vi kan begynne å implementere skjemaene, feltene og den bakre delen av alternativfunksjonaliteten.
Ok, slik at siden ser litt ensom ut; la oss legge til skjemaet og feltene som brukeren vil samhandle med for å gjøre endringer i temaet. Det er viktig å merke seg at du kan utforme denne siden, uansett, og til og med legge til dialogbokser hvis du vil. men for vår opplæring skal vi gjøre bruk av standardklassene som brukes av WordPress. På denne måten sparer vi oss for å gjenoppfinne hjulet, og gjør at vår side med tilleggsutstyr blend sammen med resten av instrumentbrettet.
Koden for vår side skal ligge i vår themeoptions_page () funksjon, så vi skal legge til koden vår slik:
funksjon themeoptions_page () // her er hovedfunksjonen som vil generere vår options side?>Temaalternativer
Først oppretter vi forhåndsdefinerte pakke inn klasse for siden. Deretter legger vi til et raskt overskrift med et standardikon. Til slutt, vårt skjema; Vi trenger en skjult verdi slik at vi kan sjekke om den har blitt sendt inn. Vi trenger også en knapp som skal sende skjemaet, og igjen bruker vi en forhåndsdefinert klasse for dette. Her er det vi har så langt:
Nå har vi vår grunnleggende struktur. Så hvis vi sjekker tilbake til begynnelsen av denne opplæringen, planla vi å implementere fem alternativer.
funksjon themeoptions_page () // her er hovedfunksjonen som vil generere vår options side?>Temaalternativer
4. Oppdatering av databasen
Så langt har vi en opsjonsside med et skjema som sender data til seg selv, via POST. Det neste logiske trinnet er å ta inn dataene, og sette det inn i WordPress-databasen. For å gjøre det, skal vi lage en ny funksjon som heter themeoptions_update (). Denne funksjonen blir kalt av themeoptions_page (); så legg til denne koden til toppen av themeoptions_page ();
hvis ($ _POST ['update_themeoptions'] == 'true') themeoptions_update ();Selvfølgelig er neste trinn å opprette oppdateringsfunksjonen. Huske, For denne veiledningens skyld legger jeg ikke til validering eller sanitisering til koden min. Når du lager et plugin, bør du alltid sjekk innspill fra brukerne dine. Men det er utenfor omfanget av denne opplæringen. Nå kan du stole på WordPress for å validere innspillet ditt, men det er best å gjøre det selv, for å være sikker.
Hvor som helst i functions.php fil, legg til denne koden:
funksjon themeoptions_update () // dette er hvor validering ville gå update_option ('mytheme_colour', $ _POST ['color']); update_option ('mytheme_ad1image', $ _POST ['ad1image']); update_option ('mytheme_ad1url', $ _POST ['ad1url']); update_option ('mytheme_ad2image', $ _POST ['ad2image']); update_option ('mytheme_ad2url', $ _POST ['ad2url']); hvis ($ _POST ['display_sidebar'] == 'på') $ display = 'sjekket'; else $ display = "; update_option ('mytheme_display_sidebar', $ display); hvis ($ _POST ['display_search'] == 'på') $ display = 'sjekket'; else $ display ="; update_option ('mytheme_display_search', $ display); hvis ($ _POST ['display_twitter'] == 'på') $ display = 'checked'; else $ display = "; update_option ('mytheme_display_twitter', $ display); update_option ('mytheme_twitter_username', $ _POST ['twitter_username']);Oppdateringsfunksjonen, som navnet antyder, oppdaterer et alternativ du kan lagre i databasen. Hvis alternativet ikke eksisterer, oppretter WordPress det. Vi har prepended alle våre alternativer med mytheme_, bare for å være sikker på at vi ikke overskriver alternativer som et annet plugin / tema kan bruke.
Så langt har vi en innstillingsside som kan lagre alternativene våre, men når vi treffer send, og våre alternativer er lagret, er skjemaet tomt når vi besøker det igjen. Dette skyldes at vi må laste inn verdiene våre tilbake fra databasen.
5. Henting av alternativer
Vi må nå hente våre alternativer slik at vi kan fylle ut innstillingsskjemaet. Dette er en enkel, og vi gjør det ved å bruke get_option () funksjon. Vi kan bruke variabler, men for dette eksempelet vil vi enkelt ekko utgangen av funksjonen der den skal gå i skjemaet. Vår nye kode ser slik ut;
funksjon themeoptions_page () // her er hovedfunksjonen som vil generere vår opsjonsside hvis ($ _POST ['update_themeoptions'] == 'true') themeoptions_update (); // hvis (get_option () == "sjekket"?>Temaalternativer
Så der har du det. Bakenden er nå fullført. Vi kan oppdatere våre alternativer i databasen, så alt som er igjen å gjøre, er at temaet reagerer på disse endringene på opsjonssiden. Dette fungerer på samme måte som hvordan vi oppdaterte alternativfeltene: vi henter alternativet og deretter viser det eller bruker det som betinget av å gjøre noe annet. La oss komme i gang med frontenden.
6. Endre temaet
Endre fargeskjema
Dette kommer til å håndtere CSS og slik, noe som ikke handler om denne opplæringen. Så vi skummer over hvordan du nærmer deg dette. En av de beste måtene å gå om dette er å ha et standard stilark som bruker et fargeskjema som for eksempel svart, og en rekke alternative farger. For eksempel style.css kan utforme oppsettet svart, men inkludert red.css AFTER inkludert style.css.
En nyttig CSS tips er å bruke !viktig stikkord. Bruk denne taggen i stilarkene som endrer farger i oppsettet for å sikre at disse egenskapene faktisk blir brukt. For å faktisk bytte stilarkene, legg til denne koden til header.php fil av oppsettet der stilarket skulle være inkludert:
Legge til reklameplasser
Denne delen er ment å vise deg teorien. I det virkelige livet vil du sannsynligvis bruke et plugin eller noe som "Kjøp selgerannonser". Så si at vi har to steder for våre annonser å gå inn. Ligner på ovenfor, leverer vi ganske enkelt alternativet der det må gå, slik som:
">">
Valgfritt sidefelt
Denne gangen bruker vi alternativet som betinget av å avgjøre hvorvidt vi skal skrive ut en blokk med kode, som i dette tilfellet vil vise et sidebjelke. Selvfølgelig bør layoutet ditt fortsatt kunne vises riktig hvis et sidebar ikke er synlig. slik at den ene er opp til deg. Følgende kode blir lagt til uansett hvor du vanligvis ringer til sidebjelken, vanligvis kalles min fra header.php.
hvis (get_option ('mytheme_display_sidebar') == 'sjekket') get_sidebar (); // eller alternativt ... hvis (get_option ('mytheme_display_sidebar') == 'sjekket') get_sidebar (); ellers / * vise noe annet * /Valgfrie nyere tweets
For dette lille alternativet, må vi gjøre to ting. Hvis tweets er aktivert, må vi først vise området der tweets skal vises, vi må også sette inn en blokk med JavaScript før
Vi må plassere følgende der vi faktisk vil at tweets skal vises:
Deretter må vi plassere denne koden før tag, som sannsynligvis ligger i footer.php;
Tips: hvorfor ikke prøv og legg til eget valg for å endre hvor mange tweets hentes over?
Til slutt kommer vi til vår valgfrie søkeboks, som fungerer som vår sidefelt gjorde. Vi bruker alternativet som en betinget og visningskode avhengig av brukerens valg.
Accentsconagua
; ?>)
">; ?>)
hvis (get_option ('mytheme_display_search') == 'sjekket') ?> Jeg håper du har lært grunnleggende om hvordan du oppretter en valgside for temaet ditt, og gjør det til å fungere som det skal. Jeg har prøvd å hoppe over noen av de kjedelige brikkene, som den faktiske CSS og valideringen som skulle være på plass, først og fremst fordi det var utenfor omfanget av denne opplæringen.
Som vanlig, hvis du har noen spørsmål i det hele tatt, legg igjen en kommentar nedenfor! Takk for at du leste!
