WordPress Settings API, Del 2 Sektioner, Fält och Inställningar

När det gäller att utveckla WordPress-teman och plugins finns det ett antal olika sätt att utvecklare skapar sina menyer, alternativ och valideringsfunktionalitet. Saken är det finns egentligen bara ett sätt att ordentligt göra detta inom WordPress: Settings API.

Denna serie syftar till att vara den slutgiltiga guiden för hur du utnyttjar WordPress Settings API så att du har en enda referenspunkt för att korrekt utveckla dina teman och plugins.

I den första artikeln i denna serie tog vi en bred titt på inställnings API och varför det spelar roll. Här ska vi börja dyka in i API: n och hur vi kan utnyttja allt som det erbjuder.

Vi tar en titt på de grundläggande enheterna i WordPress-alternativen - sektioner, fält och inställningar - och hur du kan inkludera dem i det inbyggda WordPress Dashboard.


På sektioner, fält och inställningar

Innan vi skriver in någon kod, är det viktigt att förstå de tre huvudkomponenterna i WordPress Settings API.

  1. Fields är enskilda alternativ som visas på menysidor. Fält motsvarar faktiska element på skärmen. Det vill säga ett fält hanteras av en textruta, radioknapp, kryssruta, etc. Fält representerar ett värde som lagras i WordPress-databasen.
  2. sektioner är en logisk gruppering av fält. När du arbetar med flera fält kommer du sannolikt att gruppera relaterade alternativ tillsammans - sektioner representerar denna gruppering. Dessutom, om ditt arbete innehåller flera administrativa sidor, motsvarar varje avsnitt ofta sin egen menysida (även om du också kan lägga till dem i befintliga avsnitt).
  3. inställningar är registrerade efter att du har definierat både fält och sektioner. Tänk på Inställningar som en kombination av fältet och det avsnitt som det tillhör.

Oroa dig inte om du fortfarande är oklart om någon av huvudkomponenterna. Vi ska ta en djupgående titt på varje komponent tillsammans med exempelkodskoden som binder samman allt.


En sandlåda för våra inställningar

För att komma igång med programmering mot inställnings API, låt oss konfigurera ett grundläggande tema som kan användas i hela den här artikeln och resten av serien. Allt källkod finns också på GitHub.

I din lokala installation av WordPress, navigera till "teman" -katalogen och skapa en ny, tom katalog och kalla den "WordPress-Settings-Sandbox". Lägg till följande tre filer:

  • style.css - Detta är stilarket för temat. Den innehåller all metainformation för temat. Det krävs av WordPress
  • index.php - Detta är standardmallen för temat. Det kan vara tomt först. Det krävs av WordPress
  • functions.php - Det är här vi ska göra det mesta av vårt arbete. Vi ska fylla i det här genom hela handledningen

Lägg till följande kod i style.css:

/ * Tema Namn: WordPress Inställningar Sandbox Tema URI: DIN URI Beskrivning: Ett enkelt tema som används för att visa WordPress Settings API. Författare: DITT NAMN Författare URI: DIN WEBBPLATS Version: 0.1 Licens: Copyright 2012 DITT NAMN (DIN E-POSTADRESS) Detta program är fri programvara; Du kan omfördela det och / eller ändra det enligt villkoren i GNU General Public License, version 2, som publicerad av Free Software Foundation. Programmet distribueras i hopp om att det kommer att vara användbart, men UTAN NÅGOT GARANTI. utan ens den underförstådda garantin om SÄLJBARHET eller EGNETHET FÖR ET SÄRSKILT SYFTE. Se GNU General Public License för mer information. Du borde ha fått en kopia av GNU General Public License tillsammans med det här programmet. om inte, skriv till Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * /

Lägg sedan till följande kod på index.php:

   Den fullständiga guiden till inställnings API | Sandbox Tema   

Sandbox Header

Detta är temat innehåll.

© Alla rättigheter förbehållna.

Observera att ovanstående markering är utomordentligt enkel och jag gör det inte rekommendera att använda detta som grund för temat utveckling. Den är skräddarsydd för denna serie artiklar och tillhandahåller helt enkelt de medel som vi kommer att läsa värden från inställnings API.

I teman administrationsskärm, uppdatera sidan och du bör se det nya Sandbox-temat visas. Gå vidare och aktivera det.

Vid den här tiden är vi redo att komma igång.


Vår första uppsättning av alternativ

Observera i indexmallen ovan, vi har definierat tre specifika innehållsregioner: rubrik, innehåll och sidfot. Med hjälp av inställnings API, låt oss skapa en "Allmänt" -avdelning som innehåller tre fält, som var och en motsvarar ett av de specifika innehållsregioner som vi just definierat.

Innan jag skriver någon kod, tycker jag alltid att det är bra att lista exakt vad jag behöver göra. I det här fallet måste vi göra följande:

  • Definiera en sektion som ska användas för att gruppera varje fält
  • Lägg till tre fält - en för varje innehållsregion - till det avsnitt som definieras ovan
  • Registrera inställningarna med WordPress API.

För att undvika massiva block av kod och för att se till att vi täcker alla våra baser tar vi var och en av de ovanstående punkterna punkt för punkt.

Skapa avsnittet

För att hitta vårt avsnitt "Allmänt", måste vi använda funktionen add_settings_section i inställnings API. Enligt WordPress Codex kräver add_settings_section tre argument:

  • ID - Detta är den unika identifieraren för den här sektionen. Observera att detta är det värde som ska användas för att registrera varje fält inom detta avsnitt. Känn dig fri att namnge det du vill, men jag rekommenderar att du klargör för läsbarhetens skull.
  • Titel - Detta värde visas högst upp på sidan i WordPress Dashboard när användare arbetar med dina alternativ.
  • Ring tillbaka - Detta är namnet på en funktion som vi definierar som kommer att göra text på skärmen för funktionen. Den kan användas för en mängd olika funktioner. I det enklaste fallet kan det användas för att ge en uppsättning instruktioner eller beskrivning för din options sida.
  • Sida - Detta värde används för att berätta för WordPress på vilken sida dina alternativ ska visas. I en framtida artikel använder vi detta för att lägga till alternativ på våra egna sidor. För tillfället lägger vi till det befintliga Generella val sida.

Med det, låt oss gå vidare och definiera vår del. Ta en titt på följande kommenterade kod. Vi lägger till detta i vår functions.php-fil.

Ett ord om kodproverna i denna serie: Kopiera inte och klistra in den här koden. Ta dig tid att läsa varje rad, se hur argumenten motsvarar varje API-funktion som vi täcker och följ motsvarande kommentarer för att du ska hänga på vad vi gör:

Välj vilka innehållsområden du vill visa.

'; // slut sandbox_general_options_callback?>

Vettigt? Generellt sett ser det inte ut som mycket men navigerar till din inställningar menyn och klicka på Allmän. Bläddra till undersidan av sidan och du bör se din nya del av alternativen.

Du kan lägga till det här avsnittet på någon av sidorna under inställningar meny. I ovanstående exempel har vi passerat "generellt" som den sista parametern till add_settings_section, men om du vill lägga till den på en annan sida kan du ge en annan sidtitel. Här är en referens för var och en av inställningar sidor och deras motsvarande nyckel:

  • Allmänt, "allmänt"
  • Skriva, "skriva"
  • Läser, "läser"
  • Diskussion, "diskussion"
  • Media, "media"
  • Sekretess, "integritet"
  • Permalinks, "permalink"

Lägga till fält

Nu när vi har en sektion definierad, kan vi introducera några alternativ. Minns att i vår indexmall vi definierade tre specifika behållarelement: rubrik, innehåll och sidfot.

Även om vi kommer att introducera fler alternativ under hela serien, kommer vi idag att presentera ett sätt att växla synligheten för var och en av de ovanstående elementen.

I likhet med vad vi gjorde med inställningsdelen, tycker jag om att lista ut exakt vad vi behöver göra innan du skriver någon kod. Eftersom vi kommer att byta till var och en av innehållsområdena ...

  • Vi behöver tre alternativ - en för varje innehållsområde
  • Eftersom vi byter synbarhet kan vi använda en kryssruta som vårt gränssnittselement

Vid denna tidpunkt är vi redo att presentera det första inställningsfältet. För att göra detta använder vi funktionen add_settings_field. Denna funktion tar sex parametrar (fyra krävs, två valfria). De är som följer:

  • ID - ID för det aktuella fältet. Detta kommer att användas för att spara och hämta värdet genom temat. Jag rekommenderar att du namnger detta något meningsfullt för att förbättra läsbarheten av din kod.
  • Titel - Detta värde gäller en rubrik till fältalternativet på administrationssidan. Detta borde vara tydligt eftersom det kommer att läsas av slutanvändarna.
  • Ring tillbaka - Detta är namnet på den funktion som används för att göra det faktiska gränssnittselementet som användarna ska interagera med.
  • Sida - I likhet med det avsnitt vi skisserade identifierar den här parametern på vilken sida det här alternativet ska ligga. Om du bara introducerar ett enda alternativ kan du lägga till det på en befintlig sida i stället för en sektion som du har definierat.
  • Sektion - Det här hänvisar till den sektion som du har skapat med funktionen add_settings_section. Detta värde är det ID du angav när du skapade din sektion. Detta är en valfri parameter.
  • Argument - Detta är en rad argument som överförs till återuppringningsfunktionen. Detta är användbart om det finns ytterligare information som du vill inkludera när du gör ditt alternativelement. Detta är en valfri parameter.

Med det sagt, låt oss gå vidare och definiera vårt första inställningsfält. Specifikt introducerar vi ett alternativ för att växla upp synligheten för rubriken.

Först gör vi ett samtal till add_settings_field strax under add_settings_section funktionssamtalet i den initialiseringsfunktion som vi skrev i den första delen av handledningen. Granska varje rad och kommentarer för varje alternativ:

// Nästa kommer vi att introducera fälten för att byta synlighet av innehållselement. add_settings_field ('show_header', // ID som användes för att identifiera fältet under temat 'Header', // Märken till vänster om alternativgränssnittselementet 'sandbox_toggle_header_callback', // Namnet på funktionen som ansvarar för att göra alternativgränssnittet 'General', // Den sida på vilken det här alternativet kommer att visas 'general_settings_section', // Namnet på den sektion som detta fält hör till array (// En rad argument som ska skickas till återuppringningen. I det här fallet bara en beskrivning. 'Aktivera denna inställning för att visa rubriken.'));

Därefter definierar vi den återuppringning som avses i ovanstående funktion. Den här återuppringningen används för att göra kryssrutan och beskrivningen på administrationssidan:

/ ** * Den här funktionen gör gränssnittselementen för att växla synligheten för huvudelementet. * * Den accepterar en rad argument och förväntar sig att det första elementet i arrayen är beskrivningen * som ska visas bredvid kryssrutan. * / funktion sandbox_toggle_header_callback ($ args) // Observera ID och attributets namn ska matcha det för ID i samtalet till add_settings_field $ html = ''; // Här kommer vi att ta det första argumentet i arrayen och lägga till det i en etikett bredvid kryssrutan $ html. = ''; echo $ html;  // slut sandbox_toggle_header_callback

När det gäller kryssrutan, var uppmärksam på kommentarerna, men oroa dig inte för mycket om några attribut som du inte känner igen (till exempel ett samtal till funktionen kontrollerad). Senare i denna serie ska vi titta på varje inmatningselement och deras motsvarande hjälparfunktioner.

Nu ska din functions.php-fil se ut så här:

Välj vilka innehållsområden du vill visa.

'; // slut sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Fältuppringningar * ---------------- -------------------------------------------------- ------ * / / ** * Den här funktionen gör gränssnittselementen för att byta synlighet för huvudelementet. * * Den accepterar en rad argument och förväntar sig att det första elementet i arrayen är beskrivningen * som ska visas bredvid kryssrutan. * / funktion sandbox_toggle_header_callback ($ args) // Notera ID och attributets namnbeteckning matchar ID-numret i samtalet till add_settings_field $ html = ''; // Här kommer vi att ta det första argumentet i arrayen och lägga till det i en etikett bredvid kryssrutan $ html. = ''; echo $ html; // slut sandbox_toggle_header_callback?>

Uppdatera nu den här Allmänna Inställningar sida. Du bör se din kryssruta med etiketten "Header" och en beskrivning bredvid kryssrutan.

Tyvärr lagrar det faktiskt inte värdet till databasen ännu.

Registrera våra inställningar

För att få våra fält att faktiskt spara till databasen måste vi registrera dem med WordPress. Att göra detta är relativt enkelt - vi behöver bara dra nytta av register_setting funktionen.

Den här funktionen accepterar tre argument (två krävs, en valfri):

  • Alternativgrupp - Detta är faktiskt namnet på gruppen av alternativ. Detta kan antingen vara en befintlig grupp av alternativ som tillhandahålls av WordPress eller ett ID som vi angav när vi skapade vår egen inställningsavdelning. Detta argument krävs.
  • Alternativ Namn - Detta är fältets ID som vi registrerar. I vårt fall registrerar vi bara ett enda fält, men om vi registrerade flera fält skulle vi behöva ringa den här funktionen för varje fält vi registrerar. Vi får se mer om detta på ett ögonblick. Detta argument krävs.
  • Ring tillbaka - Detta argument kräver namnet på en funktion som kommer att kallas innan data sparas i databasen. Detta argument ligger utanför ramen för denna artikel men vi besöker den innan serien är över. Detta argument är valfritt.

Låt oss nu registrera inställningen som vi just har skapat. Ta en titt på koden nedan. Lägg till den här koden direkt under samtalet till add_settings_field i initialiseringsfunktionen som vi definierade tidigare i artikeln. Det är utan tvekan det enklaste att följa av alla utdrag i den här artikeln:

// Slutligen registrerar vi fälten med WordPress register_setting ('general', 'show_header');

Prova det - markera kryssrutan, klicka på "Spara ändringar" och märk att när sidan uppdateras har alternativet ändrats. Avmarkera kryssrutan, spara och kolla på det spara.

Lätt nog, höger?

Lägga till de två sista alternativen

Vi behöver fortfarande presentera alternativen för att skicka synligheten för innehållsområdet och sidfoten. Det är nästan exakt detsamma som hur vi ställer in alternativet för att växla rubriken.

Låt oss först definiera fältet för att visa innehållsområdet. Detta kommer att gå under det första samtalet till add_settings_field:

add_settings_field ('show_content', 'Content', 'sandbox_toggle_content_callback', 'general', 'general_settings_section', array ('Aktivera denna inställning för att visa innehållet.'));

Och låt oss konfigurera återuppringningsfunktionen:

funktion sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html;  // slut sandbox_toggle_content_callback

Låt oss sedan definiera fältet för visning av sidfältet:

add_settings_field ('show_footer', 'Footer', 'sandbox_toggle_footer_callback', 'general', 'general_settings_section', array ('Aktivera denna inställning för att visa sidfoten'));

Och ställ in återuppringningen för det här fältet också:

funktion sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html;  // slut sandbox_toggle_footer_callback

Till sist, låt oss registrera dessa två nya fält med WordPress. Dessa två funktionssamtal går längst ner i initialiseringsfunktionen som vi definierade tidigare i artikeln.

register_setting ('general', 'show_content'); register_setting ('general', 'show_footer');

Den slutliga versionen av functions.php ska se så här ut:

Välj vilka innehållsområden du vill visa.

'; // slut sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Fältuppringningar * ---------------- -------------------------------------------------- ------ * / / ** * Den här funktionen gör gränssnittselementen för att byta synlighet för huvudelementet. * * Den accepterar en rad argument och förväntar sig att det första elementet i arrayen är beskrivningen * som ska visas bredvid kryssrutan. * / funktion sandbox_toggle_header_callback ($ args) // Notera ID och attributets namnbeteckning matchar ID-numret i samtalet till add_settings_field $ html = ''; // Här kommer vi att ta det första argumentet i arrayen och lägga till det i en etikett bredvid kryssrutan $ html. = ''; echo $ html; // slut sandbox_toggle_header_callback funktion sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // slut sandbox_toggle_content_callback funktion sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // slut sandbox_toggle_footer_callback?>

Uppdatera nu Allmänna Inställningar sida och märker att du har alla tre funktionella kryssrutor.


Läser API

Vad bra är alternativ om vi inte kan utnyttja dem genom vårt tema eller plugin? Vi måste kunna läsa värdena för att kunna hantera våra nya alternativ.

För att göra detta måste vi använda get_option-funktionen. Den här funktionen accepterar två argument (en krävs, en valfri):

  • Alternativ ID - Detta argument är fältets ID för det värde du försöker hämta. Detta argument krävs.
  • Standardalternativ - Detta är det värde som funktionen kommer att returnera om funktionen returnerar ett tomt värde (till exempel om alternativet inte finns i databasen). Detta argument är valfritt.

Låt oss först försöka ändra siktens synlighet. I den indexmall som vi skapade tidigare i den här artikeln, leta reda på elementet med sidhuvudets ID. Det ska se ut så här:

Sandbox Header

Låt oss nu ringa till get_option i samband med en villkorlig. Om villkoret utvärderar till sant (det vill säga alternativet har kontrollerats på Allmänna Inställningar sida), så kommer elementet att visas; annars kommer inte elementet att visas.

 

Sandbox Header

Efter det hoppas över till Allmänna Inställningar sida, kolla alternativet för att gömma rubrikelementet och uppdatera startsidan. Rubrikelementet ska inte längre visas.

Vid det här laget är det en enkel fråga om att upprepa processen för innehållet och sidfoten. Vi behöver lägga in innehålls- och sidfotelementen med villkor som utvärderar resultatet av get_option-samtal.

Ta en titt:

 

Detta är temat innehåll.

© Alla rättigheter förbehållna.

Revisit Allmänna Inställningar sida, välj varje kryssruta och uppdatera temasidan. Dina delar borde vända sig oberoende av varandra.


Nästa Upp, Menysidor

Det är det för nu! Vi har tittat på alla funktioner som krävs för att införa nya avsnitt, fält och inställningar i WordPress. Självklart finns det mycket mer att täcka.

I nästa artikel tar vi en titt på hur man lägger till anpassade menyalternativ på WordPress-menyn och hur vi kan introducera våra egna sidor till WordPress Dashboard.


Relaterade resurser

Vi täckte mycket material i den här artikeln. Här är en referens till allt som vi använde i hela denna artikel.

  • Introduktion till inställnings API
  • add_settings_section
  • add_settings_field
  • register_setting
  • get_option
  • Arbetsexempel på GitHub