Esquema bicolumnar amb Wordpress o com dirigir enllaços cap a dos continguts diferents dins una mateixa pàgina

Estic treballant en una pàgina web per a un client, i em va proposar un esquema de la pàgina web que, realment, suposa tot un repte per a mi a nivell de com cal configrar la plantilla de la pàgina web. El seu esquema era si fa no fa aquest que segueix:

Per si no és prou autoexplicatiu, simplement dir que la idea era tenir dos espais de contingut diferenciats: a l'espai de la dreta es mostrarien uns continguts que apareixerien prement els enllaços de color taronja, mentre que a l'espai de l'esquerra es mostraria un altre tipus de continguts, que apareixerien prement els enllaços de color blau.

Direu, ¿i quin és el problema?

• Òbviament el problema no existeix si utilitzem frames, però -per raons que ara mateix no ve al cas explicar- utilitzar frames no es considera una bona pràctica, i en moltes ocasions tampoc ho és realment, a més que ens estalvia l'oportunitat d'aprendre coses molt interessants.
• El problema tampoc existeix si ens és igual que, tan bon punt l'usuari faci clic en els enllaços de color taronja i es mostri el contingut a l'àrea corresponent, desaparegui el contingut de l'àrea corresponent als enllaços blaus. Però no volem que això passi: volem que el contingut de l'esquerra es mantingui quan faci clic als enllaços de la dreta, i viceversa si pot ser (després ja veureu que el viceversa aquesta tècnica no el resol; sempre hi haurà un contingut que sofrirà les conseqüències d'allò que fem amb l'altre)
• A tot això, s'afegeix una dificultat/circumstància addicional: utilitzar Wordpress per a la gestió dels continguts. Utilitzar la gestió de continguts amb sistemes de llenguatges de servidor té alguns avantatges i, òbviament, també alguns inconvenients. Per ara quedem-nos amb la idea que jo volia utilitzar gestió de continguts amb el CMS Wordpress.
• Si no estàs segur de si aquesta tècnica satisfà les teves necessitats, pots fer una ullada a la part final de Conclusions per aclarir-ho, o mirar més a fons la solució aplicada abans d'invertir-hi encara més temps.

La clau del problema és com fer que uns continguts es mantinguin visibles a la pàgina mentre altres continguts situats en una altra zona diferenciada es poden carregar i mostrar independentment d'aquells. La solució, tal i com se m'apuntava a aquest fòrum passa per utilitzar Javascript sliders, en altres paraules desplaçadors del contingut desenvolupats en Javascript.

• No estic del tot segur si això és una aplicació en AJAX, perquè encara no conec bé aquesta tècnica de programació/script que consisteix a maximitzar les possibilitats que té una pàgina web de seguir fent sol·licituds al servidor quan la pàgina ja està del tot carregada. Si encara en sabeu menys que jo, simplement penseu que el Gmail fa un ús extensiu d'AJAX per anar actualitzant la llista de correus entrants o les persones disponibles per al xat, per exemple.

Després de mirar diverses possibilitats, vaig optar per un d'aquests desplaçadors, que és el Coda-slider, desenvolupat per Niall Doherty.

• Podeu veure aquesta solució implementada per mi a http://www.traxmedia.es

El Coda-slider és un desplaçador de continguts. Scripts que facin aquesta funció n'hi ha de moltes menes, des dels que serveixen per fer un simple scroll de botons o imatges fins a més complexos que són ideals per desplaçar continguts amb una certa entitat, semblants a una pàgina, per dir-ho d'alguna manera. Coda-slider pertany a aquests darrers.

El nom i l'efecte està inspirat en el que podeu veure a la pàgina dels desenvolupadors de Coda, una aplicació de disseny web per a Mac. Aquest efecte de desplaçament amb acceleració és força elegant i ens permet la sectorització i navegació, de manera visualment atractiva, dels continguts d'una pàgina.

El Coda-slider és un simple marc definit en CSS on els diversos continguts s'hi mostren desplaçant-se horitzontalment (tot i que no deu ser massa complicat fer que ho facin verticalment) a mesura que anem clicant els enllaços que s'hi dirigeixen o bé fem clic a unes sagetes opcionals que permeten passar d'un contingut cap al que li és lateralment adjacent. Tot això amb aquest moviment tant mono.

A més a més el Coda-slider també consta d'unes llibreries que contenen les funcions que fan possible aquest desplaçament dels elements descrits en CSS-XHTML.

Podem tenir més d'un marc Coda-slider dins una pàgina, però en aquest cas només podrem navegar entre els continguts sense problemes si fem servir les sagetes que desplacen cap al contingut d'un costat o de l'altre. Si fem servir enllaços externs, és a dir que apuntin als continguts en concret i no a la seva relació espacial, el sistema es confondrà sobre a quin dels dos (o més) marcs els ha de dirigir, amb la qual cosa tindrem un problema encara més gros que el que motivava l'ús d'aquesta tècnica.

La solució, com sempre sol passar, es troba quan es simplifica el problema. Utilitzarem el Coda-slider només per mostrar els continguts corresponents a un dels dos tipus d'enllaços, siguin els blaus o els taronges, ja que la distribució és només qüestió de posicionament en CSS. Els altres es mostraran a la manera convencional que qualsevol altre post. Com veurem després i tal i com he apuntat abans, no arribarem del tot a allò que buscàvem, però ens hi haurem acostat significativament.

Amb la tècnica aquí explicada, utilitzarem el loop de wordpress per mostrar els posts a la columna de l'esquerra, blava quan es faci clic als enllaços blaus, mentre que utilitzarem el Coda-Slider perquè els continguts es mostrin desplaçant-se dins la columna de la dreta, taronja, quan es faci clic als enllaços d'aquest color.

• Apunt sobre el loop de Wordpress: Els posts o les entrades en Wordpress es mostren a través del que s'anomena el loop. El loop és una iteració que fa que es vagin mostrant els posts, un darrera l'altre, sempre que es compleixi una determinada condició. En la configuració per defecte de Wordpress, això és el que fa que a la pàgina inicial es mostrin els posts més recents, és a dir en ordre cronològic invers. La condició que es compleix en aquesta configuració per defecte del loop és que els posts mostrats es troben entre els n posts (crec que per defecte són 10) més recents. Com configurar el loop en Wordpress en profunditat, però, no és objecte d'aquest tutorial.

Així doncs, ubicarem el loop dins la pàgina index.php i entre els divisors CSS que considerem convenients. En el meu cas, el codi del loop inserit té aquest aspecte:

  		<div id="posicionadorColumnaBlava">
  			<?php 
			query_posts($query_string.'&posts_per_page=1');
			while(have_posts()) { the_post(); ?>
  						<div <?php post_class() ?> id="post-<?php the_ID(); ?>">	    					
  							<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>			
  							<div class="entry">
  								<?php the_content('Read the rest of this entry &raquo;'); ?>
  							</div>
  						</div>
  			<?php } ?>    
  		<!-- final posicionadorColumnaBlava -->
  		</div>
  

Amb aquest codi fem que es carreguin els posts dins el divisor css amb l'Id posicionadorColumnaBlava, d'acord amb les funcions en PHP que hi són incloses. Si mireu aquest codi atentament, us fixareu en el posts_per_page=1, paràmetre que posem intencionadament per tal que a la columna blava se'ns carregui ni més ni menys que un post.

Després, es tractarà que els enllaços blaus es dirigeixin a posts en particular. És a dir, seran enllaços aproximadament amb aquesta forma:

  <a href="http://localhost/LaTevaPagina/wordpress/?p=14">Entrada catorze</a>

per exemple. El nombre 14 del final de la URL és l'identificador que té aquest post, i podeu identificar a quin nombre corresponen els que vulgueu utilitzar xafardejant la secció de gestió de posts del panell d'administració.

D'acord amb la Template Hierarchy de Wordpress, els posts per defecte es carreguen seguint la plantilla marcada pel fitxer single.php. En el nostre cas, però, volem que els posts es carreguin a la pàgina index.php, que també ha de mostrar el marc del Coda-slider. En alguns casos aconseguir això serà tan senzill com eliminar o canviar de nom el fitxer single.php dins el directori de la nostra plantilla. En el meu cas, i segurament a causa que utilitzo un sistema de temes emparentats, va ser més complex i vaig haver de fer un enllaç simbòlic anomenat single.php que apuntava cap a index.php.

• Potser no tots els proveïdors de serveis web ens donaran accés per terminal i/o la possibilitat de crear enllaços simbòlics. En qualsevol cas, si ja tenim la versió definitiva de la web, ha de ser suficient que els continguts del fitxer single.php siguin exactament els mateixos que els d'index.php.

1. El primer que hem és descarregar els fitxers que tan amorosament va elaborar en Niall. Per això anirem a la pàgina sobre el Coda-slider i ens en descarregarem la darrera versió. Mai està de més llegir les notes del propi autor, ja que ens donaran moltes pistes sobre possibles malfuncionaments o sobre com ho podríem adaptar a les nostres necessitats.
2. Després descomprimirem els continguts de l'arxiu descarregat a la carpeta arrel de la nostra instal·lació del Wordpress. Si coneixeu l'edició de plantilles i temes de Wordpress, probablement estareu acostumats a haver de treballar principalment sobre el directori localhost/wordpress/wp-content/themes/elvostretema, per exemple. A causa de la complexa configuració de rutes del sistema, però, hem de posar aquests fitxers a localhost/wordpress (d'acord amb el mateix exemple d'abans) perquè les llibreries que permeten al Coda-slider funcionar siguin accessibles. Hi ha també una carpeta images que desconec on cal situar -perquè no l'he aprofitada en el meu disseny- però res em fa pensar que sigui una ubicació diferent de la que acabem de veure.
3. A la pàgina header.php del tema que estiguem editant, per exemple tot just després de la declaració dels estils CSS (i en qualsevol cas entre les etiquetes <head> i </head>), posarem les crides a les llibreries i la inicialització de la funció que construeix l'slider:

<script src=“jquery-1.2.1.pack.js” type=“text/javascript”></script>

  <script src="jquery-easing.1.2.pack.js" type="text/javascript"></script>
  <script src="jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
  <script src="coda-slider.1.1.pack.js" type="text/javascript"></script>
  
  <!-- Initialize each slider on the page. Each slider must have a unique id -->
  
  <script type="text/javascript">
      jQuery(window).bind("load", function() {
          jQuery("div#slider1").codaSlider()
      });
  </script>
  

Cal notar que no és obligatori que tot això estigui necessàriament dins el document header.php. Wordpress és un sistema flexible i podem tenir, si volem, el codi sencer de la pàgina dins un sol document index.php, i dins d'ell -i al lloc adequat, òbviament, entre les etiquetes head- l'inicialitzador que acabem de veure.

El codi XHTML-CSS que Coda-slider necessita té aquest aspecte:

  <div class="slider-wrap">
  	<div id="slider1" class="csw">
  		<div class="panelContainer">
  			<div class="panel" title="Panell 1">
  				<div class="wrapper">
  Contingut del Panell 1
  				</div>
  			</div>
  			<div class="panel" title="Panell 2">
  				<div class="wrapper">
  Contingut del Panell 2
  				</div>
  			</div>
  			<div class="panel" title="Panell n">
  				<div class="wrapper">
  Contingut del Panell n
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
  

El que això significa és que cada cosa que hi hagi dins cada div de la classe panel serà un dels continguts que nosaltres volem desplaçar. Aquesta configuració és ideal, per exemple, per a un portafolis de tal manera que dins de cada div de classe panel podríem posar una imatge de la nostra obra i una breu explicació. Però en el cas que jo em plantejava, allò que havia d'haver-hi dins de cada div class=“panel” és un post, una entrada del Wordpress. Fer això, com veureu, no és del tot trivial.

El codi que hem d'escriure a fi que es mostrin els posts dins el Coda-slider té n divisors de la classe panel. Això vol dir que haurem de fer tants d'aquests divisors com enllaços i continguts volem que siguin clicables i accessibles -respectivament- a l'àrea taronja (dreta) de la pàgina.

Dins de cada un d'aquests divisors de la classe panel haurem de fer una crida perquè s'hi mostri un post. Inicialment vaig intentar fer això a través d'un segon loop de Wordpress que crees tants divisors de classe panel com fossin necessaris, però al final em va semblar més senzill utilitzar el plugin Get-a-post:

1. Descarregueu-vos el plugin Get-a-post des d'aquesta pàgina i instal·leu-lo al Wordpress des del panell d'administració, prèvia ubicació del plugin al directori de plugins del Wordpress.
2. Per fer aparèixer un post, n'hi ha prou d'inserir allà on vulguem que aparegui:

  <?php get_a_post(16); ?>
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
  <?php the_content('Read the rest of this entry &raquo;'); ?>

El número 16 de la primera línia és l'identificador del post que volem fer aparèixer.

Per tant, en el cas que tinguem 3 posts accessibles des de 3 enllaços de color taronja, tindrem un codi semblant a aquest per mostrar-los dins el Coda-slider:

  <div class="slider-wrap">
  	<div id="slider1" class="csw">
  		<div class="panelContainer">
  			<div class="panel" title="Panell 1">
  				<div class="wrapper">
			<?php get_a_post(16); ?>
			<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
  				</div>
  			</div>
  			<div class="panel" title="Panell 2">
  				<div class="wrapper">
			<?php get_a_post(18); ?>
			<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
  				</div>
  			</div>
  			<div class="panel" title="Panell 3">
  				<div class="wrapper">
			<?php get_a_post(20); ?>
			<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>

Tal com veieu, el codi és el mateix que ja vèiem per explicar el funcionament de Coda, simplement amb el codi inserit que acabem de veure.

Els enllaços que farem servir per accedir a cada contingut dins el Coda-slider són simplement elements a de la classe cross-link i amb un href corresponent al panell al qual han de fer la crida: #1, #2, #3, etc., en una ordenació que NO és relativa al títol que hem posat al panell -al navegador li és igual, òbviament- sinó a la seqüència amb què s'estructuren els divisors de classe panel.

El menú que conté aquests enllaços (en taronja) tindria més o menys aquesta forma:

  	<div id="menuEnllacosTaronja">
  		<div class="menusSuperiors">
  			<a href="#1" class="cross-link">Contingut 1</a>
  			<a href="#2" class="cross-link">Contingut 2</a>
  			<a href="#3" class="cross-link">Contingut 3</a>
  		</div>
  	</div>

• Podeu descarregar un fitxer d'exemple que il·lustra la codificació final del meu fitxer index.php del directori de plantilles.

El principal desavantatge amb què ens trobem és que quan fem clic als enllaços taronja i se'n carreguin els continguts corresponents, la navegació dins el Coda-slider es reinicialitzarà al primer post. Per això penso que aquesta tècnica s'ha d'aplicar estratègicament: és útil en casos en què vulguem diferenciar dues zones de contingut, i en què la usabilitat d'una d'aquestes zones sigui secundària.

Així, en el meu cas, el nombre i la importància dels continguts que es mostren dins el Coda-slider és menor, i per això és tolerable que cada vegada que es faci clic a un enllaç blau, la columna taronja mostri el contingut corresponent al primer dels enllaços. La situació inversa, però, no es donarà, i tampoc en cap moment se'ns quedarà una de les zones en blanc, la qual cosa per mi ja va suposar una millora. Espero que a vosaltres (a tu) també et serveixi.

Evidentment, perquè et serveixi del tot, res ni ningú t'estalvia la necessitat que consultis i llegeixis els enllaços que t'adjunto, i també pot fer falta que facis investigació pel teu compte. Google, per sort o per desgràcia, és una inestimable ajuda.

• El Coda-slider de Niall Doherrty
• Utilitzar el plugin Get-a-post per a fer aparèixer els continguts que ens interessa dins el Coda-slider
• El template Hierarchy de Wordpress, explicació sobre quins fitxers plantilla són demanats al servidor.
• El loop en Wordpress

• Coda Slider Effect, no és el mateix que el de Niall Doherty
• jFlow