WordPress shortcodes er en kraftfuld funktion til at lave fede ting med lidt indsats. Du kan stort set gøre alt med dem. Med shortcoder er det lige så let at integrere interaktive elementer eller oprette komplekse sidelayout, som at indsætte en enkelt kodelinie.

Hvis du vil tilføje et galleri, skal du blot indtaste følgende kode:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Dette udsender et galleri med de nævnte billed-id’er. Det har 4 kolonner, og deres maksimale størrelse vil være ‘medium’ (som defineret af WordPress).

Der er ingen grund til at benytte grim HTML-kode.

Eksempel på shortcode til galleriet

Eksempel på shortcode til galleriet

Shortcoder fjerner behovet for komplicerede scripts. Selv hvis du har ringe eller ingen programmeringsfærdigheder, kan du nemt tilføje dynamisk indhold med deres hjælp.

De er meget populære hos WordPress-udviklere, da de hjælper enormt med automatisering af indhold og design. Genvejskoder er til WordPress-udviklere hvad makroer er til dataanalytikere eller tastaturgenveje til professionelle grafiske designere.

I denne vejledning lærer du alt, hvad der er at vide om shortcoder. Du finder ud af, hvordan du arbejder med Shortcode API ved at oprette dine helt egne shortcoder. I sidste ende vil vi diskutere fremtiden for shortcoder, og hvor de passer ind med WordPress ‘nye Block Editor.

Begejstret? Lad os komme igang!

Hvad er en Shortcode?

Kort sag, shortcode = Shortcut + code.

shortcoder bruger typisk firkantede parentesetags [] til at definere, hvordan de er brugt. Hver shortcode udfører en bestemt funktion på et sted. Det kan være så simpelt som formatering af indholdet eller så komplekst som at definere hele webstedets struktur.

For eksempel kan du bruge shortcoder til at indlejre slidere, formularer eller pricing tables. Du kan endda bruge dem til at oprette genanvendelige skabeloner til sidedesign.

En kort Historie med Shortcoder

Shortcoder blev først gjort populære af en online forum-software kaldet Ultimate Bulletin Board (UBB). I 1998 introducerede de BBCode (Bulletin Board Code), en samling brugervenlige tags til brugere til let at formatere deres indlæg.

Nem formatering med enkle BBCodes

Nem formatering med enkle BBCodes

Som et lightweight markup language fungerer BBCode efter de samme principper som HTML, bortset fra at det er en meget enklere måde.

Brug af foruddefinerede tags er også meget sikrere, da brugere ikke kan indsætte HTML-kode og introducere sikkerhedssårbarheder. For eksempel kan en bruger med ondsindet hensigt bruge <script> -tagget til at udføre JavaScript-kode og ødelægge webstedets funktionalitet.

Kort efter tilføjede andre online forum software som phpBB, XMB Forum og vBulletin BBCode-funktionalitet i deres opslagstavler.

Shortcodes bemyndigede administratorer til at have større kontrol over, hvad deres brugere kan og ikke kan gøre. Desuden tillod de brugere at formatere deres indhold gennem enkle tags.

På grund af de samme sikkerhedsmæssige årsager forhindrer WordPress, at PHP-kode kører på webstedsindhold. For at overvinde denne begrænsning introducerede WordPress 2.5 shortcode-funktionaliteten i 2008 med frigivelsen af ​​Shortcode API. Det har vist sig at være en af ​​de mest anvendte funktioner fra mange WordPress plugins og temaudviklere.

Hvad er WordPress-shortcoder?

WordPress-shortcoder er firkantede bracket strings ([ ]), der magisk omdannes til noget fascinerende på fronten. De giver brugerne en nem måde at oprette og ændre kompliceret indhold uden at bekymre sig om komplekse HTML- eller embedkoder.

WordPress-shortcoder er enkle og lette at bruge

WordPress-shortcoder er enkle og lette at bruge

De 2 typer shortcoder

Der er primært to typer shortcoder i WordPress.

Selvlukkende og lukkende shortcoder kan være gyldige med eller uden attributter.

Selvlukkende og lukkende shortcoder kan være gyldige med eller uden attributter.

Eksempel: Galleri shortcoden behøver ikke et lukningskode. Vi tilføjer alt det behov med forskellige attributter.

Eksempel: Caption shortcoden bruges til at vikle en billedtekst omkring ethvert indhold. Det bruges hovedsageligt til at tilføje en billedtekst til billeder, men det fungerer med ethvert HTML-element.

Nogle shortcoder fungerer med eller uden attributter. Det afhænger af, hvordan de er defineret.

Standard WordPress-shortcoder

WordPress leveres med 6 standardshortcoder:

For flere detaljer om, hvordan du kan bruge standardshortcoder og hvilke attributter de understøtter, kan du henvise til de tilknyttede Codex-dokumenter.

Sådan bruges WordPress-shortcoder

Brug af shortcoder i WordPress er en ligetil proces. Men det afhænger af, hvor du vil tilføje dem på dit websted. Sørg for at læse shortcode-dokumentationen for at forstå, hvordan den fungerer. Lær de attributter, den understøtter, så du kan få præcist det, du ønsker.

Brug af WordPress-shortcoder i Sider og Indlæg

Gå først til side / indlægseditoren, hvor du vil indsætte shortcoden.

Hvis du bruger Gutenberg-editoren, kan du tilføje shortcode tag i den uafhængige shortcodeblokke. Vi kan finde det i afsnittet Widgets.

Tilføjelse af en shortcode blok i Gutenberg

Tilføjelse af en shortcode blok i Gutenberg

Gutenbergs dedikerede Shortcode-blok

Gutenbergs dedikerede Shortcode-blok

Bruger du stadig Classic Editor (eller plugin)? Du kan indtaste dine shortcode-tags på den klassiske måde. Et par shortcoder kan endda have en knap i redigeringsskærmen for let at indsætte dem.

Tilføjelse af en shortcode i den klassiske editor

Tilføjelse af en shortcode i den klassiske editor

Brug af WordPress Shortcodes i Sidebar Widgets

Shortcoder kan også indsættes i sidebar-widgets. For at tilføje dem skal du gå til Udseende » Widgets og tilføje en tekst widget til det afsnit, hvor du vil tilføje genvejen.

Tilføj shortcode i din sidebar med tekst widget

Tilføj shortcode i din sidebar med tekst widget

Indsæt shortcoden inde i tekst widget og gem den. Du kan besøge dit websteds frontend og se din shortcodes output i din sidebar.

shortcode produktionen (galleri) kan ses i sidefeltet

shortcode produktionen (galleri) kan ses i sidefeltet

Bemærk: WordPress 4.8 og nyere versioner understøtter ikke shortcoder i sidebar-widgets. Læs Widget Improvements in WordPress 4.9 opdateringen for mere.

Brug af WordPress Shortcodes i Header og Footer

WordPress-shortcodes er generelt beregnet til sider, indlæg og widgets. Men du har en nem måde at indsætte shortcodes overalt på dit websted.

Lad os sige, at du vil tilføje en call to action-knap i din footer eller i alle dine indlæg før kommentarsektionen. Funktionen do_shortcode() callback er praktisk her.

Du skal tilføje følgende kode til dit temas header.php, footer.php eller en af ​​dets skabelonfiler:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Dette udsender shortcoden på det sted, hvor du indsatte koden.

Du skal inkludere de firkantede parenteser mellem anførselstegnene for at gentage shortcoden. Bare det at inkludere dets navn fungerer ikke.

Ligeledes kan du bruge do_shortcod () callback funktionen til at aktivere shortcoder overalt i WordPress, som i kommentarfeltet.

En Hurtig Introduktion til Shortcode API

WordPress Shortcode API definerer, hvordan du kan bruge shortcoder til at tilpasse og udvide dit websteds funktionalitet. Det gør det muligt for udviklere at oprette unikt indhold (f.eks. formularer, karruseller, sliders osv.), Som brugerne kan tilføje på deres websteder ved at indsætte den relevante shortcode.

Du kan tilføje næsten enhver funktion, du kan forestille dig til dit websted ved hjælp af shortcoder.

API understøtter både selvlukkende og lukkede shortcoder. Det håndterer al den vanskelige parsing og inkluderer hjælperfunktioner til at indstille og hente standardattributter.

Takket være API’en kan du dykke direkte i at udvikle og tilpasse shortcoder i stedet for at spilde dyrebar tid på at definere regelmæssige udtryk for hver shortcode, du laver.

At Forstå det Grundlæggende ved Shortcode API

Hver gang du åbner en side eller et indlæg i WordPress, ser det efter registrerede shortcoder, mens du behandler websteds indhold.

Hvis der findes en registreret shortcode, overtager Shortcode API og returnerer output fra shortcoderne. Den returnerede outputstreng erstatter shortcodekoden på det sted, den blev tilføjet.

Du registrerer en shortcode i WordPress med funktionen add_shortcode(). Sådan gøres det:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

Funktionen til shortcoder er defineret som sådan:

function shortcode_handler_function( $atts, $content, $tag ){ }

API analyserer shortcodens tag, attributter og lukkede indhold (hvis nogen) ved at omgå værdierne til handlerfunktionen, der behandler dem og returnerer en outputstreng.

Denne outputstreng erstatter shortcodemakroen på dit websteds frontend. Hvad du i sidste ende ser i browseren er denne output.

Hvor kan du Tilføje dine Tilpassede Shortcodeskripts?

Du kan tilføje dine brugerdefinerede shortcodeskripts til temas functions.php-fil eller inkludere dem i et plugin.

Hvis du tilføjer den til en temafil, kan du køre funktionen add_shortcode() som den er.

Men hvis du tilføjer det til et plugin, anbefaler jeg dig at initialisere det først, når WordPress er indlæst fuldstændigt. Du kan sikre dig, at funktionen add_shortcode() indpakkes i en anden funktion. Dette kaldes en indpakningsfunktion:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

The add_action() function hooks the shortcodes_init function to fire only after WordPress has finished loading (it’s called the ‘init’ hook).

Sådan Opretter du en Tilpasset Shortcode i WordPress (begynderniveau)

Nu hvor vi har dækket det grundlæggende, er det tid til at oprette en brugerdefineret shortcode.

For at følge nedenstående trin skal du kendskab til at arbejde med PHP-kode og redigere dine WordPress-temafiler. Når du er færdig med selvstudiet, har du din første tilpassede WordPress-shortcode, som er klar til at affyre!

Vi starter med den mest enkle shortcode og går derefter mod mere komplekse. Nyd dine korte milepæle på din vej til shortcoder mestring!

Eksempel 1: Shortcode ved Hjælp af [current_year]

Lad os oprette en shortcode kaldet current_year], der udsender det aktuelle år på din hjemmeside.

Denne shortcode er nyttig, hvis du tilføjer indhold til dit websted, der skal opdateres hvert år. For eksempel at tilføje en copyright-meddelelse til sidens sidefod.

Jeg bruger et barebones-plugin til at tilføje mine shortcode-funktioner. Du kan tilføje det til dit temas functions.php-fil og få de samme resultater, men jeg anbefaler det ikke. Det er dog OK at teste og lære!

Info

Tag en backup, før du foretager ændringer på dit websted. Kinsta leverer automatiske backups til alle sine kunder

Lad os komme i gang ved at oprette et plugin. Opret en ny mappe i dit /wp-content/plugins/ bibliotek.

Bemærk placeringen af plugin-biblioteket

Bemærk placeringen af plugin-biblioteket

Jeg navngiver mit plugin “salcodes”, men du kan navngive det, hvad du vil.

Opret en PHP-fil med det samme navn i salcodes plugin-biblioteket (salcodes.php). Når det er gjort, skal du tilføje følgende header til din plugins fil:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Denne enkle plugin-header er god nok til vores formål. Du kan lære mere om krav til plugin-header i WordPress Codex. Gem denne fil, og gå derefter til dit WordPress-dashboard for at aktivere pluginet.

Lad os registrere shortcoden og dens behandlingsfunktion. For at gøre det, tilføj følgende kode til din plugin-fil:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

Gem din plugin-fil. Det er nu tid til at teste, om shortcoden fungerer som tilsigtet.

Tilføj shortcoden overalt på dit websted (side, indlæg, sidebar-widget osv.). Jeg tilføjer det til mit websteds sidebar tekst-widget.

Test af den tilpassede shortcode ved at tilføje den til webstedet.

Test af den tilpassede shortcode ved at tilføje den til webstedet.

Og som forventet fungerer det perfekt.

Output af årets shortcode

Output af årets shortcode

Tillykke med at nå din første milepæl!

Den shortcode, du lige har oprettet, har ikke nogen $attributs eller $content variabler tilknyttet den. Du lærer, hvordan du bruger dem i de følgende eksempler.

Eksempel 2: Shortcode til en CTA-knap

Lad os oprette en tilpasset CTA-knap-kode. Denne lukker også selv (beklager $content, du skal holde igen til næste gang).

Jeg ønsker, at brugere skal kunne tilpasse CTA-knappens størrelse og farve med shortcode-attributterne.

Da den endelige output er et knap-element, kan dets HTML-attributter som href, id, class, target & label bruges til at tilpasse det med lethed.

Træt af en langsom vært for dit WordPress-site? Vi leverer lynhurtige servere og 24/7 support i verdensklasse fra WordPress-eksperter. Tjek vores planer

Du kan bruge id- og class attributterne til at style knappen, da de begge er almindelige CSS-vælgere.

Jeg indpakker ikke min handler funktionen her for at holde tingene lette at forklare.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, der er meget at pakke ud her. Jeg får forklare det linje for linje, så du kan forstå, hvordan det fungerer.

Lad os prøve at bruge shortcoden som den er, uden attributter defineret, og se, hvad der er angivet.

Jeg tilføjer shortcoden til en sidebar tekst-widget for at teste den.

Jeg tilføjer shortcoden til en sidebar tekst-widget for at teste den.

Hvis du undrer dig over, hvad de dobbelte firkantede parenteser er beregnet til ([[cta_button]]), kaldes de en escaping shortcode. De hjælper dig med at udskrive enhver registreret shortcode på dit websted som almindelig tekst, som på billedet herunder.

Output af CTA-knap shortcode, der viser, at den fungerer perfekt som forventet

Output af CTA-knap shortcode, der viser, at den fungerer perfekt som forventet

HTML-output fra CTA-knappen uden attributter.

HTML-output fra CTA-knappen uden attributter.

Brugere kan tilpasse størrelsen og farven på knappen med shortcoden. Vi indstiller allerede deres standardværdier i behandlingsfunktionen, men vi er nødt til at registrere og indstille stylesheet til listen over tilgængelige ressourcer. Dette stylesheet skal have alle klasser defineret i shortcoden.

Du kan også indstille disse klasser i dit temas globale stylesheet, men det anbefales at indlæse dem separat. Dette sikrer, at selv hvis du ændrer eller opdaterer dit WordPress-tema, indlæses disse klasser stadig sammen med shortcoden.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Funktionen salcodes_enqueue_scripts() definerer den globale variabel $post og bekræfter derefter to betingelser via:

Hvis begge betingelser er rigtige, registrerer og udskriver funktionen style.css stylesheet, der er inkluderet i CSS-mappen. Funktionen plugin_dir_url($ fil) gør det nemt at få URL’en til plugin-biblioteket.

Jeg vil ikke vise dig CSS-koden her, men du kan finde den i kildekoden, der er knyttet til slutningen af dette afsnit.

Lad os til sidst teste [cta_button] -koden ved at tilføje den til indholdet af indlægget:

Bemærk det tilpassede link, farve, størrelse og etiketattributter.

Bemærk det tilpassede link, farve, størrelse og etiketattributter.

Billedet herunder viser, hvordan CTA-knappen ser ud på fronten:

CTA-knappen har nu en ny URL, farve, størrelse og etiket.

CTA-knappen har nu en ny URL, farve, størrelse og etiket.

Nu, hvor du har lært, hvordan du definerer tilpassede attributter og inkluderer stylesheets, kan du føje forskellige andre funktionaliteter til din CTA-knapkode. For eksempel kan du give dine brugere muligheden for at tilføje animationer, hover-effekter og forskellige andre knapformater.

Eksempel 3: Shortcode ved Hjælp af $content

For vores sidste eksempel, lad os opbygge en lukkende shortcode kaldet [boxed], der udsender alt indhold mellem dets tags i en boks med farverige titler.

Lad os komme i gang ved at registrere shortcoden og definere dens handler funktion.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

I dette eksempel ændrer vi indholdet ved hjælp af inline CSS-stylesheets.

Styles for alle klasser, der er brugt inden for shortcoden, registreres og indvindes, som vi gjorde i det forrige shortcodeksempel.

Men at have to shortcoder bruge det samme stylesheet betyder, at du skal indlæse det, hvis en af dem bruges. Så lad os opdatere funktionen salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Lad os tage vores [boxed] shortcode ud på en tur.

Tilføj den boksede shortcode sammen med en titel, titel_farve og farveattributter.

Tilføj den boksede shortcode sammen med en titel, titel_farve og farveattributter.

Skærmbillede nedenfor viser den output, vi får.

Det er slet ikke så svært at få en smuk boks!

Det er slet ikke så svært at få en smuk boks!

Nu, hvor du har lært, hvordan du opretter dine egne shortcoder, kan du tænke ud af [boksen] og give dem dit eget spin. Glem ikke at dele dine kreationer med os!

Hvis du vil, kan du downloade kildekoden Shortcode Plugin herfra.

WordPress-shortcoder: Fordele imod Ulemper

Fordelene

Ulemperne

Shortcodes og Gutenberg Blocks

Introduktion af Gutenberg reducerede ønsket om shortcoder. Brugere kan nu tilføje blokke direkte fra redigeringsgrænsefladen i stedet for at håndtere shortcodemarkeringer, uanset hvor enkelt det er.

Og hvis du vil tilføje kortnumre, kommer Gutenberg endda med en dedikeret blok til at tilføje shortcoder. Blokke er de nye shortcoder.

“Hvis du kunne gøre det med shortcoder, kan du gøre det som en blok.” – James Huff, lykkeingeniør hos Automattic

Det forklarer, hvorfor alle de populære shortcodes konverteres til blokke. Mange WordPress-udviklere er skiftet hen imod at få deres produkter og tjenester udelukkende til at arbejde sammen med blokeditoren (Gutenberg).

Men det betyder ikke, det er verdens ende for shortcoder. WordPress-kerneteamet har lovet mange forbedringer af blokeditoren, som du kunne se i Twenty Twenty, men indtil da er shortcoder her for at blive!

Lav mere med mindre, siger du? Det er muligt med WordPress-shortcoder! Lær, hvad de er, og hvordan du opretter dine egne med denne dybdegående guide. Livet er for kort til ikke at bruge shortcodes〚〛💪Click to Tweet

Resumé

Det er nemt at tilføje kompleks funktionalitet overalt til dit WordPress-sted med shortcoder. De giver brugerne easy-to-type tags, der kan bruges uden at bekymre sig om at rode med komplekse koder.

Selvom der muligvis ikke er nogen genveje i livet, er der bestemt mange genveje, du kan bruge i WordPress. Mine favoritter er Shortcodes Ultimate og Shortcodes af Angie Makes.

Og hvis du ikke kan finde den, du leder efter, kan du oprette en selv.

Du kan endda tage en genvej for at oprette din brugerdefinerede genvej ved hjælp af Shortcoder-plugin. Det tager sig af alle de vigtigste ting for dig. Og husk: livet er kort, brug shortcoder!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer