Een beginnersgids voor Titan Framework een Sorteerbare Type Optie toevoegen

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.

De sorteerbaar type optie in Titan Framework

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:

  • naam: Deze parameter wijst de naam van a toe sorteerbaar type optie.
  • ID kaart: Het wijst een unieke naam toe waarin opgeslagen optiewaarden worden opgeslagen.
  • desc: Het voegt een korte beschrijving toe.
  • opties: (Optioneel) Deze parameter bevat een array van waarde-label paren die als opties in het sorteerbare veld verschijnen.
  • visible_button: (Optioneel) Dit is de op cheques gebaseerde parameter en indien waar, dan zijn de omgeschakelde sorteerbare waarden verborgen. Als vals, de knop wordt niet getoond. De standaardinstelling is waar.
  • standaard(Optioneel) Het neemt standaard een reeks zichtbare waarden in beslag. Als 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.

Beschikbare containers voor de sorteerbaar type-optie

U kunt deze optie toevoegen aan: 

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

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.

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

Dit is een van de geweldige opties van Titan Framework, dus laten we het implementeren.

Een sorteerbaar type maken Optie In een beheerdersdashboard

Voorbeeldverklaring

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_blkaa_features_blkaa_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.

Voorbeeldgebruik

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. 

Lijn 20:

Ik controleerde hier of er een waarde in de array was $ aa_getsortable_array.

Regel 22:

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

Regel 34 tot 42:

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.

Resultaat weergeven aan de voorkant

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.

Een sorteerbaar type maken Optie binnen een Admin Tab

Voorbeeldverklaring

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.

Voorbeeldgebruik

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:

  • Krijg een exemplaar via de getInstance () functie in regel # 3.
  • Krijg opgeslagen waarden via de GetOption () functie en registreer de optie-ID als zijn parameter in regel # 6.
  • Print de overeenkomstige blokken aan de voorkant via switch-case verklaringen in regels 19 tot 37.

Resultaat weergeven aan de voorkant

Hier is een screenshot van de front-end.


Een sorteerbare type-optie creëren in een metabox

Voorbeeldverklaring

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. 

Voorbeeldgebruik

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.

Resultaat weergeven aan de voorkant

Laten we enkele van de blokken uitschakelen en kijken welke veranderingen aan de voorkant plaatsvinden. 

De voorkant zal het volgende afdrukken:

Een sorteerbaar type maken Optie binnen een thema-aanpassergedeelte

Voorbeeldverklaring

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.

Voorbeeldgebruik

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. 

Resultaat weergeven aan de voorkant

Hier is een screenshot met de veranderingen in de live preview-modus.

Conclusie

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.