Home Template Come creare uno shortcode per il tuo template

Come creare uno shortcode per il tuo template

189
0

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;
}

Previous articleProblema blockUI requires jQuery v1.2.3 or later!
Next articleRimuovere meta generator da WordPress

LEAVE A REPLY

Please enter your comment!
Please enter your name here