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.
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:
multicheck
type optie.De laatste twee parameters, standaard en opties, zijn rangschikking
, terwijl de rest zijn draad
op type.
De containers waarin u deze optie kunt toevoegen zijn:
De multicheck
type optie wordt toegevoegd door een algemene indeling te volgen:
getInstance ()
functie.createOption ()
functie.GetOption ()
functie. Wilt u weten hoe deze containers worden gemaakt met Titan Framework? Lees de vorige artikelen van deze serie.
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_logo
, aa_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).
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.
aa_hdr_logo
bestaat binnen de array $ aa_multicheck_opt_val
, print 'Headerlogo weergeven is ingeschakeld.'aa_hdr_bg_img
bestaat binnen de array $ aa_multicheck_opt_val
, print 'Sta kleurkopie overlay toe was ingeschakeld.'aa_hdr_clr_overlay
bestaat binnen de array $ aa_multicheck_opt_val
, print 'Achtergrondafbeelding tonen is ingeschakeld.'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:
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.
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:
getInstance ()
functie.GetOption ()
functie om de opgeslagen waarden in regel # 6 te krijgen.$ aa_multicheck_opt_in_tab_val
.in_array ()
functie (regels 15 tot 30) om de gewenste resultaten af te drukken.Laten we alle selectievakjes inschakelen als mijn demo-instellingen. De voorkant ziet er als volgt uit:
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.
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.
Laten we deze keer de eerste en de laatste optie inschakelen. Hier is de schermafbeelding van de front-end.
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.
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.
Ik heb alleen de eerste optie ingeschakeld. De wijzigingen kunnen worden waargenomen in de live voorbeeldmodus:
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.