Vandaag ga ik het bespreken sorteerbaar
type optie in Titan Framework. Het biedt de eindgebruiker een aantal opties die kunnen worden herschikt via een drag & drop-interface en kunnen worden ingeschakeld of uitgeschakeld. U kunt deze optie integreren op plaatsen waar u wilt dat gebruikers de secties van een thema dynamisch herschikken.
Tegenwoordig stellen sommige premium WordPress-thema's eindgebruikers in staat om verschillende blokken in een thema te herschikken / sorteren. Het ontwikkelen van een sorteerinterface die versleepbaar is, kan een intimiderende taak zijn voor nieuwe ontwikkelaars. Titan Framework biedt een eenvoudige en bloat-vrije manier om deze optie te bieden. Met zijn sorteerbaar
type optie, kunt u een lijst met sorteerbare opties maken die op elke gewenste manier kunnen worden herschikt. Het heeft een verticale lay-out zoals getoond in de afbeelding hieronder:
Deze optie ondersteunt enkele parameters:
sorteerbaar
type optie.waar
, dan zijn de omgeschakelde sorteerbare waarden verborgen. Als vals
, de knop wordt niet getoond. De standaardinstelling is waar
.visible_button
ingesteld op vals
en u geeft hier een standaardwaarde op, visible_button
wordt automatisch ingesteld op waar
. Alle parameters zijn draad
op type, behalve 'options' welke is rangschikking
en 'visible_button' welke is boolean
in de natuur.
U kunt deze optie toevoegen aan:
Deze containers kunnen eenvoudig worden gemaakt met Titan Framework. Als je niet weet hoe, bekijk dan de vorige artikelen van deze serie.
Dit optietype wordt toegevoegd door deze stappen te volgen.
getInstance ()
functie.createOption ()
functie.GetOption ()
functie.Dit is een van de geweldige opties van Titan Framework, dus laten we het implementeren.
Laten we deze optie eerst in een beheerdersvenster maken.
createOption (array ('id' => 'aa_sortable_opt', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'sorteerbaar', // Type optie we maken 'naam' => 'Mijn sorteerbare 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 'options' = > array (// Een reeks paren van waardenlabels. 'aa_products_blk' => 'Producten blokkeren', 'aa_features_blk' => 'Functies blokkeren', 'aa_stats_blk' => 'Statistieken blokkeren', 'aa_comments_blk' => 'Opmerkingen Block ')));
Ik heb er een toegevoegd sorteerbaar
typ optie in regel # 8 via de createOption ()
functie in een aangepast admin-paneel $ aa_panel
. Vervolgens heb ik een lijst met parameters gedefinieerd, d.w.z.. naam, id, type, opties en desc. De waarde van ID is aa_sortable_opt
, die altijd uniek moet zijn.
Een unieke parameter hierin opties
staat op regel # 15. Het neemt een reeks in beslag waarde-label paren die verschijnen als opties die kunnen worden gesorteerd. In deze code heb ik vier van dergelijke paren gedefinieerd en elk daarvan is een unieke sorteerbare optie.
Daarom de labels aa_products_blk
, aa_features_blk
, aa_stats_blk
en aa_commenst_blk
overeenkomstige opties weergeven, d.w.z. 'Producten blokkeren ',' Functies blokkeren ',' Statistieken blokkeren ' en 'Opmerkingen blokkeren '. Beschouw deze opties als blokken van uw thema, waarvan u wilt dat een eindgebruiker deze opnieuw kan indelen of uitschakelen.
In de bovenstaande schermafbeelding bestaat er een sorteerbaar
typ optie in een admin paneel Nette opties. Kijk hoe de sorteerbare opties worden weergegeven.
Naast elke optienaam staan twee pictogrammen. Het eerste pictogram toont een oog welke bestuurt 'optie zichtbaarheid'. Als u erop klikt, wordt die specifieke optie uitgeschakeld.
Ik heb de zichtbaarheid van de eerste twee opties uitgeschakeld in de bovenstaande schermafbeelding.
Het tweede pictogram toont sorteerbare lijnen, die helpen om deze opties te slepen en neer te zetten.
Laten we opgeslagen optiewaarden ophalen.
getOption ('aa_sortable_opt'); / ** * * Array-inhoud afdrukken * * / var_dump ($ aa_getsortable_array); ?>
Als u opgeslagen waarden wilt ophalen, moet u eerst een exemplaar ophalen via de getInstance ()
functie in regel # 3. Registreer vervolgens de optie-ID aa_sortable_opt
binnen in de GetOption ()
functie als zijn parameter. De waarden worden opgeslagen in een variabele die een array is, $ aa_getsortable_array
.
De geretourneerde waarde bevat een array van de waarden in de volgorde waarin een eindgebruiker de labels heeft gerangschikt en opgeslagen in het aangepaste beheerdersdashboard.
Ik heb de array gedumpt met de var_dump ()
commando op regel # 15. Laten we de resultaten bekijken.
Dit is hoe ik de opties in het admin-paneel heb geregeld (ik heb de eerste twee opties opnieuw ingeschakeld door op te klikken oog icoon).
Laten we eens kijken wat er gebeurt als ik de volgorde in het admin-venster wijzig en sla het op.
In de bovenstaande afbeelding is de volgorde van de array-inhoud dienovereenkomstig gewijzigd.
Laat me je nu een andere manier tonen om deze optie aan de voorkant te gebruiken.
getOption ('aa_sortable_opt'); / ** * * Uitvoer aan de voorkant * * / if ($ aa_getsortable_array) foreach ($ aa_getsortable_array als $ optie) switch ($ option) case 'aa_products_blk': echo "Productblokcode wordt hier gebruikt. "; break; case 'aa_features_blk': echo" Functieblokcode wordt hier gebruikt. "; break; case 'aa_stats_blk': echo" Stats Block code wordt hier gebruikt. "; break; case 'aa_comments_blk': echo" Opmerkingen Blokcode wordt hier gebruikt. "; break; // end of switch // end of foreach // end if
Dus ik heb een unieke titaninstantie geregistreerd op regel # 3 en op regel # 6 heb ik de GetOption ()
functie met aa_sortable_opt
als de parameter om de waarde van de sorteerbare optie op te halen die is ingesteld door de eindgebruiker. Vergeet niet dat we waardenlabelparen instellen die boven de waarden worden gebruikt in de code, terwijl labels worden weergegeven in de dashboardinstellingen.
We krijgen dus een reeks waarden die door de gebruiker zijn geselecteerd in de volgorde waarin hij of zij de sorteerbare opties in het beheerdersdashboard heeft gesorteerd. Nu moeten we die blokken afdrukken in dezelfde volgorde als geselecteerd door de eindgebruiker. ik gebruikte switch-case
controleert of de bloknamen worden afgedrukt.
Ik controleerde hier of er een waarde in de array was $ aa_getsortable_array
.
Hier gebruikte ik een foreach
lus om door alle elementen van de. te gaan $ aa_getsortable_array
array en noemde één enkel element van deze array als $ optie
.
Ik heb switch-case gebruikt om de opties in dezelfde volgorde af te drukken als ze in de array aanwezig waren (de volgorde die de gebruiker had gekozen). Als je naar lijnen 26 tot 28 kijkt, is het een geval dat controleert of de waarde erin zit $ optie
is aa_products_blk
vervolgens een echo van het geselecteerde productenblok en breekt het vervolgens uit. Op dezelfde manier zijn er nog drie andere.
Laten we eerst gaan met de standaardinstelling. Hier is een screenshot van de uitvoer die aan de voorkant verscheen.
Wat als ik een paar opties uitschakel? En ze allemaal herschikken? Zoals dit:
Dus het productblok moet niet worden weergegeven omdat ik het heb uitgeschakeld en de andere blokken moeten zelf regelen.
Dat is precies wat er gebeurde, zoals te zien is in de bovenstaande schermafbeelding.
Nu maak ik deze optie op een admin-tabblad.
createOption (array ('id' => 'aa_sortable_opt_in_tab', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'sorteerbaar', // Type optie we maken 'naam' => 'Mijn Sorteerbare 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 het admin paneel 'visible_button' = > 'false', 'options' => array (// Een reeks paren van waardenlabels. 'aa_products_blk' => 'Producten blokkeren', 'aa_features_blk' => 'Functies blokkeren', 'aa_stats_blk' => 'Statistieken blokkeren ',' aa_comments_blk '=>' Reacties blokkeren ')));
Nu heb ik een toegevoegd sorteerbaar
typ optie in een admin tab $ aa_tab1
met ID aa_sortable_opt_in_tab
. Deze keer heb ik de parameter gedefinieerd visible_count in regel # 15 en de waarde is ingesteld op vals
. Het betekent de zichtbaarheidsindicator oog pictogram zou niet moeten verschijnen.
In deze afbeelding kunt u een vinden sorteerbaar
type optie in Tab 1 van paneel Nette opties 2. Houd er rekening mee dat het zichtbaarheidspictogram niet wordt weergegeven bij de optienamen.
Gebruik deze code om opgeslagen waarden te krijgen.
getOption ('aa_sortable_opt_in_tab'); / ** * * De uitvoer krijgen aan de voorkant * * / if ($ aa_tab_getsortable_array) foreach ($ aa_tab_getsortable_array als $ optie) switch ($ option) case 'aa_products_blk': echo "Productblokcode wordt hier gebruikt. "; break; case 'aa_features_blk': echo" Functieblokcode wordt hier gebruikt. "; break; case 'aa_stats_blk': echo" Stats Block code wordt hier gebruikt. "; break; case 'aa_comments_blk': echo" Opmerkingen Blokcode wordt hier gebruikt. "; break; // end of switch // end of foreach // end if
Deze code lijkt veel op wat ik heb geschreven in het geval van een admin panel. Dus laat me alle stappen samenvatten:
getInstance ()
functie in regel # 3.GetOption ()
functie en registreer de optie-ID als zijn parameter in regel # 6.switch-case
verklaringen in regels 19 tot 37.Hier is een screenshot van de front-end.
Vervolgens maak ik deze optie in een metabox.
createOption (array ('id' => 'aa_sortable_opt_in_metabox', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'sorteerbaar', // Type optie we maken 'naam' => 'Mijn sorteerbare optie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die wordt weergegeven 'options' => array (// Een reeks van value-label pairs. 'aa_products_blk' => 'Producten blokkeren', 'aa_features_blk' => 'Functies blokkeren', 'aa_stats_blk' => 'Statistieken blokkeren', 'aa_comments_blk' => 'Reacties blokkeren')));
Hier heb ik een optie in een metabox gemaakt $ aa_metbox
. De unieke ID is aa_sortable_opt_in_metabox
. De rest van de parameters zijn hetzelfde.
In de bovenstaande afbeelding bestaat er een sorteerbaar
type optie in een metabox met de naam Mijn sorteerbare optie. Het verschijnt op alle pagina's en na bewerkingsschermen.
Nu krijg ik opgeslagen waarden voor een metabox.
getOption ('aa_sortable_opt_in_metabox', get_the_ID ()); / ** * * Uitvoer aan de voorkant * * / if ($ aa_metabox_getsortable_array) foreach ($ aa_metabox_getsortable_array als $ optie) switch ($ option) case 'aa_products_blk': echo "Productblokcode wordt hier gebruikt. "; break; case 'aa_features_blk': echo" Functieblokcode wordt hier gebruikt. "; break; case 'aa_stats_blk': echo" Stats Block code wordt hier gebruikt. "; break; case 'aa_comments_blk': echo" Opmerkingen Blokcode wordt hier gebruikt. "; break; // end of switch // end of foreach // end if
Deze code is vrijwel hetzelfde als voorheen. Het verschil kan worden opgemerkt in regel # 6, waar ik de get_the_ID ()
fungeren als een extra parameter. Het wordt gebruikt om een specifieke pagina of een bericht-ID op te halen.
Laten we enkele van de blokken uitschakelen en kijken welke veranderingen aan de voorkant plaatsvinden.
De voorkant zal het volgende afdrukken:
Uiteindelijk zal ik deze optie maken in een gedeelte voor het aanpassen van een thema.
createOption (array ('id' => 'aa_sortable_opt_in_sec', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'sorteerbaar', // Type optie we maken 'naam' => 'Mijn sorteerbare optie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die wordt weergegeven 'options' => array (// Een reeks van value-label pairs. 'aa_products_blk' => 'Producten blokkeren', 'aa_features_blk' => 'Functies blokkeren', 'aa_stats_blk' => 'Statistieken blokkeren', 'aa_comments_blk' => 'Reacties blokkeren')));
Ik heb een gemaakt sorteerbaar
type optie met ID aa_sortable_opt_in_sec
in een gedeelte voor het aanpassen van een thema $ aa_section1
.
Het screenshot toont deze optie in een aangepast gedeelte met de naam Mijn sectie.
Gebruik de volgende code.
getOption ('aa_sortable_opt_in_sec'); / ** * * Uitvoer aan de voorkant * * / if ($ aa_sec_getsortable_array) foreach ($ aa_sec_getsortable_array als $ optie) switch ($ option) case 'aa_products_blk': echo "Productblokcode wordt hier gebruikt. "; break; case 'aa_features_blk': echo" Functieblokcode wordt hier gebruikt. "; break; case 'aa_stats_blk': echo" Stats Block code wordt hier gebruikt. "; break; case 'aa_comments_blk': echo" Opmerkingen Blokcode wordt hier gebruikt. "; break; // end of switch // end of foreach // end if
Deze code lijkt veel op wat ik eerder heb gebruikt. Alleen de ID- en variabelenamen zijn verschillend.
Hier is een screenshot met de veranderingen in de live preview-modus.
Dat is alles over de sorteerbaar
type optie in Titan Framework. De mogelijkheden hier zijn oneindig. U kunt een bestand nodig hebben dat de code van dat specifieke blok bevat in plaats van de naam van dat blok in te vullen. Laat je creatieve sappen stromen.
Ik heb nu bijna alle belangrijke opties besproken, dus we blijven achter met enkele van de kleinste dingen die ik in mijn aankomende artikelen zal bespreken. Als je vragen hebt, aarzel dan niet om hieronder commentaar te geven of contact op te nemen via Twitter.