Enten du utvikler WordPress-temaer for deg selv, for en klient, eller for å selge kommersielt, har evnen til å tilpasse aspekter av temaet via WordPress-kontrollpanelet, ditt tema uendelig fleksibelt og mange ganger mer allsidig og tiltalende.

Ved å gi backend-brukere tilgang til alternativer som ellers ville innebære delving i php template-filene for å endre layout, logo bilde, farger og et hvilket som helst antall andre alternativer.

Et praktisk valgpanel kan legges til et hvilket som helst tema ved noen enkle tillegg til temaets funksjoner.php-fil.

Metodene som diskuteres her, gjelder kun for WordPress 2.8 eller nyere. Det finnes en rekke andre opplæringsprogrammer hvis du bruker en eldre versjon av WordPress

Hva å gjøre tilpasses

Før du gjør noen koding, må vi bestemme hvilke elementer av temaet vi vil tilpasse. Dette kan være alt fra en liste over valgbare fargeskjemaer til et helt nytt layout for hjemmesiden din. For vårt eksempel skal jeg holde det enkelt, men den samme metoden kan skaleres til enhver grad av tilpasning du ønsker.

Det er 3 elementer som vi vil tillate å tilpasses med dette temaet:

  1. Tekstinngang for et introduksjonsnummer på hjemmesiden.
  2. Brukerens Facebook-profiladresse
  3. Et alternativ for å skjule eller vise intro-avsnittet.

Opprette koden

Fra og med WordPress 2.8 har flere kroker blitt lagt til for å lette opprettelsen av egendefinerte admin-menyer. Vi vil bruke noen av disse til å lage vår egendefinerte temainnstillingsmeny for WordPress-backend.

Vår første blokk med koden kaller funksjonene til å lagre våre nye valgverdier i databasen, samt å starte visning av vår HTML-kode for vår tilleggsside og opprette menypunktet "Temaalternativer" i WordPress-backend.

Nå skal vi skrive vår funksjon som inneholder den faktiske utgangen av vår temainnstillingsside.

function theme_options_do_page() { global $select_options; if ( ! isset( $_REQUEST['settings-updated'] ) ) $_REQUEST['settings-updated'] = false; 

Her viser vi et ikon og en tittel for siden og noen bekreftelseskode for brukeren for å bekrefte at innstillingene ble lagret når skjemaet ble sendt inn.

". __( 'Custom Theme Options', 'customtheme' ) . ""; ?>

Nå lager vi skjemaet vårt temaalternativer, henter de eksisterende verdiene for hvert alternativ og angir innstillingsgruppens navn.

Deretter legger vi til litt kode for å laste inn en ekstern fil som kan vise oppdatert informasjon for tema brukeren, samt lenker til støttefora, hjelpedokumenter eller andre støttende filer.

Dette er en nyttig måte for temautviklere for å holde temakunder oppdatert med den nyeste informasjonen din, inkludert sporingskode for å se hvem som bruker temaet ditt for å bekjempe tema piratkopiering, visningsannonser eller spesialtilbud, utstede advarsler om tema-feil eller et hvilket som helst antall andre muligheter.

Nå er det på tide å vise våre tilgjengelige alternativer. Først viser vi en avkrysningsboks for å angi om intro-avsnittet skal vises på skjemaet eller ikke.

Deretter viser vi en tekstinngang for brukerens Facebook-nettadresse.

Fortsett, vi viser en textarea for vår innledende teksttekst.

Endelig viser vi sende-knappen til vårt skjema.

Vi skal nå ende opp med en opsjonsside som dette.

Nå som vi har administrasjonssiden kvadret bort, la oss integrere disse tilpassede innstillingene i vårt tema. Vi har nå 3 innstillinger til disposisjon - en avkrysningsrute som forteller oss om introteksten, selve introteksten og vår Facebook-URL skal vises. I vår header.php-fil, skal vi mate disse innstillingene til en gruppe som heter $ alternativer.

 

Nå skal vi finne delen av vår mal der introteksten skal gå og analysere om det skal vises. Hvis vi skal vise det, skriver vi ut innholdet som ble oppgitt i vårt egendefinerte administrasjonspanel.

Nå kan vi finne hvor vi vil vise en lenke til vår Facebook-profil og vise dataene på en lignende måte. Denne gangen sjekker vi først for å se om en verdi er oppgitt. Hvis en verdi er angitt, går vi videre og viser Facebook-ikonet bildet.

Dette er veldig enkle eksempler på hvordan du utfører tilpassede alternativer, men alt om temaet ditt kan endres på denne måten, slik at mulighetene er uendelige. Et godt designet valgpanel kan brukes som et salgsargument for temaet ditt og kan gjøre et meget godt designet tema enda mer attraktivt og allsidig.

Eksempler på valgpanel

For flere ideer, sjekk ut noen av de mest populære temautviklerens valgpaneler.

Templatic

Templatic temaer har en veldig klar og kortfattet opsjonsside.

WooThemes

En maker av utmerkede WordPress-temaer, WooThemes 'Alternativpanel gir tilgang til en rekke tilpasninger, oppdelt i delseksjoner ved hjelp av egen tilpasset layout.


FlexiThemes

FlexiPanel opsjonspanel fra FlexiThemes er et grunnleggende, men lett å bruke panel.

Tema kriger

Klare linker til tema dokumentasjon cap et flatt grensesnitt på Tema kriger alternativer grensesnitt.

ThemeShift

En annen ryddig, godt designet alternativ side som bruker noen veldig fine jQuery-alternativer for temafargevalg.

Kreative temaer

Kreative temaer er en av de få premium-temautviklerne som faktisk viser skjermbilder av det tilpassede alternativpanelet for å markedsføre sine temaer. Deres valgpanel er rent, godt designet og inneholder lenker til dokumentasjon, supportfora og changelog for dagens tema.

Egendefinerte oppsett, Ajax, jQuery og utover

Mange premium-temautviklere bruker mye tid på å lage tilpassede stiloppsett for deres alternativersside. Selv om dette kan få dem til å skille seg ut fra mengden når man ser på en side med skjermbilder, føler jeg at det forringer WordPress UX. Husk at brukeren av temaet kanskje ikke er veldig saavy, og du ikke vil at noen skal summende gjennom WordPress-backenden, plutselig stoppe og lure på hvorfor grensesnittet er plutselig drastisk annerledes. Å holde designet ditt i samsvar med standard WordPress admin layout er, etter min mening, det beste alternativet.

Du kan velge å utvide alternativpanelet ved å integrere Ajax og jQuery slik at alternativene dine kan oppdateres uten å oppdatere siden. Selv om dette er en liten tweak, får den siden til å virke mye mer glatt og raffinert uten å forvirre brukeren.

Til slutt vil du blendere brukeren din med brukervennlighet. Målet ditt bør være å få temaet ditt til å bli utgangspunktet for brukerens nettsted. Jo mer tilpasses temaet, desto mer vil brukeren føle at den er "deres".

Hva finner du et vanlig problem med kommersielle temaalternativer? Har et egendefinert valgpanel noensinne swayed din beslutning ved å kjøpe et WordPress-tema?