Pubblicato il 19 Marzo 2020, aggiornato il 26 Aprile 2020
In questa guida ti fornirò il codice per creare una lista di elementi in codice html. Ti metto a disposizione anche il codice Php per inserirla nei tuoi progetti.
Se usi WordPress sei nel posto giusto! Troverai anche lo shortcode già pronto con le istruzioni per inserirlo nel tuo sito WordPress.
Iniziamo subito! Ecco il codice Html della tua lista
<div class="ekw_icon_list_container"> <div class="ekw_box_icon_circle"> <span>1</span> </div> <div> <span>Primo elemento della tua fantastica lista realizzata in Html</span> </div> <div class="ekw_box_icon_circle" > <span>2</span> </div> <div> <span>Secondo elemento della tua fantastica lista realizzata in Html</span> </div> </div>
Per inserire il tuo contenuto personalizzato i basterà copiare ed incollare gli il codice html della lista e cambiare i tag <span>.
Vediamo ora il codice CSS della tua lista di elementi:
.ekw_icon_list_container {
padding: 16px;
background-color: #FFFFFF;
border: 4px solid #E5E5E5;
border-radius: 30px;
box-shadow: 0px 0px 10px 4px #E5E5E5;
-webkit-box-shadow: 0px 0px 10px 4px #E5E5E5;
-moz-box-shadow: 0px 0px 10px 4px #E5E5E5;
margin-bottom: 8px;
display: inline-grid;
grid-template-columns: 80px auto;
align-items: center;
width: 100%;
}
.ekw_box_icon_circle {
width: 50px;
height: 50px;
border: 4px solid #B12CFF;
border-radius: 50%;
display: grid;
align-items: center;
}
.ekw_box_icon_circle >* {
display: block;
text-align: center;
}
vediamo la funzione php per creare liste di elementi dinamiche
<?php $elem = ["Primo elemento della tua fantastica lista realizzata in Html", "Secondo elemento della tua fantastica lista realizzata in Html" ]; for ($i=0; $i < count($elem); $i++) { ?> <div class="ekw_icon_list_container"> <div class="ekw_box_icon_circle" > <span><?php echo $i+1?></span> </div> <div> <span><?php echo $elem[$i]; ?></span> </div> </div> <?php } ?>
In questa funzione ho creato un’array di oggetti che verranno stampati a video e numerati in automatico.
ed ora lo Shortcode per WordPress!
Usa lo shortcode
ekw_icons_list elements="Primo elemento, Secondo elemento"
Per inserire elementi della tua lista ti basterà elencarli all’interno del tag elements=”” separandoli da una virgola e uno spazio in questo modo: elements=”Primo elemento, Secondo elemento”]
Perchè non dai uno sguardo a come creare correttamente uno shortcode per WordPress?
ecco la funzione:
<?php function ekw_icon_list_shortcode($elements) { extract( shortcode_atts( array('elements' => false), $elements ) ); ob_start(); $elem = explode(', ', $elements); ?> <?php for ($i=0; $i < count($elem); $i++) { ?> <div class="ekw_icon_list_container"> <div class="ekw_box_icon_circle"> <span><?php echo $i+1?></span> </div> <div> <span><?php echo $elem[$i]; ?></span> </div> </div> <?php } $content = ob_get_clean(); return $content; } add_shortcode ('ekw_icons_list', 'ekw_icon_list_shortcode'); ?>
Leggi anche...
Come inserire dati strutturati articoli WordPress
Preventivo sempre gratuito
Fabio Fresia, fondatore e titolare di Eureka Web di Asti
366 - 400 9542 info@agenziawebeureka.it