Vil du lære at oprette en shortcode i WordPress?
At lære at oprette en kortkode i WordPress kan være en effektiv måde at tilpasse dine indlæg og sider. Men hvis du er ny i processen, kan det være svært at finde ud af, hvordan du bruger en sådan funktion på din hjemmeside.
Derfor har vi sammensat en guide, der hjælper dig godt i gang. Ved at se på, hvordan kortkoder fungerer, og hvordan man anvender dem effektivt, kan du begynde at tilpasse dit indhold til din smag uden behov for yderligere plugins.
I denne artikel vil vi diskutere, hvad WordPress-kortkoder er, og hvorfor du kan overveje at bruge dem. Så viser vi dig, hvordan du laver din egen.
Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog
Så tilbage til, hvorfor vi er her.
Hvad er WordPress-kortkoder?
WordPress-genvejskoder fungerer som genveje, der giver dig mulighed for hurtigt at integrere elementer i et indlæg eller en side. Disse er normalt en enkelt kodelinje omgivet af firkantede parenteser. For eksempel :
[exemplecodehortcode]Denne kode viser en forudbestemt funktion på frontenden af dit websted.
WordPress først introducerede kortkoder med udgivelsen af Shortcode API. Dette gjorde det nemt for brugerne at tilføje attraktive elementer til deres opslag og sider, som f.eks Google Maps eller Facebook-knappen "Synes godt om".
Det findes i WordPress Standardt seks kortkoder :
- billedtekst: Omslut billedtekster omkring indhold
- galleri : viser billedgallerier
- Audio: indlejrer og afspiller lydfiler
- vidéo : indlejrer og afspiller videofiler
- afspilningsliste : viser en samling af lyd- eller videofiler
- Integrer : ombryder inline-elementer
Du vil også støde på to grundlæggende typer kortkodeformatering: self-closing et enclosing.
Kortkoder self-closing kan stå for sig selv og behøver ikke et lukkemærke.
I mellemtiden enclosing omringe det indhold, du vil redigere, og tvinge dig til at lukke tagget manuelt. For eksempel kan du indlejre en YouTube-video ved at indpakke URL'en mellem tags embed et /embed :
For eksempel ville dette skabe følgende resultat:
Nogle af bedste WordPress-plugins kommer med deres egne kortkoder. For eksempel, WP-formularer et Kontakt formular 7 har shortcodes, der giver dig mulighed for hurtigt at integrere en Kontaktformular i et indlæg eller en side. Du kan også bruge et plugin som f.eks Max-knapper at tilføje en knap-kortkode, hvor du vil på din hjemmeside.
Hvorfor bør du overveje at bruge WordPress-kortkoder?
Der er mange grunde til, at du kan bruge WordPress-kortkoder. Det er for eksempel nemmere og hurtigere end at lære og skrive et langt stykke kode i HTML. Derudover hjælper de dig med at holde dit indhold rent og tilgængeligt.
Kortkoder kan bruges til at automatisere visse funktioner, som du bruger gentagne gange. For eksempel hvis du bruger en knap opfordring til handling (CTA) på hver af dine artikler kan det være en hurtig og bekvem løsning at have en dedikeret shortcode klar.
Det skal nævnes Gutenberg redaktør fungerer på samme måde og er afhængig af brugen af kortkoder. Det giver WordPress-brugere mulighed for at tilføje flere interaktive funktioner gennem brug af blokke.
Sådan en metode er meget mere begyndervenlig, fordi du kan tilføje indhold direkte på brugergrænsefladen. WordPress-blokeditoren er dog stadig begrænset i, hvad den tilbyder. Heldigvis kommer den med en blok Lær, som lader dig tilføje tilpasset indhold til dine sider.
Sådan opretter du en kortkode i WordPress
Hvis du allerede har viden om kodning, kan du oprette dine egne brugerdefinerede kortkoder. Dette giver dig fuld kontrol over udseendet og funktionaliteten af din hjemmeside.
Lad os se, hvordan du opretter en brugerdefineret WordPress-kortkode. I denne vejledning tilføjer vi links til sociale medier til en artikel som et eksempel.
Trin 1 – Opret en ny temafil
Før du begynder, er det en god idé at sikkerhedskopiere din WordPress hjemmeside fuldstændigt. Du skal også oprette en separat fil til din brugerdefinerede kortkode uden for filen functions.php din WordPress tema. Dette vil give en reserveløsning, hvis noget går galt.
Du kan bruge en klient FTP (File Transfer Protocol) såsom FileZilla for at få adgang til dit websteds temafiler. Når du er logget ind på dit websted, skal du gå til wp-indhold> temaer og find din aktuelle temamappe. I vores eksempel vil dette være uglepresse:
Åbn din mappe WordPress tema, højreklik på den og tryk på Opret ny fil.
Navngiv din nye fil custom-shortcodes.php og klik derefter på OK. Du kan derefter redigere den ved at højreklikke på den og vælge indstillingen Se/Rediger :
Dette åbner filen i din standard teksteditor. Så skal du blot tilføje følgende kodeblok:
<?php ?>
Dette sikrer, at din nye fil bliver fortolket som PHP, som er scriptsproget WordPress er bygget på.
Du kan derefter gemme dine ændringer og lukke filen. Sørg for at markere følgende boks for at sikre, at den bliver opdateret på serveren og anvendt på dit websted:
Åbn derefter filen functions.php i den samme temamappe og tilføj følgende kodelinje nederst i dokumentet:
include('shortcodes-personnalises.php');
Dette vil fortælle systemet om at inkludere eventuelle ændringer, du foretager i filen custom-shortcodes.php inden functions.php samtidig med at du kan adskille dem. Når du er klar, skal du gemme dine ændringer og lukke filen.
Trin 2 - Opret Shortcode-funktionen
Dernæst skal du oprette shortcode-funktionen og instruere den, hvad den skal gøre. Vælg indstillingen igen Se/Rediger af din fil custom-shortcodes.php. Brug følgende kodestykke til at tilføje en handling, du kan tilslutte din funktion til:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Dernæst skal du tilføje en tilbagekaldsfunktion, som kører, når hook-handlingen aktiveres. Tilføjelse af følgende kodelinje direkte efter ovennævnte vil fortælle WordPress, at din funktion er en kortkode:
add_shortcode('sabonner', 'subscribe_link');Når du opretter en kortkode ved hjælp af funktionen add_shortcode, tildeler du et kortkodemærke " ($tag) "og en tilsvarende funktionskrog" ($func) som vil køre hver gang genvejen bruges.
Med andre ord, hvis shortcode-tagget er [subscribe], så er krogen 'subscribe_link' omdirigerer den besøgende til den angivne URL.
Derfor hele koden du bruger i din fil shortcodes-personnalises.php vil se sådan ud:
Det skal bemærkes, at når du navngiver tags, bør du kun bruge små bogstaver, selvom understregninger kan bruges. Det er også afgørende undgå at bruge bindestreger, da det kan forstyrre andre kortkoder.
Trin 3 – Tilføj selvluk-kortkoden til webstedet
Du kan nu teste din indledende kode som en selvlukkende kortkode på dit WordPress-websted. Ved at bruge WordPress-blokeditoren kan du indsætte [subscribe]-tagget direkte i indlægget:
Dette vil vise følgende indhold til besøgende på dit websted:
Hvis du er tilfreds med denne kortkode, behøver du ikke gøre andet. Men hvis du vil tilpasse det, kan du springe til næste trin.
Trin 4 - Tilføj parametre til kortkoden
Du kan tilpasse kortkoden "abonner" for yderligere funktionalitet til at vise andre links til sociale medier. Du kan gøre dette ved at tilføje en parameter for at ændre URL'en.
For at tilføje ledelsesattributter, skal du åbne filen custom-shortcodes.php og tilføj følgende kode:
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');Dette giver dig mulighed for at tilpasse links i dit shortcode-tag for at tilføje dem til Gutenberg-editoren. Du kan indsætte den over den forrige kode i filen custom-shortcodes.php. Det skulle se sådan ud:
Tilføjelse af shortcode_atts() funktion vil kombinere brugerattributter med alle kendte attributter, og eventuelle manglende data vil blive erstattet med deres standardværdier. Når du er klar, skal du gemme dine ændringer og lukke filen.
Trin 5 - Test indstillingerne
Du kan nu teste den opdaterede kortkode i WordPress Block Editor. I vores eksempel tester vi vores Twitter- og Facebook-links med følgende kortkoder:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Dette vil give følgende resultat på front-end:
Denne selvlukkende kortkode viser de direkte URL'er på dine sociale profiler til besøgende. Dog vil du måske have denne funktion til at se en smule poleret ud.
For eksempel vil du være i stand til at oprette en vedhæftet version, der giver dig mulighed for fuldt ud at tilpasse den ankertekst, der vises til brugerne, når de er ved at klikke på den. Vi viser dig, hvordan du gør det i næste trin.
Trin 6 – Opret medfølgende kortkode
Den vedlagte kortkode vil blive formateret på samme måde som det tidligere autolukningseksempel. Det vil dog inkludere en ekstra parameter for funktionen.
Først skal du tilføje $content = null, som identificerer denne funktion som en omsluttende kortkode. Du kan derefter tilføje do_shortcode fra WordPress, som vil søge i indholdet efter shortcodes.
I filen custom-shortcodes.php, tilføj den nye medfølgende kortkode:
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');Når du er klar, din fil custom-shortcodes.php skal se sådan ud:
Den tidligere kode har en attribut "stil" yderligere, hvilket vil ændre ankerteksten til en blå farve. Glem ikke at gemme dine ændringer, når du er færdig.
Trin 7 – Tilføj vedlagte kortkode til webstedet
Du kan nu indsætte din kortkode i WordPress-blokeditoren for at se det endelige resultat:
Som du har bemærket, kan du nemt ændre dine sociale mediers side-URL'er og ankerteksten, der vises til den besøgende, ved hjælp af denne indpakningskortkode. I dette tilfælde har vi valgt "Facebook" et "Twitter" :
Der! Du har nu oprettet en tilpasset kortkode til abonnementslinks på dine sider og indlæg. Bemærk, at alle ovennævnte trin kan ændres til at skabe alle mulige forskellige elementer ved hjælp af WordPress-funktionen Kortkoder.
Det er meget nemmere at tilføje yderligere funktionalitet til dit WordPress-websted med kortkoder. Du kan bruge dem til at personliggøre dit eksisterende indhold og tilføje interaktive funktioner, såsom kontaktformularer, billedgallerier eller abonnementslinks.
Andre anbefalede ressourcer
Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af dit websted og blog.
- Sådan opretter du en flydende knap med Z-indeks med Elementor
- Hvornår og hvordan du installerer WordPress i en undermappe
- Sådan opretter du et simpelt Gutenberg Block WordPress-plugin
- Sådan tilføjer du brugerdefinerede skrifttyper til et WordPress-websted
Konklusion
I denne artikel lærte vi, hvordan du opretter din egen shortcode i WordPress. Hvis du har nogen bekymringer eller forslag, så lad os det vide inden for kommentarer.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
En medarbejder, del denne artikel på dine forskellige sociale netværk.
...
