Een beginnersgids voor Titan Framework een checkbox-type optie toevoegen

WordPress-thema's zijn dynamisch geworden en een groter deel van hun besturing ligt in de handen van een gebruiker. Vandaag de dag is het beheren en configureren van thema-instellingen vrij eenvoudig geworden. Een van de handigste opties die een van uw thema's in één klik kan in- of uitschakelen, is een selectievakje. Ik ben er zeker van dat je verschillende coderingsscripts tegenkomt die deze optie maken, maar hoe zit het met het leren van een snelle methode om dit te doen? Laten we bespreken hoe Titan Framework helpt om een ​​toe te voegen checkbox type optie.

De Checkbox Type Optie in Titan Framework

Met Titan Framework kunnen gebruikers een checkbox type optie, die er als volgt uitziet:

De checkbox optietype heeft verschillende parameters:

  • naam: Definieert de weergavenaam van de optie voor het aankruisvaktype.
  • ID kaart: Deze parameter wijst een unieke naam toe die helpt bij het ophalen van de waarden.
  • standaard: (Optioneel) Hiermee wordt de standaardwaarde van de optie ingesteld.
  • desc: Het geeft een korte beschrijving weer.
  • live voorvertoning: (Optioneel) Deze parameter geeft een live voorbeeld van de wijzigingen wanneer een aankruisvaktype optie is toegevoegd in een themaaanpassingsgedeelte.
  • css: (Optioneel) Wanneer u deze optie toevoegt in een beheerderspagina en / of thema-aanpasser, genereert deze parameter automatisch CSS.

Al deze parameters zijn van het type draad, behalve standaard, welke is boolean.

Beschikbare containers voor de optie Selectievakje type

De checkbox type optie kan binnen gemaakt worden: 

  • Administratie Paneel
  • Admin-tabbladen
  • Metabox
  • Thema Customizer-gedeelte

Ongeacht het type container dat u kiest, blijft het toevoegen van dit optietype hetzelfde:

  • Krijg een uniek exemplaar via de getInstance () functie.
  • Voeg een optie toe via de createOption () functie.
  • Verkrijg de opgeslagen waarden via de GetOption () functie.

Als je wilt weten hoe deze containers worden gemaakt in Titan Framework, raadpleeg dan de vorige artikelen van deze serie.

Een checkboxtype-optie aanmaken in een beheerdersdashboard

Voorbeeldverklaring

Eerst maak ik dit optietype aan in een beheerdersvenster.

createOption (array ('id' => 'aa_checkbox', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'checkbox', // Type optie we maken 'naam' => 'Mijn checkbox-optie', // Naam van de optie die wordt weergegeven in het admin-paneel 'desc' => 'Dit is onze optie', // Beschrijving van de optie die wordt weergegeven in het beheerdersvenster 'standaard' = > false // Standaardwaarde van het optietype));

Ik heb een gemaakt checkbox typ optie in een admin paneel $ aa_panel via de createOption () functie (regel # 5). Deze functie neemt een reeks parameters in beslag en daarom heb ik hier enkele noodzakelijke parameters toegevoegd, d.w.z.. naam, id, type, standaard, enz. 

In dit soort optie, ID kaart en standaard zijn vrij belangrijk. 'Ik sterf. aa_checkbox), die uniek zou moeten zijn, krijgt de opgeslagen waarden, terwijl 'standaard' de huidige status aangeeft (zoals ingeschakeld of uitgeschakeld) van het selectievakje op het moment dat het wordt gemaakt.  

De bovenstaande schermafbeelding toont a checkbox type optie met de naam Mijn checkbox-optie in een admin-paneel Nette opties. Dit is aanvankelijk uitgeschakeld, wat voldoet aan de waarde van de standaardparameter.

Voorbeeldgebruik

Nu haal ik de opgeslagen optiewaarden op.

getOption ('aa_checkbox'); / ** * Druk de opgeslagen waarden * / if af ($ aa_checkbox_val == 1) echo 'Selectievakje type optie in een admin paneel is: Ingeschakeld';  else echo 'Selectievakje type optie in een admin paneel is: Uitgeschakeld'; ?>

Omdat het een type in- / uitschakelen type is, is het ophalen van de opgeslagen waarden enigszins anders. De checkbox optie is niet zoals de eerder besproken types waarbij de waarden direct kunnen worden opgehaald en afgedrukt aan de voorkant. 

In plaats daarvan wordt dit optietype gebruikt met een andere themafunctie. U kunt bijvoorbeeld gebruikers toestaan ​​om het logo in of uit te schakelen met een selectievakje, wat betekent dat alles wat u hoeft te doen is om te controleren of het selectievakje is ingeschakeld of uitgeschakeld en dienovereenkomstig te verwerken.

Laten we dus de hierboven geschreven code eens bekijken. In regel # 3, de getInstance () functie neemt een unieke parameter op, bij voorkeur je themanaam. Dat is waarom ik heb gebruikt netjeshier. 

Toen in regel # 5, gebruikte ik de GetOption () functie, die de optie-ID registreert als een parameter en de waarde ervan opslaat in een nieuwe variabele aa_checkbox_val

Nog één ding: het checkbox type optie is booleaanse, dat wil zeggen dat de waarde "waar / vals" of "1/0" is. Dus, om het gedrag te verklaren, heb ik een eenvoudige if-else verklaring geschreven (regels # 11 tot # 15). 

Als de waarde is opgeslagen in variabele $ aa_checkbox_val is dan 1 Ingeschakeldis afgedrukt. Dit betekent indirect dat het selectievakje is gemarkeerd. Anders, invalideis afgedrukt aan de voorkant, die het selectievakje niet-gemarkeerd of uitgeschakeld aangeeft.

Ik heb deze if-else-controle gebruikt voor uitleg; u kunt echter elke code binnen dit blok schrijven. 

Resultaat weergeven aan de voorkant

Stel dat ik deze optie heb gecontroleerd en bewaard.

Volgens mijn code moet dit type instelling worden afgedrukt 'Selectievakje type optie in een admin paneel isIngeschakeld'.

Nu schakel ik het selectievakje uit om te achterhalen wat aan de voorkant wordt weergegeven. Hier is de afbeelding:

Een checkboxtype-optie aanmaken in een beheerdersdashboard

Voorbeeldverklaring

Hier is de code voor a checkbox typ optie in een admin tab:

createOption (array ('id' => 'aa_checkbox_in_tab1_panel2', // ID's moeten altijd uniek zijn.De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'checkbox', // Type optie we zijn aanmaken 'naam' => 'Mijn checkbox optie', // Naam van de optie die getoond wordt in het admin paneel 'desc' => 'Dit is onze optie', // Beschrijving van de optie die getoond wordt in de admin paneel 'default' => false // Standaardwaarde van het type optie)); 

Ik heb er een toegevoegd checkbox type optie met ID aa_checkbox_in_tab1_panel2 op een admin-tabblad $ aa_tab1. Dit is het screenshot:

Je kunt deze optie binnen vinden Tab 1 van het admin panel Nette opties 2.

Voorbeeldgebruik

Laten we de waarden ophalen:

getOption ('aa_checkbox_in_tab1_panel2'); / ** * Druk de opgeslagen waarden * / if af (1 == $ aa_checkbox_in_tab1_panel2_val) echo 'Selectievakje type optie in een admin tabblad is: Ingeschakeld';  else echo 'Selectievakje type optie in een admin tabblad is: Uitgeschakeld';  

In regel # 3 krijg ik een uniek exemplaar. Dan de GetOption () functie (regel # 5) registreert de ID aa_checkbox_in_tab1_panel2 en de waarde ervan op te slaan in een nieuwe variabele aa_checkbox_in_tab1_panel2_val.

Ten slotte wordt deze variabele gebruikt binnen een if-else-controle om de checkbox-instelling aan de voorkant af te drukken (regels # 11 tot # 15).

Resultaat weergeven aan de voorkant

Stel dat ik deze optie ongemarkeerd hield en het opsloeg. De voorkant ziet er als volgt uit:

Nu kunt u het inschakelen en het resultaat zelf bekijken.

Een checkboxtype-optie creëren in een metabox

Voorbeeldverklaring

Ik ga deze optie in een metabox maken.

createOption (array ('id' => 'aa_mb_checkbox', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'checkbox', // Type optie we maken 'naam' => 'Mijn checkbox-optie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die 'default' wordt weergegeven => false // Standaardoptiewaarde) ); 

Deze keer heb ik een gemaakt checkbox typ optie in een metabox $ aa_metbox via de createOption () functie. Zijn ID is aa_mb_checkbox.

U kunt een optie met de naam vinden Mijn checkbox-optie in een metabox weergegeven aan het einde van een bewerkingsscherm van een pagina (post_type). Het wordt echter ook weergegeven in het gedeelte voor het bewerken van berichten.

Voorbeeldgebruik

Nu krijg ik de opgeslagen optiewaarden:

getOption ('aa_mb_checkbox', get_the_ID ()); / ** * Druk de opgeslagen waarden * / if af (1 == $ aa_mb_checkbox_val) echo 'Selectievakje type optie in een metabox is: Ingeschakeld';  else echo 'Selectievakje type optie in een metabox is: Uitgeschakeld'; ?> 

De opgeslagen optiewaarden ophalen voor de checkbox type optie in een metabox is vrijwel hetzelfde proces. Het enige verschil wordt waargenomen in regel # 5 die een extra parameter inneemt, d.w.z. de functie get_the_ID (). Deze functie is om de ID voor een specifieke pagina / post of een post_type te krijgen.

Resultaat weergeven aan de voorkant

Dit keer heb ik de optie gecontroleerd als de demo-instellingen. Laten we uploaden wat er aan de voorkant verschijnt:

Probeer het ingeschakelde deel van het voorbeeld zelf uit. Het is vrijwel hetzelfde.

Een checkbox-type-optie aanmaken in een gedeelte van een thema-customizer

Voorbeeldverklaring

Laten we tot slot deze optie toevoegen in een thema-aanpasser.

createOption (array ('id' => 'aa_sec_checkbox', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'checkbox', // Type optie we creëren 'naam' => 'My Checkbox Option', // Naam van de optie die 'default' wordt weergegeven => false // Standaardwaarde van onze optie));

EEN checkbox type optie met ID aa_sec_checkbox bestaat in een thema-aanpasser $ aa_section1

Je kunt vinden Mijn checkbox-optie in een thema-aanpasser genoemd Mijn sectie.

Voorbeeldgebruik

Laten we de code typen om opgeslagen waarden te krijgen:

getOption ('aa_sec_checkbox'); / ** * * Druk de opgeslagen waarden af ​​* * / if (1 == $ aa_sec_checkbox_val) echo 'Selectievakje type optie in een customizer gedeelte is: Ingeschakeld';  else echo 'Selectievakje type optie in een customizer gedeelte is: Uitgeschakeld'; ?>

Gebruik wederom dezelfde procedure om de opgeslagen optiewaarden te krijgen. Maar omdat deze optie binnen een thema-aanpasser is gemaakt, schrijft u deze code in uw header.php bestand en voer het uit.

Resultaat weergeven aan de voorkant

Uiteindelijk laat ik de live wijzigingen zien die optreden:

Conclusie

Stel je voor dat je een premium WordPress-thema aan het bouwen bent en op de single.php-pagina wil je dat de eindgebruiker kan bepalen of het thema zou moeten:

  • geef de datum weer
  • toon de auteur
  • laat de auteur zien
  • toon het aantal reacties
  • display-advertenties of gerelateerde inhoud

Vervolgens kunt u meerdere selectievakjes toevoegen en de gebruikerservaring verbeteren.

Probeer dit uit en laat het me weten als je nog vragen hebt. Reageer hieronder of neem contact op via Twitter.