Recensioni in HTML con shortcode per WordPress

Come realizzare un riquadro con le recensioni in HTML senza usare un plugin esterno? È molto semplice, in questa guida troverai anche un comodo shortcode per inserire il tuo codice in WordPress, iniziamo subito.

Questo riquadro recensioni è composto da un array contenente nome, foto, valutazione e testo inserito dall’utente.

Prima di stampare a video tutte le recensioni effettua anche una media delle valutazioni totali.

Prima di procedere dovrai crearti l’array contenente i dati delle recensioni in questo modo:

$ekw_rating = array(
    "Utente 1" => [5, // 5 stelle
                          "Testo dell’utente",
                          "https://www.immagine-profilo.it/immagine.jpg"],
    "Utente 2" => [4, 
                          "Testo dell’utente",
                          "https://www.immagine-profilo.it/immagine.jpg"],
    "Utente 3" => [1,
                          "Testo dell’utente",
                          "https://www.immagine-profilo.it/immagine.jpg"]
  );

Ora vediamo il codice per fare la media delle recensioni e mostrarla per prima:

  $ekw_rating_number = count($ekw_rating);
  $ekw_rating_tot;
  foreach ($ekw_rating as $key => $value) {
    $ekw_rating_tot += $value[0];
  }
  $ekw_rating_media = round($ekw_rating_tot / $ekw_rating_number, 1);

Ora vediamo la funzione che servirà per stampare le stelle delle recensioni. Vedrai 5 stelle piene o vuote in base al valore della recensione.

Le stelle sono immagini SVG incorporate direttamente nell’HTML del sito senza appesantirlo con fonti esterne.

      function ekw_display_star_rating($ekw_value) {
      for ($i=0; $i < 5; $i++) {
        if ($ekw_value > $i) { //stampa la stella piena
          ?>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="20px" height="20px" viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
          <polygon fill="#FFCE00" points="598.94,25.055 783.409,398.829 1195.894,458.767 897.418,749.709 967.878,1160.527 598.94,966.565
            230.003,1160.527 300.464,749.709 1.988,458.767 414.472,398.829 "/>
          </svg>
          <?php
        } else { //stampa la stella vuota
          ?>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="20px" height="20px" viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
          <polygon fill="#FFCE00" points="598.94,25.055 783.409,398.829 1195.894,458.767 897.418,749.709 967.878,1160.527 598.94,966.565
            230.003,1160.527 300.464,749.709 1.988,458.767 414.472,398.829 "/>
          <polygon fill="#FFFFFF" points="600,105.938 760.463,431.071 1119.268,483.208 859.634,736.289 920.925,1093.643 600,924.924
            279.075,1093.643 340.367,736.289 80.733,483.208 439.538,431.071 "/>
          </svg>
          <?php
        }
      }
       
      }

Ora vediamo il resto del codice per stampare le recensioni in HTML e php complete di nome, foto e testo dell’utente.

        foreach ($ekw_rating as $key => $value) {
          ?>
          <div class="ekw_single_rating_container">
            <div class="ekw_rating_info_container">
              <!-- immagine recensore -->
              <img class="ekw_rating_image" src="<?php echo $value[2]; ?>" alt="immagine profilo recensione">
              <div class="ekw_stars_container">
              <?php
              // stelle recensioni
	  ekw_display_star_rating($value[0]);
              ?>
              </div>
              <label class="ekw_rating_name"><?php echo $key; ?></label>
            </div>
            <?php if ($value[1] != "") {
              ?>
              <p class="ekw_rating_text"><?php echo $value[1]; ?></p>
              <?php
            } ?>
          </div>

Ora non ti resta che completare il tutto con un po’ di codice CSS a tua scelta per dare uno stile al tuo riquadro di recensioni.

Puoi anche implementare un markup di dati strutturati per le recensioni seguendo i consigli di questa guida.

Se vuoi inserire le recensioni come shortcode allora dovrai racchiudere tutto il codice di prima in questa funzione:

function ekw_rating() {
  ob_start();

	//codice

  $content = ob_get_clean();
  return $content;
}
add_shortcode('ekw_recensioni', 'ekw_rating');

Ricordati di dichiarare la funzione che genera le stelle in modo condizionale in questo modo:

      if (!function_exists('ekw_display_star_rating')) {
        function ekw_display_star_rating($ekv_value) {
          // il resto del codice
        }
      }

lo shortcode da inserire nelle pagine del tuo sito sarà il seguente:

[ekw_recensioni]