Creació d'un tema visual per al bloc de centre

Un cop heu arribat a aquesta fase del desenvolupament del disseny del lloc web, només us resta transformar el disseny que heu realitzat a tema o plantilla a un sistema de publicació web dinàmic.

Aquesta part contempla una certa dificultat ja que us obligarà a barrejar el llenguatge dinàmic propi de la tecnologia web escollida i el disseny (estructura i estil).

Hem considerat l'adaptació del disseny web que heu realitzat fins ara a un sistema de publicació ben popular com és Wordpress perquè us ajudarà a comprendre millor aquest procés.

Recordeu que Wordpress és la tecnologia que hi ha darrera de XTEC Blocs.

Anàlisi previ

L'estructura d'un tema de WordPress és bastant simple. Veieu a continuació els diferents arxius i directoris que formen el tema que ve activat per defecte:

Els temes es desen a la carpeta wp-content/themes/. Per defecte, Wordpress ve amb dues plantilles:

  • default, la que apareix en el moment que activeu per primera vegada un Wordpress
  • classic, una plantilla clàssica incorporada des de la versió 1.5 del Wordpress

L'objectiu es crear un tema senzill i funcional i, per tant, no és imprescindible una explicació somera de tots els fitxers del tema default. Els fitxers necessaris són els següents:

  • index.php: és el fitxer principal i per tant, un dels dos arxius que requereix Wordpress perquè el tema sigui funcional.
  • style.css: és el segon fitxer principal i imprescindible perquè el tema sigui funcional. Aquest serà el full d'estil del tema.
  • header.php: és el fitxer que determinarà el comportament i l'estructura de la capçalera
  • footer.php: és el fitxer que determinarà el comportament i l'estructura del peu de pàgina.
  • sidebar.php: és el fitxer que determinarà el comportament i l'estructura de la columna lateral.

Abans de començar

  1. Creeu una nova carpeta anomenada d227 dins de la carpeta wp-content/themes del Wordpress.
  2. Accediu a la carpeta d227 i creeu una carpeta anomenada images i copieu el contingut de la carpeta imatges del lloc web, és a dir:
  3. Copieu els dos arxius d'estil (reset.css i d227.css) dins de la carpeta d227. Reanomeneu d227.css per style.css per mantenir la convenció que proposa Wordpress per a la creació de nous temes.

Si visiteu el panel d'administració del Wordpress i cliqueu sobre l'opció Aparença, veureu que Wordpress us informarà que nou tema encara no és funcional:

Aviat modificareu l'estat del tema perquè sigui completament operatiu, però abans de visitar la següent pràctica, llegiu atentament la següent secció sobre PHP i les funcions de Wordpress (necessàries per fer efectiu el funcionament correcte del tema)

Cal saber PHP?

Wordpress està desenvolupat en el llenguatge PHP1). Aquest no és pas un curs de PHP ni tampoc necessiteu ser desenvolupadors o programadors PHP per utilitzar-lo, però sí necessiteu una mínima referència del llenguatge per saber transformar el disseny estàtic del lloc web a un tema visual dinàmic de Wordpress o altres infraestructures web dinàmiques basades en aquest llenguatge.

Per començar, veieu la següent expressió que, a partir d'aquest moment, fareu servir sovint al llarg d'aquest i el següent mòdul:

<?php ?>

Les etiquetes d'apertura (<?php) i tancament (?>) contenen funcions o expressions del llenguatge PHP i que podeu incloure dins d'un document HTML. Aquesta manera de barrejar funcions del llenguatge PHP amb l'estructura HTML és una de les àmpliament suportades per un servidor web (per exemple, el servidor Phobos de la XTEC).

Perquè el servidor web sàpiga que un document HTML porta fragments del llenguatge PHP al seu interior, heu de reanomenar l'extensió .html a .php. Per aquesta raó, l'arxiu index.html passa a ser index.php.

Tot allò que estigui dins d'aquestes dos etiquetes seran interpretades pel servidor web com a llenguatge PHP, és a dir, el programari intèrpret de PHP llegirà cadascuna de les expressions i retornarà un valor. Veieu un exemple molt senzill relacionat amb Wordpress:

<h1><?php the_author(); ?></h1>

En aquest exemple identificareu l'expressió PHP tancada a dins de les etiquetes <?php ?>. és una funció (the_autor) que mostrarà en pantalla el nom de l'autor o autora d'un article del bloc.

Una mica més sobre les funcions de Wordpress

Les funcions PHP que treballareu a continuació són en realitat funcions pre-fabricades que porta incorporades el mateix Wordpress per facilitar la feina de desenvolupament d'una plantilla visual.

Aquest modus operandi és gairebé molt comú a la resta de tecnologies web com veureu amb Moodle, Mahara, Dokuwiki, Mediawiki, Zikula , etc. Cadascuna d'aquestes infraestructures porten un conjunt de funcions que us ajudaran a crear una plantilla o tema visual sense reinventar la roda.

Com al llenguatge PHP, una funció de Wordpress s'identifica per una línia de text, formada per una o més paraules sense espais, seguit per un parèntesis d'apertura i un altre de tancament i, per acabar, el símbol de punt i coma per indicar l'acabament de la funció. Recuperem l'exemple anterior d'una funció de Wordpress:

the_author();

Si la necessiteu incorporar dins de la pàgina del tema visual, recordeu afegir les etiquetes d'apertura i tancament de PHP:

<?php the_author(); ?>

Paràmetres opcionals

A vegades voldreu que el valor que retorna una funció sigui més personalitzada i adient al context de la plantilla visuall. La manera de poder personalitzar la sortida de les funcions de Wordpress és a través dels paràmetres o arguments de la funció, és a dir, a partir d'uns determinats valors que algunes funcions accepten dins dels parèntesis.

Cada paràmetre ha d'estar separat per comes.

Imagineu-vos la següent funció de Wordpress:

the_title()

Aquesta funció de Wordpress retorna el títol d'un article del bloc. Si llegiu la documentació de la funció, comprovareu que la funció accepta tres paràmetres:

<?php the_title( $before, $after, $display ); ?>

Aquest paràmetres signifiquen:

  • $before: Requereix una cadena de text. Aquesta cadena de text s'ubicarà abans del títol. Per defecte aquest valor és nul.
  • $after: Requereix una cadena de text. Aquesta cadena de text s'ubicarà després del títol. Per defecte aquest valor és nul.
  • $display: Mostra o no el títol. Requereix un valor de verdader (TRUE) o fals (FALSE). Per defecte el valor és TRUE.

Veiu el següent exemple personalitzat de la funció:

<?php the_title('<h2>', '</h2>'); ?>

Si el títol de l'article és Lorem Ipsum Dolor, el resultat que oferirà l'intèrpret de PHP al llegir aquesta funció amb aquest paràmetres serà:

<h2>Lorem Ipsum Dolor</h2>