Share
Att skapa teman att ge bort eller sälja är bra, men inte alla som använder ditt tema kommer att ha en gedigen förståelse för HTML / CSS. Att ge ditt tema med en optionssida gör det lättare för icke-tekniska användare att göra temanändringar utan att få händerna smutsiga med kod. Jag ska visa dig hur man gör en från början!
Innan vi börjar, vad söker vi egentligen? Vad ska vi göra anpassningsbara om vårt tema? Nåväl, denna handledning kommer att fokusera mest på programmatisk sida, men för att ändra något om layouten behöver vi också ha några designidéer uppe på ärmarna. Här är vad vi har:
Det finns många redigerbara element som vi kan lägga till i ett tema, men efter dagens handledning som illustrerar hur du implementerar de fem funktionerna som anges ovan bör du ha en bra känsla för hur du skapar din egen options sida.
Vi kommer att koncentrera oss helt på alternativsidan först innan vi börjar göra temaförändringen. Först behöver vi en plats för att sätta all vår kod som ska hantera alternativsidan. All denna kod kommer att ligga i en fil som heter functions.php, som kommer att gå in i vår teman mapp. Så, om vårt tema kallas "exempel" så skulle sökvägen till vår funktionsfil vara wp-innehåll / teman / example / functions.php.
Vi behöver inte berätta för WordPress att inkludera vår functions.php filen, kallas den automatiskt under WordPress-exekveringscykeln.
Så först måste vi faktiskt skapa den tomma alternativsidan - duken för vårt arbete. För att göra det måste vi informera WordPress om den nya optionssidan som vi vill skapa. Vi utför denna uppgift genom att använda åtgärder. Åtgärder kallas vid en viss tid i WordPress 'exekvering; så, till exempel när menyn i instrumentbrädan skapas, är åtgärden admin_menu kallas. Vi kan knyta funktioner till dessa handlingar; så vi kan utföra våra funktioner vid specifika tider. Här är de grundläggande funktionerna vi behöver för att skapa vår options sida.
Vår första funktion, themeoptions_admin_menu är helt enkelt där för att lägga till en länk till vår sida i admin sidebar, berättar den också WordPress vilken funktion som ska ringas för att visa sidan som i vårt fall är themeoptions_page ().
Parametrarna för add_theme_page () funktionen är följande:
Om du har temat aktiverat, då, i teman rullgardinsmeny bör du se din nya länk till en options sida som för närvarande är tom. Vi har nu en duk för vår options sida, och vi kan börja implementera formulären, fälten och baksidan av vår alternativfunktionalitet.
Ok, så den sidan ser lite ensam ut; låt oss lägga till det formulär och fält som användaren ska interagera med för att göra ändringar i temat. Det är viktigt att notera att du kan utforma den här sidan, men du vill, till och med lägga till dialogrutor om du vill. men för vår handledning kommer vi att använda de vanliga klasserna som används av WordPress. På så sätt sparar vi oss tid att återuppfinna hjulet och gör vår options sida blandas med resten av instrumentbrädan.
Koden för vår sida borde finnas i vår themeoptions_page () funktion, så vi ska lägga till vår kod i så här;
funktion themeoptions_page () // Här är huvudfunktionen som genererar vår options sida?>Tema alternativ
Först skapar vi fördefinierade slå in klass för sidan. Sedan lägger vi till en snabb rubrik med en standardikon. Slutligen, vår form; Vi behöver ett doldt värde så att vi kan kontrollera om det har skickats in. Vi behöver också en knapp som ska skicka in formuläret, och igen använder vi en fördefinierad klass för detta. Här är vad vi har hittills:
Nu har vi vår grundläggande struktur. Så om vi checkar tillbaka till början av denna handledning planerade vi att genomföra fem alternativ.
funktion themeoptions_page () // Här är huvudfunktionen som genererar vår options sida?>Tema alternativ
4. Uppdatera databasen
Hittills har vi en options sida med ett formulär som skickar data till sig själv, via POST. Nästa logiska steg är att ta in data och lägga in den i WordPress-databasen. För att göra så ska vi skapa en ny funktion som heter themeoptions_update (). Denna funktion kommer att kallas av themeoptions_page (); så lägg till den här koden till toppen av themeoptions_page ();
om ($ _POST ['update_themeoptions'] == 'true') themeoptions_update ();Naturligtvis är nästa steg att skapa uppdateringsfunktionen. Kom ihåg, för denna handledning skull lägger jag inte till validering eller sanering till min kod. När du skapar ett plugin bör du alltid Kontrollera inmatningen från dina användare. Men det ligger utanför omfattningen av denna handledning. Nu kan du lita på WordPress att validera din inmatning, men det är bäst att göra det själv, för att se till.
Vart som helst i functions.php fil, lägg till det här kvarteret:
funktion themeoptions_update () // det är här validering skulle 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']); om ($ _POST ['display_sidebar'] == 'på') $ display = 'checked'; else $ display = "; update_option ('mytheme_display_sidebar', $ display); om ($ _POST ['display_search'] == 'på') $ display = 'checked'; annat $ display ="; update_option ('mytheme_display_search', $ display); om ($ _POST ['display_twitter'] == 'på') $ display = 'checked'; else $ display = "; update_option ('mytheme_display_twitter', $ display); update_option ('mytheme_twitter_username', $ _POST ['twitter_username']);Uppdateringsfunktionen, som namnet antyder, uppdaterar ett alternativ som du kan lagra i databasen. Om alternativet inte existerar skapar WordPress det. Vi har prepended alla våra alternativ med mytheme_, bara för att se till att vi inte skriver över alternativ som ett annat plugin / tema kan använda.
Hittills har vi en inställningssida som kan spara våra alternativ, men när vi träffar skickar, och våra alternativ sparas, är vår blankett tom när vi besöker den igen. Detta beror på att vi måste ladda våra värden tillbaka från databasen.
5. Hämta alternativ
Vi behöver nu hämta våra alternativ så att vi kan fylla i inställningsformuläret. Det här är en lätt, och vi gör det genom att använda get_option () fungera. Vi kan använda variabler, men för det här exemplet ska vi enkelt echo resultatet av funktionen där den ska gå i formuläret. Vår nya kod ser ut så här;
funktion themeoptions_page () // här är huvudfunktionen som kommer att generera vår options sida om ($ _POST ['update_themeoptions'] == 'true') themeoptions_update (); // om (get_option () == "checked"?>Tema alternativ
Så där har du det. Baksidan har nu slutförts. Vi kan uppdatera våra alternativ i databasen, så allt som finns kvar gör att temat reagerar på dessa ändringar på alternativsidan. Det fungerar på samma sätt som vi uppdaterade alternativfälten: vi hämtar alternativet och sedan antingen visa det eller använda det som villkorat att göra något annat. Låt oss börja med frontänden.
6. Ändra tema
Ändra färgschema
Detta kommer att hantera CSS och sådant, vilket inte är vad denna handledning handlar om. Så vi skummer över hur du skulle komma tillvägagångssätt här. Ett av de bästa sätten att åstadkomma detta är att ha ett standard stilark som använder ett färgschema som svart, och sedan en serie alternativa färgscheman. Till exempel style.css kan utforma din layout svart, men inklusive red.css AFTER inklusive style.css.
Ett användbart CSS-tips är att använda !Viktig märka. Använd den här taggen i stilarken som ändrar färgerna i layouten för att se till att de här egenskaperna faktiskt används. För att faktiskt byta stilark, lägg till den här koden till header.php filen i din layout där stilarket skulle inkluderas:
Lägga till reklamfält
Det här avsnittet är avsett att visa dig teorin. I det verkliga livet skulle du förmodligen använda ett plugin eller något liknande "Köp säljannonser". Så säg att vi har två fläckar för våra annonser att gå in. Liksom ovan ger vi enkelt det alternativ där det behöver gå, som så:
">">
Valfri sidofält
Den här gången använder vi alternativet som en förutsättning för att bestämma huruvida vi ska skriva ut ett block med kod, som i det här fallet skulle visa ett sidofält. Naturligtvis ska din layout fortfarande kunna visas korrekt om ett sidofält inte är synligt. så att den är upp till dig. Följande kod läggs till var du än brukar ringa ditt sidofält, vanligtvis kallas min från header.php.
om (get_option ('mytheme_display_sidebar') == 'checked') get_sidebar (); // eller alternativt ... om (get_option ('mytheme_display_sidebar') == 'checked') get_sidebar (); annars / * visa något annat * /Valfria senaste tweets
För det här lilla alternativet måste vi göra två saker. Om tweets är aktiverade måste vi först visa området där tweetsna ska visas, vi måste också infoga ett block med JavaScript innan
Vi behöver placera följande där vi faktiskt vill att tweets ska visas:
Nästa måste vi placera den här koden före tagg, som troligtvis bor i footer.php;
Tips: varför försök inte och lägg till ditt eget alternativ för att ändra hur många tweets hämtas ovan?
Slutligen kommer vi till vår frivilliga sökrutan, som fungerar som vår sidobalk gjorde. Vi använder alternativet som en villkorlig och visningskod beroende på användarens val.
Accentsconagua
; ?>)
">; ?>)
om (get_option ('mytheme_display_search') == 'checked') ?> Jag hoppas att du har lärt dig grunderna om hur du skapar en options sida för ditt tema och gör det funktionellt. Jag har försökt att hoppa över några av de tråkiga bitarna, som den faktiska CSS och den validering som borde vara på plats, främst för att den var utanför ramen för denna handledning.
Som vanligt, om du har några frågor alls, lämna en kommentar nedan! Tack för att du läser!
