Een beginnersgids voor Titan Framework een Multicheck Type Optie toevoegen

Met de selectievakjes, radio- en selecttypeopties kunnen gebruikers één keuze maken uit een reeks vooraf gedefinieerde keuzes. Wat te denken van wanneer u een eindgebruiker de mogelijkheid moet bieden om meer dan één keuze te maken? 

Dat is precies wat de multicheck type optie doet in Titan Framework. Vandaag wil ik laten zien hoe je via Titan Framework een multicheck type optie kunt toevoegen in een aangepast admin paneel, een metabox of binnen de thema-aanpasser.

De Multicheck Type Optie in Titan Framework

EEN multicheck typ optie in Titan Framework kunt u meerdere selectievakjes maken die allemaal tegelijk kunnen worden ingeschakeld of uitgeschakeld. Zo ziet het eruit:

De instellingsparameters die door deze optie worden ondersteund, zijn:

  • naam: Deze parameter wijst de weergavenaam toe van a multicheck type optie.
  • ID kaart: Het is een unieke naam die de opgeslagen optiewaarden ophaalt.
  • desc: Het voegt een korte beschrijving toe met de naam van de optie.
  • standaard(Optioneel) Deze parameter heeft een reeks waarden die standaard zijn ingeschakeld.
  • opties: (Optioneel) Dit is een associatieve array die de bevat waarde-label paar opties die als selectievakjes verschijnen.

De laatste twee parameters, standaard en opties, zijn rangschikking, terwijl de rest zijn draad op type.

Beschikbare containers voor de Multicheck Type Optie

De containers waarin u deze optie kunt toevoegen zijn: 

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

De multicheck type optie wordt toegevoegd door een algemene indeling te volgen:

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

Wilt u weten hoe deze containers worden gemaakt met Titan Framework? Lees de vorige artikelen van deze serie. 

Een multichecktype-optie maken in een beheerdersdashboard

Voorbeeldverklaring

Laten we deze optie eerst in een beheerdersvenster maken.

createOption (array ('id' => 'aa_multicheck_opt', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'multicheck', // Type optie we maken 'naam' => 'Mijn Multicheck-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 admin-venster 'options' = > array (// Associative array van paren van waardenlabels die opties bevatten 'aa_hdr_logo' => 'Headerlogo weergeven', 'aa_hdr_bg_img' => 'Kopbalachtergrond weergeven', 'aa_hdr_clr_overlay' => 'Koplay met kleuroverlay toestaan'), 'default' => array ('aa_hdr_logo', 'aa_hdr_bg_img')));

Ik gebruikte de createOption () functie in regel # 8 om een ​​toe te voegen multicheck typ optie in een aangepast admin-paneel $ aa_panel. Er is een lijst met parameters die ik heb genoemd, d.w.z.. naam, id, type, opties, desc en standaard. Het ID van mijn optie is aa_multicheck_opt; zorg ervoor dat elke ID die u toevoegt uniek is. 

De 'options' parameter in regel # 14 neemt een associatieve array op. Het bevat waarde-label paren. Elk paar geeft een afzonderlijke optie aan die wordt weergegeven als een selectievakje. Ik heb dus drie waardenlabels gedefinieerd, wat betekent drie opties.

Het label van elke optie is uniek. Daarom de labels aa_hdr_logoaa_hdr_bg_img en aa_hdr_clr_overlay maak opties genaamd 'Show Header-logo''Achtergrondafbeelding van koptekst weergeven'en'Kleuroverlay kopregel toestaan'respectievelijk.

In de bovenstaande schermafbeelding is er een beheerdersvenster Nette opties welke een bevat multicheck optie genoemd Mijn Multicheck-optie. Merk op dat de eerste twee opties zijn ingeschakeld vanwege standaardinstellingen (die ik heb ingesteld op regel # 16).

Voorbeeldgebruik

Laten we de opgeslagen optiewaarden ophalen.

getOption ('aa_multicheck_opt'); / ** * * Opgeslagen waarden afdrukken voor een beheerdersdashboard * * / var_dump ($ aa_multicheck_opt_val); 

In regel # 3 heb ik een uniek exemplaar toegevoegd via de getInstance () functie. Het wordt aanbevolen om uw thema-naam hier als een parameter te gebruiken. Toen in regel # 6, gebruikte ik de GetOption () functie - die de opgeslagen waarden ophaalt - door de optie-ID te registreren aa_multicheck_opt als een parameter. Daarna heb ik het resultaat in een variabele opgeslagen $ aa_multicheck_opt_val. Tot dit punt worden de gebruikersinvoerinstellingen opgeslagen in deze variabele.

Nu drukken we de opgeslagen resultaten aan de voorkant af. Omdat deze optie een associatieve array in beslag neemt, gebruik ik de meest basale methode om array-inhoud af te drukken, d.w.z. var_dump () commando (regel # 15).

Als u een voorbeeld van de front-end bekijkt, ziet het er als volgt uit:

De standaardinstellingen zijn absoluut correct afgedrukt. U krijgt het idee wat u met deze optie kunt doen.

Laten we enkele coderegels toevoegen die een uitvoer afdrukken als de instellingen dynamisch worden gewijzigd. Ik heb lijn # 15 van de bovenstaande code vervangen door deze regels. 

"; else echo" Show Header Logo was niet ingeschakeld.
"; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_val)) echo" Kopregelachtergrond weergeven is ingeschakeld.
"; else echo" Achtergrondafbeelding tonen is niet ingeschakeld.
"; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_val)) echo" Allow Header Color Overlay is ingeschakeld.
"; else echo" Allow Header Color Overlay was niet ingeschakeld.
";?>

Hier gebruik ik de in_array () functie binnen if-else controleer verklaringen. Hier worden drie verschillende controles uitgevoerd voor de uitvoer.

Regel 2 tot 6:

  • Als het label aa_hdr_logo bestaat binnen de array $ aa_multicheck_opt_val, print 'Headerlogo weergeven is ingeschakeld.'
  • Anders print 'Headerlogo weergeven is niet ingeschakeld.'

Regel 7 tot 11:

  • Als het label aa_hdr_bg_img bestaat binnen de array $ aa_multicheck_opt_val, print 'Sta kleurkopie overlay toe was ingeschakeld.'
  • Anders print 'Toestaan ​​dat kleuroverlay koptekst niet is ingeschakeld.'

Regel 13 tot 17:

  • Als het label aa_hdr_clr_overlay bestaat binnen de array $ aa_multicheck_opt_val, print 'Achtergrondafbeelding tonen is ingeschakeld.'
  • Anders print 'Achtergrondafbeelding tonen is niet ingeschakeld.'

Resultaat weergeven aan de voorkant

Laten we eerst naar de standaardinstellingen gaan, d.w.z. de eerste twee selectievakjes zijn ingeschakeld.

De front-end moet de volgende regels als volgt afdrukken:

Een multichecktype-optie maken op een beheerders-tabblad

Voorbeeldverklaring

Vervolgens zal ik deze optie toevoegen aan een admin-tabblad.

createOption (array ('id' => 'aa_multicheck_opt_in_tab', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'multicheck', // Type optie we maken 'naam' => 'Mijn Multicheck-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 admin-venster 'options' = > array (// Associative array van paren van waardenlabels die opties bevatten 'aa_hdr_logo' => 'Headerlogo weergeven', 'aa_hdr_bg_img' => 'Kopbalachtergrond weergeven', 'aa_hdr_clr_overlay' => 'Koplay met kleuroverlay toestaan'), 'default' => array ('aa_hdr_logo', 'aa_hdr_bg_img')));

Hier heb ik hetzelfde toegevoegd multicheck typ optie in een admin tab $ aa_tab1. De unieke ID van de optie is aa_multicheck_opt_in_tab. De rest van de parameterinstellingen zijn hetzelfde.

EEN multicheck type optie bestaat binnen Tab 1 van het admin panel Nette opties 2.

Voorbeeldgebruik

Nu krijg ik de opgeslagen waarden van een admin-tabblad.

getOption ('aa_multicheck_opt_in_tab'); / ** * * Opgeslagen waarden afdrukken voor een beheerdersdashboard * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_tab_val)) echo 'Headerlogo tonen is ingeschakeld.
"; else echo" Show Header Logo was niet ingeschakeld.
"; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_tab_val)) echo" Kopregelachtergrond weergeven is ingeschakeld.
"; else echo" Achtergrondafbeelding tonen is niet ingeschakeld.
"; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_tab_val)) echo" Allow Header Color Overlay is ingeschakeld.
"; else echo" Allow Header Color Overlay was niet ingeschakeld.
";

Deze code lijkt veel op wat ik schreef in het geval van een admin panel. Je kunt het alleen proberen. Laat me de stappen samenvatten:

  • In de eerste plaats een instantie in regel # 3 krijgen via de getInstance () functie.
  • Gebruik dan de GetOption () functie om de opgeslagen waarden in regel # 6 te krijgen.
  • Registreer de optie-ID en sla de resultaten op in de variabele $ aa_multicheck_opt_in_tab_val.
  • Gebruik ten slotte deze variabele in de in_array () functie (regels 15 tot 30) om de gewenste resultaten af ​​te drukken.

Resultaat weergeven aan de voorkant

Laten we alle selectievakjes inschakelen als mijn demo-instellingen. De voorkant ziet er als volgt uit:

Een multichecktype-optie creëren in een metabox

Voorbeeldverklaring

Nu zal ik een maken multicheck type optie in een metabox.

createOption (array ('id' => 'aa_multicheck_opt_in_metabox', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'multicheck', // Type optie we maken 'naam' => 'Mijn Multicheck-optie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die 'options' wordt weergegeven => array (// Associative array of waarmerklabels die opties bevatten 'aa_hdr_logo' => 'Headerlogo tonen', 'aa_hdr_bg_img' => 'Kopregelachtergrondafbeelding weergeven', 'aa_hdr_clr_overlay' => 'Kopregelkleuroverlay toestaan'), 'standaard' => array (' aa_hdr_logo ',' aa_hdr_bg_img ')));

Ik heb deze optie toegevoegd met een unieke ID aa_multicheck_opt_in_metabox in een metabox $ aa_metbox.

In de bovenstaande afbeelding is er een pagina-bewerkingsscherm en aan het einde kun je een a zien multicheck optie genoemd Mijn Multicheck-optiein een metabox.

Voorbeeldgebruik

Gebruik de volgende code om de opgeslagen waarden op te halen.

getOption ('aa_multicheck_opt_in_metabox', get_the_ID ()); / ** * * Opgeslagen waarden afdrukken voor een Metabox * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_metabox_val)) echo 'Headerlogo tonen is ingeschakeld.
"; else echo" Show Header Logo was niet ingeschakeld.
"; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_metabox_val)) echo" Kopregelachtergrond weergeven is ingeschakeld.
"; else echo" Achtergrondafbeelding tonen is niet ingeschakeld.
"; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_metabox_val)) echo" Allow Header Color Overlay is ingeschakeld.
"; else echo" Allow Header Color Overlay was niet ingeschakeld.
";?>

De code gebruikt opnieuw de functies voor het ophalen van een exemplaar en opgeslagen waarden. Maar in regel # 6 is er een extra parameter, de get_the_ID () functie, die waarden van elke pagina of post-ID krijgt. Uiteindelijk gebruikte ik hetzelfde if-else controleer verklaringen.

Resultaat weergeven aan de voorkant

Laten we deze keer de eerste en de laatste optie inschakelen. Hier is de schermafbeelding van de front-end.

Een Multicheck-type-optie creëren in een thema-aanpassergedeelte

Voorbeeldverklaring

Ten slotte ga ik deze optie toevoegen in een themaaanpassingsgedeelte.

createOption (array ('id' => 'aa_multicheck_opt_in_sec', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'multicheck', // Type optie we maken 'naam' => 'Mijn Multicheck-optie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die 'options' wordt weergegeven => array (// Associative array of waarmerklabels die opties bevatten 'aa_hdr_logo' => 'Headerlogo tonen', 'aa_hdr_bg_img' => 'Kopregelachtergrondafbeelding weergeven', 'aa_hdr_clr_overlay' => 'Kopregelkleuroverlay toestaan'), 'standaard' => array (' aa_hdr_logo ',' aa_hdr_bg_img ')));

Ik heb er een toegevoegd multicheck typ optie in een gedeelte voor het aanpassen van een thema $ aa_section1. Zijn ID is aa_multicheck_opt_in_sec.

In de afbeelding is er een customizergedeelte genaamd Mijn sectie, waarin een lijst met checkbox-opties staat.

Voorbeeldgebruik

Gebruik deze code om de waarden op te halen uit een customizergedeelte.

getOption ('aa_multicheck_opt_in_sec'); / ** * * Opgeslagen waarden afdrukken voor een aangepast gedeelte * * / if (in_array ('aa_hdr_logo', $ aa_multicheck_opt_in_sec_val)) echo 'Headerlogo tonen is ingeschakeld.
"; else echo" Show Header Logo was niet ingeschakeld.
"; if (in_array ('aa_hdr_bg_img', $ aa_multicheck_opt_in_sec_val)) echo" Kopregelachtergrond weergeven is ingeschakeld.
"; else echo" Achtergrondafbeelding tonen is niet ingeschakeld.
"; if (in_array ('aa_hdr_clr_overlay', $ aa_multicheck_opt_in_sec_val)) echo" Allow Header Color Overlay is ingeschakeld.
"; else echo" Allow Header Color Overlay was niet ingeschakeld.
";?>

Deze code lijkt weer erg op wat ik voor andere containertypen heb gebruikt. Alleen de ID- en variabelenamen zijn verschillend.

Resultaat weergeven aan de voorkant

Ik heb alleen de eerste optie ingeschakeld. De wijzigingen kunnen worden waargenomen in de live voorbeeldmodus:

Conclusie

Dus dat is het zo'n beetje. U kunt het integreren multicheck typ optie in uw webontwikkelingsproject zodat gebruikers meerdere themafuncties met een paar klikken kunnen inschakelen. 

Vergeet niet dat ik u een voorbeeld gaf in de tutorial van het checkbox-type, dat u een eindgebruiker toestaat om een ​​deel van single.php in / uit te schakelen. Datzelfde voorbeeld kan hier worden toegepast, met bit van een context. Dus als u gebruikersopties aanbiedt die betrekking hebben op een bepaald gebied, zoals de kop, moet u multicheck gebruiken om extra opties te vermijden.

Er zijn enkele andere optietypen die de derivaten van dit type kunnen worden genoemd. Ik zal ze in mijn aankomende artikelen bespreken. Tot dan probeer deze tutorial en laat me je mening erover weten in de comments of op Twitter.