WpGuida

Guida Wordpress è una raccolta di tutorials e guide su temi, plugin e sviluppo in wordpress

  • Home
  • Notizie
  • Guide
    • Guida WordPress – Le Basi
    • Guida WordPress Avanzata
    • Guida W3 Total Cache
  • Tutorials
    • Ottimizzare WordPress
    • WordPress Plugins
    • WordPress Temi
    • WordPress Development
  • Tips and Tricks
  • Hosting WordPress
  • Software
  • Velocizzare WordPress
Ti trovi qui: Home / Wordpress Development / Custom Shortcode in Wordpress

Custom Shortcode in WordPress

3 Agosto 2014 di Dario Vinci Lascia un commento

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:

ATTENZIONE

Questo è il box che verrà utilizzato per attrarre l’attenzione degli utenti

Archiviato in:Wordpress Development

Dario Vinci

Appassionato di Wordpress e del mondo tecnologico in generale, proud to be an apple fanboy and android lover.

Ti è piaciuto questo articolo?

Se vuoi ricevere via email tutti i miei nuovi articoli e tutorials su WordPress compila il box qui a fianco. Tranquillo, non riceverai alcuna email di spam ma solo contenuti di qualità!

Cerca

Facebook

WpGuida

Newsletter

Scarica ebook Guida Wordpress 4.x

Potrebbe Interessarti

Disabilitare i commenti Wordpress

Disabilitare i Commenti WordPress

24 Giugno 2015 da Dario Vinci

Come creare un exit popup senza plugin su wordpress

Come creare un Exit Popup senza plugin

21 Agosto 2016 da Dario Vinci

Wordpress 4.2.2 changelog

WordPress 4.2.2 Changelog: possibile problema con l’editor dopo l’aggiornamento [RISOLTO]

7 Maggio 2015 da Dario Vinci

Wordpress 4.1.2 Changelog

WordPress 4.1.2 Changelog: fix di sicurezza

22 Aprile 2015 da Dario Vinci

i widget wordpress

I Widget WordPress

10 Settembre 2014 da Dario Vinci

Random Post

gestione utenti wordpress

Gestione utenti WordPress

Search Meter un plugin per analizzare le query di ricerca interne in wordpress

Query di ricerca interne: capire cosa cercano i nostri utenti

Configurare Wordpress - Le impostazioni iniziali

Configurare WordPress

Copyright © · 2019 WpGuida