Uanset om du udvikler WordPress-temaer til dig selv, for en kunde eller for at sælge kommercielt, har du evnen til at tilpasse aspekter af dit tema via WordPress-kontrolpanelet, hvilket gør dit tema uendeligt fleksibelt og mange gange mere alsidigt og tiltrækkende.

Ved at give backend-brugere adgang til muligheder, der ellers ville indebære deling i php-template filerne for at ændre layout, logo billede, farver og et vilkårligt antal andre muligheder.

Et bekvemt valgpanel kan tilføjes til ethvert tema ved nogle nemme tilføjelser til dit tema's funktioner.php-fil.

De metoder, der diskuteres her, gælder kun for WordPress 2.8 eller nyere. Der findes en række andre vejledninger, hvis du bruger en ældre version af WordPress

Hvad skal gøres tilpasses

Før vi laver nogen kodning, skal vi bestemme hvilke elementer af det tema, vi ønsker at tilpasse. Dette kan være alt fra en liste over valgbare farveskemaer til et helt nyt layout til din hjemmeside. For vores eksempel vil jeg holde det enkelt, men den samme metode kan skaleres til enhver grad af tilpasning, du gerne vil have.

Der er 3 elementer, som vi vil tillade at blive tilpasset med dette tema:

  1. Tekstindtastning til et introduktionsparagraf på hjemmesiden.
  2. Brugerens Facebook profil URL
  3. En mulighed for at skjule eller vise indledningen.

Oprettelse af koden

Fra og med WordPress 2.8 er der blevet tilføjet en række kroge for at lette oprettelsen af ​​brugerdefinerede adminmenuer. Vi vil bruge nogle af disse til at oprette vores brugerdefinerede temaindstillinger menu til WordPress backend.

Vores første blok kode kalder funktionerne til at gemme vores nye indstillingsværdier i databasen samt indlede visning af vores HTML-kode til vores options side og oprette menupunktet "Temaindstillinger" i WordPress-backend.

Nu skriver vi vores funktion, der indeholder den faktiske udgave af vores temaindstillinger side.

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

Her viser vi et ikon og en titel til siden og en bekræftelseskode for brugeren for at bekræfte, at deres indstillinger blev gemt, når formularen blev indsendt.

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

Nu skaber vi vores formularer vores temaindstillinger, hent de eksisterende værdier for hver indstilling og angive indstillingsgruppens navn.

Dernæst tilføjer vi en smule kode for at indlæse en fjernfil, der kan vise opdateret information til temabrugeren samt links til supportfora, hjælpedokumenter eller andre understøttende filer.

Dette er en praktisk måde for temaudviklere at holde dine tema kunder opdateret med dine seneste oplysninger. Indtast sporingskode for at se, hvem der bruger dit tema til at bekæmpe temapiracy, displayannoncer eller specialtilbud, udstede advarsler om temafejl eller et hvilket som helst antal andre muligheder.

Nu er det tid til at vise vores tilgængelige muligheder. For det første viser vi et afkrydsningsfelt for at angive, om introdelen skal vises på vores tema eller ikke.

Dernæst viser vi en tekstindtastning til brugerens Facebook-URL.

Når vi fortsætter, viser vi et tekstområde for vores indledende tekst.

Endelig viser vi sende knappen til vores formular.

Vi skal nu ende med en options side som denne.

Nu, da vi har administratorsiden fjernet, lad os integrere disse brugerdefinerede indstillinger i vores tema. Vi har nu 3 indstillinger til rådighed - en afkrydsningsfelt, der fortæller os, om introteksten, selve introteksten og vores Facebook-URL skal vises. I vores header.php-fil skal vi foder disse indstillinger i et array kaldet $ muligheder.

 

Nu skal vi finde den del af vores skabelon, hvor introteksten vil gå, og analysere, om den skal vises. Hvis vi skal vise det, udskriver vi det indhold, der blev indtastet i vores brugerdefinerede administrationspanel.

Nu kan vi finde, hvor vi gerne vil vise et link til vores Facebook profil og vise dataene på en lignende måde. Denne gang kontrollerer vi først for at se om en værdi er indtastet. Hvis en værdi er indtastet, går vi videre og viser Facebook-ikonet billede.

Disse er meget enkle eksempler på, hvordan man udfører brugerdefinerede valgmuligheder, men alt om dit tema kan ændres på denne måde, så mulighederne er uendelige. Et velindrettet valgpanel kan bruges som et salgspunkt for dit tema og kan gøre et meget godt designet tema endnu mere attraktivt og alsidigt.

Eksempler på valgpanel

For flere ideer, tjek nogle af de mere populære temaudvikleres optionspaneler.

Templatic

Templatic temaer har en meget klar og kortfattet indstillingsside.

WooThemes

En maker af fremragende WordPress temaer, WooThemes 'Options panel giver adgang til en række tilpasninger, opdelt i underafsnit ved hjælp af deres eget brugerdefinerede layout.


FlexiThemes

FlexiPanel indstillingspanelet fra FlexiThemes er et grundlæggende, men let at bruge panel.

Tema kriger

Klare links til tema dokumentation cap en faneblad grænseflade på Tema kriger indstillinger interface.

ThemeShift

En anden flot og veldesignet options side der bruger nogle meget fine jQuery muligheder for tema farvevalg.

Kreative temaer

Kreative temaer er et af de få præmie-temaudviklere, der faktisk viser skærmbilleder af det brugerdefinerede indstillingspanel for at fremme deres temaer. Deres optionspanel er ren, veldesignet og indeholder links til dokumentation, supportfora og changelog for det aktuelle tema.

Brugerdefinerede layouter, Ajax, jQuery og videre

Mange premium-temaudviklere bruger meget tid på at oprette brugerdefinerede styleslayouts for deres options-side. Selvom dette kan få dem til at skille sig ud fra mængden, når man ser på en side med skærmbilleder, føler jeg det forringer WordPress UX. Husk, at brugeren af ​​temaet måske ikke er meget saavy, og du ikke vil have nogen at summere gennem WordPress-backend for pludselig at stoppe og spekulere på, hvorfor grænsefladen er pludselig drastisk anderledes. At holde dit design i overensstemmelse med standard WordPress admin layout er efter min mening den bedste løsning.

Du kan vælge at udvide dit valgpanel yderligere ved at integrere Ajax og jQuery, så dine muligheder kan opdateres uden at skulle opdatere siden. Selv om dette er en lille tweak, får den siden til at blive meget mere slank og raffineret uden at potentielt forvirre din bruger.

I sidste ende vil du blænde din bruger med brugervenlighed. Dit mål bør være at få dit tema til at være udgangspunktet for dine brugers websted. Jo mere brugerdefineret tema, desto mere vil din bruger føle, at det er "deres".

Hvad finder du er et fælles problem med kommercielle tema option paneler? Har et brugerdefineret indstillingspanel nogensinde svækket din beslutning ved at købe et WordPress-tema?