Share
Als het gaat om het ontwikkelen van WordPress Thema's en Plug-ins, zijn er een aantal verschillende manieren waarop ontwikkelaars hun menu's, opties en validatiefunctionaliteit maken. Het punt is, er is eigenlijk maar één manier om dit goed te doen binnen WordPress: de Settings API.
Deze serie is bedoeld als de definitieve gids voor hoe u kunt profiteren van de WordPress Settings API zodat u één referentiepunt hebt voor het goed ontwikkelen van uw thema's en plug-ins.
In het eerste artikel in deze serie hebben we de Settings API uitgebreid bekeken en waarom het ertoe doet. Hier gaan we duiken in de API en hoe we kunnen profiteren van alles wat het biedt.
We zullen een kijkje nemen naar de basiseenheden van WordPress-opties - secties, velden en instellingen - en hoe deze op te nemen in het native WordPress-dashboard.
Voordat we beginnen met het schrijven van een code, is het belangrijk om de drie belangrijkste componenten van de WordPress Settings API te begrijpen.
Maak je op dit moment geen zorgen als je nog steeds onduidelijk bent over een van de belangrijkste componenten. We gaan een diepgaande blik werpen op elke component, samen met een voorbeeldbroncode die alles met elkaar verbindt.
Om een begin te maken met het programmeren van de instellingen-API, kunnen we een basisthema instellen dat in dit artikel en de rest van de serie kan worden gebruikt. Alle broncode is ook beschikbaar op GitHub.
Ga in uw lokale installatie van WordPress naar de map "themes" en maak een nieuwe, lege map aan en noem deze "WordPress-Settings-Sandbox". Voeg de volgende drie bestanden toe:
Voeg de volgende code toe aan style.css:
/ * Theme Name: WordPress Settings Sandbox Theme URI: YOUR URI Description: Een eenvoudig thema dat wordt gebruikt om de WordPress Settings API te presenteren. Auteur: UW NAAM Auteur URI: UW WEBSITE Versie: 0.1 Licentie: Copyright 2012 UW NAAM (UW E-MAILADRES) Dit programma is vrije software; je kunt het herdistribueren en / of wijzigen onder de voorwaarden van de GNU General Public License, versie 2, zoals gepubliceerd door de Free Software Foundation. Dit programma wordt verspreid in de hoop dat het nuttig zal zijn, maar ZONDER ENIGE GARANTIE; zonder zelfs de impliciete garantie van VERKOOPBAARHEID of GESCHIKTHEID VOOR EEN BEPAALD DOEL. Zie de GNU General Public License voor meer details. Je zou samen met dit programma een kopie van de GNU General Public License moeten hebben ontvangen; zo niet, schrijf dan naar de Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 VS * /
Voeg vervolgens de volgende code toe aan index.php:
De complete gids voor de instellingen API | Sandbox-thema Sandbox-header
Dit is thema-inhoud.
© Alle rechten voorbehouden.
Merk op dat de bovenstaande markup buitengewoon eenvoudig is en dat doe ik niet beveel dit als basis voor de ontwikkeling van het thema aan. Het is op maat gemaakt voor deze reeks artikelen en biedt eenvoudigweg de middelen waarmee we waarden gaan lezen via de Settings API.
In de Thema's administratiescherm, ververs de pagina en u zou het nieuwe Sandbox-thema moeten zien verschijnen. Ga je gang en activeer het.
Op dit moment zijn we klaar om aan de slag te gaan.
Zoals te zien is in de indexsjabloon hierboven, hebben we drie specifieke inhoudsgebieden gedefinieerd: koptekst, inhoud en voettekst. Met de instellingen-API maken we een sectie 'Algemeen' met drie velden, die elk overeenkomen met een van de specifieke inhoudsgebieden die we zojuist hebben gedefinieerd.
Voordat ik een code schrijf, vind ik het altijd handig om precies te weten wat ik moet doen. In dit geval moeten we het volgende doen:
Om massale blokken code te voorkomen en ervoor te zorgen dat we al onze bases behandelen, nemen we elk van de bovenstaande items punt voor punt.
Als u ons gedeelte 'Algemeen' van opties wilt vinden, moeten we de functie add_settings_section van de instellingen-API gebruiken. Volgens de WordPress Codex vereist add_settings_section drie argumenten:
Laten we daarmee doorgaan en onze sectie definiëren. Bekijk de volgende code met commentaar. We voegen dit toe aan ons functions.php-bestand.
Een woord over de codefragmenten in deze serie: kopieer en plak deze code niet simpelweg. Neem de tijd om elke regel te lezen, bekijk hoe de argumenten overeenkomen met elke API-functie die we behandelen en volg de bijbehorende opmerkingen om er zeker van te zijn dat u begrijpt wat we doen:
Selecteer welke inhoudsgebieden u wilt weergeven.'; // end sandbox_general_options_callback?>
Heb je zin? Over het algemeen lijkt het niet veel, maar navigeer je naar je instellingen menu en klik op Algemeen. Scroll naar de onderkant van de pagina en je zult je nieuwe gedeelte met opties te zien krijgen.
U kunt deze sectie toevoegen aan elke pagina onder de instellingen menu. In het bovenstaande voorbeeld hebben we 'algemeen' doorgegeven als de laatste parameter voor de add_settings_section, maar als u deze aan een andere pagina wilt toevoegen, kunt u een andere paginatitel opgeven. Hier is een referentie voor elk van de instellingen pagina's en de bijbehorende sleutel:
Nu we een sectie hebben gedefinieerd, kunnen we een paar opties introduceren. Bedenk dat we in onze indexsjabloon drie specifieke containerelementen hebben gedefinieerd: koptekst, inhoud en voettekst.
Hoewel we in de loop van deze reeks meer opties zullen introduceren, zullen we vandaag een manier introduceren om de zichtbaarheid van elk van de bovenstaande elementen te wijzigen.
Vergelijkbaar met wat we met de instellingen hebben gedaan, wil ik graag precies aangeven wat we moeten doen voordat we een code schrijven. Omdat we elk van de inhoudgebieden gaan omwisselen ...
Op dit moment zijn we klaar om het eerste instellingenveld te introduceren. Om dit te doen, gebruiken we de functie add_settings_field. Voor deze functie zijn zes parameters nodig (vier vereist, twee optioneel). Ze zijn als volgt:
Laten we daarom verder gaan en ons eerste instellingsveld definiëren. In het bijzonder introduceren we een optie om de zichtbaarheid van de kop te wijzigen.
Eerst bellen we naar add_settings_field net onder de functieaanroep add_settings_section in de initialisatiefunctie die we in het eerste deel van de tutorial hebben geschreven. Beoordeel elke regel en de opmerkingen voor elke optie:
Accentsconagua
// Vervolgens introduceren we de velden voor het schakelen tussen de zichtbaarheid van inhoudselementen. add_settings_field ('show_header', // ID gebruikt om het veld te identificeren in het hele thema 'Header', // Het label links van het element van de optieinterface 'sandbox_toggle_header_callback', // De naam van de functie die verantwoordelijk is voor het weergeven van de optie-interface 'algemeen', // De pagina waarop deze optie wordt weergegeven 'general_settings_section', // De naam van de sectie waartoe dit veld behoort array (// De reeks argumenten die moet worden doorgegeven aan de callback. In dit geval, gewoon een beschrijving. "Activeer deze instelling om de koptekst weer te geven. ')); Vervolgens definiëren we de callback waarnaar in de bovenstaande functie wordt verwezen. Deze callback wordt gebruikt om het selectievakje en de beschrijving op de beheerpagina weer te geven:
/ ** * Deze functie maakt de interface-elementen voor het schakelen tussen de zichtbaarheid van het header-element. * * Het accepteert een array van argumenten en verwacht dat het eerste element in de array de omschrijving * is die naast het selectievakje wordt weergegeven. * / function sandbox_toggle_header_callback ($ args) // Opmerking de ID en het naamkenmerk van het element moeten overeenkomen met dat van de ID in de aanroep van add_settings_field $ html = ''; // Hier nemen we het eerste argument van de array en voegen we het toe aan een label naast het selectievakje $ html. = ''; echo $ html; // end sandbox_toggle_header_callback
Let bij het aankruisvakje op de opmerkingen, maar maak u niet te veel zorgen om enkele kenmerken die u niet herkent (zoals een aanroep naar de functie checked ()). Later in deze reeks gaan we elk input-element en hun bijbehorende hulpfuncties bekijken.
Inmiddels zou je functions.php-bestand er als volgt uit moeten zien:
Selecteer welke inhoudsgebieden u wilt weergeven.'; // end sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Field Callbacks * ---------------- -------------------------------------------------- ------ * / / ** * Deze functie maakt de interface-elementen voor het schakelen tussen de zichtbaarheid van het header-element. * * Het accepteert een array van argumenten en verwacht dat het eerste element in de array de omschrijving * is die naast het selectievakje wordt weergegeven. * / function sandbox_toggle_header_callback ($ args) // Opmerking het ID en het naamkenmerk van het element komen overeen met dat van de ID in de aanroep van add_settings_field $ html = ''; // Hier nemen we het eerste argument van de array en voegen we het toe aan een label naast het selectievakje $ html. = ''; echo $ html; // end sandbox_toggle_header_callback?>
Vernieuw op dit moment de Algemene instellingen pagina. U zou uw selectievakje moeten zien met het label "Header" en een beschrijving naast het selectievakje.
Helaas wordt de waarde van de database in feite nog niet opgeslagen.
Om ervoor te zorgen dat onze velden daadwerkelijk in de database worden opgeslagen, moeten we ze registreren bij WordPress. Dit doen is relatief eenvoudig - we hoeven alleen maar te profiteren van de register-instelfunctie.
Deze functie accepteert drie argumenten (twee vereist, één optioneel):
Laten we op dit punt de instelling registreren die we zojuist hebben gemaakt. Bekijk de onderstaande code. Voeg deze regel code direct onder de aanroep toe aan add_settings_field in de initialisatiefunctie die we eerder in het artikel hebben gedefinieerd. Het is waarschijnlijk het gemakkelijkst om uit alle fragmenten in dit artikel te volgen:
// Tot slot registreren we de velden met WordPress register_setting ('general', 'show_header'); Probeer het eens - vink het selectievakje aan, klik op 'Wijzigingen opslaan' en merk op dat wanneer de pagina wordt vernieuwd, de optie is gewijzigd. Schakel het selectievakje uit, sla het op en bekijk het op te slaan.
Makkelijk genoeg, toch?
We moeten nog steeds de opties introduceren voor het schakelen tussen de zichtbaarheid van het inhoudgebied en het voettekstgebied. Het is bijna precies hetzelfde als hoe we de optie instellen voor het omschakelen van de header.
Laten we eerst het veld definiëren voor het weergeven van het inhoudsgebied. Dit gaat onder de eerste aanroep van add_settings_field:
add_settings_field ('show_content', 'Content', 'sandbox_toggle_content_callback', 'general', 'general_settings_section', array ('Activeer deze instelling om de inhoud weer te geven.')); En laten we de callback-functie instellen:
function sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback
Stel vervolgens het veld in voor het weergeven van het voettekstgebied:
add_settings_field ('show_footer', 'Footer', 'sandbox_toggle_footer_callback', 'general', 'general_settings_section', array ('Activeer deze instelling om de voettekst weer te geven.')); En stel ook de callback voor dit veld in:
function sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // einde sandbox_toggle_footer_callback
Laten we tot slot deze twee nieuwe velden registreren bij WordPress. Deze twee functieaanroepen gaan onderaan de initialisatiefunctie die we eerder in het artikel hebben gedefinieerd.
register_setting ('general', 'show_content'); register_setting ('general', 'show_footer'); De definitieve versie van functions.php zou er als volgt uit moeten zien:
Selecteer welke inhoudsgebieden u wilt weergeven.'; // end sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Field Callbacks * ---------------- -------------------------------------------------- ------ * / / ** * Deze functie maakt de interface-elementen voor het schakelen tussen de zichtbaarheid van het header-element. * * Het accepteert een array van argumenten en verwacht dat het eerste element in de array de omschrijving * is die naast het selectievakje wordt weergegeven. * / function sandbox_toggle_header_callback ($ args) // Opmerking het ID en het naamkenmerk van het element komen overeen met dat van de ID in de aanroep van add_settings_field $ html = ''; // Hier nemen we het eerste argument van de array en voegen we het toe aan een label naast het selectievakje $ html. = ''; echo $ html; // end sandbox_toggle_header_callback function sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback function sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback?>
Vernieuw nu de Algemene instellingen pagina en merk op dat je alle drie volledig functionele selectievakjes hebt.
Welke voordelen hebben opties als we er geen gebruik van kunnen maken tijdens ons thema of onze plug-in? We moeten de waarden kunnen lezen om onze nieuwe opties goed te kunnen beheren.
Om dit te doen, moeten we de functie get_option gebruiken. Deze functie accepteert twee argumenten (één vereist, één optioneel):
Laten we eerst proberen de zichtbaarheid van de kop te wijzigen. Zoek in de indexsjabloon die we eerder in dit artikel hebben gemaakt naar het element met de ID van de header. Het zou er zo uit moeten zien:
Sandbox-header
Laten we vervolgens een oproep doen naar get_option in de context van een voorwaardelijk. Als de voorwaardelijke waarde true oplevert (dat wil zeggen, de optie is gecontroleerd op de Algemene instellingen pagina), dan zal het element worden getoond; anders zal het element niet worden weergegeven.
Sandbox-header
Daarna hoop op de Algemene instellingen pagina, vink de optie aan om het header-element te verbergen en vernieuw uw startpagina. Het header-element zou niet langer moeten verschijnen.
Op dit punt is het een eenvoudige kwestie van het herhalen van het proces voor het inhouds- en voettekstelement. We moeten de elementen content en footer omwikkelen met conditionals die het resultaat van get_option-oproepen evalueren.
Kijk eens:
Dit is thema-inhoud.
© Alle rechten voorbehouden.
Herzie de Algemene instellingen pagina, schakel elk selectievakje in en vernieuw de themapagina. Je elementen moeten elk onafhankelijk van elkaar schakelen.
Dat is het voor nu! We hebben alle functies bekeken die nodig zijn voor het introduceren van nieuwe secties, velden en instellingen in WordPress. Natuurlijk is er nog veel meer te bedekken.
In het volgende artikel zullen we bekijken hoe we aangepaste menu-items aan het WordPress-menu kunnen toevoegen en hoe we onze eigen pagina's aan het WordPress-dashboard kunnen voorstellen..
We hebben veel materiaal behandeld in dit artikel. Hier is een referentie voor alles wat we in dit artikel hebben gebruikt.
