Tags, semplice SCRIPT per mostrare graficamente le vostre parole chiave (versione PHP e Codeigniter)

tags lo script

Quando costruite un sito capita che sia necessario mostrare dei tag per aumentare l’indicizzazione del vostro sito… beh con due semplici righe otterremo un ottimo risultato!

Potremo passare un array o una stringa di valori separati da quello che vogliamo, in quanto il secondo parametro specifica il delimitatore per creare l’array di valori. Il terzo parametro riguarda il colore del tag.

Ho creato due versioni, una per PHP con una semplice funzione e l’altra una libreria per CodeIgniter. Ecco a voi il codice:

VERSIONE PHP

(crea un file Tags.php e copia/incolla questo codice)

public function tags($array='',$delimitatore=',',$colore='#3f8dbf'){
  if($array==''){
    exit;
  }
  if(!is_array($array)){
    $array = explode($delimitatore,$array);
  }

  $css = '<style type="text/css">
    .tags {
      list-style: none;
      margin: 0;
      overflow: hidden;
      padding: 0;
    }

    .tags li {
      float: left;
    }

    .tag {
      background: '.$colore.' ;
      border-radius: 3px 0 0 3px;
      color: #eee;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 20px 0 23px;
      position: relative;
      margin: 0 10px 10px 0;
      text-decoration: none;
      -webkit-transition: color 0.2s;
    }

    .tag::before {
      background: #fff;
      border-radius: 10px;
      box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
      content: "";
      height: 6px;
      left: 10px;
      position: absolute;
      width: 6px;
      top: 10px;
    }

    .tag::after {
      background: #fff;
      border-bottom: 13px solid transparent;
      border-left: 10px solid '.$colore.';
      border-top: 13px solid transparent;
      content: "";
      position: absolute;
      right: 0;
      top: 0;
    }

    .tag:hover {
      background-color: #666;
      color: white;
    }

    .tag:hover::after {
      border-left-color: #666;
    }

    </style>
  ';

  $tags = '<ul class="tags">';

  foreach($array as $tag){
    $tags .= '<li><a href="#" class="tag">'.$tag.'</a></li>';
  }
  $tags .= '</ul>';

  echo $css.' '.$tags;
}

Per poterlo utilizzare includete il file nel vostro progetto e richiamate la funzione, passando i vostri tag sotto forma di lista di valori.

Esempio

//includiamo il file Tags
include('Tags.php');

//passiamo un array
tags(array('sono','un','tag'));
//stamperà da solo a video i tre tag, quindi NON useremo echo

//passiamo un insieme di valori separati da trattini
$tag='sono-una-lista-di tag-dove gli-spazi sono-considerati-nel tag';
tags($tag,'-','black');

Il terzo parametro riguarda il colore del tag, tuttavia consiglio di mettere mano al codice se avete la necessità di modificare radicalmente tutti i colori.

VERSIONE CODEIGNITER

(crea un file nella cartella libraries di nome Tags.php e copia/incolla questo codice)

<?php if ( ! defined('BASEPATH')) exit('Accesso diretto al file negato');
class Tags{
 public function mostra($array='',$delimitatore=',',$colore='#3f8dbf'){

  if($array==''){
    exit;
  }
  if(!is_array($array)){
    $array = explode($delimitatore,$array);
  }

  $css = '<style type="text/css">
    .tags {
      list-style: none;
      margin: 0;
      overflow: hidden;
      padding: 0;
    }

    .tags li {
      float: left;
    }

    .tag {
      background: '.$colore.' ;
      border-radius: 3px 0 0 3px;
      color: #eee;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 20px 0 23px;
      position: relative;
      margin: 0 10px 10px 0;
      text-decoration: none;
      -webkit-transition: color 0.2s;
    }

    .tag::before {
      background: #fff;
      border-radius: 10px;
      box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
      content: "";
      height: 6px;
      left: 10px;
      position: absolute;
      width: 6px;
      top: 10px;
    }

    .tag::after {
      background: #fff;
      border-bottom: 13px solid transparent;
      border-left: 10px solid '.$colore.';
      border-top: 13px solid transparent;
      content: "";
      position: absolute;
      right: 0;
      top: 0;
    }

    .tag:hover {
      background-color: #666;
      color: white;
    }

    .tag:hover::after {
      border-left-color: #666;
    }

    </style>
  ';

  $tags = '<ul>';

  foreach($array as $tag){
    $tags .= '<li><a href="#">'.$tag.'</a></li>';
  }
  $tags .= '</ul>';

  echo $css.' '.$tags;
 }
}

Con CodeIgniter è tutto più semplice se lo conoscete.

Esempio

//carichiamo la libreria
$this->load->library('tags');

//stampiamo a video i tag da array
$this->tags->mostra(array('tag','lavoro','portapipe'));

//usiamo una stringa e cambiamo il colore di sfondo
//gli spazi saranno considerati come separatore
$this->tags->mostra('sono un tag',' ','green');

Tutto compatto e semplice da usare.
E’ uno di quegli strumenti che non serve toccare una volta inserito e che è meglio tenere separato dal progetto.

Divertitevi con i vostri nuovi accattivanti Tag!

Annunci

, , , , , , , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: