Så här addar du ett shortcode-användargränssnitt i WordPress med Shortcake

Om du utvecklar en site i WordPress för en kund är det troligt att du kommer att ha shortcodes som dina kunder kan använda. Problemet är att många Beginnare inte vet hur man addar shortcodes och om det är komplexa parametrar inblandade blir det ännu svårare. Shortcake tillhandahåller en lösning genom att lägga till ett användargränssnitt för shortcodes. I den här artikeln visar vi hur du addar ett användargränssnitt för shortcodes i WordPress med Shortcake.

Vad är Shortcake?

WordPress erbjuder ett enklare sätt att add to körbar kod i posts och pages genom att använda shortcodes. Många teman och tillägg till WordPress allow användare att add to ytterligare funktionalitet med hjälp av shortcodes. Ibland kan dock dessa shortcodes bli komplicerade när en användare behöver enter parametrar för customize.

Om det t.ex. i ett vanligt WordPress-tema finns en shortcode för att enter en knapp, måste användaren förmodligen add to minst två till fem themes. Like this:

[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]

Shortcake är ett plugin för WordPress och en föreslagen framtida utvald funktion för WordPress. Det syftar till att lösa detta problem genom att tillhandahålla ett användargränssnitt för att enter dessa värden. Detta kommer att göra shortcodes mycket enklare att använda.

Kom igång

Denna tutorial vänder sig till användare som är new to WordPress utvecklare. Användare på Beginner-nivå som gillar att tweaka sina WordPress teman kommer också att finna denna tutorial användbar.

Med det sagt, låt oss komma igång.

Det första du behöver göra är att installera och aktivera pluginet Shortcake (Shortcode UI).

Du behöver nu en shortcode som godkänner några parametrar för användarens inmatning. Om du behöver en liten uppdatering, här är hur du addar en shortcode i WordPress.

I den här tutorialen kommer vi att använda en enkel shortcode som tillåter användare att insert en knapp i sina WordPress-poster eller pages. Här är exempelkoden för vår shortcode, och du kan använda den genom att lägga till den i ditt temas functions-fil eller i ett site-specifikt plugin.

add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Du kommer också att behöva add to lite CSS för att styla din knapp. Du kan använda denna CSS i ditt temas stylesheet.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

Så här kommer en användare att använda shortcoden i sina posts och pages:

[cta-button title="Download Now" url="http://example.com"]

Nu när vi har en shortcode som godkänner parametrar, låt oss skapa ett användargränssnitt för den.

Registrera ditt shortcode-användargränssnitt med Shortcake

Shortcake API tillåter dig att registrera din shortcodes användargränssnitt. Du måste beskriva vilka attribut din shortcode godkänner, typer av input field och vilka post typer som kommer att visa shortcode UI.

Här är ett exempel på code snippet som vi kommer att använda för att registrera vår shortcodes användargränssnitt. Vi har försökt att förklara varje steg med inline comments. Du kan klistra in detta i ditt temas functions-fil eller i ett site-specifikt plugin.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Det är all, du kan nu se shortcode användargränssnittet i action genom att editera ett post. Klicka bara på knappen Add Media ovanför en post editor. Detta kommer att ta upp mediauppladdaren där du kommer att märka ett nytt objekt ”Insert Post Element” i den vänstra kolumnen. Om du klickar på den visas en knapp för att insert din kod.

Clicking on the thumbnail containing the lightbulb icon and your shortcake label will show you the shortcode UI.

Lägga till shortcode med flera inmatningar

I det första exemplet använde vi en mycket grundläggande shortcode. Nu gör vi det lite mer komplicerat och mycket mer användbart. Låt oss add to en shortcode som tillåter användare att välja en färg på knappen.

Först ska vi add to shortcoden. Det är nästan samma shortcode, förutom att den nu accepterar användarens inmatning för färg.

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Eftersom vår shortcode kommer att visa knappar i olika färger så kommer vi att behöva update vår CSS också. Du kan använda denna CSS i ditt temas stylesheet.

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

Så här kommer knapparna att gilla att se ut:

Nu när vår shortcode är klar är nästa steg att registrera shortcode UI. Vi kommer att använda i stort sett samma kod, förutom att vi den här gången har en annan parameter för färg och vi erbjuder användare att välja mellan blå, orange eller gröna knappar.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Det är all, du kan nu edit ett post eller page och klicka på knappen Add Media. You will notice your newly added shortcode under ”Insert Post Elements”.

Click on your newly created shortcode will bring up the shortcode UI, where you can simply enter the values.

Du kan downloada koden som används i denna tutorial som ett plugin.

wpb-kortkaka-tutorial

Vi har inkluderat CSS, så du kan använda den för att studera eller använda den för att add to your egen call-to-action knappar i WordPress med ett enklare användargränssnitt. Känn dig gratis att ändra källan och leka med den.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar ett användargränssnitt för shortcodes i WordPress med Shortcake. Du kanske också vill ta en titt på dessa 7 viktiga tips för att använda shortcodes i WordPress.

Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du hittar oss också på Twitter och Facebook.