Wordpress: aumentare i visitatori con Wikio e Wikiovote

Dopo aver inserito il nostro blog basato su Wordpress nelle sue fonti, i visitatori di Wikio potranno votare i nostri articoli, aumentandone la visibilità all’interno del portale. E con Wikiovote, un plugin per Wordpress, potremo far votare anche dall’interno del nostro blog, aumentando le probabilità di ricevere voti. Vediamo come installarlo, risolvendo alcuni errori di validazione XHTML che il plugin introduce nelle nostre pagine (le pagine, cioè, vengono identificate come Invalid XHTML dal validatore W3C).

Anzitutto una precisazione: non voglio dire che Wikio sia migliore di altri siti di editoria sociale; voglio solo presentare i problemi a cui si andrebbe incontro qualora si volesse installare Wikiovote su Wordpress. Detto questo, andiamo avanti.

Inserire il Blog nelle fonti di Wikio

Inserendo il Blog nelle fonti di Wikio, non ci sarà bisogno di pubblicare le notizie manualmente nel portale:

1. Iscrivetevi a Wikio (potete anche non farlo, non è necessario);
2. Inserite il vostro blog nelle fonti, compilando tutti i campi (anche il feed RSS).

D’ora in avanti Wikio ripubblicherà un estratto di ogni vostro articolo. Controllate comunque, dopo aver scritto un post nel vostro blog, che l’articolo sia stato effettivamente inserito nel portale - dopo aver installato Wikiovote è facile: se all’articolo nel blog non corrisponde un articolo su Wikio, il pulsante per votare non comparirà. In tal caso, inseritelo manualmente.

Installare Wikiovote

Copia e attivazione del plugin

Scaricate la versione di Wikiovote che ho corretto:

Wikiovote (corretto)
(per maggiori dettagli sulle correzioni effettuate, visitate l’Appendice)

Rinominatela in wikiovote.php, togliendo l’estensione .txt, e copiatela nella cartella remota /wp-content/plugins; andate sulla bacheca di Wordpress, nella scheda Plugin, ed attivate Wikiovote.

Integrazione col tema di Wordpress

Andiamo ad inserire il bottone per il voto all’interno delle nostre pagine.

1. Nelle pagine degli articoli singoli:
   1. Aprite il file /wp-content/themes/default/single.php (se non utilizzate il tema standard, sostituite default con il nome del vostro tema);
   2. se volete inserire il pulsante in fondo all’articolo (non è detto che sia la posizione migliore, se avete altre idee fatelo sapere ) cercate la stringa simile a
      <?php the_content( … ?>
      e aggiungete sotto (in grassetto):
      <?php the_content( … ?>
      <?php wikiovote(); ?>
2. Negli archivi dei post:
   1. Aprire i file single.php e archive.php del vostro template di Wordpress;
   2. Inserite, in un punto a piacere dopo
      <div class=”post” […]>
      il seguente codice:
      <?php wikiovote(); ?>
      e salvate i file.

Inserire il foglio di stile

Per evitare un errore XHTML, occorre inserire delle regole nel foglio di stile. Aprite /wp-content/themes/default/style.css e inserite, in fondo, il seguente codice (poi salvate):

/* wikiovote style (FIX) */
.wikiotext {font-family:Arial,Helvetica,sans-serif;font-size:9px;color:#666666;}

.wikiobutton{width:47px;border:1px solid #b7bbbe;margin:0px;padding:0px;background-color:#FFFFFF;}

.wikio{height:15px;margin-left:1px;border:0px !important;}

.wikiotxt{height:50px;text-align:center;}

.a{background:url(http://www.wikio.it/shared/img/vote/trait.gif) repeat-x bottom !important;}

.b{background:url(http://www.wikio.it/shared/img/vote/degrade.gif) repeat-x bottom !important;}

.wikionote{font-family:Arial, Helvetica, sans-serif;font-weight:bold;padding:6px 0 4px 0;}

.wikioaction {font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:11px;color:#333333;}

.wikioimg{border:0px !important;padding:0px !important;margin:0px !important;}

.wikioimg img{border:0px !important;padding:0px !important;margin:0px !important;}

.wikionote a {text-decoration:none;color:#f18717;font-size:16px;border:0px !important;}

.wikionote a:visited {text-decoration:none;color:#f18717;font-size:16px;border:0px !important;}

.wikionote a:hover{text-decoration:none;color:#f18717;font-size:16px;border:0px !important;}

.wikioaction a {text-decoration:none;color:#333333;border:0px !important;}

.wikioaction a:visited {text-decoration:none;color:#333333;border:0px !important;}

.wikioaction a:hover{text-decoration:underline;color:#333333;border:0px !important;}

/* END - wikiovote style (FIX) */

Fatto questo, aggiorniamo la nostra piattaforma di Wordpress con i file modificati, ed avremo la valutazione di Wikio su ogni articolo del nostro Blog. Come esempio, potete vedere Wikiovote in azione direttamente qui, su Techlog.

Appendice: le modifiche effettuate a wikiovote.php

Per i più curiosi descrivo le modifiche fatte al plugin originale, per renderlo validabile (le prove le ho fatte col validatore della W3C)

1. Riga 46: cambiare “&vote=1″ in “&amp;vote=1″ (in XHTML il carattere “&” va scritto sotto forma di entità HTML);
2. Riga 54: cambiarla da echo "<script type=\"text/javascript\"> in echo "<script type=\"text/javascript\"><!–//
3. Riga 66: cambiarla da </script>"; in //–></script>”;
4. Riga 68 ~ 86: commentare tutto (con /* (tutto il codice) */): il tag <style> va messo dentro <head>, non <body>.
5. Riga 90 ~ fine: è stato inserito un elemento di blocco dentro un elemento in linea - un div dentro un’ancora - e questo non è permesso. Sostituire
   

   <div class=\”wikiobutton\”> <a href=\”http://”.$wikioUrl.$wikioPattern3.$wikioId.$wikiohasVoted.”\” class=\”wikioaction\” target=\”_tab\” onclick=\”setWikio();\”>

   <div class=\”wikiotxt b\”>

   <div class=\”wikionote\”><a id=\”wikionote\” href=\”http://”.$wikioUrl.$wikioPattern3.$wikioId.$wikiohasVoted.”\” class=\”wikioaction\” target=\”_tab\” onclick=\”setWikio();\”>”.$wikioNote.”</a></div>

   <div class=\”wikioaction\”><a href=\”http://”.$wikioUrl.$wikioPattern3.$wikioId.$wikiohasVoted.”\” class=\”wikioaction\” id=\”wikioaction\” target=\”_tab\” onclick=\”setWikio();\”>”.$wikioPattern1.”</a></div>

   </div>

   </a>

   <div class=\”wikio\”><a href=\”http://”.$wikioUrl.”\” target=\”_tab\” class=\”wikioimg\”><img src=\”http://”.$wikioUrl.”/shared/img/vote/wikio.gif\” alt=\”www.wikio.”.$wikioSuffix.”\” border=\”0\” /></a></div>

   </div>

   con

   <div class=\”wikiobutton\”>

   <div class=\”wikiotxt b\”>

   <div class=\”wikionote\”><a id=\”wikionote\” href=\”http://”.$wikioUrl.$wikioPattern3.$wikioId.$wikiohasVoted.”\” class=\”wikioaction\” target=\”_tab\” onclick=\”setWikio();\”>”.$wikioNote.”</a></div>

   <div class=\”wikioaction\”><a href=\”http://”.$wikioUrl.$wikioPattern3.$wikioId.$wikiohasVoted.”\” class=\”wikioaction\” id=\”wikioaction\” target=\”_tab\” onclick=\”setWikio();\”>”.$wikioPattern1.”</a></div>

   </div>

   <div class=\”wikio\”><a href=\”http://”.$wikioUrl.”\” target=\”_tab\” class=\”wikioimg\”><img src=\”http://”.$wikioUrl.”/shared/img/vote/wikio.gif\” alt=\”www.wikio.”.$wikioSuffix.”\” border=\”0\” /></a></div>

   </div>

6. Per poter inserire il box di votazione più volte all’interno degli archivi:
   1. Sostituire
      function wikiovote(){
      con:
      function wikiovote(){
      Global $wikio_i;
      $wikio_i++;
   2. cercare
      if(!wikiovoted){var n=t.getElementById(’wikionote’);var a=t.getElementById(’wikioaction’);
      sostituirlo con
      if(!wikiovoted){var n=t.getElementById(’wikionote-$wikio_i’);var a=t.getElementById(’wikioaction-$wikio_i’);
   3. cercare
      <a id=\”wikionote\”
      cambiare l’id da wikionote a wikionote-$wikio_i
   4. cercare
      id=\”wikioaction\”
      cambiare l’id da wikioaction a wikioaction-$wikio_i

Fatte queste modifiche, il plugin per Wordpress Wikiovote genererà codice XHTML valido.

Letture consigliate

Potrebbe essere utile inserire la possibilità di voto su Wikio anche al nostro feed RSS (reindirizzato verso Feedburner): vi consiglio la lettura dell’articolo Come aggiungere al proprio FeedBurner’s feed la funzionalità di voto su Wikio.

Articoli simili:

• Il post_id nel Permalink di Wordpress: perché ometterlo
• Wordpress: Permalink SEO e Usabili
• Head META Description di Wordpress: utilizzarlo al meglio
• Aggiornata la guida per Wikiovote - Aggiornamenti Techlog
• FeedSmith (Feedburner): problema con i Tag

Etichette: Blogging, Guide, Open-Source, plugin, Wikio, wordpress

Autore: Andrea Romagnoli
Questo articolo è stato pubblicato il Friday, November 23rd, 2007 alle 2:58 am sotto la categoria Guide generali. Puoi seguire i commenti di questo articolo tramite il feed RSS 2.0. Puoi lasciare un commento, o mandare un trackback dal tuo sito.

Se questo articolo ti è stato utile, segnalalo sul tuo sito! Puoi inoltre seguire comodamente gli aggiornamenti di Techlog tramite il feed RSS; infine puoi lasciare un commento se ti serve aiuto (o anche solo per un saluto); anche qui non serve registrarsi (sono abilitati anche i commenti anonimi; l'E-Mail serve, eventualmente, per ricevere le notifiche delle nuove risposte). ;-)