Vai al contenuto principale

Come aggiungere un'interfaccia shortcode su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 in post e pagine tramite shortcode. Diversi temi e plug-in di WordPress consentono agli utenti di aggiungere funzionalità ai propri blog utilizzando codici brevi. Tuttavia, questi codici brevi possono diventare molto difficili da usare, il che rende difficile 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.

shortcake-panetteria-plugin

primi passi

Questo tutorial è per gli utenti che sono nuovi allo sviluppo di WordPress. Gli utenti a cui piace personalizzare i propri temi troveranno interessante 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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 Shortcake ti consente di salvare i codici brevi nell'interfaccia utente. È necessario descrivere quali attributi accetta lo shortcode, il tipo di campi e il formato del post che 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.

insertpostelement

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Cliccando sull'icona, vedrai l'interfaccia utente che ti permette di personalizzare lo shortcode.

shortcodeui

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.

pulsanti colorati-shortcode

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.

postelements

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Facendo clic sul nuovo shortcode, verrà visualizzata l'interfaccia di personalizzazione dello shortcode e sarà possibile specificare i valori.

colorui

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!

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota7
Tweet
Enregistrer