Nybörjarguiden för att skriva en egen anpassad kortkod

Kortkoder är en populär funktion som ingår i många plugins och teman. Men om du aldrig har byggt egna kortkoder tidigare har du kanske ingen aning om hur du ska lägga till dem i dina egna WordPress-projekt.

Tacksamt nog gör WordPress Shortcode API det ganska enkelt att skapa egna kortkoder. Genom att göra detta kan användarna dra nytta av ditt insticksprograms eller temas funktioner från vilket textbaserat område som helst på deras WordPress-webbplats. Att inkludera kortkoder i dina projekt är ett enkelt sätt att bygga vidare på den funktionalitet du redan har skapat, så att du får mest för pengarna.

I den här artikeln ska vi prata lite mer om hur kortkoder fungerar. Sedan visar vi dig hur enkelt det kan vara att programmera dina egna i tre steg. Nu sätter vi igång!

En introduktion till kortkoder och Shortcode API

Presspress Shortcode API är ett praktiskt verktyg för utvecklare.

Kortkoder ser ut som små textbitar inom hakparenteser, så här: . Var och en representerar en unik exekvering av fördefinierad kod som utlöses på begäran. Du kan använda dem nästan överallt där text kan läggas till i WordPress.

Och även om de flesta kortkoder läggs till av teman och insticksprogram har WordPress kärna några standardkortkoder som du kan använda. Några exempel på dessa är ljud, galleri och bildtext.

När du till exempel lägger till en bild med en bildtext genererar WordPress en särskild kortkod:

När du visar det här på framsidan ser du en bild med en bildtext:

Genom Shortcode API är det relativt enkelt att skapa anpassade shortcodes för dina egna WordPress-projekt. Detta är ofta en smart idé eftersom det gör dina användares liv enklare genom att de kan använda komplexa funktioner med bara några få tangenttryckningar.

Så skriver du din egen anpassade kortkod (i 3 enkla steg)

Nu när du förstår hur kortkoder fungerar, ska vi lära oss hur du lägger till en i ditt eget tema eller plugin! Naturligtvis är det upp till dig vad din kortkod gör. I det här exemplet använder vi en enkel ”Hello world!”-funktion för att komma igång.

Skriv kortkodsfunktionen

Först vill du öppna en ny fil i en textredigerare. Därefter skriver du en funktion med ett unikt namn som utför den kod som du vill att kortkoden ska utlösa:

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

Om vi skulle använda den här funktionen normalt skulle den returnera Hello world! som en sträng som kunde skrivas ut i HTML. Den här funktionen kan också ta emot anpassade parametrar. Om du till exempel vill att någon ska kunna få den att säga Hello Bob! i stället kan du lägga till en namnparameter. Dessa parametrar kallas attribut, och de hanteras alla med hjälp av en enda array som är fördefinierad som $atts av WordPress.

Här är ett exempel på hur du kan använda shortcode-funktionen $atts för att korrekt hantera shortcode-attribut i WordPress. Du kan lära dig mer om hur detta fungerar för dina egna behov i WordPress codex:

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

Detta gör att namnattributet är standardiserat till world om inget annat namn är tillgängligt. Om ett namn anges kommer funktionen att ge ut det i stället. Här är ett exempel på hur detta skulle utföras med en kortkod:

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

När du är klar kan detta användas i alla textbaserade områden på en WordPress-webbplats där insticksprogrammet eller temat som innehåller den här kortkoden är installerat.

Spara filen och lägg till den i ditt projekt

När kortkoden är klar kan du skapa en ny fil i ditt anpassade tema eller insticksprogram för att spara funktionen. Ett beskrivande namn hjälper dig att hitta filen senare (till exempel: shortcode-function-hello-world.php).

Nu är det dags att berätta för resten av ditt projekt om den nya filen. Om du arbetar med ett tema vill du inkludera den i filen functions.php. Om du bygger ett insticksprogram kan du inkludera den i någon fil som redan är inläst i projektet.

Här är ett exempel på hur du skulle ladda filen i ett tema med hjälp av get_stylesheet_directory(). Se till att redigera sökvägen till filen så att den matchar mappstrukturen i ditt tema:

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

Det här är däremot hur det ser ut när du laddar filen i ett plugin med hjälp av plugin_dir_url(). Ännu en gång, redigera sökvägen till din fil så att den matchar din insticksmoduls mappstruktur:

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

I det här läget är din funktion nu tillgänglig för användning! Allt som återstår är att aktivt registrera kortkoden i WordPress.

Registrera kortkoden

Det sista steget är att registrera din nya kortkod med Shortcode API. Detta görs med funktionen add_shortcode. Den kräver två argument:

  1. Skortkodstaggen som ska användas i textredigeraren
  2. Namnet på funktionen som hanterar utförandet av kortkoden

Under din kortkodsfunktion inkluderar du den här kodraden och uppdaterar den så att den stämmer överens med dina egna värden:

add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

Det första värdet kommer att placeras inom hakparenteser i textredigeraren. Det andra kommer att matcha det funktionsnamn som du skrev i de två föregående stegen. Båda ska vara tillräckligt unika så att de inte stör andra kortkoder som ingår i WordPress core, teman eller plugins.

När du är klar är allt som återstår att testa det. Logga in i WordPress-administratören och försök att lägga till din kortkod i ett inlägg:

Det är allt som behövs! Din kortkod kan vara så komplicerad eller enkel som du vill – vad du bestämmer dig för att bygga med hjälp av denna kraft är upp till dig! För avancerade situationer där du vill justera utmatningen för olika situationer kan det vara värt att skriva en unik PHP-klass för att hantera din nya kortkod.

Slutsats

Det är enkelt att lägga till komplexa funktioner till WordPress-inlägg och sidor med kortkoder. De är enkla att programmera och ger mervärde till ditt befintliga projekt genom att göra enkelt innehåll dynamiskt.

I den här artikeln har du lärt dig att det bara krävs tre enkla steg för att skapa en kortkod:

  1. Skriv en vanlig funktion som exekverar den önskade anpassade koden.
  2. Spara koden till din WordPress-plugin eller ditt WordPress-tema.
  3. Registrera kortkoden i WordPress.

Lämna en kommentar