Hur man lägger till ett användargränssnitt för kortkoder i WordPress med Shortcake

Om du utvecklar en WordPress-webbplats för en kund, är det troligt att du kommer att ha kortkoder som dina kunder kan använda. Problemet är att många nybörjare inte vet hur man lägger till kortkoder, och om det finns komplexa parametrar inblandade, blir det ännu svårare. Shortcake erbjuder en lösning genom att lägga till ett användargränssnitt för kortkoder. I den här artikeln visar vi hur du lägger till ett användargränssnitt för kortkoder i WordPress med Shortcake.

Vad är Shortcake?

WordPress erbjuder ett enklare sätt att lägga till exekverbar kod inuti inlägg och sidor genom att använda kortkoder. Många WordPress-teman och plugins tillåter användare att lägga till ytterligare funktionalitet med hjälp av kortkoder. Ibland kan dessa kortkoder dock bli komplicerade när en användare behöver ange parametrar för anpassning.

Till exempel, i ett typiskt WordPress-tema om det finns en kortkod för att infoga en knapp, då kommer användaren troligen att behöva lägga till minst två till fem parametrar. Som detta:

[themebutton url="http://example.com" title="Ladda ner nu" color="purple" target="newwindow"]

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

Komma igång

Den här handledningen riktar sig till användare som är nya inom WordPress-utveckling. Nybörjare som gillar att anpassa sina WordPress-teman skulle också finna denna handledning användbar.

Med det sagt, låt oss börja.

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

Du behöver nu en kortkod som accepterar några parametrar för användarinmatning. Om du behöver en liten repetition, här är hur man lägger till en kortkod i WordPress.

För den här handledningens skull kommer vi att använda en enkel kortkod som låter användare infoga en knapp i sina WordPress-inlägg eller sidor. Här är exempelkoden för vår kortkod, och du kan använda denna genom att lägga till den i ditt temas functions-fil eller i ett webbplatsspecifikt 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 behöver också lägga till lite CSS för att styla din knapp. Du kan använda denna CSS i ditt temas stilmall.

.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 kortkoden i sina inlägg och sidor:

[cta-button title="Ladda ner nu" url="http://example.com"]

Nu när vi har en kortkod som accepterar parametrar, låt oss skapa ett UI för den.

Registrera ditt Shortcode-användargränssnitt med Shortcake

Shortcake API låter dig registrera din shortcodes användargränssnitt. Du måste beskriva vilka attribut din shortcode accepterar, vilka typer av inmatningsfält som finns och vilka inläggstyper som ska visa shortcode-UI:t.

Här är ett exempel på kodavsnitt som vi kommer att använda för att registrera vårt kortkodsgränssnitt. Vi har försökt att förklara varje steg med kommentarer i koden. Du kan klistra in detta i ditt temas functions-fil eller i ett webbplatsspecifikt 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 var allt, du kan nu se kortkodens användargränssnitt i praktiken genom att redigera ett inlägg. Klicka helt enkelt på knappen Lägg till media ovanför en inläggsredigerare. Detta öppnar medieuppladdaren där du kommer att märka ett nytt objekt 'Infoga inläggselement' i den vänstra kolumnen. Att klicka på det visar dig en knapp för att infoga din kod.

Att klicka på miniatyren som innehåller ikonen med glödlampan och din shortcake-etikett visar dig shortcode-UI:t.

Lägga till kortkod med flera indata

I det första exemplet använde vi en mycket grundläggande kortkod. Låt oss nu göra den lite mer komplicerad och mycket mer användbar. Låt oss lägga till en kortkod som låter användare välja en knappfärg.

Först lägger vi till shortcoden. Det är nästan samma shortcode, förutom att den nu accepterar användarinmatning 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 kortkod kommer att visa knappar i olika färger, måste vi också uppdatera vår CSS. Du kan använda denna CSS i ditt temas stilmall.

.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 se ut:

Nu när vår kortkod är klar är nästa steg att registrera kortkodsgränssnittet. 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ändarna 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 var allt, du kan nu redigera ett inlägg eller en sida och klicka på knappen Lägg till media. Du kommer att märka din nyligen tillagda kortkod under 'Infoga inläggselement'.

Att klicka på din nygenererade kortkod kommer att visa kortkodsgränssnittet, där du enkelt kan ange värdena.

Du kan ladda ner koden som används i den här handledningen som ett plugin.

wpb-shortcake-tutorial

Vi har inkluderat CSS, så du kan använda den för att studera eller använda den för att lägga till dina egna call to action-knappar i WordPress med ett enklare användargränssnitt. Modifiera gärna källkoden och lek med den.

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

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videohandledningar. Du kan också hitta oss på Twitter och Facebook.