Skapa en anpassad sida för WordPress-teman

Oavsett om du utvecklar WordPress-teman för dig själv, för en klient eller att sälja kommersiellt, har du möjlighet att anpassa aspekter av ditt tema via WordPress-kontrollpanelen, gör ditt tema oändligt flexibelt och många gånger mer mångsidigt och tilltalande.

Genom att ge backend-användare tillgång till alternativ som annars skulle innebära att dela in i php-templatfilerna för att ändra layout, logotypbild, färger och något antal andra alternativ.

En praktisk alternativpanel kan läggas till något tema genom några enkla tillägg till ditt temas funktioner.php-fil.

De metoder som diskuteras här gäller endast för WordPress 2.8 eller senare. Det finns ett antal andra handledning tillgängliga om du använder en äldre version av WordPress

Vad gör man anpassningsbar

Innan vi gör kodning måste vi bestämma vilka element i temat vi vill anpassa. Det här kan vara allt från en lista med valbara färgscheman till en helt ny layout för din hemsida. För vårt exempel kommer jag att hålla det enkelt men samma metod kan skalas till vilken grad av anpassning du vill.

Det finns tre element som vi kommer att tillåta att anpassas med detta tema:

1. Textinmatning för en introduktionspost på hemsidan.
2. Användarens Facebook-profiladress
3. Ett alternativ att dölja eller visa intro stycket.

Skapa koden

Från och med WordPress 2.8 har ett antal krokar lagts till för att underlätta skapandet av anpassade adminmenyer. Vi kommer att använda några av dessa för att skapa vår anpassade temaninställningsmeny för WordPress-backend.

Vårt första block av kod kallar funktionerna för att lagra våra nya valmöjligheter i databasen samt initiera visning av vår HTML-kod för vår options sida och skapa menyalternativet "Temaalternativ" i WordPress-backend.

Nu ska vi skriva vår funktion som innehåller den faktiska produktionen av vår temainställningssida.

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

Här kommer vi att visa en ikon och titel för sidan och någon bekräftelsekod för användaren att bekräfta att deras inställningar sparades när formuläret skickades.

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

Nu skapar vi vår form våra temainställningar, hämta de befintliga värdena för varje alternativ och ange inställningsgruppens namn.

Därefter lägger vi till lite kod för att ladda en fjärrfil som kan visa aktuell information för temanvändaren samt länkar till supportforum, hjälpdokument eller andra stödjande filer.

Det här är ett praktiskt sätt för temaboutvecklare för att hålla dina temakunder uppdaterade med din senaste information, inkludera spårningskod för att se vem som använder ditt tema för att bekämpa temapirateri, visningsannonser eller specialerbjudanden, utfärda varningar om teman buggar eller ett antal andra möjligheter.

  Nu är det dags att visa våra tillgängliga alternativ.  Först visar vi en kryssruta för att ange om intro-stycket ska visas på vårt tema eller inte. 
  Därefter visar vi en textinmatning för användarens Facebook-URL. 
  När vi fortsätter visar vi en textarea för vår inledningstext. 
 
 
<?php echo esc_textarea( $options['introtext'] ); ?>
 

Slutligen visar vi knappen Skicka till vår blankett.

Vi ska nu sluta med en options sida som denna.

Nu när vi har administratörssidan kvadrad bort, låt oss integrera dessa anpassade inställningar i vårt tema. Vi har nu tre inställningar till vårt förfogande - en kryssruta som berättar huruvida introtexten, den faktiska introtexten och vår Facebook-URL ska visas eller inte. I vår header.php-fil ska vi mata dessa inställningar till en array som heter $ alternativ.

Nu ska vi hitta delen av vår mall där introtexten ska gå och analysera huruvida det ska visas. Om vi ​​ska visa det skriver vi ut innehållet som har angetts i vår anpassade adminpanel.

Nu kan vi hitta var vi skulle vilja visa en länk till vår Facebook-profil och visa data på ett liknande sätt. Den här gången kontrollerar vi först för att se om ett värde anges. Om ett värde har angetts, går vi vidare och visar Facebook-ikonbilden.

" target="new">

Det här är mycket enkla exempel på hur man utför anpassade alternativ, men allt om ditt tema kan ändras på så sätt att möjligheterna är oändliga. En väldesignad optionspanel kan användas som försäljningsplats för ditt tema och kan göra ett mycket väldesignat tema ännu mer attraktivt och mångsidigt.

Exempel på alternativpanel

För fler idéer, kolla in några av de mer populära temautvecklarens alternativpaneler.

Templatic

Templatic teman har en mycket tydlig och koncis alternativ sida.

WooThemes

En tillverkare av utmärkta WordPress teman, WooThemes Alternativpanelen ger tillgång till ett antal anpassningar, uppdelade i underavsnitt med egen anpassad layout.




FlexiThemes

FlexiPanel optionspanel från FlexiThemes är en enkel men lättanvänd panel.

Tema Warrior

Tydliga länkar till tematäckningsdokumentet ett flikat gränssnitt på Tema Warrior alternativ gränssnitt.

ThemeShift

En annan snygg, väldesignad alternativ sida som använder några mycket fina jQuery-alternativ för tema färgval.

Kreativa teman

Kreativa teman är en av de få premiumtemautvecklarna som faktiskt visar skärmdumpar av den anpassade alternativpanelen för att marknadsföra sina teman. Deras alternativpanel är ren, väl utformad och innehåller länkar till dokumentation, supportforum och changelog för det aktuella temat.

Anpassade layouter, Ajax, jQuery och bortom

Många premiumteamutvecklare spenderar mycket tid på att skapa anpassade formatlayouter för deras options sida. Medan detta kan få dem att sticka ut från mängden när man tittar på en sida med skärmdumpar, känner jag mig att det försvårar från WordPress UX. Kom ihåg att användaren av temat kanske inte är väldigt savis och du vill inte att någon ska surras genom WordPress-backenden för att plötsligt sluta undra varför gränssnittet plötsligt är drastiskt annorlunda. Att hålla din design överensstämd med standardversionen av WordPress-administratören är enligt min mening det bästa alternativet.

Du kan välja att förlänga din optionspanel ytterligare genom att integrera Ajax och jQuery så att dina alternativ kan uppdateras utan att uppdatera sidan. Medan det här är en liten tweak, gör det att sidan visas mycket mer smidig och raffinerad utan att kunna förvirra din användare.

I slutändan vill du blända din användare med användarvänlighet. Ditt mål bör vara att få ditt tema att bli utgångspunkten för användarnas webbplats. Ju mer anpassningsbart tema, desto mer kommer din användare att känna att det är "deras".

Vad hittar du är ett vanligt problem med kommersiella temaalternativ paneler? Har en anpassad alternativpanel någonsin svängt ditt beslut när du köpte ett WordPress-tema?