El WordPress

• Escriptori.

• Entrades.

• Multimèdia.

• Enllaços (links).

• Pàgines.

• Comentaris (per a què serveix Akismet).

• Aparença.

• Plug-ins.

• Usuaris (rols).

• Eines.

• Ajustaments.

• Dreamweaver (http://www.adobe.com/products/dreamweaver.html). Un potent editor d’Adobe amb funcions avançades com el MultiScreen View. Per a plataformes Windows i Mac.

• Notepad ++ (http://notepad-plus-plus.org/). Editor de codi font. Per a plataforma Windows.

• Smultron (http://www.peterborgapps.com/smultron/). Editor web senzill per a la plataforma Mac. Es poden trobar en la Mac App Store.

• Aptana Studio (http://www.aptana.com/). És una evolució de l'editor de codi obert Eclipse adaptat al desenvolupament web. Preparat per a editar HTML, CSS i JavaScript, a més de PHP. Per a plataformes Windows, Mac i Linux,

• Netbeans (http://netbeans.org/). Editor avançat per a PHP i altres llenguatges. Per a plataformes Windows, Linux i Mac OS X.

• Crear una carpeta dins de wp-content/themes amb el nom que vulguem.

• Crear un arxiu “screenshot.png” de 300px × 225px i copiar-lo dins d'aquesta carpeta (opcional, aquesta és la imatge que apareix de mostra en l'administrador).

• Crear un arxiu CSS anomenat style.css amb el contingut següent:

  /*
  Theme Name: El nom del meu tema
  Theme URI: http://lapaginadelmeutema.com
  Description: Explicació sobre el meu tema
  Version: 1
  Author: El teu nom
  Author URI: http:://lamevapaginaweb.com
  Tags: duescolumnes, blau, arial
  */

• Finalment, crear un arxiu index.php, que serà la plantilla principal del nostre tema. Dins d’index.php haurem d'escriure unes instruccions de PHP perquè el contingut sigui dinàmic.

• the_permalink(). Mostra l’enllaç a la pàgina única del contingut

• the_title(). Mostra el títol del contingut

• the_content(). Mostra el contingut.

• Etc.

<?php get_header(); ?> <!-- inclou la capçalera -->
<?php if ( have_posts() ) : ?> 
	 <!-- si hi ha contingut en aquesta pàgina -->
   <?php while ( have_posts() ) : the_post(); ?> 
	 <!-- mentre hi hagi continguts -->
   <a href="<?php the_permalink()?>"> 
	 <!-- crea un enllaç amb el permalink -->
   <?php the_title();?></a> <!-- el títol del contingut -->
   <?php the_content();?> <!-- el contingut -->
  <?php endwhile; ?>
<?php endif; ?>
<?php get_sidebar(); ?> <!-- inclou el sidebar -->
<?php get_footer(); ?> <!-- inclou el footer -->

Esquema d'una plantilla principal

• Que l'HTML i el CSS siguin vàlids.

• Que no hi hagi errors de JavaScript.

• Verificar-lo en diferents navegadors, com IE7, IE8, IE9, Safari, Chrome, Opera i Firefox, en l'escriptori, més una bona selecció de navegadors en dispositius.

• Eliminar comentaris innecessaris que puguem haver deixat en els arxius.

• Crear un directori dins de temes amb el nom que vulguem.

• Crear un arxiu style.css i, a part dels camps que ja coneixíem (vegeu l’apartat anterior), afegir:

  Template: foo

  Aquesta és la línia important que especifica que aquest tema està derivat d'un altre (el que es diu foo i, per tant, es troba a Themes/Foo).

• A més en el CSS del nostre tema hem d'importar el CSS del tema “pare” (sempre imaginant que el tema pare es diu foo):

  @import url("../foo/style.css');

• Thematic (http://wordpress.org/extend/themes/thematic).

• Toolbox (http://wordpress.org/extend/themes/toolbox).

• Foundation (https://github.com/drewsymo/Foundation).

• _s (http://themeshaper.com/2012/02/13/introducing-the-underscores-theme/).

• Skeleton (http://www.getskeleton.com/).

• Partiu d'un tema derivat de Toolbox (“Child” o, si es vol, un altre tema base diferent). Per a això, consulteu les instruccions de l'apartat anterior.

• Activeu l'opció d'imatges destacades (o “Post thumbnails”) a functions.php:

  add_theme_support( 'post-thumbnails' );

  Aquesta instrucció afegeix l'opció de vincular una imatge destacada per a cada entrada.

• Creeu diverses entrades de prova (com a mínim cinc), totes amb la categoria “Portfolio” i amb “Imatge destacada”.

• Creeu una plantilla dins del nostre tema derivat anomenada “category-portfolio.php”. D'aquesta manera el WordPress utilitzarà aquesta plantilla quan entrem a /category/portfolio i ens mostrarà una llista de les entrades corresponents.

• El contingut inicial d'aquesta plantilla, molt simplificat, pot ser el següent:

  <?php get_header(); ?>
  
     <?php if ( have_posts() ) : ?>
     <?php while ( have_posts() ) : the_post(); ?>
  
  <!-- contingut d'una entrada del portfolio -->
     <a href="<?php the_permalink()?>">
     <?php the_post_thumbnail('thumbnail');?></a>
  <!-- fi del contingut d'una entrada -->
  
     <?php endwhile; ?>
     <?php endif; ?>
     
  <?php get_sidebar(); ?>
  <?php get_footer(); ?>

  “the_post_thumbnail(‘thumbnail’)” escriu en la plantilla la imatge destacada en format petit.

• També volem canviar l'aspecte de la pàgina única de les entrades del “Portfolio”, que correspon a la plantilla “single.php”. Podríem partir del “single.php” del tema pare, i afegir almenys aquesta línia, que és la que mostra la imatge en format gran:

  <?php the_post_thumbnail('large'); ?>

  if ( in_category( 'portfolio' ) ) { //si el post és d'aquesta categoria
     get_template_part('single-portfolio'); 
  	 //utilitza una altra plantilla
  
  }else{
  
  .. resta de la plantilla single.php

  <?php
  } //tancar l'if
  ?>

  No obstant això aquesta solució no ens permet tenir una plantilla independent per a les pàgines úniques del “Portfolio”. Si volem tenir una plantilla independent, com que això no està previst en el sistema de plantilles de WordPress, haurem de “hackejar” una mica. Per a això una solució seria editar la plantilla “single” i afegir al principi

  i al final

  Aquesta plantilla “single” decideix utilitzar una altra plantilla diferent anomenada “single-portfolio.php” en funció de si el contingut té la categoria “Portfolio”.

<?php the_post_thumbnail('large'); ?>

• Per a començar i poder fer proves necessitarem afegir continguts (almenys deu entrades de la categoria).

• Si volem afegir l'opció de paginació a “category-portfolio.php”, hem d'inserir al final o on volem que aparegui:

  <?php
  next_posts_link();
  previous_posts_link();
  ?>

• Afegirem un contenidor exterior a les fotos (thumbnails quadrats) escrivint els “div” en la plantilla (potser un “div” per a la imatge i un altre per al títol) i modificarem el CSS perquè es mostri com una reixeta de 3x3.

• Modificarem el nombre de posts a nou en comptes de deu (a Ajustaments/Lectura).

• Si volem afegir un “div” amb el títol sobre les imatges:

  the_title()

• Crearem un contenidor per als thumbnails i un altre per als títols, modificarem el CSS per a modificar l'aspecte.

• Fins i tot podríem afegir un script jQuery per a mostrar els títols en fer rollover:

  <script>
  var $j = jQuery.noConflict();
  $j(document).ready(function(){
     $j('.thumb').mouseover(function(){
    $j(this).find('.thumb-title').show("fast");
     });
     $j('.thumb').mouseout(function(){
    $j(this).find('.thumb-title').hide();
     });
  });
  
  </script>

• Crear un tema child de qualsevol altre ja existent que s'adapti al nostre disseny i modificar (només) el CSS.

• Crear un tema child d'un tema framework, com pot ser Toolbox, i modificar el CSS i les plantilles que necessitem redefinir.

• Crear un tema des de zero. No derivar el tema de cap altre i crear totes les plantilles des de zero (per a experts).

• Sí: en aquest cas, s’ha de crear un tema child i personalitzar el CSS com vulguem. Fi.

• No: en cas contrari, s’ha de passar al punt següent.

• Sí: s’ha de crear un tema child i personalitzar el CSS. Fi.

• No: s’ha de passar al punt següent.

<?php
/*
Template Name: La meva plantilla
*/
?>
.. resta de codi

• Sí: s’han de crear les plantilles especials que vulguem. Fi.

• No: s’ha de passar al punt següent.

• Sí: s’han de crear les plantilles necessàries. Fi.

• No: s’ha de passar al punt següent.

• Sí: s’ha de personalitzar el codi de “functions.php” o d'alguna de les plantilles. Fi.

• No: s’ha de passar al punt següent.

• Navegador web d'escriptori. La resolució sol ser alta o molt alta i s'interactua amb un ratolí o un touchpad.

• Tauleta. Aquí el condicionant, més que la resolució, és que les pantalles són tàctils i, per tant, les zones sensibles han d'estar pensades per a això.

• Mòbils (telèfons intel·ligents o smartphones). Amb pantalles molt més petites.

• Crear un tema especial per a mòbilsi un altre per a l’escriptori i/o tauleta. Per a això hem d'activar un plug-in que detecti el dispositiu i ens permeti seleccionar un tema per al nostre web en funció d'això.

• Utilitzar un tema responsive que s'adapti a la mida de la pantalla.

<?php
is_handheld(); // any handheld device (phone, tablet, Nintendo)
is_mobile(); // any type of mobile phone (iPhone, Android, Nokia etc)
is_tablet(); // any tablet device (currently iPad, Galaxy Tab)
is_ios(); // any Apple device (iPhone, iPad, iPod)
?>

• Utilitzar un navegador normal i variar la mida de la finestra (millor si utilitzem Chrome o Safari, que utilitzen Webkit igual que els navegadors per defecte d'iPhone i Android).

• Utilitzar un simulador de navegador mòbil, com el d'Opera, Opera Mobile Emulator (http://www.opera.com/developer/tools/mobile/).

• Utilitzar un emulador del kit de desenvolupament d'iPhone, Android, etc.

• Utilitzar un emulador en línia.

[gallery id="123" size="medium"]

• Accions. El nostre plug-in es pot activar en determinats “esdeveniments” de WordPress. Per exemple, en el moment de publicar-se una nova entrada, en canviar de tema, en afegir un nou comentari, etc. En aquest moment podem capturar l’“esdeveniment” i modificar el contingut, enviar un correu electrònic o qualsevol altra acció que vulguem fer.

• Filtres. Es criden abans de desar informació en la base de dades o en mostrar-se en el navegador.