Lista di elementi in codice HTML – shortcode per 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');
 ?>