Hoe u WordPress-shortcodes kunt maken en er gemakkelijker mee kunt werken

Hoe u WordPress-shortcodes kunt maken en er gemakkelijker mee kunt werken


WordPress shortcodes zijn kleine tags die worden gebruikt als snelkoppelingen voor het uitvoeren van specifieke functies in berichten en pagina’s. U kunt shortcodes herkennen aan vierkante haken die een eenvoudig woord of een zin omringen. Ze zijn geïntroduceerd in versie 2.5 met een missie om mensen te helpen bij het eenvoudig uitvoeren van functies.

Zoals je misschien al weet, WordPress gebruikt PHP programmeertaal om zichzelf op te starten. Dus als u een specifieke functie rechtstreeks aan berichten en pagina’s wilt toevoegen, moet u de code in de teksteditor schrijven. In plaats daarvan stellen shortcodes gebruikers in staat om het hele codeblok te vervangen door een eenvoudige term en het uit te voeren door een bericht te publiceren. Geweldig, is het niet?

In deze gids leert u:

  • Hoe WordPress shortcodes te gebruiken
  • Een eenvoudige shortcode maken
  • Hoe shortcodes gebruiken in Text Widget

Aanbevolen literatuur: WordPress-cursussen door Udemy

Hoe WordPress shortcodes te gebruiken

Shortcodes in tekst- en visuele editors

Om shortcodes te gebruiken, hoeft men niet te weten hoe te coderen of te begrijpen hoe ze in de backend werken. WordPress zelf, evenals de meeste WordPRess-thema’s en plug-ins, gebruiken verschillende shortcodes om het gebruik van veel geavanceerde functies mogelijk te maken.

Om bijvoorbeeld de hele galerij met afbeeldingen weer te geven, hoeft u alleen maar te gebruiken [galerij] shortcode die wordt geleverd met WordPress. De meeste shortcodes kunnen in hun basisvorm worden gebruikt, zoals het vorige voorbeeld.

Shortcodes worden vervangen door de daadwerkelijke inhoud zodra u een bericht of pagina publiceert of een voorbeeld bekijkt.

Shortcode-parameters

Vaak, shortcodes kunnen aanvullende parameters hebben. Door er extra informatie aan toe te voegen, kunt u de uitvoer aanpassen en wijzigen. Terwijl de triviale shortcode bijvoorbeeld alle afbeeldingen weergeeft die aan de post zijn gekoppeld, is het mogelijk om dat te veranderen. Met de shortcode van de galerij kunt u afbeeldingen specificeren op basis van hun ID, zodat u alleen de specifieke afbeeldingen kunt weergeven of zelfs afbeeldingen kunt opnemen die niet bij dat specifieke bericht horen.

Het is ook mogelijk om een ​​grootte van de galerij en vele andere dingen te definiëren door aanvullende parameters op te geven. Hier is een voorbeeld:

De galerij uit dit voorbeeld zou alleen afbeeldingen met gespecificeerde ID-nummers tonen. In dit geval wordt de grootte automatisch gewijzigd in medium. En dat krijg je allemaal met een simpele shortcode. Stel je nu eens voor hoe het geheel eruit zou zien als je op het punt stond om handmatig de PHP-code toe te voegen die tientallen, zo niet honderden regels zou hebben. Bedankt, shortcodes!

Begin en eind tags

Sommige complexere shortcodes kunnen begin- en eindtags hebben. Dus in plaats van één shortcode, zou je er uiteindelijk twee hebben met specifieke inhoud ertussen.

Met een Google Maps-plug-in kunt u bijvoorbeeld een locatie op de kaarten weergeven via de shortcode. De meeste van dergelijke plug-ins hebben begin- en eindtags, terwijl het adres ertussen moet worden geschreven. Hier is een voorbeeld:

[[maps]] New York, Verenigde Staten [[/ maps]]

Zoals u aan het voorbeeld kunt zien, begint de eindtag altijd met een schuine streep “/”. Door beide tags te hebben, kan WordPress de onderdelen van shortcodes gemakkelijker identificeren.

Werk in de teksteditor

WordPress shortcodes

Hoewel het slechts snelkoppelingen naar functies zijn, zijn shortcodes eigenlijk alleen WordPress-specifieke cryptogrammen. Dus als u probeert een shortcode in de visuele editor te schrijven, zal WordPress u onmiddellijk de uitvoer (of alleen de tijdelijke aanduiding) van die shortcode laten zien. Als je het galerijvoorbeeld hebt gevolgd en de shortcode in de visuele editor hebt geschreven, zou je zien dat WordPress onmiddellijk de inhoud ervan weergeeft (zie de eerste afbeelding in dit bericht om te zien hoe dat werkt).

Als u een shortcode wilt bewerken en met zijn parameters wilt werken, schakel dan over naar een teksteditor waarmee u de structuur van een bepaalde shortcode kunt zien.

Standaard WordPress shortcodes

Shortcodes worden meestal beheerd door thema’s en plug-ins. Elke ontwikkelaar mag zelf shortcodes registreren, dus elke code is anders. Wat doet een shortcode, wat zijn de parameters en functies ervan, hangt alleen af ​​van de specifieke plug-in en het thema dat u gebruikt.

Een plug-in die u bijvoorbeeld helpt bij het weergeven van een locatie op Google Maps heeft mogelijk een [[maps]] shortcode, een die abonnementsformulieren weergeeft, gebruikt [[form]] enzovoort.

Elk product is anders, dus zorg ervoor dat u de beschrijving en documentatie van thema’s en plug-ins controleert voor meer informatie over hun specifieke gebruik.

Maar WordPress wordt geleverd met een set standaard shortcodes die u kunt gebruiken zonder extra extensies te installeren. Dit zijn standaard shortcodes waarmee u kunt werken:

  • – sluit audiobestanden in
  • – ondertitels om inhoud heen wikkelen
  • – embed embed items en stel hun maximale afmetingen in
  • [galerij] – galerij met afbeeldingen weergeven
  • – toon een verzameling audio- en videobestanden
  • – sluit videobestanden in

Ontsnappen aan shortcodes (geef de tekst van shortcodes weer zonder deze uit te voeren)

Soms wilt u misschien tekst weergeven die een shortcode vertegenwoordigt in plaats van deze uit te voeren. Als u probeerde een shortcode toe te voegen aan zowel de tekst als de visuele editors, realiseerde u zich dat deze bij beide gelegenheden werd uitgevoerd.

Gebruik dubbele haakjes om de tekst van een shortcode weer te geven: [[Korte code]]

Gebruik alleen de eerste en de laatste dubbele haak als u een shortcode met begin- en eindtags wilt weergeven: [[kaarten] New York, VS [/ kaarten]]

Wanneer u in de teksteditor werkt, kunt u vierkante haken ook vervangen door hun codes. Dus in plaats van “[” kunt u “[” gebruiken en in plaats daarvan “]” “]” gebruiken. Bijvoorbeeld: [shortcode & # 93; zal ook de shortcode weergeven zonder deze uit te voeren.

Een eenvoudige shortcode maken

Wanneer je dagelijks artikelen in WordPress schrijft, zijn er momenten waarop je jezelf herhaalt en wanneer je steeds weer iets moet typen. Het maakt niet uit of het een website-URL, een lange zin of misschien een stuk HTML-code is dat je constant vanaf nul schrijft, je zou moeten overwegen om er een shortcode voor te schrijven.

En met deze eenvoudige functie hoeft u geen programmeur te zijn of u hoeft er zelfs geen in te huren om het u gemakkelijk te maken. Volg de volgende paar stappen en maak een aangepaste shortcode:

  1. Open het function.php-bestand in het menu Uiterlijk -> Editor
  2. Plaats de volgende code aan het einde van het bestand:
  3. functie fsg_shortURL () {
    retourneer 'http://www.firstsiteguide.com';
    }
    add_shortcode ('fsg', 'fsg_shortURL');
  4. Ga naar Teksteditor en typ [fsg] om de URL te krijgen in plaats van de shortcode

Zo moeilijk was het niet?

Geavanceerder voorbeeld: voeg shortcode voor afbeeldingen toe

Door de volgende code in de functies.php te plaatsen, kunt u de shortcode maken voor het plaatsen van een afbeelding met aangepaste breedte- en hoogtekenmerken:

  1. Ga naar het bestand functions.php
  2. Plak de volgende code:
  3. functie img_shortcode ($ atts, $ content = null) {
    
    extract (shortcode_atts (
    matrix (
    'width' => '',
    'height' => '',
    ), $ atts)
    );
    terugkeer '';
    }
    add_shortcode ('img', 'img_shortcode');
    
    
  4. Open teksteditor:

Hier kunt u gebruik van maken [img width = ’x’ height = ’y’] http: //… [/ img] shortcode waarbij “x” en “y” cijfers zijn die breedte en hoogte in pixels vertegenwoordigen.

U kunt eenvoudig andere afbeeldingskenmerken toevoegen als u die nodig heeft; bekijk de lijst van alle afbeeldingskenmerken op W3-scholen.

Hoe shortcodes gebruiken in Text Widget

Met WordPress-versie 4.9 die op 15 november 2017 is uitgebracht, werken shortcodes automatisch in tekstwidgets. Maar als je nog steeds een oudere versie van WordPress gebruikt, helpt dit deel van de tutorial je om het resultaat te krijgen.

Shortcodes kunnen verschillende functionaliteiten bevatten die u aan uw WordPress-website kunt toevoegen. Of je er nu een voor jezelf hebt gemaakt of het werd geleverd met een thema of een plug-in die je zojuist hebt geïnstalleerd, je zult waarschijnlijk de hele tijd shortcodes gebruiken. Aangezien u echt tijd kunt besparen en hiervan kunt profiteren, is er geen reden om geen shortcodes te gebruiken.

Als je net bent begonnen met het bouwen van je WordPress-website, heb je mogelijk alleen shortcodes gebruikt in de berichteditor. Maar, de waarheid is dat je praktisch overal shortcodes kunt gebruiken.

Als u bijvoorbeeld de 5sec Google Maps PRO-plug-in gebruikt waarmee u moeiteloos kaarten met talloze pinnen erop kunt maken, wilt u de kaart mogelijk via shortcode rechtstreeks in uw tekstwidget invoegen en uw locatie in de zijbalk tonen in plaats van een enkele post. Maar als je thema geen shortcodes in widgets ondersteunt, moet je de functie zelf inschakelen en dat gaan we in dit artikel laten zien.

Als u een shortcode in uw PHP-bestanden moet gebruiken (als u bijvoorbeeld de code in uw header.php-bestand wilt uitvoeren en de shortcode wilt uitvoeren waar de header aanwezig is), kunt u dat eenvoudig doen door de code eromheen te wikkelen . Maar als je hebt geprobeerd een shortcode in je tekstwidget te gebruiken zoals in het voorbeeld dat we hierboven hebben genoemd, was je teleurgesteld omdat dat gewoon niet werkte en de widget de shortcode weergeeft in plaats van de inhoud. Tenzij uw thema de functie al heeft geregistreerd, moet u deze zelf inschakelen.

Dus als u een shortcode in een tekstwidget wilt kunnen plaatsen en deze wilt laten werken, hoeft u zich geen zorgen te maken; u kunt het binnen enkele seconden laten gebeuren:

  1. Open functies.php
  2. Kopieer en plak de volgende twee regels:
  3. add_filter ('widget_text', 'shortcode_unautop');
    add_filter ('widget_text', 'do_shortcode');
  4. Wijzigingen opslaan

Hoewel het eigenlijk genoeg is om alleen de tweede regel te gebruiken waardoor de shortcode werkt, wilt u de eerste regel om te voorkomen dat WordPress de alinea automatisch invoegt en tags verbreekt waarbij u onbewust regeleinden maakt door de tekst in een widget op te maken . Voor het geval je een shortcode op een aparte regel zet, unautop zal alineatags verwijderen en de shortcode zal als een charme werken.

Nu kunt u naar navigeren Uiterlijk -> Widgets en sleep de tekstwidget naar de gewenste plek. Hierna, wanneer u een shortcode rechtstreeks in uw tekstwidget schrijft (die natuurlijk op uw site is geregistreerd), wordt deze uitgevoerd net zoals deze in de berichteditor is getypt.

Evenzo kunt u PHP-code uitvoeren vanuit uw tekstwidget. Het was gemakkelijk genoeg, nietwaar? Geniet van je shortcodes.

Shortcodes zijn overal

Als u net een WordPress-blog begint, lijken shortcodes overbodig en moeilijk te begrijpen. Meestal is het mogelijk om shortcodes te vermijden door gebruik te maken van een gebruiksvriendelijke interface die wordt aangeboden door een plug-in. Maar wanneer u meer betrokken raakt bij de blog en wanneer u meer plug-ins gaat gebruiken, begrijpt u de echte kracht van shortcodes.

Het gebruik ervan wordt een routine en je zult snel gewend raken aan het schrijven van vierkante haken in elke nieuwe post die je maakt. Neem dus een paar minuten de tijd en gebruik dit artikel om de basis te leren.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map