email

Lista di elementi in codice HTML – shortcode per WordPress

Ti trovi in: Home » blog » Programmazione » Lista di elementi in codice HTML – shortcode per WordPress

code

Lista elementi in codice Html

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.

Ecco il risultato finale

1
Primo elemento della tua fantastica lista realizzata in Html
2
Secondo elemento della tua fantastica lista realizzata in Html
3
Terzo elemento della tua fantastica lista realizzata in Html


Lista numerata Html

code

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>.

code

Lista numerata CSS

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

Lista numerata php

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.

Shortcode per WordPress

code

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');
 ?>

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message

Scopri anche:

Come scegliere i colori per un sito web o un logo?

i colori giusti per il tuo sito web

Come scegliere i colori per un sito web? Ogni colore ha il suo significato e la scelta di quelli glisti porterà grandi risultati al tuo sito

Scopri di più

Come creare shortcode con attributi in WordPress

come creare shortcode con attributi wordpress

Come si crea uno shortcode con attributi in Wordpress? Scopri come impostare attributi personalizzati e di default per i tuoi shortcode

Scopri di più

Stile grafico di un sito web qual’è quello giusto

stile grafico sito web agenzia web Eureka

Qual'è il giusto stile grafico di un sito web? Lo stile grafico è importante per attirare più clienti! Quali forme e colori sono giusti?

Scopri di più

Cos’è Reddit, come funziona e perchè usarlo

cos'è Reddit, come funziona e perchè usarlo Eureka web

Cos'è Reddit? Scopri le potenzialità di questo inportante Social Network! Notizie, informazioni, guide e tanto altro su Reddit

Scopri di più

Come installare WordPress in 4 passaggi per realizzare il tuo sito web

Come installare Wordpress in 4 passaggi per realizzare gratis il tuo sito web? Guida completa anche sulla configurazione database

Scopri di più

Tipi di parole chiave per la tua strategia SEO e come scegliere quelle giuste

Tipi di parole chiave diversi per la strategia SEO del tuo sito web! Come ricercare le keyword migliori usate dai tuoi clienti

Scopri di più