Shortcode API Come Usarle

Shortcode API: Come Usarle

  Eccoci davanti ai nostri schermi pronti ad apprendere qualcosa di nuovo che riguarda il mondo WordPress. Nel dettaglio in questa puntata andremo a conoscere la Shortcode API, come usarla e perché ci sarà utile!  

La Shortcode API ci permette di creare delle scorciatoie con le quali saremo in grado di velocizzare la produzione dei nostri articoli aggiungengo blocchi di codice quasi automaticamente.

Queste scorciatoie ci permetteranno di inserire video YouTube, box per l’autore dell’articolo, una lista di articoli correlati e molto molto altro ancora semplicemente inserendo pochi caratteri! Come spesso accade in programmazione, l’unico limite è la fantasia!

Sopra sono state elencate una serie di cose che molti plugin permettono di raggiungere facilmente, ma ci sono due motivi per i quali dovremmo conoscere la Shortcode API. Primo fra tutti perché non potremmo definirci sviluppatori WordPress se non conosciamo questa API e le sue caratteristiche ed in secondo luogo perché utilizzando la Shortcode API sarete voi i padroni del vostro contenuto e decidere come e quando visualizzare un determinato effetto.

Conoscenze Necessarie

Per affrontare gli argomenti presentati in questa puntata vi servirà una semplice introduzione al linguaggio PHP e al Ciclo WordPress; se poi avete già sviluppato temi e plugin per WordPress ancora meglio, altrimenti vi spiegheremo tutto noi!

Shortcode API

Prima di passare alla parte tecnica, vorrei prendere qualche secondo spiegandovi la differenza che si presenta tra utilizzare un plugin o uno shortcode per inserire un box autore all’interno dei propri articoli.

In questi contenitori sono contenute informazioni come il nome, una foto, una descrizione e altre caratteristiche che l’utente può impostare a suo piacimento, nel caso dell’utilizzo di un plugin il suo comportamento sarà prevedibilmente questo:

  • trovato l’autore dell’articolo e le imformazioni relative
  • utilizzerà un filtro per capire dove finisce il contenuto del nostro articolo
  • successivamente inserirà il box dall’autore

Il problema di questo approccio è che con questo tipo di plugin avremo il box autore presente in ogni pagina singola del nostro sito, cosa dobbiamo fare se volessimo mostrare il box autore soltanto in alcune pagine del sito?

Possiamo utilizzare tranquillamente uno shortcode [box_autore] che svolgerà gli stessi compiti del precedente plugin, ma saremo noi a decidere quando mostrarlo aggiungendo [box_autore] alla fine dei nostri articoli.

Creare uno Shortcode

Possiamo dire che aggiungere uno shortcode assomiglia molto ad aggiungere una funzione ad un preciso filtro o azione WordPress, se questi concetti sono a voi nuovi affronteremo ben presto il discorso sugli Hook di WordPress.

Tutto quello che ci servirà per creare uno shortcode sarà creare una handler function, che si occuperà di creare la caratteristica desiderata, in questo caso il box autore, e di inviare il risultato alla funzione WordPress add_shortcode() che accetterà come parametri il nome dello shortcode e quello della handler function.

Ancora confusi per il termine handler function? ecco a voi una breve spiegazione:

Una handler function è una funzione che permette di creare determinati comportamenti da restituire ad un determinato shortcode, filtri o azioni WordPress

Cuiriosi di vedere un esempio pratico? Eccone uno a voi che vi permetterà di salutare il mondo intero!

In questo particolare caso, magari lo shortcode non sembra molto utile, ma pensate se vi foste trovati a sviluppare un banner con un CTA per promuovere qualche vostro prodotto, senza gli shortcode sarebbe stato un grosso lavoro di HTML!

Handler Function in Dettaglio

L’esempio di prima è stato molto semplice e ci ha permesso di muovere i primi passi con le handler function, adesso che sappiamo cosa sono dobbiamo anche sapere che esse accettano tre parametri differenti:

  • $attr – un array contenente qualsiasi attributo per il nostro shortcode;
  • $content – qualsiasi contenuto che potrà contenere il nostro shortcode;
  • $code – il nome dello shortcode (da usare quando la stessa funzione viene utilizzata per differenti shortcode).

Questi sono i tre parametri che possono essere accettati, ma per fortuna nostra il $code non verrà quasi mai utilizzato, a meno che non stiate costruendo qualche plugin complicato; il parametro $content verrà spesso assegnato al valore null (in questo modo permettiamo a WordPress di inserire il contenuto inserito all’interno del nostro shortcode, spiegazione a breve) quindi non ci resta altro che analizzare il parametro $attr che ci permetterà di aggiungere degli attributi ai nostri shortcode, andiamo a far luce su quest’ultimo con un esempio.

Attributi per gli Shortcode

Per capire come possono essere utilizzati gli attributi tramite gli shortcode nelle prossime righe apprenderemo come sia possibile inserire un video YouTube all’interno dei nostri articoli conoscendo semplicemente l’id del video che desideriamo mostrare, ma non c’è necessità di creare qualcosa di così avanzato.

Questi attributi ci serviranno semplicemente per passare dei dati alla nostra handler function, ad esempio in questo semplice modo possiamo passare la classe di un qualsiasi elemento HTML:

In questo modo saremo in grado di creare i div all’interno dei nostri articoli, tutto quello che dovrete fare è aggiungere questo semplice blocco di codice all’interno del vostro functions.php:

Adesso che abbiamo capito come si comportano gli attributi siamo pronti a vedere come realizzare uno shortcode in grado di mostrare un filmato YouTube:

Prometto che a breve aggiornerò il tema per permetterci di visualizzare al meglio il codice presentato, ma al momento andiamo ad analizzare quello che abbiamo appena fatto. Ovviamente abbiamo creato un shortcode che verrà inserito grazie a [yt] all’interno della handler function vogliamo passare tre parametri:

  • id – ci permetterà di identificare quale video vogliamo inserire e di comporre la URL appropriata;
  • width e height sono i due attributi dell’elemento iframe che ci permetteranno di impostare le dimensioni del nostro filmato, i valori contenuti tra virgolette rappresentano i valori di default.

Ci sarebbe da notare anche come abbiamo permesso agli utenti di agiungere le proprie didascalie del filmato. Quindi i seguenti usi del nostro shortcode saranno tutti validi:

Se aguzzate la vista potrete notare che dopo la creazione della variabile $filmato siamo andati a controllare se fosse presente del contenuto, se dovessimo trovare qualcosa lo inseriamo all’interno di un paragrafo centrale e impostiamo il suo stile ad italico. Ecco una immagine del risultato!

Video Youtube e Didascalia

Come abbiamo potuto vedere a WordPress non importa quanti attributi vogliamo passare al nostro shortcode, ci basterà estrarre i valori contenuti utilizzando le funzioni extract( shortcode_atts(), $atts) e il gioco sarà fatto! Se dichiarando la vostra handler function desiderate utilizzare un nome differente dal classico $atts potrete farlo tranquillamente, ma mi raccomando, modificate il valore all’interno della funzione extract()!

Conclusioni

Per quest’oggi abbiamo terminato ma vorrei lasciarvi con una domanda, abbiamo in programma un altra puntata relativa alla Shortcode API con la quale volevamo mostrarvi come creare un differente layout per i nostri articoli direttamente dall’editor Visuale di WordPress, cosa facciamo? Andiamo a coprire questo argomento o preferite qualcos’altro?

A voi la scelta! I commenti sono qua sotto!!

Lascia il tuo Pensiero

4 Responses to “Shortcode API: Come Usarle”

  1. marco

    Salve

    Ho inserito il codice su un sito e mi funziona, ma ho provato a inserirlo su un altro mio sito e non funziona.
    Ho sentito fire che non tutti i function.php sono fatti nello stesso modo e quindi non è detto che questo codice funzioni su tutti i template.

    Non mi funzione su questo template

    http://topwpthemes.com/dione/

    mi potreste aiutare ne ho veramente bisogno.

    Grazie

    —————————————————

    /*
    * Aggiungo fimato YouTube
    */

    function wpam_mostro_youtube($atts, $content=null){

    extract(shortcode_atts( array(
    ‘id’ => ”,
    ‘width’ => ‘560’,
    ‘height’ => ‘349’
    ), $atts));

    $filmato = ”;
    if( $content ){
    $filmato .= “”;
    $filmato .= “” . $content . ““;
    }

    return $filmato;

    }
    add_shortcode(‘yt’, ‘wpam_mostro_youtube’);
    ——————————————-

    Rispondi
    • Andrea Barghigiani

      Ciao Marco,

      a vedere dal codice che mi hai condiviso sembra che la tua variabile $filmato sia completamente vuota. Al suo interno non vai a creare l’elemento HTML iframe e per questo lo shortcode non è in grado di fr visualizzare il filmato. se non vuoi inserire le dimensioni del video, sappi che però hai bisogno del id del video da inserire all’interno dell’iframe perché altrimenti non ti sarà possibile caricare il video.

      Se ti interessa, dalle ultime versioni WordPress, è possibile caricare un video YouTube inserendo semplicemente il link all’interno dell’editor di testo. Tutto quello che ti resta da fare è copiare il link di un video YouTube, meglio se è quello preso dalla sezione Condividi, e incollarlo direttamente all’interno dell’editor.

      Salva e guarda il video incorporato all’interno del tuo articolo.

      Fammi sapere come è andata, a presto.

      Andrea

      Rispondi
      • marco

        ma io ho inserito quel codie in function php e poi nel articolo ci vado ad inserire [yt id=”BQ9YtJC-Kd8″].

        su un sito va e in questo con quel template non mi va.

        Ho provato un sacco di plugin e nessuno funziona.

        Rispondi
  2. Andrea Barghigiani

    Ciao Marco,
    ho provato a dare un’occhiata al codice del template e devo dire che in linea di massima non credo che sia direttamente lo shortcode il problema, ma non posso essere sicuro al 100%

    Ho notato che questo tema crea una Meta Box all’interno del pannello di amministrazione, dove andrai a creare le descrizioni per i vari film. Dovresti essere in grado di trovarlo con il nome Trailer, magari è questo che va in conflitto con lo shortcode.

    Il mio consiglio è quello di utilizzare la funzione nativa di questo tema e di collegare i video utilizzando gli strumenti che ti vengono messi a disposizione.

    Per qualsiasi problema mi trovi sempre qua.

    Rispondi