La columna lateral

Creeu un nou fitxer anomenat sidebar.php. Aquest fitxer inclourà el contingut de la columna lateral del lloc web, és a dir:

  • El bloc anomenat latest_tweets que conté les últimes entrades personals del servei microblogging Twitter1)
  • El bloc anomenat Tags que, en realitat, mostra un nùvol de descriptors.

Què és Twitter?

La Viquipèdia2) ens diu que és un servei de xarxes socials i microblogging que permet als seus usuaris enviar missatges de text només, amb una longitud màxima de 140 caràcters mitjançant SMS, missatgeria instantània o bé directament des del lloc web de Twitter (…) Aquestes actualitzacions es mostren en la pàgina de perfil de l'usuari, i són també enviades de forma immediata a altres usuaris que han triat l'opció de rebre-les. L'usuari original pot restringir l'enviament d'aquests missatges només a membres del seu cercle d'amics, o permetre el seu accés a tots els usuaris, que és l'opció per defecte.

Si voleu saber més sobre Twitter i les possibles aplicacions dins del món educatiu3):

sidebar.php

Latest tweets

Per a la creació del contingut d'aquest bloc necessitareu incorporar dos arxius que us permetran de forma fàcil mostrar els últims tweets públicats.

Descarregueu i descomprimiu l'arxiu latest_tweets dins de la carpeta del tema i obtindreu dos fitxers:

  • twitter.lib.php: conté funcions que permeten connectar amb el servei de microblogging Twitter.
  • latest_tweets.php: conté la funció latest_tweets() que mostrarà en pantalla els últims tweets d'un usuari. Aquesta funció necessita tres paràmetres:
    latest_tweets(//usuari//, //contrasenya//, //número de tweets que mostrareu// -màx. 20-);


    Veieu el següent exemple:

    <h3>Latest tweets</h3>
<?php latest_tweets("nomdelmeucentre", "7ghjg68", 10); ?>
</div>


    Aquesta configuració de la funció latest_tweets mostrarà els 10 últims tweets de l'usuari nomdelmeucentre.

Tags

En lloc d'escriure a mà la llista de descriptors més utilitzats, Wordpress incorpora la funció wp_tag_cloud()4) que la mostra de manera automàtica en forma de nùvol de descriptors, és a dir, cada descriptor adquirirà una mida diferent en funció de les vegades que s'ha utilitztat el descriptor per classificar un article. Aquesta funció permet una gran flexibilitat en quant a personalització. En aquest cas, la funció demana com a paràmetre una estructura anomenada array o vector en català. Vegeu a continuació el resultat: 

<div id="tags">
  <h3>Tags</h3>
  <?php wp_tag_cloud('smallest=10&largest=36&number=15&unit=px&format=list'); ?> 
</div>

Fixeu-vos que cada paràmetre està separat pel símbol &. Aquí teniu la llista dels paràmetres i l'explicació pertinent:

  • smallest: la mida del descriptor més petit (el que menys articles ha estat associat) es mostra a 10.
  • largest: la mida del descriptor més gran (el que més articles ha estat associat) es mostra a 36.
  • number: mostra com a màxim 15 descriptors.
  • unit: la unitat del valor de les mides dels descriptors és en píxels.
  • format: mostra la llista com a ítems d'una llista (li).

Finalment, aquí teniu el resultat del fitxer sidebar.php: 

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
require "latest_tweets.php";
?>
<div id="lateral"> <!-- inici de la columna lateral -->
 <div id="latest_tweets">
   <h3>Latest tweets</h3>
   <?php latest_tweets("nom_usuari", "contrasenya_usuari", 10); ?>
 </div>
 <div id="tags">
   <h3>Tags</h3>
   <?php wp_tag_cloud('smallest=10&largest=36&number=15&unit=px&format=list'); ?>
 </div>
</div> <!-- final de la columna lateral -->

Modificacions del full d'estil

Afegiu la projecció d'ombra a les dues caixes de la columna lateral: 

#latest_tweets, #tags  {
	background-color: #fff;
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 15px;
	padding-right: 10px;
	margin-bottom: 20px;
  	-webkit-box-shadow: 10px 10px 5px #afafaf;
  	-moz-box-shadow: 10px 10px 5px #afafaf;
}

Eŀlimineu els selectors .petit, .mitja, .gran, .sgran ja que no són necessaris.

Veieu en la següent captura les millores de l'estil visual de la columna lateral:

1) http://twitter.com
2) http://ca.wikipedia.org/wiki/Twitter
3) informació extreta del portal del servei XTEC Blocs: http://blocs.xtec.cat/index.php?id=82
4) http://codex.wordpress.org/Template_Tags/wp_tag_cloud