Custom Shortcode in WordPress

I custom shortcode non sono altro che degli shortcode personalizzati. Questa importantissima funzione è stata introdotta con wordpress 2.5 e da allora ha subito una straordinaria evoluzione.

COSA SONO GLI SHORTCODE?

Uno shortcode può essere definito come un piccolo codice testuale avente la seguente struttura [shortcode]. Se utilizzassimo questo codice nell’editor di wordpress quando andremo a visualizzare l’articolo vedremo che wordpress rimpiazzerà lo shortcode con il codice che abbiamo precedentemente definito. Facciamo un esempio: se vi capita spesso di dover inserire un pulsante al termine di un articolo capirete che sarebbe una procedura noiosa scrivere a mano tutto il codice html di volta in volta. Grazie agli shorcode invece ci basterà scrivere una funzione ed ogni qualvolta utilizzeremo lo shortcode [bottone] nei nostri articoli questo verrà sostituito con il codice html che abbiamo precedentemente definito.

In rete possiamo trovare tantissimi plugin per la creazione di custom shortcode e molti dei temi premium più recenti vengono già forniti con alcuni shortcode creati direttamente dallo sviluppatore.

Ma cosa fare se il vostro tema ne è sprovvisto? Basterebbe fare una piccola ricerca tra i plugin di wordpress per trovare ottimi prodotti come Shortcodes Ultimate. Tuttavia il problema principale è che una volta installati vi ritroverete con tonnellate di codice php e css che molto probabilmente non utilizzerete mai.

Per questo motivo preferisco cercare di limitare al minimo l’installazione di plugin e creare personalmente gli shortcode di cui ho bisogno.

Qui di seguito vi dimostrerò come creare un alert box, ovvero un riquadro che può tornare molto utile quando vogliamo attirare l’attenzione dell’utente.

CUSTOM SHORTCODE – LA STRUTTURA

Per prima cosa bisogna definire lo shortcode e comunicare a WordPress qual’è la funzione che dovrà utilizzare.

add_shortcode( 'home-btn', 'pulsante_home' );

Quindi a questo punto andiamo a scrivere la funzione che andrà a rimpiazzare il nostro custom shortcode sostituendolo con il codice html.

function pulsante_home() {

// Code
return '<div class="my_class"><a href="http://www.ilmiosito.it">Torna alla Home</a></div>';
}

L’esempio sopra illustrato genererà un link/pulsante ogni qual volta utilizzeremo lo shortcode [home-btn] nel nostro editor. ( Ovviamente manca il codice css che non sto qui a scrivervi per questioni di tempo ma in fondo all’articolo troverete un’esempio dettagliato )

Ma la cosa più bella a mio parere è che nelle creazione di un custom shortcode possiamo anche definire dei parametri. Per cui possiamo creare uno shortcode del tipo [my-button url=”” text=””] e utilizzare quel codice per creare un pulsante diverso ogni volta che vogliamo.

In questo caso la nostra funzione avrà una struttura leggermente diversa:

// Add Shortcode
function warning_box( $atts ) {

// Attributes
extract( shortcode_atts(
array(
'url' => '',
'text' => '',
), $atts )
);

// Code
return '<div class="my_class"><a href="'.$url.'">'.$text.'</a></div>';
}

Non abbiamo fatto altro che definire un array in cui abbiamo inserito i nostri parametri e li abbiamo poi utilizzati all’interno del nostro codice html.

Gli esempi sopra mostrati servono a creare quelli che vengono definiti self-closing shortcode ma in alcuni casi avremo bisogno di utilizzare gli Enclosing Shortcode ovvero quelli shortcode che hanno la struttura [shortcode]il mio testo[/shortcode].

Qui di seguito trovate un esempio si come creare un custom shortcode che mostra un box di warning.

CUSTOM SHORTCODE – CREIAMO UN PLUGIN

Per una questione di comodità preferisco raggruppare i miei shortcode all’interno di un plugin. Quindi apriamo il nostro editor php e incolliamo il seguente codice:

<?php
/*
Plugin Name: WpGuida Shortcodes
Description: A plugin with tools for my site.
Version: 1.0
Author: Dario Vinci
License: GPL2
*/

// Creiamo una funzione per generare lo shortcode.
function warning_box( $atts , $content = null ) {

// Code
return '<div class="warning-box"><span><i class="fa fa-exclamation-triangle"></i> ATTENZIONE<br></span><p>'.$content.'</p></div>';
}
add_shortcode( 'attenzione', 'warning_box' );
?>

Salviamo il file e diamogli un nome come wpguida-shortcodes.php.

Con il nostro client FTP portiamoci nella cartella /wp-content/plugins e creiamo al suo intenro una cartella chiamata wpguida-shortcodes e mettiamo al suo interno il file wpguida-shortcodes.php.

Aggiungiamo al nostro file CSS del tema questo codice:

.warning-box {
background-color: #FFE9E9;
border: 2px solid #FBC4C4;
padding:10px;
text-align:center;
margin-bottom:10px;
}

.warning-box p {
margin-bottom:0px !important;
text-align:justify !important;
}

.warning-box span {
color: #DE5959 !important;
}

Attiviamo il plugin che abbiamo realizzato e proviamolo ad utilizzarlo in un articolo scrivendo:

[attenzione]Testo a vostra scelta[/attenzione]

questo è quello che otterremo: