Wil je leren hoe je een shortcode maakt in WordPress?
Leren hoe u een shortcode in WordPress kunt maken, kan een effectieve manier zijn om uw berichten en pagina's aan te passen. Als u echter nieuw bent in het proces, vindt u het misschien moeilijk om erachter te komen hoe u een dergelijke functie op uw website kunt gebruiken.
Daarom hebben we een handleiding samengesteld om u op weg te helpen. Door te kijken hoe shortcodes werken en hoe u ze effectief kunt toepassen, kunt u beginnen met het naar wens aanpassen van uw inhoud zonder dat u extra plug-ins nodig heeft.
In dit artikel bespreken we wat WordPress-shortcodes zijn en waarom je zou kunnen overwegen om ze te gebruiken. Dan laten we je zien hoe je er zelf een kunt maken.
Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Ga dan terug naar waarom we hier zijn.
Wat zijn WordPress-shortcodes?
WordPress-shortcodes fungeren als snelkoppelingen waarmee u snel elementen in een bericht of pagina kunt insluiten. Dit zijn meestal een enkele regel code tussen vierkante haken. Bijvoorbeeld :
[exemplecodehortcode]Deze code geeft een vooraf bepaalde functie weer aan de voorkant van uw website.
WordPress eerst geïntroduceerde shortcodes met de release van Shortcode-API. Dit maakte het gemakkelijk voor gebruikers om aantrekkelijke elementen aan hun berichten en pagina's toe te voegen, zoals: Google Maps of de Facebook "Vind ik leuk"-knop.
Het bestaat in WordPress standaardt zes shortcodes :
- onderschrift: bijschriften rond inhoud plaatsen
- galerij : geeft afbeeldingsgalerijen weer
- Audio: sluit audiobestanden in en speelt ze af
- Video : sluit videobestanden in en speelt ze af
- afspeellijst : geeft een verzameling audio- of videobestanden weer
- insluiten : verpakt inline-elementen
Je zult ook twee basistypen shortcode-opmaak tegenkomen: self-closing et enclosing.
Shortcodes self-closing kunnen op zichzelf staan ​​en hebben geen afsluitende tag nodig.
In de tussentijd, enclosing de inhoud die u wilt bewerken omringen en u dwingen de tag handmatig te sluiten. U kunt bijvoorbeeld een YouTube-video insluiten door de URL tussen de tags te plaatsen embed et /embed :
Dit zou bijvoorbeeld het volgende resultaat opleveren:
Sommige van beste WordPress-plug-ins komen met hun eigen shortcodes. Bijvoorbeeld, WP-formulieren et Contact Formulier 7 hebben shortcodes waarmee u snel een Contact formulier in een bericht of pagina. Je kunt ook een plug-in gebruiken zoals Max Knoppen om een ​​button shortcode toe te voegen waar je maar wilt op je website.
Waarom zou u overwegen om WordPress Shortcodes te gebruiken?
Er zijn veel redenen waarom u WordPress-shortcodes kunt gebruiken. Het is bijvoorbeeld gemakkelijker en sneller dan het leren en schrijven van een lang stuk code in HTML. Bovendien helpen ze u om uw inhoud schoon en toegankelijk te houden.
Shortcodes kunnen worden gebruikt om bepaalde functies die u herhaaldelijk gebruikt, te automatiseren. Als u bijvoorbeeld een knop gebruikt oproep tot actie (CTA) voor elk van uw artikelen kan het een snelle en gemakkelijke oplossing zijn om een ​​speciale shortcode bij de hand te hebben.
Er moet worden vermeld dat Gutenberg-redacteur werkt op dezelfde manier en vertrouwt op het gebruik van shortcodes. Hiermee kunnen WordPress-gebruikers verschillende interactieve functies toevoegen door middel van blokken.
Een dergelijke methode is veel beginnersvriendelijker omdat u inhoud rechtstreeks in de gebruikersinterface kunt toevoegen. De WordPress-blokeditor is echter nog steeds beperkt in wat het biedt. Gelukkig zit er een blok bij Korte code, waarmee u aangepaste inhoud aan uw pagina's kunt toevoegen.
Hoe maak je een shortcode in WordPress
Als je al codeerkennis hebt, kun je je eigen aangepaste shortcodes maken. Dit geeft u volledige controle over het uiterlijk en de functionaliteit van uw website.
Laten we eens kijken hoe u een aangepaste WordPress-shortcode kunt maken. In deze tutorial zullen we als voorbeeld social media-links aan een artikel toevoegen.
Stap 1 – Maak een nieuw themabestand
Voordat u begint, is het een goed idee om: maak een volledige back-up van uw WordPress-website. Je moet ook een apart bestand maken voor je aangepaste shortcode buiten het bestand functions.php uw WordPress theme. Dit biedt een uitwijkoplossing voor het geval er iets misgaat.
U kunt een klant gebruiken FTP (File Transfer Protocol) zoals FileZilla om toegang te krijgen tot de themabestanden van uw website. Als u bent ingelogd op uw website, gaat u naar wp-content> thema's en zoek uw huidige themamap. In ons voorbeeld is dit: uilenpers:
Open je map WordPress theme, klik er met de rechtermuisknop op en druk op Maak een nieuw bestand.
Geef je nieuwe bestand een naam custom-shortcodes.php klik OK. U kunt het dan bewerken door er met de rechtermuisknop op te klikken en de optie te selecteren Bekijk/Bewerk :
Dit opent het bestand in uw standaard teksteditor. Dan hoef je alleen maar het volgende codeblok toe te voegen:
<?php ?>
Dit zorgt ervoor dat uw nieuwe bestand wordt geïnterpreteerd als PHP, de scripttaal waarop WordPress is gebouwd.
U kunt vervolgens uw wijzigingen opslaan en het bestand sluiten. Zorg ervoor dat u het volgende vakje aanvinkt om ervoor te zorgen dat het op de server wordt bijgewerkt en op uw website wordt toegepast:
Open vervolgens het bestand functions.php in dezelfde themamap en voeg de volgende regel code toe onderaan het document:
include('shortcodes-personnalises.php');
Dit zal het systeem vertellen om alle wijzigingen die u aanbrengt in het bestand op te nemen custom-shortcodes.php binnen functions.php terwijl u ze kunt scheiden. Als u klaar bent, slaat u uw wijzigingen op en sluit u het bestand.
Stap 2 - Maak de Shortcode-functie
Vervolgens moet u de shortcode-functie maken en deze instrueren wat te doen. Selecteer de optie opnieuw Bekijk/Bewerk van je bestand custom-shortcodes.php. Gebruik het volgende codefragment om een ​​actie toe te voegen om uw functie aan te haken:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Vervolgens moet u een callback-functie toevoegen, die wordt uitgevoerd wanneer de hook-actie is geactiveerd. Als u de volgende regel code direct na de hierboven genoemde regel toevoegt, weet WordPress dat uw functie een shortcode is:
add_shortcode('sabonner', 'subscribe_link');Wanneer u een shortcode maakt met behulp van de functie add_shortcode, wijs je een shortcode-tag toe " ($tag) " en een bijbehorende functiehaak " ($func) die wordt uitgevoerd elke keer dat de snelkoppeling wordt gebruikt.
Met andere woorden, als de shortcode-tag [subscribe] is, dan is de hook 'subscribe_link' leidt de bezoeker om naar de opgegeven URL.
Dus de hele code die je in je bestand gebruikt shortcodes-personnalises.php zal er als volgt uitzien:
Houd er rekening mee dat u bij het benoemen van tags alleen kleine letters mag gebruiken, hoewel underscores kunnen worden gebruikt. Het is ook cruciaal vermijd het gebruik van koppeltekens, omdat het andere shortcodes kan verstoren.
Stap 3 – Voeg de zelfsluitende shortcode toe aan de website
Je kunt nu je eerste code testen als een zelfsluitende shortcode op je WordPress-site. Met behulp van de WordPress-blokeditor kun je de [subscribe]-tag rechtstreeks in het bericht invoegen:
Hiermee wordt de volgende inhoud weergegeven aan uw websitebezoekers:
Als je tevreden bent met deze shortcode, hoef je verder niets te doen. Als u het echter wilt aanpassen, kunt u doorgaan naar de volgende stap.
Stap 4 - Voeg parameters toe aan de shortcode
U kunt de shortcode aanpassen "abonneren" voor extra functionaliteit om andere social media links weer te geven. U kunt dit doen door een parameter toe te voegen om de URL te wijzigen.
voor beheerkenmerken toevoegen, je moet het bestand openen custom-shortcodes.php en voeg de volgende code toe:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Hiermee kun je de links in je shortcode-tag aanpassen om ze toe te voegen aan de Gutenberg-editor. Je kunt het over de vorige code in het bestand plakken aangepaste shortcodes.php. Het zou er ongeveer zo uit moeten zien:
De . toevoegen shortcode_atts() functie zal gebruikersattributen combineren met alle bekende attributen, en alle ontbrekende gegevens zullen worden vervangen door hun standaardwaarden. Als u klaar bent, slaat u uw wijzigingen op en sluit u het bestand.
Stap 5 - Test de instellingen
U kunt nu de bijgewerkte shortcode testen in de WordPress Block Editor. In ons voorbeeld testen we onze Twitter- en Facebook-links met de volgende shortcodes:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Dit levert het volgende resultaat op de front-end op:
Deze zelfsluitende shortcode toont de directe URL's van uw sociale profielen aan bezoekers. Misschien wilt u echter dat deze functie er een beetje gepolijst uitziet.
U kunt bijvoorbeeld een bijgevoegde versie maken waarmee u de ankertekst die wordt weergegeven aan gebruikers volledig kunt aanpassen wanneer ze op het punt staan ​​erop te klikken. In de volgende stap laten we u zien hoe u dit kunt doen.
Stap 6 – Maak een bijgevoegde shortcode aan
De omsluitende shortcode wordt op dezelfde manier opgemaakt als het vorige voorbeeld van automatisch sluiten. Het bevat echter een extra parameter voor de functie.
Eerst moet je toevoegen $content = null, die deze functie identificeert als een omsluitende shortcode. U kunt dan de . toevoegen do_shortcode van WordPress, dat de inhoud zal doorzoeken op shortcodes.
In het bestand custom-shortcodes.php, voeg de nieuwe omsluitende shortcode toe:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Als je klaar bent, is je bestand custom-shortcodes.php zou er zo uit moeten zien:
De vorige code heeft een attribuut " stijl " extra, waardoor de ankertekst in een blauwe kleur verandert. Vergeet niet om uw wijzigingen op te slaan als u klaar bent.
Stap 7 – Voeg bijgevoegde shortcode toe aan website
U kunt nu uw shortcode in de WordPress-blokeditor invoegen om het eindresultaat te zien:
Zoals je hebt gemerkt, kun je eenvoudig de URL's van je sociale media-pagina's en de ankertekst die aan de bezoeker wordt weergegeven, wijzigen met behulp van deze wrapper-shortcode. In dit geval hebben we gekozen voor "Facebook" et " Twitter " :
Alstublieft ! Je hebt nu een aangepaste shortcode gemaakt voor de abonnementslinks in je pagina's en berichten. Merk op dat alle hierboven genoemde stappen kunnen worden aangepast om allerlei verschillende elementen te maken met behulp van de WordPress-functie Shortcodes.
Het toevoegen van extra functionaliteit aan uw WordPress-website is veel eenvoudiger met shortcodes. U kunt ze gebruiken om uw bestaande inhoud te personaliseren en interactieve functies toe te voegen, zoals contactformulieren, afbeeldingengalerijen of abonnementslinks.
Andere aanbevolen bronnen
We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.
- Hoe maak je een zwevende knop met Z-index met Elementor
- Wanneer en hoe om WordPress installeren in een subdirectory
- Hoe maak je een eenvoudige Gutenberg Block WordPress-plug-in?
- Aangepaste lettertypen toevoegen aan een WordPress-website
Conclusie
In dit artikel hebben we geleerd hoe u uw eigen shortcode kunt maken in WordPress. Als u zich zorgen maakt of suggesties heeft, laat het ons dan weten binnen commentaires.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Ondertussen, deel dit artikel op uw verschillende sociale netwerken.
...
