Se stai sviluppando un sito WordPress per un cliente, è probabile che tu abbia degli shortcode per quel client. Il problema è che molti neofiti non sanno come aggiungere uno shortcode e se ci sono parametri aggiunti diventa ancora più complicato. Shortcake fornisce agli utenti una soluzione semplice per aggiungere shortcode a WordPress.
In questo tutorial, ti mostrerò come aggiungere un'interfaccia shortcode su WordPress per semplificare l'aggiunta di post e pagine.
Cos'è Shortcake?
WordPress offre una funzionalità che ti consente di aggiungere codice eseguibile ad articoli e pagine tramite shortcode. Parecchi temi et plugin di WordPress consentire agli utenti di aggiungere funzionalità ai propri blog utilizzando gli shortcode. Tuttavia, questi codici brevi possono diventare molto ingombranti, il che complica la personalizzazione.
Ad esempio, con un tema WordPress di base, se è presente uno shortcode per inserire un pulsante, l'utente dovrà probabilmente inserire circa cinque parametri per lo shortcode come segue:
[pulsante url = "http://example.com" title = "Ulteriori informazioni" color = target "purple" = "newwindow"]
È qui che entra in gioco Shortcake, in quanto ti consente di gestire meglio i tuoi codici brevi.
primi passi
Questo tutorial è per gli utenti che non conoscono lo sviluppo di WordPress. Utenti a cui piace personalizzare il proprio temi troveranno interessante anche questo tutorial.
Quello che devi fare prima è installare e attivare l'estensione Shortcace (Shortcode UI).
Ora dovresti avere uno shortcode che accetta alcuni parametri. Per questo tutorial, creeremo un semplice shortcode che consente agli utenti di aggiungere pulsanti nei loro post e pagine WordPress. Questo è un semplice esempio per il nostro shortcode e puoi aggiungere questo codice nel vostro plugin o nel file functions.php del tema figlio.
add_shortcode ('cta-button', 'cta_button_shortcode'); funzione cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); ritorno ' '. $ titolo. ' '; }
Probabilmente avrai bisogno anche del codice CSS per il pulsante.
.cta-button {padding: 10px; font-size: 18px; border: solid 1px #FFF; border-radius: 7px; colore: #FFF; background-color: #50A7EC; }
Ecco come visualizzare il pulsante in questione, l'utente deve digitare il seguente shortcode:
[cta-button title = »Scarica ora» url = »http://example.com»]
Ora hai un shortcode che accetta i parametri, ora creeremo un'interfaccia per esso.
Come registrare un'interfaccia ad uno shortcode con ShortCacke
L'API di Shortcake ti consente di registrare gli shortcode nell'interfaccia utente. Deviscrivere quali attributi accetta lo shortcode, il tipo di campi e quale formato del post visualizzerà l'interfaccia utente (interfaccia utente).
Ecco un esempio di un pezzo di codice che puoi utilizzare per registrare uno shortcode nell'interfaccia utente di Shortcake.
shortcode_ui_register_for_shortcode (/ ** Your shortcode * / 'cta-button', / ** The label of your shortcode and its icon * / array (/ ** The label is required. * / 'label' => 'Add Button', / ** Icone. Src o dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode Attributes * / 'attrs' => array (/ ** * Tutti i campi che accettano valori gli utenti avranno il proprio array definito come segue. * Questo shortcode accetta due parametri l'URL e il titolo * Definiremo l'interfaccia utente per il titolo. * / array (/ ** Questa etichetta verrà visualizzata nell'interfaccia utente * / 'label' => 'Title', / ** questo è l'attributo utilizzato per lo shortcode * / 'attr' => 'title', / ** Definisci il tipo di campo, sono supportati: text , casella di controllo, textarea, radio, select, email, url, number, and date. * / 'type' => 'text', / ** Add description 'description' => 'Description',), / ** Noi definiamo ora una UI per il campo link * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'URL completo',),),), / ** Il formato del post in cui visualizzare l'interfaccia utente * / 'post_type' => array ('post', 'page' ),));
Questo è tutto ciò che devi fare per visualizzare lo shortcode sull'interfaccia utente. Ora puoi iniziare a modificare un articolo per poter utilizzare lo shortcode. Tutto quello che devi fare è fare clic sul pulsante Aggiungi media. Vedrai una nuova sezione intitolata " Inserire Elemento Messaggio". Cliccandoci sopra potrai vedere i diversi shortcode che hai creato.
Cliccando sull'icona, vedrai l'interfaccia utente che ti permette di personalizzare lo shortcode.
Come aggiungere uno shortcode con diversi campi
Nel primo esempio, abbiamo usato uno shortcode piuttosto semplice. Ora renderemo le cose un po 'più complicate e più utili. Aggiungeremo uno shortcode che consente agli utenti di scegliere il colore del pulsante.
Per prima cosa aggiungeremo lo shortcode. È essenzialmente lo stesso codice di quello sopra, l'unica eccezione è che aggiungeremo un campo per il colore.
add_shortcode ('mybutton', 'my_button_shortcode'); funzione my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); ritorno ' '. $ titolo. ' '; }
Poiché il nostro shortcode mostra pulsanti di diversi colori, dovremo aggiornare anche il nostro codice CSS.
.mybutton {padding: 10px; font-size: 18px; border: solid 1px #FFF; border-radius: 7px; colore: #FFF; } .blue-pulsante {background-color: #50A7EC; } .orange-pulsante {background-color: #FF7B00; }-Button .green {background-color: #29B577; }
Ecco come apparirà questo pulsante.
Ora che il nostro shortcode è pronto, il passo successivo è registrarlo su Shortcake. Useremo lo stesso codice, la differenza qui è che forniremo un parametro aggiuntivo per visualizzare un campo di colore.
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 un pulsante colorato ", / ** Icona o un'immagine allegata per lo shortcode. Facoltativo. src o dashicons- $ icon. * /" listItemImage "=>" dashicons-flag ", / ** Attributi dello shortcode * /" attrs "=> array (/ ** * Ogni attributo che accetta l'input dell'utente avrà il proprio array definito in questo modo * Il nostro shortcode accetta due parametri o attributi, titolo e URL * Definiamo prima l'interfaccia utente per il campo del titolo. * / array (/ ** Questo l'etichetta apparirà nell'interfaccia utente * / 'label' => 'Title', / ** Questo è l'attr effettivo utilizzato nel codice utilizzato per shortcode * / 'attr' => 'title', / ** Definisci il tipo di input. I tipi supportati sono text, checkbox, textarea, radio, select, email, url, number e date. * / 'Type' => 'text', / ** Aggiungi una descrizione utile per gli utenti * / 'description' => ' Inserisci il testo del pulsante ',), / ** Now we definirà l'interfaccia utente per il campo URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Infine definiremo l'interfaccia utente per la selezione del colore * / array ('label' => 'Color', 'attr' => 'color', / ** Useremo il campo di selezione invece del testo * / 'type' => 'select', 'options' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** Tu può selezionare quali tipi di post mostreranno lo shortcode dell'interfaccia utente * / 'post_type' => array ('post', 'page'),));
È tutto ! Ora quando modifichi o scrivi un post sarai in grado di vedere il nuovo shortcode, sempre nella stessa sezione della finestra dei media.
Facendo clic sul nuovo shortcode, verrà visualizzata l'interfaccia di personalizzazione dello shortcode e sarà possibile specificare i valori.
Questo è tutto per questo tutorial. Spero che ti aiuti a creare un'interfaccia migliore per i tuoi codici brevi su WordPress. Buon anno a te!
