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 600.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Se sviluppi un sito WordPress per un client, è probabile che tu abbia degli shortcode. Il problema è che molti principianti non sanno come aggiungere uno shortcode e se ci sono parametri aggiunti diventa ancora più complicato. Shortcake offre agli utenti una soluzione semplice per aggiungere codici brevi a WordPress.

In questo tutorial, ti mostrerò come aggiungere un'interfaccia di codici brevi a WordPress per semplificare l'aggiunta di articoli e pagine.

Cosa c'è shortcake?

WordPress offre una funzione che ti consente di aggiungere codice eseguibile in articoli e pagine tramite codici brevi. Diversi temi e plugin di WordPress consentono agli utenti di aggiungere funzionalità ai propri blog utilizzando codici brevi. Tuttavia, questi codici brevi possono diventare molto difficili da gestire, il che complica la personalizzazione.

Ad esempio, con un tema WordPress di base, se è presente un codice funzione per inserire un pulsante, l'utente dovrà probabilmente riempire quasi cinque parametri per il codice funzione come segue:

[url = "http://example.com"] title = "Ulteriori informazioni" color = "purple" target = "newwindow"]

Ecco dove 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.

Che cosa si dovrebbe fare prima è per installare e attivare l'estensione Shortcace (Shortcode UI).

È ora necessario disporre di uno shortcode che accetti alcuni parametri. Per questo tutorial, creeremo un semplice shortcode che consente agli utenti di aggiungere pulsanti nei loro articoli 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-pulsante', 'cta_button_shortcode'); Funzione cta_button_shortcode ($ ATT) {estratto (shortcode_atts (array ( 'title' => 'Title', 'url' => ''), $ att)); ritorno '<span class = "CTA-button"> <a href="'. $url.'">. $ Titolo. '</a> </ span>'; }

Si avrà probabilmente bisogno anche di un codice CSS per il pulsante.

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

Così per visualizzare il pulsante in questione, l'utente dovrà 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 consente di salvare codici brevi nell'interfaccia utente. È necessario descrivere quali attributi accetta lo shortcode, il tipo di campi e quale formato di pubblicazione visualizzerà l'interfaccia utente (interfaccia utente).

Ecco un esempio di un pezzo di codice che è possibile utilizzare per registrare uno shortcode in un'interfaccia utente di pastafrolla.

shortcode_ui_register_for_shortcode (/ ** Il tuo shortcode * / 'cta-button', / ** L'etichetta del tuo shortcode e la sua icona * / array (/ ** L'etichetta è obbligatoria. * / 'label' => 'Aggiungi pulsante', / ** Icona .src o dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Attributi shortcode * / 'attrs' => array (/ ** * Tutti i campi che accettano valori gli utenti avranno la propria tabella definita come segue. * Questo shortcode accetta due parametri l'URL e il titolo * Definiremo l'interfaccia utente per il titolo. * / array (/ ** Questa etichetta verrà visualizzata sull'interfaccia utente * / 'label' => 'Title', / ** questo è l'attributo usato per lo shortcode * / 'attr' => 'title', / ** Set field type, sono supportati: text , casella di controllo, area di testo, radio, selezionare, e-mail, url, numero e data. * / 'type' => 'text', / ** Aggiungi una descrizione 'description' => 'Description',), / ** We ora definiamo un'interfaccia utente per il campo di collegamento * / array ('label' => 'URL', 'attr' => 'url', 'typ e '=>' text ',' description '=>' Full URL ',),),), / ** Il formato di pubblicazione su cui visualizzare l'interfaccia utente * /' post_type '=> array (' post ', 'pagina')));

Questo è tutto ciò che devi fare per visualizzare lo shortcode nell'interfaccia utente. Ora puoi iniziare a modificare un elemento per utilizzare lo shortcode. Tutto quello che devi fare è fare clic sul pulsante Aggiungi media. Vedrai una nuova sezione chiamata " Inserire Elemento Messaggio". Cliccandoci sopra potrai vedere i diversi shortcode che hai creato.

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]

insertpostelement

Facendo clic sull'icona, vedrai l'interfaccia utente che ti consente 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.

Aggiungeremo prima lo shortcode. Questo è 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 ($ ATT) {estratto (shortcode_atts (array ( 'colore' => 'blu', 'title' => 'Title', 'url' => ''), $ att)); ritorno '<span class = "myButton. $ colore.' tasto"> <a href="'. $url.'">. $ Titolo. '</a> </ span>'; }

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 (/ ** La maniglia shortcode * / 'myButton' / ** L'etichetta shortcode e icona * / array (/ ** shortcode Etichetta per l'interfaccia utente. è richiesto Questo quota. * / 'label' => 'Aggiungi un pulsante colorato '/ ** icona o un allegato di immagini per shortcode. opzionale. src oro icona $ dashicons-. * /' listItemImage '=>' dashicons-bandiera '/ ** * shortcode ATTRIBUTI /' attrs' => array (/ ** * Ogni attributo che accetta l'input dell'utente sarà have itti propria matrice definita come questo * il nostro codice funzione accetta due parametri o attributi, titolo e l'URL * Consente innanzitutto definire l'interfaccia utente per il campo del titolo. * / array (/ ** questo etichetta appariranno nell'interfaccia utente * / 'label' => 'titolo', / ** Questo è l'attr effettivamente utilizzato nel codice usato per shortcode * / 'attr' => 'titolo', / ** Definire tipo di ingresso. tipi supportati sono testo, checkbox, textarea, radio, selezionare, e-mail, URL, il numero e la data. * / 'tipo' => 'text' / ** aggiungere una descrizione utile per gli utenti * / 'description' => ' si prega di inserire il pulsante di testo '), / ** Ora definirà UI nel campo URL * / array ( 'label' => 'URL', 'attr' => 'url', 'type' => 'testo', 'description' => 'URL completa'), / ** Infine definiremo l'interfaccia utente per la selezione del colore * / array ( 'label' => 'colore', 'attr' => 'colore', / ** Useremo INVECE selezionare il campo di testo * / 'tipo' => 'selezionare' opzioni => array ( 'blu' => 'blue', 'arancione' => 'arancione', 'verde' => 'verde'))) / ** È può selezionare qui tipo alberino shortcode mostrerà UI * / 'post_type' => array ( 'post', 'pagina')));

Questo è tutto! Ora, quando modifichi o scrivi un articolo, sarai in grado di vedere il nuovo shortcode, sempre nella stessa sezione della finestra multimediale.

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]

postelements

Facendo clic sul nuovo shortcode verrà visualizzata l'interfaccia di personalizzazione dello shortcode ed è possibile specificare i valori.

colorui

Questo è tutto per questo tutorial. Spero che ti aiuterà 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