whatsapp
keyboard_arrow_down Contatti

Sabato

19

Marzo 2022

lista di elementi in codice html con shortcode per wordpress

Lista di elementi in codice HTML – shortcode per WordPress

  1. blog Lista di elementi in codice HTML – shortcode per WordPress
event_available
schedule
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 che dovrai inserire nel file functions.php del tuo tema child. Se vuoi ho scritto per te una guida su come crearlo in pochi semplici passaggi.

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

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up