Creare un semplice shortcode per info box su WordPress

By 16 agosto 2017Wordpress

Requisiti

Prima di iniziare è importante avere conoscenze su:

  • WordPress e il suo ecosistema
  • Solide basi PHP

Qualora non fossero soddisfatti i requisiti, un po’ di logica e il saper fare “copia/incolla” dovrebbero bastare.

Perché creare questo shortcode?

L’obiettivo di questa guida, è dare uno stile al block quote e creare un semplice shortcode che potrà essere utilizzato in ogni pagina ed articolo del vostro tema.

Il risultato finale sarà quello di ottenere box simili a questo:

Questo è il risultato che ci aspettiamo di ottenere utilizzando lo shortcode che svilupperemo

Lo stile

Per prima cosa occorrerà aggiungere al nostro file di stile (ad esempio in style.css, presente nella cartella del tema) le seguenti righe:
.box-info{
padding: 15px;
background-color: #edf7fe;
border-left: 4px solid #bde2fb;
}
.box-alert{
padding: 15px;
background-color: #fdf3f2;
border-left: 4px solid #f8c9c4;
}

Queste righe daranno lo stile finale al blockquote.

La funzione PHP per creare lo shortcode

Adesso basterà aggiungere al fondo del file functions.php (presente nella root directory del vostro tema), prima della chiusura del tag php (quindi prima di ?>) la seguente funzione:

function ethernaly_boxes_function( $atts ) {
extract(shortcode_atts(array(
      'tipo' => 'tipo',
      'messaggio' => 'messaggio',
   ), $atts));
$html .= '<blockquote class="ethernaly-alert-box box-'.$atts['tipo'].'">'.$atts['messaggio'].'</blockquote>';
return $html;
}
add_shortcode("ethernaly_boxes", "ethernaly_boxes_function");

Analizziamo la funzione

La prima parte della funzione, l’extract, indica quali parametri dovrà estrarre WordPress dallo shortcode inserito nelle vostre pagine. Nell’array vengono individuati ed elencati tutti i parametri che verranno poi utilizzati nel resto della funzione.
Nella seconda parte, memorizziamo l’html in una variabile, utilizzando i parametri estratti in precedenza, quindi in output restituiamo il codice completo.
La terza parte, indica a wordpress che lo shortcode che verrà richiamato con [ethernaly_boxes], dovrà utilizzare la funzione ethernaly_boxes_function.

Come si utilizza?

Nel vostro articolo o nella vostra pagina, sarà sufficiente digitare:
[ethernaly_boxes tipo="alert" messaggio="Questo è un messaggio di errore o pericolo"]

ed il risultato sarà simile a:

Questo è un messaggio di errore o pericolo

E adesso? Cosa si può fare?

Il codice è ampiamente migliorabile. La prima cosa che mi viene in mente è aggiungere le funzioni di wp_enqueue_style() per importare un css separato (anche se non lo consiglio per evitare di aumentare le richieste file al server). Inoltre sarebbe molto comodo aggiungere direttamente uno shortcut nell’editor WP per aggiungere l’alert semplicemente cliccando sul pulsante.

Ethernaly

Author Ethernaly

More posts by Ethernaly

Leave a Reply

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi