Come aggiungere un’interfaccia utente per gli shortcode in WordPress con Shortcake

Se state sviluppando un sito WordPress per un cliente, è probabile che abbiate degli shortcode da far utilizzare ai vostri clienti. Il problema è che molti principianti non sanno come aggiungere gli shortcode e, se ci sono parametri complessi, è ancora più difficile. Shortcake fornisce una soluzione aggiungendo un’interfaccia utente per gli shortcode. In questo articolo vi mostreremo come aggiungere un’interfaccia utente per gli shortcode in WordPress con Shortcake.

Che cos’è Shortcake?

WordPress offre un modo più semplice per aggiungere codice eseguibile all’interno di post e pagine utilizzando gli shortcode. Molti temi e plugin di WordPress consentono agli utenti di aggiungere funzionalità aggiuntive utilizzando gli shortcode. Tuttavia, a volte questi shortcode possono diventare complicati quando l’utente deve inserire dei parametri per la personalizzazione.

Per esempio, in un tipico tema WordPress, se c’è uno shortcode per inserire un pulsante, l’utente dovrà probabilmente aggiungere da due a cinque parametri. Ad esempio:

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

Shortcake è un plugin di WordPress e una proposta di funzionalità futura di WordPress. Mira a risolvere questo problema fornendo un’interfaccia utente per inserire questi valori. Questo renderà gli shortcode molto più facili da usare.

Per iniziare

Questo tutorial è rivolto agli utenti che sono alle prime armi con lo sviluppo di WordPress. Anche gli utenti principianti che amano modificare i propri temi WordPress troveranno utile questa guida.

Detto questo, iniziamo.

La prima cosa da fare è installare e attivare il plugin Shortcake (Shortcode UI).

Ora avrete bisogno di uno shortcode che accetti alcuni parametri di input dell’utente. Se avete bisogno di un ripasso, ecco come aggiungere uno shortcode in WordPress.

Per questo tutorial utilizzeremo un semplice shortcode che consente agli utenti di inserire un pulsante nei loro post o pagine di WordPress. Ecco il codice di esempio per il nostro shortcode, che potete utilizzare aggiungendolo al file functions del vostro tema o in un plugin specifico per il sito.

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>';
}

È inoltre necessario aggiungere alcuni CSS per creare lo stile del pulsante. È possibile utilizzare questo CSS nel foglio di stile del tema.

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

Questo è il modo in cui un utente utilizzerà lo shortcode nei suoi post e nelle sue pagine:

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

Ora che abbiamo uno shortcode che accetta parametri, creiamo un’interfaccia utente per esso.

Registrazione dell’interfaccia utente dello shortcode con Shortcake

L’API di Shortcake consente di registrare l’interfaccia utente del proprio shortcode. È necessario descrivere quali attributi accetta lo shortcode, i tipi di campi di input e quali tipi di post mostreranno l’interfaccia utente dello shortcode.

Ecco un esempio di codice che utilizzeremo per registrare l’interfaccia utente del nostro shortcode. Abbiamo cercato di spiegare ogni passaggio con commenti in linea. È possibile incollarlo nel file delle funzioni del proprio tema o in un plugin specifico del sito.

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' ), 
)
);

È tutto, ora potete vedere l’interfaccia utente dello shortcode in azione modificando un post. È sufficiente fare clic sul pulsante Aggiungi media sopra l’editor di un post. Verrà visualizzato il caricatore di media, dove noterete una nuova voce “Inserisci elemento del post” nella colonna di sinistra. Facendo clic su di essa, apparirà un pulsante per inserire il codice.

Facendo clic sulla miniatura contenente l’icona della lampadina e l’etichetta del vostro shortcake, apparirà l’interfaccia del codice breve.

Aggiunta di shortcode con più input

Nel primo esempio, abbiamo utilizzato uno shortcode molto semplice. Ora rendiamolo un po’ più complicato e molto più utile. Aggiungiamo uno shortcode che consenta agli utenti di scegliere il colore di un pulsante.

Per prima cosa aggiungiamo lo shortcode. È quasi lo stesso shortcode, tranne che per il fatto che ora accetta l’input dell’utente per il colore.

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>';
}

Poiché il nostro shortcode mostrerà i pulsanti in colori diversi, dovremo aggiornare anche il nostro CSS. È possibile utilizzare questo CSS nel foglio di stile del tema.

.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;
}

Ecco come appariranno i pulsanti:

Ora che il nostro shortcode è pronto, il passo successivo è la registrazione dell’interfaccia utente dello shortcode. Utilizzeremo essenzialmente lo stesso codice, ma questa volta abbiamo un altro parametro per il colore e offriamo agli utenti la possibilità di scegliere tra pulsanti blu, arancioni o verdi.

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' ), 
)
);

È tutto, ora potete modificare un post o una pagina e cliccare sul pulsante Aggiungi media. Noterete lo shortcode appena aggiunto sotto “Inserisci elementi del post”.

Facendo clic sullo shortcode appena creato, si aprirà l’interfaccia dello shortcode, in cui è possibile inserire semplicemente i valori.

È possibile scaricare il codice utilizzato in questa esercitazione come plugin.

wpb-shortcake-tutorial

Abbiamo incluso il CSS, in modo che possiate utilizzarlo per studiare o per aggiungere i vostri pulsanti di chiamata all’azione in WordPress utilizzando un’interfaccia utente più semplice. Sentitevi liberi di modificare il sorgente e di giocare con esso.

Speriamo che questo articolo vi abbia aiutato a imparare come aggiungere un’interfaccia utente per i codici brevi in WordPress con Shortcake. Potreste anche dare un’occhiata a questi 7 consigli essenziali per l’utilizzo degli shortcode in WordPress.

Se vi è piaciuto questo articolo, iscrivetevi al nostro canale YouTube per i video tutorial su WordPress. Potete trovarci anche su Twitter e Facebook.