The Beginner’s Guide to Writing Your Own Custom Shortcode

Shortcodes zijn een populaire functie die in veel plugins en thema’s is opgenomen. Maar als u nog nooit uw eigen shortcodes hebt gemaakt, hebt u misschien geen idee hoe u ze aan uw eigen WordPress-projecten kunt toevoegen.

Gelukkig maakt de Shortcode API van WordPress het vrij eenvoudig om uw eigen shortcodes te maken. Op deze manier kunnen gebruikers profiteren van de functies van uw plugin of thema vanuit elk tekstgebaseerd gebied op hun WordPress site. Het opnemen van shortcodes in uw projecten is een eenvoudige manier om voort te bouwen op de functionaliteit die u al heeft gemaakt, zodat u het meeste waar voor uw geld krijgt.

In dit artikel zullen we wat meer vertellen over hoe shortcodes werken. Daarna laten we zien hoe eenvoudig het kan zijn om je eigen shortcodes te programmeren in drie stappen. Laten we beginnen!

Een inleiding tot shortcodes en de shortcode API

De WordPress Shortcode API is een handig hulpmiddel voor ontwikkelaars.

Shortcodes zien eruit als kleine stukjes tekst tussen vierkante haken, zoals dit: . Elke code staat voor een unieke uitvoering van een vooraf gedefinieerde code, die op verzoek wordt geactiveerd. Je kunt ze bijna overal gebruiken waar tekst kan worden toegevoegd in WordPress.

Hoewel de meeste shortcodes worden toegevoegd door thema’s en plugins, heeft de kern van WordPress een aantal standaard shortcodes die je kunt gebruiken. Enkele voorbeelden hiervan zijn audio, galerij en bijschrift.

Wanneer je bijvoorbeeld een afbeelding met een bijschrift toevoegt, genereert WordPress een bepaalde shortcode:

Wanneer je dit op de voorkant bekijkt, zie je een afbeelding met een bijschrift:

Met de Shortcode API is het gelukkig relatief eenvoudig om aangepaste shortcodes voor uw eigen WordPress-projecten te maken. Dit is vaak een slim idee, omdat het het leven van uw gebruikers makkelijker maakt door hen in staat te stellen complexe functionaliteit te gebruiken met slechts een paar toetsaanslagen.

Hoe schrijf je je eigen aangepaste shortcode (in 3 eenvoudige stappen)

Nu u begrijpt hoe shortcodes werken, laten we eens leren hoe u er een aan uw eigen thema of plugin kunt toevoegen! Natuurlijk, wat uw shortcode doet is aan jou. In dit voorbeeld gebruiken we een simpele “Hallo wereld!” functie om je op weg te helpen.

Schrijf de shortcode functie

Eerst wil je een nieuw bestand openen in een tekst editor. Schrijf vervolgens een functie met een unieke naam, die de code uitvoert die u met de shortcode wilt activeren:

function torque_hello_world_shortcode() { return 'Hello world!';}

Als we deze functie normaal zouden gebruiken, zou hij Hello world! retourneren als een string die naar HTML kan worden uitgevoerd. Deze functie kan ook aangepaste parameters aannemen. Als je bijvoorbeeld wilt dat iemand in plaats daarvan Hello Bob! zegt, kun je een naamparameter toevoegen. Deze parameters worden attributen genoemd, en ze worden allemaal behandeld met behulp van een enkele array die door WordPress is voorgedefinieerd als $atts.

Hier volgt een voorbeeld van hoe de shortcode $atts-functie kan worden gebruikt om shortcode-attributen in WordPress op de juiste manier te behandelen. U kunt meer leren over hoe dit werkt voor uw eigen behoeften in de WordPress codex:

function torque_hello_world_shortcode( $atts ) { $a = shortcode_atts( array( 'name' => 'world' ), $atts ); return 'Hello ' . $a . !';}

Dit stelt het naam attribuut standaard in op wereld als er geen andere naam beschikbaar is. Als een naam is opgegeven, zal de functie die naam uitvoeren. Hier is een voorbeeld van hoe dit zou worden uitgevoerd met een shortcode:

// Outputs "Hello world!" // Outputs "Hello Bob!"

Als u klaar bent, kan dit worden gebruikt in alle tekst-gebaseerde gebieden op een WordPress site waar de plugin of het thema dat deze shortcode bevat is geïnstalleerd.

Sla het bestand op en voeg het toe aan uw project

Als uw shortcode klaar is, kunt u een nieuw bestand maken binnen uw aangepaste thema of plugin om de functie op te slaan. Een beschrijvende naam zal u helpen dit bestand later terug te vinden (bijvoorbeeld: shortcode-function-hello-world.php).

Nu is het tijd om de rest van uw project te vertellen over dit nieuwe bestand. Als je met een thema werkt, wil je het opnemen in het functions.php bestand. Als je een plugin bouwt, kun je het opnemen in elk bestand dat al in het project is geladen.

Hier volgt een voorbeeld van hoe je het bestand in een thema zou laden met get_stylesheet_directory(). Zorg ervoor dat je het pad naar het bestand aanpast aan de mappenstructuur in je thema:

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

Hier ziet het laden van het bestand in een plugin er zo uit, met plugin_dir_url(). Nogmaals, pas het pad naar je bestand aan zodat het overeenkomt met de mappenstructuur van je plugin:

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

Op dit punt is je functie nu beschikbaar voor gebruik! Het enige dat nu nog rest is de shortcode actief te registreren binnen WordPress.

Registreer de shortcode

De laatste stap is om uw nieuwe shortcode te registreren bij de Shortcode API. Dit wordt gedaan met de functie add_shortcode. Deze vereist twee argumenten:

  1. De shortcode-tag die binnen de teksteditor moet worden gebruikt
  2. De naam van de functie die de uitvoering van de shortcode afhandelt

Onder uw shortcode-functie neemt u deze regel code op en past u deze aan uw eigen waarden aan:

add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

De eerste waarde komt in de teksteditor tussen vierkante haken te staan. De tweede komt overeen met de functienaam die je in de vorige twee stappen hebt geschreven. Beide moeten uniek genoeg zijn, zodat ze niet interfereren met andere shortcodes die zijn opgenomen door WordPress core, thema’s of plugins.

Als je klaar bent, hoef je het alleen nog maar uit te testen. Log in op de WordPress admin en probeer uw shortcode toe te voegen aan een bericht:

Dat is alles wat er over te zeggen valt! Uw shortcode kan zo ingewikkeld of eenvoudig zijn als u wilt – wat u besluit te bouwen met behulp van deze kracht is aan u! Voor geavanceerde situaties waar u de output wilt tweaken voor verschillende situaties, kan het de moeite waard zijn om een unieke PHP klasse te schrijven om uw nieuwe shortcode te behandelen.

Conclusie

Het toevoegen van complexe functionaliteit aan WordPress berichten en pagina’s is eenvoudig met shortcodes. Ze zijn eenvoudig te programmeren en voegen waarde toe aan uw bestaande project door eenvoudige inhoud dynamisch te maken.

In dit artikel hebt u geleerd dat er slechts drie eenvoudige stappen nodig zijn om een shortcode te maken:

  1. Schrijf een gewone functie die de gewenste aangepaste code uitvoert.
  2. Sla de code op in uw WordPress plugin of thema.
  3. Registreer de shortcode binnen WordPress.

Plaats een reactie