Hoe u uw eigen WordPress-shortcodes kunt maken

Shortcodes zijn een zeer krachtige functie van WordPress. In wezen is een shortcode een tijdelijke aanduiding voor een andere inhoud. Een bekende shortcode is de ingebouwde galerij shortcode. Typ gewoon in de WordPress-editor en deze wordt vervangen door een galerij met afbeeldingen van media die naar de post zijn geüpload.

Hoewel de media-uploader je een mooie interface geeft om een ​​galerij te maken, wordt er achter de schermen echter een shortcode gebouwd, zoiets als dit: . Afhankelijk van je thema kan dit er anders uitzien op je installatie, maar een mogelijke uitvoer zou er ongeveer zo uitzien:

De HTML die je zou moeten schrijven om dit te laten gebeuren is behoorlijk fors; het gebruik van de shortcode maakt het aanzienlijk sneller. Als je repetitieve taken moet uitvoeren in de berichteditor of als je een specifiek HTML-formaat nodig hebt dat een tijdje nodig heeft om te markeren, zul je misschien merken dat je eigen shortcode kan helpen.

In dit artikel laat ik je zien hoe shortcodes werken en hoe je je eigen codes kunt maken aan de hand van enkele eenvoudige voorbeelden.

De grondbeginselen van shortcodes

Zoals ik al zei, worden shortcodes in wezen vervangen door een andere inhoud die u definieert. Laten we de basisprincipes bekijken aan de hand van een voorbeeld. Laten we aannemen dat je tijdens je bericht naar de eigenaar van de website wilt verwijzen.

"Volgens de eigenaar van ons bedrijf, Daniel Pataki, is het belangrijkste doel van de website om veel geld te genereren." Daniel Pataki vindt dat delen ook belangrijk is. "

In plaats van 'Daniel Pataki' te schrijven, kunnen we een shortcode gebruiken.

"Volgens de eigenaar van het bedrijf - [eigenaar] - is het belangrijkste doel van de website om veel geld te genereren. [Eigenaar] vindt het delen ook belangrijk."

Dit zou ons in staat stellen om de naam van de eigenaar op één locatie te wijzigen, dus in het geval dat de eigenaar verandert, zouden alle exemplaren van onze shortcode de nieuwe naam gebruiken.

Het coderen van dit is eigenlijk vrij eenvoudig. We moeten de functie add_shortcode() gebruiken om WordPress te vertellen over onze shortcode en vervolgens onze functie maken om de uitvoer af te handelen:

 add_shortcode ('owner', 'owner_output'); function owner_output () {terug 'Daniel Pataki'; } 

Merk op dat deze code moet worden toegevoegd aan het function.php-bestand van je thema of de bestanden van je plug-in . Als u een thema van een derde partij gebruikt, raad ik aan een kindthema te gebruiken.

De functie add_shortcode vereist 2 parameters: de eerste parameter is de shortcode die WordPress probeert overeen te laten komen - dit is wat u schrijft tussen de vierkante haken - de tweede parameter is de naam van de functie die de uitvoer verwerkt, wat helemaal aan ons ligt.

Binnen onze uitvoerafhandelingsfunctie moeten we de uitvoer retourneren die we onze shortcode willen vervangen.

Shortcode-attributen

Het is belangrijk om te weten dat onze shortcodes ook attributen kunnen gebruiken. Als u er bijvoorbeeld voor wilt zorgen dat de eigenaar van de website vet wordt weergegeven, kunt u dit doen door een kenmerk met de naam "vet" te maken en wanneer dat is ingesteld op true, worden de juiste HTML-tags toegevoegd.

 add_shortcode ('owner', 'owner_output'); function owner_output ($ atts) {$ atts = shortcode_atts (array ('bold' => false), $ atts); if ($ atts ['bold'] == true) {ga terug naar ' Daniel Pataki '; } else {terug 'Daniel Pataki'; }} 

Dit ziet er veel meer intimiderend uit, maar in werkelijkheid is het redelijk eenvoudig. Allereerst begin je met visualiseren hoe je shortcode zou worden gebruikt. Bij het typen van je shortcode zou je dit doen:

[owner bold='true']

We weten nu dat we een kenmerk met de naam 'vet' hebben.

In onze uitvoerafhandelingsfunctie gebruiken we de functie shortcode_atts() om alle kenmerken te ontleden en een aantal van hen standaardwaarden te geven. We zorgen ervoor dat als u niet opgeeft wat de waarde van "vetgedrukt" is, deze op false is ingesteld.

Vervolgens kijken we alleen naar de waarde van het gewaagde attribuut. Als het waar is, geven we de naam van de eigenaar terug in een sterk label, anders geven we het gewoon terug zoals het is.

Shortcode-inhoud

Shortcode-inhoud wordt meestal gebruikt als een stukje inhoud speciale HTML-opmaak nodig heeft. Laten we aannemen dat uw website mooie titels zoals deze gebruikt:

 Mijn titel 

Dit is een speciale titel die een niveau één rubriek is en ook een pictogram bevat. We kunnen dit als een shortcode maken met de volgende opmaak:

[title icon='check']My Title[/title]

Houd er rekening mee dat we een korte-codetag gebruiken met een aantal parameters en een afsluitende shortcode-tag. De inhoud binnen (Mijn titel) wordt doorgegeven aan onze uitvoer genererende functie als de tweede parameter.

 add_shortcode ('title', 'title_output'); functie title_output ($ atts, $ content) {$ atts = shortcode_atts (array ('icon' => 'pencil'), $ atts); terug ' 
 '. $ inhoud. ' 
 '; } 

Zoals u kunt zien, is het standaardpictogram "potlood", tenzij dit is gedefinieerd in de shortcode. De inhoud wordt doorgegeven als de tweede parameter en wordt gebruikt als de inhoud binnen de kop van niveau één.

Praktisch gebruik

Er zijn een groot aantal toepassingen voor shortcodes van het plaatsen van schuifregelaars en galerijen in berichten, tot afteltijden en andere dynamische inhoud. Deze vereisen meestal wat JavaScript en CSS om goed te werken. In deze gevallen is het aan je verbeelding en je codeerkrakers.

Er zijn een aantal dingen die u kunt doen om uw leven gemakkelijker te maken (zelfs als een niet-coder), bijvoorbeeld om het bewerkings- en schrijfproces te vereenvoudigen. Laten we zeggen dat je spelrecensies schrijft en in elk daarvan moet je een tabel als deze invoeren:

Titel
Ontwikkelaar
Genre
Prijs
Ons oordeel
Nooit alleen
Upper One Games
Indie Casual Adventure
$ 14.99
5/5

Zelfs als je dit van artikel naar artikel kopieert, is het nogal wat rotzooien vergeleken met de hoeveelheid inhoud die je toevoegt. U zou een eenvoudige shortcode kunnen gebruiken om de klus te klaren:

[final_table title="Never Alone" dev="Upper One Games" genre="Upper One Games" price="14.99" rating="5"]

Uw shortcode-uitvoerfunctie is verantwoordelijk voor het toevoegen van de hele tabel en andere stukjes inhoud rond deze informatie, iets als dit:

 add_shortcode ('final_table', 'final_table_output'); functie final_table_output ($ atts) {return ' 
Titel
Ontwikkelaar
Genre
Prijs
Ons oordeel
'. $ atts ['titel']. '
'. $ atts ['dev']. '
'. $ atts ['genre']. '
$ '. $ atts ['prijs']. '
5 / '. $ atts ['rating']. '
 '; } 

Het Kerst Easter Egg

Dus je bent zo ver gekomen en het nadert de kersttijd dus ik dacht dat ik een klein paasei zou opnemen. De Christmas Countdown Widget is een plug-in die je de gelegenheid geeft om een ​​Santa-thema Christmas countdown toe te voegen aan je website als een zijbalk widget of als een shortcode.

Installeer, activeer en gebruik [countdown] overal in uw berichtinhoud om Mr. Clause aan uw bericht toe te voegen.

Conclusie

Ik denk dat shortcodes geweldig zijn omdat ze niet-codeerders toestaan ​​hun workflows te vereenvoudigen en kunnen toenemen in complexiteit terwijl je je codeerkennis uitbreidt. Ik stel voor dat je hier en daar een shortcode probeert te maken omdat je complexere behoeften hebt.

Voor een lijst van alle standaard shortcodes bekijk de Shortcode sectie in de WordPress codex. Raadpleeg de Codex voor meer informatie en misschien wilt u ook een bladwijzer maken voor de Shortcode Generator, die u een paar toetsaanslagen kan besparen bij het maken van uw generatorfuncties.

Instapaper Premium is gratis voor iedereen

In augustus heeft Pinterest Instapaper overgenomen, een service waarmee u dingen op internet kunt opslaan om later te lezen. Het goede nieuws is dat Instapaper "beter uitgerust is", Instapaper Premium is nu een gratis service.Vanaf vandaag krijgt iedereen die zich aanmeldt voor Instapaper toegang tot premiumfuncties zoals :50 artikelen van Kindle Digests, een service die automatisch uw opgeslagen artikelen voor u samenvat

(Technische en ontwerptips)

Instagram laat je nu je oudere bericht archiveren

Bijna iedereen heeft een foto geüpload op Instagram waar ze niet bijzonder trots op zijn. Voor degenen onder u die vaak gênante foto's plaatsen op hun Instagram-accounts, zal een binnenkort te verschijnen update van de Instagram-app je snel laten verbergen in plaats van ze te verwijderen met een ingebouwde archieffunctie.N

(Technische en ontwerptips)