Share
Bij het bouwen van WordPress-thema's, ben ik vaak in een positie waar ik de eindgebruiker nodig heb om een nummer binnen een bepaald bereik in te voeren om iets aan de voorkant te doen. Titan Framework biedt een coole nummerbereikoptie, dat is waar ik vandaag over zal debatteren. Laten we een nummerbereikoptie toevoegen in een beheerdersvenster, een metabox en een customizergedeelte via Titan Framework.
Er is een aantal type optie in Titan Framework, dat er als volgt uitziet:
In de bovenstaande schermafbeelding ziet u dat u met dit type optie een nummer kunt toevoegen aan uw ontwikkelingsproject. Er is een balk met een schuifregelaar en ernaast staat een teller die kan worden verhoogd of verlaagd.
U kunt dus de schuifregelaar slepen of de teller gebruiken om de waarde in te voeren. Laten we nu eens kijken naar de parameters die deze optie ondersteunt:
Accentsconagua
aantal type optie.medium of groot.1.De meeste van deze parameters zijn van het type draad. Echter, min, max en stap zijn aantal op type.
De aantal type optie kan binnen toegevoegd worden:
De code voor het maken van deze containers valt buiten het bestek van dit artikel, maar u kunt zeker de details vinden in eerdere artikelen van de serie.
Er wordt echter overal een uniform patroon gevolgd om dit optietype te maken:
getInstance () functie.createOption () functie.GetOption () functie. Eerst zal ik laten zien hoe je deze optie kunt toevoegen in een admin panel:
createOption (array ('id' => 'aa_numb_type', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'nummer', // Type optie we maken 'naam' => 'My Number Option', // Naam van de optie die wordt weergegeven in het admin-paneel 'desc' => 'Dit is onze optie' // Beschrijving van de optie die in het admin-paneel wordt weergegeven));Ik voeg een toe aantal typ optie via de createOption () functie in een admin-paneel $ aa_panel. Ik heb de parameters gebruikt id, type, naam en desc. Kijk naar hun waarden. Van al deze, ID kaart en type zijn de belangrijkste. ID kaart definieert de unieke naam die wordt gebruikt om de waarden te krijgen, terwijl type geeft de optie aan die u gebruikt.
De bovenstaande screenshot toont een aantal type optie Mijn nummeroptie in het admin-paneel Nette opties.
Nu haal ik de opgeslagen optiewaarden op.
getOption ('aa_numb_type'); / ** * * Druk de opgeslagen waarde * * /?> Af De waarde van de optie van het nummertype in het admin panel is: Eerst krijg ik een uniek exemplaar van een titan-framework volgens een parameter, bij voorkeur mijn themanaam, d.w.z.. netjes. Toen gebruikte ik de GetOption () functie en geregistreerde ID (d.w.z.. aa_numb_type) als een parameter. Uiteindelijk heb ik een div toegevoegd en echode het resultaat aan de voorkant.
Stel dat ik ben binnen gegaan '500'als mijn demo-waarde en opgeslagen.
U kunt de positie van de schuifregelaar duidelijk vinden. Laten we de uitvoer aan de voorkant weergeven. Hier is het:
Laten we de code typen:
createOption (array ('id' => 'aa_numb_in_tab1_panel2', // ID's moeten altijd uniek zijn.De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'nummer', // Type optie we zijn aanmaken 'naam' => 'Mijn nummer 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 'min' => '100', // Minimale waarde van de optie die 'max' => '500' // wordt getoond Maximum waarde van de optie die getoond wordt));Deze keer heb ik een gemaakt aantal typ optie in een admin tab $ aa_tab1. Zijn ID is aa_numb_in_tab1_panel2. Als u de code nauwkeurig bekijkt, ziet u enkele nieuwe parameters toegevoegd. Dit zijn de min en max typ parameters, waarvan de functie al is besproken. Nu is door deze parameters een limiet ingesteld tussen 100 en 500, en ik zal het niet kunnen overrulen tot ik hun respectieve waarden verander.
Kijk naar de Mijn nummeroptie binnen Tab 1 van het admin panel Nette opties 2.
De bovenstaande schermafbeelding toont het min en max bereik van de optie.
Laten we de waarden ervan bepalen:
getOption ('aa_numb_in_tab1_panel2'); / ** * * Druk de optiewaarden * * /?> Af De waarde van de optie van het nummertype op het admin-tabblad is: Eerst wordt een instantie aangeroepen, waarna de GetOption () functie haalt de waarde van ID op aa_numb_in_tab1_panel2 en slaat het op in een variabele aa_numb_in_tab1_panel2_val. Dan zal ik deze waarde via de echo commando.
Nu ging ik '250'als mijn demo-waarde en opgeslagen. Dit is hoe de front-end wordt weergegeven:
Nu maak ik deze optie in een metabox:
createOption (array ('id' => 'aa_mb_numb', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'numb', // Type optie we maken 'naam' => 'Mijn nummeroptie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie' // Beschrijving van de optie die wordt weergegeven));EEN aantal type optie met ID aa_mb_numb bestaat in een metabox $ aa_metbox.
In de bovenstaande afbeelding ziet u deze optie aan het einde van een paginabewerkingsscherm.
Laten we de waarden ervan bepalen:
getOption ('aa_mb_numb', get_the_ID ()); / ** * * Waardeoptie afdrukken * * /?> De waarde van de nummertype-optie in een metabox is: Het proces om waarden te krijgen is precies hetzelfde. Alleen de ID's en variabelen hebben nieuwe waarden en we bieden de GetOption () functie met twee parameters, één is de ID van de optie en de andere de ID van het post_type.
Deze keer heb ik ingevoerd '768'als de demo-waarde en bekeken de front-end, die er zo uitzag:
Laten we tot slot deze optie toevoegen in een customizer.
createOption (array ('id' => 'aa_sec_numb', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'nummer', // Type optie we maken 'naam' => 'Mijn nummeroptie', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is een optie' // Beschrijving van onze optie)); EEN aantal type optie met ID aa_sec_numb is gemaakt in een sectie voor het aanpassen van een thema $ aa_section1.
In de bovenstaande schermafbeelding kunt u vinden Mijn nummeroptie binnen in de Mijn sectie paneel voor maatwerk.
Laten we de waarden krijgen:
getOption ('aa_sec_numb'); / ** * * Print waarden aan de voorkant * * /?> De waarde van de nummertype-optie in het aanpassingsgedeelte is: Download een exemplaar en gebruik vervolgens het GetOption () functie. Voer de ID in als parameter en sla de waarde op in een nieuwe variabele genaamd $ aa_sec_numb_val. Druk de waarde uiteindelijk af via de echo commando.
Laten we invoeren '738'als de demowaarde en toon een live voorvertoning van de wijzigingen.
WordPress wordt geleverd met een ingebouwde TinyMCE-editor die te vinden is op de pagina voor het bewerken van berichten. Het toevoegen van deze rich text-editor in een beheerdersvenster, een metabox of een customizergedeelte kan echter een intimiderende taak zijn voor beginners. Dus hoe zit het voor een eenvoudiger manier? Met Titan Framework kunt u de WYSIWYG / TinyMCE-editor toevoegen via een gewenst type optieeditor. Laten we ons verdiepen in dit onderwerp en er meer over leren.
In Titan Framework kun je TinyMCE vinden editor als een van de optietypen die u kunt toevoegen. Het ziet er zo uit:
Er zijn verschillende parameters die deze optie ondersteunt:
editor type optie.editor type optie is toegevoegd in een gedeelte voor het aanpassen van een thema.De parameters media_buttons en wpautop zijn boolean en rijen is van het type int. De rest van de parameters zijn draad op type.
De editor type optie kan binnen gemaakt worden:
Opmerking: in de customizer converteert deze optie zichzelf naar een teksttype-optie.
U kunt deze optie toevoegen via de volgende stappen:
getInstance () functie.createOption () functie.GetOption () functie. Laten we een TinyMCE-editor toevoegen in al deze containers.
Eerst maak ik deze optie in een admin panel.
createOption (array ('id' => 'aa_editor_type', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'editor', // Type optie we maken 'naam' => 'My Editor Option', // Naam van de optie die in het admin-paneel wordt weergegeven 'desc' => 'Dit is onze optie' // Beschrijving van de optie die in het admin-paneel wordt weergegeven));Ik heb een gemaakt editor typ optie in een admin paneel $ aa_panel. Dit is een aangepast beheerderspaneel in Titan Framework; als je niet weet hoe je er een moet maken, refereer je naar eerdere tutorials van deze serie. Deze optie wordt gemaakt via de createOption () functie die een array van verschillende parameters nodig heeft. Kijk naar de code en zie hoe ik de waarden heb gedefinieerd id, type, naam en desc.
In bovenstaande schermafbeelding kunt u een editor type optie met de naam Mijn Editor-optie in admin-paneel Nette opties.
Nu haal ik de opgeslagen optiewaarden op.
getOption ('aa_editor_type'); / ** * Druk de optiewaarde * /?> Af De waarde van de redacteurstype optie in het admin paneel is:
Om de waarden te krijgen, moet je eerst een instantie via de getInstance () functie. Vervolgens gebruikt u de GetOption () functie, haal de waarden op door een uniek ID in te voeren (d.w.z..aa_editor_type) als een parameter van deze functie. Uiteindelijk heb ik het resultaat afgedrukt via eenecho commando binnen een div.
Stel dat ik dummy-tekst als mijn demo-instelling heb ingevoerd en deze heb opgeslagen.
De voorkant ziet er als volgt uit:
Laten we de code voor een admin-tabblad schrijven.
createOption (array ('id' => 'aa_editor_in_tab1_panel2', // ID's moeten altijd uniek zijn.De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'editor', // Type optie we zijn aanmaken 'naam' => 'Mijn Editor Optie', // Naam van de optie die getoond wordt 'desc' => 'Dit is onze optie' // Beschrijving van de optie die getoond zal worden));De createOption () functie voegt een toe editor op een admin-tabblad $ aa_tab1. De unieke ID van deze optie is aa_editor_in_tab1_panel2.
Je kunt vinden Mijn Editor-optie binnen Tab 1 van de Nette opties 2 paneel. Als je meer wilt weten over het maken van een admin-tab in Titan Framework, controleer dan mijn vorige artikelen.
Nu krijg ik de waarde met behulp van de volgende code:
getOption ('aa_editor_in_tab1_panel2'); / ** * Afdrukbeheertab-waarden * /?> De waarde van de redacteur type optie in een admin tab is:
Volgens de bovenstaande code, heb ik na het verkrijgen van een uniek exemplaar de optiewaarde opgehaald via de GetOption () functie. Vervolgens heb ik de waarde ervan in een nieuwe variabele opgeslagen $ aa_editor_in_tab1_panel2_val (regel # 6). Ten slotte herhaalde ik de waarde in een div-tag.
Ik heb opnieuw dezelfde dummy-tekst ingevoerd en bewaard. Laten we het resultaat bekijken:
Laten we tot slot deze optie toevoegen in een metabox.
createOption (array ('id' => 'aa_mb_editor', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'editor', // Type optie we maken 'naam' => 'My Editor Option', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie' // Beschrijving van de optie die wordt weergegeven)); Deze keer heb ik een gemaakt editor typ optie in een metabox $ aa_metbox. Het unieke ID is aa_mb_editor die later de opgeslagen waarden krijgt.
In de bovenstaande schermafbeelding ziet u de naam van deze optie Mijn Editor-optie in een metabox genaamd Metabox-opties. Dit verschijnt op alle bewerkingsschermen voor berichten en pagina's. U kunt verwijzen naar mijn vorige artikelen om meer te weten te komen over het maken van een metabox met Titan Framework.
Nu zal ik de waarde krijgen en deze afdrukken.
getOption ('aa_mb_editor', get_the_ID ()); / ** * Druk de optiewaarde * /?> Af De waarde van de redactietype-optie voor een metabox is:
Het proces van het ophalen van de opgeslagen waarden is hetzelfde behalve dat binnen de GetOption () functie Ik heb een extra parameter van gebruikt get_the_ID (), Dit is een functie die wordt gebruikt om de ID van het huidige post_type op te halen.
Laten we het resultaat eens nader bekijken:
Dat is het zo'n beetje. Een belangrijk ding dat u moet weten, is dat u dit optietype kunt toevoegen in een themaaanpassingsgedeelte, maar er is niet voldoende ruimte om in te passen. Dus deze optie keert terug naar een tekst type optie in de customizer, die al in een vorig artikel werd besproken.
Dit is alles wat er is om de editor type optie in Titan Framework. Probeer het te integreren in uw webontwikkelingsproject en laat het me weten als u vragen hebt.
Slechts een paar regels code en we krijgen beiden een koele nummerbereikoptie in beheerderspanelen, metaboxen en aanpassersecties, en hetzelfde voor onze redacteurstype-optie.
Tegenwoordig werk ik aan een premium WordPress-plug-in en tijdens het ontwikkelen ervan heb ik de nummeroptie op een creatieve manier gebruikt. Ik gebruikte een nummeroptie om de opvulling en marge van een bepaald element te regelen div wikkel. Denk er even over na: een eindgebruiker die de grootte van een abonnement kan veranderen door het bereik te verschuiven. Dat is een heel goed voorbeeld van een betere gebruikerservaring.
Vertel me hoe je van plan bent om deze optie te gebruiken. Als je vragen hebt, gebruik je het gedeelte 'Opmerkingen' hieronder of neem je contact op met Twitter.
