Come creare uno shortcode per il tuo template

Creare uno shortcode per il tuo template potrebbe facilitarti molto, per la visone estetica oppure per creare quelle picole interazioni in php all’interno del tuo template wordpress, in maniera semplice e diretto, la creazione dello shortcode si può aggiungere sia al codice plugin oppure si può collocare nel file functions.php.

La creazione è dello shortcode

la prima cosa da fare e andare a creare la funzione che servirà a riportare ciò che vogliamo quando adremo a richiamre il nostro shortcode, all’iterno del nostro template o nel file functions.php o un file incluso nel file functiona.

<?php
function patatine_func( $atts ){
    return '<a href="https://www.digita.org/wp-content/uploads/2023/11/patatine-5.jpg"><img src="http://wordpresstemplate.altervista.org/wp-content/uploads/2013/09/patatine-5.jpg" alt="shortcode" title="esempio shortcode" /></a>';
}
add_shortcode( 'patatine', 'patatine_func' );
?>

quindi poi basta richiamare all’interno del tuo editor oppure come scritto in qualche post precedentemente all’interno del tuo template, in questo caso [patatine] sivedrà questa immagine.

andiamo alla creazione di un shortcode più complesso, nel esempio andremo a cambiare la class e il title di un pulsante.

function pulsante ($atts,$content=null)
{
extract(shortcode_atts(
array(
'classe_pulsante'=>'nome_classe_predefinita', // Valore predefinito per l'attributo classe_pulsante.
'id_pulsante'=>'', // Questa volta non mettiamo un valore predefinito
), $atts));
 
return ''.$content.'';
}
 
add_shortcode('richiamo_pulsante', 'pulsante');

cosi facendo il nostro pulsante avrà class e id gestionabile da chi richiama il nostro shortcode, per esempio,
[richiamo_pulsante classe_pulsante=”classname” id_pulsante=”nome_id”]wordpress template[/richiamo_pulsante] l’effetto lato front end sara:

wordpress template
allego anche il css del pulsante fatto in css3

.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:200px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}