Se stai sviluppando un sito WordPress per un cliente, è probabile che avrai degli shortcode da far usare ai tuoi clienti. Il problema è che molti principianti non sanno come aggiungere shortcode e se ci sono parametri complessi coinvolti, allora è ancora più difficile. Shortcake fornisce una soluzione aggiungendo un'interfaccia utente per gli shortcode. In questo articolo, ti mostreremo come aggiungere un'interfaccia utente per gli shortcode in WordPress con Shortcake.
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 un utente deve inserire parametri per la personalizzazione.
Ad esempio, in un tipico tema WordPress, se c'è uno shortcode per inserire un pulsante, l'utente dovrà probabilmente aggiungere almeno da due a cinque parametri. Come questo:
[themebutton url=”http://example.com” title=”Scarica ora” color=”purple” target=”newwindow”]
Shortcake è un plugin di WordPress e una funzionalità futura proposta per WordPress. Mira a risolvere questo problema fornendo un'interfaccia utente per inserire questi valori. Ciò renderà gli shortcode molto più facili da usare.
Iniziare
Questo tutorial è rivolto agli utenti che sono nuovi allo sviluppo di WordPress. Anche gli utenti di livello principiante che amano modificare i propri temi WordPress troveranno utile questo tutorial.
Detto questo, iniziamo.
La prima cosa da fare è installare e attivare il plugin Shortcake (Shortcode UI).
Ora avrai bisogno di uno shortcode che accetti alcuni parametri di input dell'utente. Se hai bisogno di un piccolo ripasso, ecco come aggiungere uno shortcode in WordPress.
Ai fini di 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, e puoi usarlo aggiungendolo al file functions del tuo 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>';
}
Dovrai anche aggiungere del CSS per stilizzare il tuo pulsante. Puoi usare questo CSS nel foglio di stile del tuo tema.
.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}
Ecco come un utente utilizzerà lo shortcode nei suoi post e pagine:
[cta-button title="Scarica ora" url="http://example.com"]
Ora che abbiamo uno shortcode che accetta parametri, creiamo un'interfaccia utente per esso.
Registrazione dell'interfaccia utente del tuo shortcode con Shortcake
L'API di Shortcake ti consente di registrare l'interfaccia utente del tuo shortcode. Dovrai descrivere quali attributi accetta il tuo shortcode, i tipi di campi di input e quali tipi di post mostreranno l'interfaccia utente dello shortcode.
Ecco uno snippet di codice di esempio che utilizzeremo per registrare l'interfaccia utente del nostro shortcode. Abbiamo cercato di spiegare ogni passaggio con commenti inline. Puoi incollarlo nel file functions del tuo tema o in un plugin specifico per il 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' ), ) );
Questo è tutto, ora puoi vedere l'interfaccia utente dello shortcode in azione modificando un post. Fai semplicemente clic sul pulsante Aggiungi media sopra l'editor di un post. Questo aprirà l'uploader multimediale dove noterai una nuova voce 'Inserisci elemento post' nella colonna di sinistra. Facendo clic su di essa, verrà visualizzato un pulsante per inserire il tuo codice.
Facendo clic sulla miniatura contenente l'icona della lampadina e l'etichetta shortcake, verrà visualizzata l'interfaccia utente dello shortcode.
Aggiungere uno Shortcode con Input Multipli
Nel primo esempio, abbiamo utilizzato uno shortcode molto basilare. 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 aggiungeremo lo shortcode. È quasi lo stesso shortcode, tranne 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à pulsanti di diversi colori, dovremo aggiornare anche il nostro CSS. Puoi usare questo CSS nel foglio di stile del tuo 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 è registrare l'interfaccia utente dello shortcode. Utilizzeremo essenzialmente lo stesso codice, tranne per il fatto che 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 qui, ora puoi modificare un post o una pagina e fare clic sul pulsante Aggiungi media. Noterai il tuo shortcode appena aggiunto sotto 'Inserisci elementi post'.
Facendo clic sul tuo shortcode appena creato, verrà visualizzata l'interfaccia utente dello shortcode, dove puoi semplicemente inserire i valori.
Puoi scaricare il codice utilizzato in questo tutorial come plugin.
Abbiamo incluso il CSS, quindi puoi usarlo per studiare o per aggiungere i tuoi pulsanti di call to action in WordPress utilizzando un'interfaccia utente più semplice. Sentiti libero di modificare il sorgente e giocarci.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un'interfaccia utente per gli shortcode in WordPress con Shortcake. Potresti anche voler dare un'occhiata a questi 7 consigli essenziali per l'utilizzo degli shortcode in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Waqar
ciao, voglio modificare la casella di ricerca del mio tema wordpress. perché la casella di ricerca del tema non cerca in tutto il sito tranne che nel titolo del post/prodotto. per favore aiutami a risolvere questo problema.
Supporto WPBeginner
Dai un'occhiata alla nostra lista di plugin di ricerca WordPress per migliorare la ricerca del tuo sito
Amministratore