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.
