Torsdag v23 – WordPress shortcodes

Vad är en shortcode?

En shortcode i WordPress är till för att erbjuda redaktörer ett snabbt sätt att lägga till avancerat innehåll på deras sajt utan att behöva skriva någon kod. En shortcode defineras av hakparenteser ([]) samt ett namn.

Låt oss säga att vi har skapat en shortcode med namnet ”user-favourites” som kan lista en användares favoritinlägg, då hade en redaktör kunnat använda denna shortcode i sina inlägg genom att lägga in

[user-favourites]

var som helst i ett inläggs brödtext. Med andra ord kan du som utvecklare erbjuda dina användare tillgång till avancerad funktionalitet genom att skapa shortcodes åt dem.

Skapa en shortcode i kod

Att skapa en ny shortcode i WordPress är väldigt enkelt. Genom att använda add_shortcode() kan du snabbt registrera en shortcode samt en ”handler”, en funktion som hanterar din shortcode. WordPress hanterar allting kring att upptäcka samt ersätta alla shortcodes med returen av din ”handler” funktion.

// Registering a simple shortcode
// usage: [simple]
function simple_shortcode( $attrs ) {
  return "Hello World!";
}
add_shortcode( 'simple', 'simple_shortcode' );

Shortcode attribut

Precis som HTML taggar kan shortcode-taggar ha attribut. Attributen bestäms av pluginnet som definerar shortcoden och används för att skicka information till shortcoden som den sedan kan använda. I koden skickas alla shortcode attribut in som parameter 1 till din ”handler” funktion.

// Creates a button with a default class "btn-default"
// that can be overridden by users
// usage: [user-button]
function user_button_shortcode( $attrs ) {
  $a = shortcode_atts( array(
    'class' => 'btn-default',
  ), $attrs );

  return "<div class='btn {$a['class']}'>A user button!</div>";
}
add_shortcode( 'user-button', 'user_button_shortcode' );

Shortcode innehåll

Men vad händer om du vill ha innehåll inuti din shortcode? Ett annat sätt att skriva en shortcode på är:

[content-code]Your post content goes here.[/content-code]

I din WordPress plugin kan du nu plocka upp allt innehåll en användare lagt in mellan shortcode-taggarna genom parameter två i din ”handler” funktion:

// Registering a simple shortcode that can display it's content
// usage: [content-code]... content ... [/content-code]
function content_code_shortcode( $attrs, $content = '' ) {
  return "<h3>The content is: </h3>" . $content;
}
add_shortcode( 'content-code', 'content_code_shortcode' );

Shortcode som skapar en Bootstrap panel

// Registering a simple shortcode that creates
// a bootstrap panel with a default heading
// usage: [bootstrap-panel heading="A heading"]Panel Content[/bootstrap-panel]
function bootstrap_panel_shortcode( $attrs, $content = '' ) {
  $a = shortcode_atts( array(
    'heading' => 'A panel',
  ), $attrs );

  // build our panel HTML
  $html = '<div class="panel panel-default">' .
            '<div class="panel-heading">' .
              $a['heading'] .
            '</div>' .
            '<div class="panel-body">' .
              $content .
            '</div>' .
          '</div>';

  return $html;
}
add_shortcode( 'bootstrap-panel', 'bootstrap_panel_shortcode' );

Använd shortcode i ett inlägg:

[bootstrap-panel heading="A new heading"]
  Some content for my panel
[/bootstrap-panel]

Läs mer om shortcodes

0 votes