Vill du lära dig hur man skapar en kortkod i WordPress?
Att lära sig att skapa en kortkod i WordPress kan vara ett effektivt sätt att anpassa dina inlägg och sidor. Men om du är ny i processen kan du ha svårt att ta reda på hur du använder en sådan funktion på din webbplats.
Det är därför vi har satt ihop en guide som hjälper dig att komma igång. Genom att titta på hur kortkoder fungerar och hur man tillämpar dem effektivt kan du börja anpassa ditt innehåll efter dina önskemål utan att behöva ytterligare plugins.
I den här artikeln kommer vi att diskutera vad WordPress-kortkoder är och varför du kan överväga att använda dem. Sedan visar vi dig hur du skapar din egen.
Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg
Tillbaka till varför vi är här.
Vad är WordPress-kortkoder?
WordPress-kortkoder fungerar som genvägar som gör att du snabbt kan bädda in element i ett inlägg eller en sida. Dessa är vanligtvis en enda kodrad omgiven av hakparenteser. Till exempel :
[exemplecodehortcode]Denna kod kommer att visa en förutbestämd funktion på fronten av din webbplats.
Wordpress först introducerade kortkoder med utgivningen av Shortcode API. Detta gjorde det enkelt för användare att lägga till attraktiva element till sina inlägg och sidor, som t.ex Google Maps eller Facebook "Gilla"-knappen.
Det finns i WordPress standardt sex kortkoder :
- bildtext: Linda bildtexter runt innehåll
- galleri : visar bildgallerier
- Audio: bäddar in och spelar upp ljudfiler
- vidéo : bäddar in och spelar upp videofiler
- spellista : visar en samling ljud- eller videofiler
- embed : omsluter inline-element
Du kommer också att stöta på två grundläggande typer av kortkodsformatering: self-closing et enclosing.
Kortkoder self-closing kan stå på egen hand och behöver ingen stängningsbricka.
Under tiden, enclosing omge innehållet du vill redigera och tvinga dig att stänga taggen manuellt. Du kan till exempel bädda in en YouTube-video genom att slå in webbadressen mellan taggarna embed et /embed :
Detta skulle till exempel skapa följande resultat:
Några av bästa WordPress-plugins kommer med sina egna kortkoder. Till exempel, WP-formulär et Kontaktformulär 7 har kortkoder som gör att du snabbt kan bädda in en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP i ett inlägg eller sida. Du kan också använda ett plugin som Maxknappar för att lägga till en knappkortkod var du vill på din webbplats.
Varför bör du överväga att använda WordPress-kortkoder?
Det finns många anledningar till varför du kan använda WordPress-kortkoder. Det är till exempel enklare och snabbare än att lära sig och skriva en lång bit kod i HTML. Dessutom hjälper de dig att hålla ditt innehåll rent och tillgängligt.
Kortkoder kan användas för att automatisera vissa funktioner som du använder upprepade gånger. Till exempel om du använder en knapp uppmaning till handling (CTA) på var och en av dina artiklar kan det vara en snabb och bekväm lösning att ha en dedikerad kortkod redo.
Det ska nämnas att Gutenberg redaktör fungerar på samma sätt, beroende på användningen av kortkoder. Det tillåter WordPress-användare att lägga till flera interaktiva funktioner genom att använda block.
En sådan metod är mycket mer nybörjarvänlig eftersom du kan lägga till innehåll direkt i användargränssnittet. Men WordPress-blockredigeraren är fortfarande begränsad i vad den erbjuder. Som tur är kommer det med ett block kortkod, som låter dig lägga till anpassat innehåll på dina sidor.
Hur man skapar en kortkod i WordPress
Om du redan har kunskap om kodning kan du skapa dina egna anpassade kortkoder. Detta ger dig full kontroll över utseendet och funktionaliteten på din webbplats.
Låt oss se hur du skapar en anpassad WordPress-kortkod. I den här handledningen lägger vi till länkar till sociala medier till en artikel som ett exempel.
Steg 1 – Skapa en ny temafil
Innan du börjar är det en bra idé att göra det säkerhetskopiera din WordPress-webbplats helt. Du måste också skapa en separat fil för din anpassade kortkod utanför filen functions.php din Wordpress tema. Detta kommer att ge en reservlösning om något går fel.
Du kan använda en klient FTP (File Transfer Protocol) såsom filezilla för att komma åt din webbplats temafiler. När du har loggat in på din webbplats, gå till wp-content> teman och hitta din nuvarande temamapp. I vårt exempel kommer detta att vara ugglepress:
Öppna din mapp Wordpress tema, högerklicka på den och tryck Skapa ny fil.
Namnge din nya fil custom-shortcodes.php Klicka sedan på OK. Du kan sedan redigera den genom att högerklicka på den och välja alternativet Visa/Redigera :
Detta öppnar filen i din standardtextredigerare. Sedan behöver du bara lägga till följande kodblock:
<?php ?>
Detta säkerställer att din nya fil kommer att tolkas som PHP, vilket är skriptspråket WordPress är byggt på.
Du kan sedan spara dina ändringar och stänga filen. Var noga med att markera följande ruta för att säkerställa att den kommer att uppdateras på servern och tillämpas på din webbplats:
Öppna sedan filen functions.php i samma temamapp och lägg till följande kodrad längst ner i dokumentet:
include('shortcodes-personnalises.php');
Detta kommer att berätta för systemet att inkludera alla ändringar du gör i filen custom-shortcodes.php inom functions.php samtidigt som du kan skilja dem åt. När du är redo, spara dina ändringar och stäng filen.
Steg 2 - Skapa kortkodsfunktionen
Därefter måste du skapa kortkodsfunktionen och instruera den vad den ska göra. Välj alternativet igen Visa/Redigera av din fil custom-shortcodes.php. Använd följande kodavsnitt för att lägga till en åtgärd för att koppla din funktion till:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Därefter måste du lägga till en återuppringningsfunktion, som körs när hook-åtgärden aktiveras. Om du lägger till följande kodrad direkt efter den som nämns ovan kommer att berätta för WordPress att din funktion är en kortkod:
add_shortcode('sabonner', 'subscribe_link');När du skapar en kortkod med funktionen add_shortcode, tilldelar du en kortkodstagg " ($tag) "och en motsvarande funktionskrok" ($func) som kommer att köras varje gång genvägen används.
Med andra ord, om kortkodstaggen är [prenumerera], då haken 'prenumerera_länk' omdirigerar besökaren till den angivna webbadressen.
Därför hela koden du använder i din fil shortcodes-personnalises.php kommer se ut så här:
Det bör noteras att när du namnger taggar bör du bara använda små bokstäver, även om understreck kan användas. Det är också avgörande undvik att använda bindestreck, eftersom det kan störa andra kortkoder.
Steg 3 – Lägg till Self-Close Shortcode på webbplatsen
Du kan nu testa din initiala kod som en självstängande kortkod på din WordPress-webbplats. Med WordPress block editor kan du infoga [prenumerera] taggen direkt i inlägget:
Detta kommer att visa följande innehåll för dina webbplatsbesökare:
Om du är nöjd med den här kortkoden behöver du inte göra något annat. Men om du vill anpassa den kan du hoppa till nästa steg.
Steg 4 - Lägg till parametrar till kortkoden
Du kan anpassa kortkoden "prenumerera" för ytterligare funktionalitet för att visa andra länkar till sociala medier. Du kan göra detta genom att lägga till en parameter för att ändra URL:en.
Häll lägga till hanteringsattribut, måste du öppna filen custom-shortcodes.php och lägg till följande kod:
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');Detta gör att du kan anpassa länkarna i din shortcode-tagg för att lägga till dem i Gutenberg-redigeraren. Du kan klistra in den över föregående kod i filen custom-shortcodes.php. Det borde se ut ungefär så här:
Lägger till shortcode_atts() funktion kommer att kombinera användarattribut med alla kända attribut, och eventuell saknad data kommer att ersättas med deras standardvärden. När du är redo, spara dina ändringar och stäng filen.
Steg 5 - Testa inställningarna
Du kan nu testa den uppdaterade kortkoden i WordPress Block Editor. I vårt exempel testar vi våra Twitter- och Facebook-länkar med följande kortkoder:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Detta ger följande resultat på front-end:
Denna självstängande kortkod visar de direkta webbadresserna till dina sociala profiler för besökare. Men du kanske vill att den här funktionen ska se lite polerad ut.
Till exempel kommer du att kunna skapa en bifogad version som låter dig anpassa ankartexten som visas för användarna när de ska klicka på den. Vi visar dig hur du gör i nästa steg.
Steg 6 – Skapa bifogande kortkod
Den bifogade kortkoden kommer att formateras på samma sätt som det tidigare exemplet med autostängning. Det kommer dock att inkludera en extra parameter för funktionen.
Först måste du lägga till $content = null, som identifierar denna funktion som en omslutande kortkod. Du kan sedan lägga till do_shortcode från WordPress, som kommer att söka i innehållet efter kortkoder.
I filen custom-shortcodes.php, lägg till den nya bifogade kortkoden:
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 är redo, din fil custom-shortcodes.php ska se ut så här:
Den föregående koden har ett attribut "stil" ytterligare, vilket kommer att ändra ankartexten till en blå färg. Glöm inte att spara dina ändringar när du är klar.
Steg 7 – Lägg till bifogande kortkod till webbplatsen
Du kan nu infoga din kortkod i WordPress-blockredigeraren för att se det slutliga resultatet:
Som du märkte kan du enkelt ändra webbadresserna till dina sociala medier och ankartexten som visas för besökaren med hjälp av denna kortkod. I det här fallet har vi valt " Facebook " et "Twitter" :
Där ! Du har nu skapat en anpassad kortkod för prenumerationslänkarna på dina sidor och inlägg. Observera att alla steg som nämns ovan kan modifieras för att skapa alla möjliga olika element med hjälp av WordPress-funktionen Kortkoder.
Att lägga till ytterligare funktionalitet till din WordPress-webbplats är mycket enklare med kortkoder. Du kan använda dem för att anpassa ditt befintliga innehåll och lägga till interaktiva funktioner, såsom kontaktformulär, bildgallerier eller prenumerationslänkar.
Andra rekommenderade resurser
Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.
- Hur man skapar en flytande knapp med Z-index med Elementor
- När och hur man installerar Wordpress på en underkatalog
- Hur man skapar ett enkelt Gutenberg Block WordPress-plugin
- Hur man lägger till anpassade teckensnitt på en WordPress-webbplats
Slutsats
I den här artikeln lärde vi oss hur du skapar din egen kortkod i WordPress. Om du har några funderingar eller förslag, vänligen meddela oss inom detta område commentaires.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
under tiden, dela den här artikeln på dina olika sociala nätverk.
.
