Una de las grandes novedades que incorpora Wordpress 3.0 es la posibilidad de crear Entradas Personalizadas (Custom Post Types), es decir un nuevo tipo de entradas parecidas a las Entradas normales y a las Páginas, y que aparecerán también de manera separada en el menú de la izquierda del administrador de Wordpress. ¿Qué ventajas nos ofrecen las Entradas Personalizadas? Una mayor facilidad de uso de nuestro tema, estructurando mejor los distintos tipos de entradas. Por ejemplo, si queremos insertar una lista de productos con una serie de características comunes, podemos crear una estradas personalizadas que se llamen Producto y que estén configuradas de manera específica para insertar dichos productos. En vez de decirle a nuestro cliente que cree una entrada normal y que rellene toda una serie de campos personalizados sólo utilizables para insertar un producto pero no para cualquier otra entrada, que no se equivoque con las categorías que son sólo para productos y no para el resto de entradas, etc.. ahora símplemente tendrá que hacer click en “Productos” y rellenar cada campo específico para ese tipo de entrada.

Pero como siempre, esto se verá mejor con un ejemplo. Vamos a crear una entrada personalizada que se llame “Productos”. Con el permiso de Friendware (su web la hice yo hace un par de años) vamos a usar algunos de sus juegos para PC. Cada producto va a tener un título, una descripción, un precio, un fabricante, una plataforma y una imagen.

Vamos a usar campos personalizados para el precio y el fabricante y taxonomías personalizadas para la Plataforma (en realidad Fabricante debería ser una taxonomía, pero lo pongo como campo personalizado para ver mejor cómo se crean varios).

En el administrador vamos a tener en el menú de la izquierda:

Si hacemos click sobre Añadir tendremos:

Y al hacer click sobre Editar tendremos una tabla con todos los productos:

Pero ahora viene lo mejor. Si tenemos activados los enlaces permanentes podemos ir a una url que sea por ejemplo www.miweb.es/Productos/ donde se vean todos los productos introducidos con los estilos que hayamos definido:

Bien, ya sabemos lo que vamos a crear. Ahora vamos a ver paso a paso cómo crearlo. No he visto ningún artículo completo que indique todos lo pasos de manera completa. Por ello me he basado en diferentes artículos y webs. Sus enlaces están al final del artículo.

Paso 1: Crear una Entrada Personalizada

La mejor manera que he encontrado para crear una Entrada Personalizada es utilizando la clase creada por Matt Wiebe. La razón es que además de crear una función que nos permite crear Entradas Personalizadas con gran facilidad, añade a la función que habitualmente crea entradas personalizadas (register_post_type) una serie de funcionalidades extra:

1. URLs personalizadas para cada Entrada Personalizada. (ejemplos http://miweb.com/productos/, http://miweb.com/productos/page/2/, http://miweb.com/productos/feed/ )
2. Archivos personalizados para cada Entrada Personalizada, por ejemplo producto/index.php o producto.php en el directorio de nuestro tema.
3. Páginas individuales personalizadas: WP busca el fichero single-producto.php (en su defecto por single.php). Con esta función podemos usar producto/single.php para una mejor organización..
4. Añade clases a body_class() y a post_class().
5. Auto genera las etiquetas apropiadas para el Administrador si no suministras una.

El punto 1 me parece muy importante, ya que Wordpress 3.0, al menos en la beta 2, no crea por defecto una url donde podamos ver todas las entradas de una misma entrada personalizada (por ejemplo, todos los productos).

El código, que habría que llevar al archivo functions.php, lo podemos descargar desde la web de Matt Wiebe. Una vez tengamos ese código pegado en el archivo functions.php de nuestro tema, escribiremos a continuación para crear la Entrada Personalizada “Producto”:

1

sd_register_post_type( 'Producto' );

Aquí está el código completo. Hay que tener en cuenta que Matt Wiebe está continuamente mejorando esta función añadiendo nuevas características, por lo que estad pendientes de sus actualizaciones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

/*
 * Copyright 2010 Matt Wiebe.
 *
 * This code is licensed under the GPL v2.0
 * http://www.opensource.org/licenses/gpl-2.0.php
 *
 * If you do something cool with it, let me know! http://somadesign.ca/contact/
 *
 * Version 1.3
 *
 * === Changelog ===
 *
 * 1.0
 *  - Initial release
 * 1.1
 *  - Added feed support in URL rewrites
 * 1.2
 *  - Removed redundant post_class code.
 *  - Removed redundant single post_type template code
 *  - Introduced directory support for template files
 * 1.3
 *  - Use the newer, more robust labels array to set defaults
 *  - Add possible support for adding post_type to nav_menus. Commented out by default since the 'show_in_nav_menus' $arg should provide for that, although it doesn't seem to work right now.
 *
 */
 
/**
 * SD_Register_Post_Type class
 *
 * @author Matt Wiebe
 * @link http://somadesign.ca
 *
 * @param string $post_type The post type to register
 * @param array $args The arguments to pass into @link register_post_type(). Some defaults provided to ensure the UI is available.
 * @param string $custom_plural The plural name to be used in rewriting (http://yourdomain.com/custom_plural/ ). If left off, an "s" will be appended to your post type, which will break some words. (person, box, ox. Oh, English.)
 **/
 
if ( ! class_exists('SD_Register_Post_Type') ) {
 
	class SD_Register_Post_Type {
 
		private $post_type;
		private $post_slug;
		private $args;
		private $post_type_object;
 
		private $defaults = array(
			'show_ui' => true,
			'public' => true,
			'supports' => array('title', 'editor', 'thumbnail')
		);
 
		private function set_defaults() {
			$plural = ucwords( $this->post_slug );
			$post_type = ucwords( $this->post_type );
 
			$this->defaults['labels'] = array(
				'name' => $plural,
				'singular_name' => $post_type,
				'add_new_item' => 'Add New ' . $post_type,
				'edit_item' => 'Edit ' . $post_type,
				'new_item' => 'New ' . $post_type,
				'view_item' => 'View ' . $post_type,
				'search_items' => 'Search ' . $plural,
				'not_found' => 'No ' . $plural . ' found',
				'not_found_in_trash' => 'No ' . $plural . ' found in Trash'
			);
		}
 
		public function __construct( $post_type = null, $args = array(), $custom_plural = false ) {
			if ( ! $post_type ) {
				return;
			}
 
			// meat n potatoes
			$this->post_type = $post_type;
			$this->post_slug = ( $custom_plural ) ? $custom_plural : $post_type . 's';
 
			// a few extra defaults. Mostly for labels. Overridden if proper $args present.
			$this->set_defaults();
			// sort out those $args
			$this->args = wp_parse_args($args, $this->defaults);
 
			// magic man
			$this->add_actions();
			$this->add_filters();
 
		}
 
		public function add_actions() {
			add_action( 'init', array($this, 'register_post_type') );
			add_action( 'template_redirect', array($this, 'context_fixer') );
		}
 
		public function add_filters() {
			add_filter( 'generate_rewrite_rules', array($this, 'add_rewrite_rules') );
			add_filter( 'template_include', array($this, 'template_include') );
			add_filter( 'body_class', array($this, 'body_classes') );
		}
 
		public function context_fixer() {
			if ( get_query_var( 'post_type' ) == $this->post_type ) {
				global $wp_query;
				$wp_query->is_home = false;
			}
		}
 
		public function add_rewrite_rules( $wp_rewrite ) {
			$new_rules = array();
			$new_rules[$this->post_slug . '/page/?([0-9]{1,})/?$'] = 'index.php?post_type=' . $this->post_type . '&paged=' . $wp_rewrite->preg_index(1);
			$new_rules[$this->post_slug . '/(feed|rdf|rss|rss2|atom)/?$'] = 'index.php?post_type=' . $this->post_type . '&feed=' . $wp_rewrite->preg_index(1);
			$new_rules[$this->post_slug . '/?$'] = 'index.php?post_type=' . $this->post_type;
 
			$wp_rewrite->rules = array_merge($new_rules, $wp_rewrite->rules);
			return $wp_rewrite;
		}
 
		public function register_post_type() {
			register_post_type( $this->post_type, $this->args );
		}
 
		public function template_include( $template ) {
			if ( get_query_var('post_type') == $this->post_type ) {
 
				if ( is_single() ) {
					if ( $single = locate_template( array( $this->post_type.'/single.php') ) )
						return $single;
				}
				else { // loop
					return locate_template( array(
						$this->post_type . '/index.php',
						$this->post_type . '.php',
						'index.php'
					));
				}
 
			}
			return $template;
		}
 
		public function body_classes( $c ) {
			if ( get_query_var('post_type') === $this->post_type ) {
				$c[] = $this->post_type;
				$c[] = 'type-' . $this->post_type;
			}
			return $c;
		}
 
 
	} // end SD_Register_Post_Type class
 
	/**
	 * A helper function for the SD_Register_Post_Type class. Because typing "new" is hard.
	 *
	 * @author Matt Wiebe
	 * @link http://somadesign.ca
	 *
	 * @uses SD_Register_Post_Type class
	 * @param string $post_type The post type to register
	 * @param array $args The arguments to pass into @link register_post_type(). Some defaults provided to ensure the UI is available.
	 * @param string $custom_plural The plural name to be used in rewriting (http://yourdomain.com/custom_plural/ ). If left off, an "s" will be appended to your post type, which will break some words. (person, box, ox. Oh, English.)
	 **/
 
	if ( ! function_exists( 'sd_register_post_type' ) && class_exists( 'SD_Register_Post_Type' ) ) {
		function sd_register_post_type( $post_type = null, $args=array(), $custom_plural = false ) {
			$custom_post = new SD_Register_Post_Type( $post_type, $args, $custom_plural );
		}
	}
}
 
sd_register_post_type( 'Producto' );

Del código de Matt Wiebe hay que destacar esta parte:

1
2
3
4
5

private $defaults = array(
	'show_ui' => true,
	'public' => true,
	'supports' => array('title', 'editor', 'thumbnail')
);

La línea que pone ’supports’ crea una cadena con los campos que soporta la Entrada Personalizada, en este caso el Título (title), el Contenido (editor) y la Imagen Destacada (thumbnail). Podemos ver todos los componentes posibles y más información sobre register_post_type en la web de wordpress. Como vemos, podríamos haber añadido ‘author’, ‘excerpt’ o ‘custom-fields’ por ejemplo.

Ahora podemos crear en el directorio de nuestro tema un archivo producto.php que recoja todos los productos introducidos y un archivo single-producto.php que muestre cada producto individual.

Archivo producto.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php get_header(); ?>
  <div id="container">
    <div id="content">
      <?php while ( have_posts() ) : the_post(); ?>
          <?php
             $custom = get_post_custom($post->ID);
             $precio = $custom["precio"][0];
             $fabricante = $custom["fabricante"][0];
           ?>
           <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
             <div class="entry-meta">
                   <div class="entry-content">
                    <?php the_post_thumbnail(); ?>
                    <?php the_content(); ?>
                     <p class="caracteristicas">Precio: <?=$precio?> - Fabricante: <?=$fabricante?> - <?php echo get_the_term_list($post->ID, 'plataforma', 'Plataforma: ', ', ', ''); ?></p>
                   </div>
             </div>
         </div>
      <?php endwhile; ?>
  <div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ojo: En la línea p class=”caracteristicas” hemos incluido la taxonomía “Plataforma” que aún no hemos creado (la creamos más abajo).

Archivo single-producto.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php get_header(); ?>
   <div id="container">
     <div id="content">
       <?php the_post(); ?>
       <?php
         $custom = get_post_custom($post->ID);
         $precio = $custom["precio"][0];
         $fabricante = $custom["fabricante"][0];
      ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <h1 class="entry-title"><?php the_title(); ?> - <?=$precio?> - <?=$fabricante?></h1>
          <div class="entry-meta">
    	   <div class="entry-content">
	     <?php the_post_thumbnail(); ?>
		<?php the_content(); ?>
	   </div>
         </div>
      </div>
  </div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Una vez tengamos todo este código listo podremos introducir nuestros Productos y podremos verlos todos en la url www.nuestraweb.com/Productos gracias a producto.php y podremos ver cada producto en concreto en la url www.nuestraweb.com/Productos/nombre-del-producto gracias a single-producto.php (hay que tener activados los enlaces permanentes. Si sale “página no encontrada” volved a grabar los enlaces permanentes ya que a veces necesitan actualizarse).

Paso 2- Crear los Campos Personalizados

A continuación vamos a crear los Campos Personalizados Precio y Fabricante para nuestras Entradas Personalizadas. Lo haremos siguiendo este artículo de Nettuts+. Ahora podremos darle a nuestros campos personalizados nombre propios claros para saber lo que es cada uno (en este caso Precio y Fabricante). Para ello añadimos a functions.php este código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

add_action("admin_init", "admin_init");
add_action('save_post', 'guardar_precio');
add_action('save_post', 'guardar_fabricante');
 
function admin_init(){
  add_meta_box("prodInfo-meta", "Opciones Producto", "meta_options", "Producto", "normal", "low");
}
function meta_options(){
  global $post;
  $custom = get_post_custom($post->ID);
  $precio = $custom["precio"][0];
  $fabricante = $custom["fabricante"][0];
?>
  <label>Precio:</label><input name="precio" value="<?php echo $precio; ?>" /><br /><br />
  <label>Fabricante:</label><input name="fabricante" value="<?php echo $fabricante; ?>" />
<?php
}
 
function guardar_precio(){
  global $post;
  update_post_meta($post->ID, "precio", $_POST["precio"]);
}
function guardar_fabricante(){
  global $post;
  update_post_meta($post->ID, "fabricante", $_POST["fabricante"]);
}

La primera linea indica que cuando se inicialice el panel de administración se llame a la función admin_init(). Esta función dice a WordPress que añada un área llamada “Opciones Producto” para cualquier Entrada Personalizada llamada Producto y que use la función meta_options() para mostrar los campos del formulario. Puedes leer más sobre add_meta_box aquí. meta_options() obtendrá entonces cualquier valor preexistente y lo mostrará en el formulario. Las dos lineas de acción que siguen a la primera línea hacen que cuando se grabe una entrada se llame a las funciones guardar_precio() y guardar_fabricante() que utilizan update_post_meta() para añadir o actualizar los campos personalizados “Precio” y “Fabricante”.

Paso 3 – Crear Taxonomías personalizadas asociadas

Una vez tengamos nuestras Entradas Personalizadas es posible que queramos tener una serie de Taxonomías que nos ayuden a clasificar los distintos productos según determinadas categorías. Podemos ver más información sobre las taxonomías en el artículo Taxonomías en Wordpress.

Vamos a crear, como dijimos, una Taxonomía personalizada llamada “Plataforma”, donde podremos poner si el juego es para PC CD-ROM, Playstation 3, etc… Para ello escribimos en functions.php:

1

register_taxonomy("plataforma", array("Producto"), array("hierarchical" => true, "label" => "Plataforma", "singular_label" => "Plataforma", "rewrite" => true));

Puedes encontrar más información sobre la función register_taxonomy() en la web de Wordpress. Aquí creamos una nueva Taxonomía llamada “Plataforma” y la asociamos a la entrada personalizada “Producto”. Para poder ver luego la taxonomía escribiríamos (como hemos visto más arriba en producto.php):

1

<?php echo get_the_term_list($post->ID, 'plataforma', 'Plataforma: ', ', ', ''); ?>

Paso 4 – Crear la tabla de productos en el panel de administración

Vimos al principio de este artículo que al hacer click sobre Editar en Producto salía una tabla con el nombre de cada producto, su descripción, precio, fabricante y plataforma. Esto no se crea por defecto. Para conseguirlo, tal y como vemos en el mismo artículo de nettuts+, hay que añadir en functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

add_filter("manage_edit-Producto_columns", "prod_edit_columns");
add_action("manage_posts_custom_column",  "prod_custom_columns");
 
function prod_edit_columns($columns){
   $columns = array(
      "cb" => "<input type=\"checkbox\" />",
      "title" => "Nombre del Producto",
      "descripcion" => "Descripción",
      "precio" => "Precio",
      "plataforma" => "Plataforma",
      "fabricante" => "Fabricante",
);
 
return $columns;
}
 
function prod_custom_columns($column){
    global $post;
    switch ($column)
       {
	case "descripcion":
	   the_excerpt();
	   break;
	case "precio":
	   $custom = get_post_custom();
	   echo $custom["precio"][0];
	   break;
        case "fabricante":
	   $custom = get_post_custom();
	   echo $custom["fabricante"][0];
	   break;
	case "plataforma":
	   echo get_the_term_list($post->ID, 'plataforma', '', ', ','');
	   break;
	}
}

En prod_edit_columns() tenemos un array donde los índices (keys) de cada variable se usan para referenciar cierta información de las entradas que definimos en la segunda función, prod_custom_columns() y donde los valores son las cabeceras de las columnas. En prod_edit_columns() hay 6 columnas pero sólo mostramos 4 en prod_custom_columns() ya que ‘cb’ y ‘title’ son parte de los índices por defecto de Wordpress para los que ya tiene asociaciones creadas.

Bueno, ¡y eso sería todo! Con este código adecuadamente incluído podemos tener las pantallas que veíamos al principio del artículo. Pero como véis hay mucho campo para ampliar las posibilidades que se nos ofrecen con las Entradas Personalizadas. Aquí hemos hecho una lista de Productos, pero podría haber sido las habitaciones de un hotel, una lista de canciones de distintos autores, una lista de libros o cualquier cosa que se nos ocurra.

Otras lecturas recomendadas

Smarter Custom Post Types
Rock-Solid WordPress 3.0 Themes using Custom Post Types
Custom post types in WordPress
Showing custom post types on your home/blog page
Custom Post Types in WordPress 3.0
Extending Custom Post Types in WordPress 3.0
Introducing WordPress 3 Custom Taxonomies

Google ha anunciado su nuevo API para fuentes, incluyendo un directorio de fuentes y una herramienta para visualizarlas. Esto nos permitirá incluir en nuestra web fuentes diferentes de las tradicionales (las que están incluídas en el directorio de fuentes de Google). La gran ventaja es su facilidad de uso. Símplemente hay que incluir un enlace al CSS de la fuente en Google y luego asignar la fuente al elemento que deseemos desde nuestra hoja de estilos.

Como vemos se trata símplemente de aplicar @font-face, pero con la ventaja de cargar la fuente desde Google, lo cual permite mejorar la velocidad de carga y reducir el consumo de ancho de banda (es como cargar jQuery desde Google).

Vamos con un ejemplo. Elejimos una fuente desde el directorio de fuentes de Google, por ejemplo Josefin Sans Std Light. Vemos que al poner el ratón sobre la misma aparece un botón que dice Click to embed Josefin Sans Std Light. Al hacer click iremos a una página que nos muestra los distintos tamaños y estilos disponibles para la fuente, una descripción y el set de caracteres. Además hay una pestaña que dice Get the Code. Si hacemos click sobre la misma vemos que nos dice que tenemos que pegar dentro del head de nuestra página:

1

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />

Ojo que la etiqueta en Google viene sin cerrar. Arriba yo la he cerrado para que valide bien la página.

Luego, en nuestra hoja de estilos, si queremos asignar esta fuente a los elementos h1 haríamos:

1

h1 { font-family: 'Josefin Sans Std Light', arial, serif; }

Y eso es todo! Según nos dicen en Google este sistema es compatible con Google Chrome: versión 4.249.4+, Mozilla Firefox: versión: 3.5+, Apple Safari: versión 3.1+ y Microsoft Internet Explorer: versión 6+.
No soportado por iPhone, iPad, iPod, o Android.

Aquí podéis ver la demo. Esperemos que el número de fuentes se vaya incrementando.

Otras lecturas de interés

Anuncio de Google sobre el API de fuentes (en Inglés)
Directorio de fuentes de Google

Tras una pregunta de Saúl sobre el artículo Creando un menú vertical desplegable con jQuery en la que me preguntaba cómo lograr que al abrir una opción del menú se cerrara cualquier otra que estuviera abierta (podéis ver la pregunta en la zona de comentarios del artículo anterior) he actualizado (bueno, básicamente cambiado) el código para que pueda hacerse lo que pide Saúl. Aunque lo he puesto en los comentarios respondiéndole me he animado a crear una nueva entrada por si a alguien le fuera de interés.

Lo que queremos conseguir es esto: Ejemplo de menú vertical desplegable con jQuery con efecto acordeón

Como veréis en el ejemplo, el código HTML completo del navegador es:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ul class="navegador">
  <li><a href="#" class="desplegable" title="Venta">Venta</a>
    <ul class="subnavegador">
      <li><a href="#" title="Viviendas">Viviendas</a></li>
      <li><a href="#" title="Aparcamientos">Aparcamientos</a></li>
    </ul>
  </li>
  <li><a class="desplegable" href="#" title="Alquiler">Alquiler</a>
    <ul class="subnavegador">
       <li><a href="#" title="Viviendas">Viviendas</a></li>
    </ul>
  </li>
  <li><a href="#" title="Oficinas">Oficinas</a></li>
  <li><a href="#" title="Ofertas">Ofertas</a></li>
  <li><a href="#" title="Oficina de Ventas">Oficina de Ventas</a></li>
</ul>

Y el código jQuery que lo hace posible:

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
  $(document).ready(function(){ // Script del Navegador
    $("ul.subnavegador").not('.selected').hide();
    $("a.desplegable").click(function(e){
      var desplegable = $(this).parent().find("ul.subnavegador");
      $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('slow');
      desplegable.slideToggle('slow');
      e.preventDefault();
    })
 });
</script>

Si tenéis alguna pregunta no dudéis en preguntar.

Los que hayáis creado webs o blogs con Wordpress sabéis ya que incorpora un potente servicio llamado Akismet para verificar, filtrar y reportar si un mensaje es considerado Spam. Aunque sus comienzos proceden de Wordpress existen ya gran cantidad de plugins para otros CMS (Drupal, Joomla, Expression Engine…), lenguajes y frameworks (PHP, Ruby, Phyton, Java, Ruby on Rails, Coldfusion, Codeigniter….).

Vamos a centrarnos en el plugin para PHP 5.

Lo primero que tenemos que hacer es descargarnos Akismet:
PHP5Akismet.0.4.zip 24K

A continuación descomprimimos el archivo Akismet.class.php y lo archivamos en una carpeta de nuestro proyecto (a efectos de este ejemplo suponemos que lo guardamos en la carpeta “includes”)

Ahora ya estamos listos para usarlo. Hay que tener en cuenta que en nuestro formulario deberíamos tener además un sistema de validación (tanto en Javascript como en PHP) adicionales. Una vez que el formulario enviado pase dichos filtros estaríamos en condiciones de establecer un filtro más, el de Akismet:

Primer paso: obtener la clave (API key)

Para usar Akismet necesitamos antes de nada obtener una clave (API key) para activar y usar Akismet. Esta clave es gratuita y la podemos obtener desde la misma página de Akismet. Debéis tener en cuenta que hay ciertas condiciones de uso para las cuales necesitaríais obtener una clave comercial.

En el formulario se nos pide una dirección de correo electrónico, la enviamos y recibiremos la clave.

Segundo paso: Incluir Akismet en nuestro código

Una vez tengamos la clave ya podemos incluir Akismet. Como vimos más arriban tenemos el archivo Akismet.class.php dentro de la carpeta “includes”. Para incluirlo hacemos símplemente:

1
2

// Incluimos la clase Akismet
include('includes/Akismet.class.php');

Incluir la clave (API key)

El siguiente paso es incluir la clave que nos ha proporcionado Akismet así como la URL de nuestra web

1
2
3

//Introducirmos la API key para nuestra web
$api_key = 'aqui va la clave';
$blog_url = "http://www.miweb.com";

Creamos el objeto Akismet

A continuación creamos el objeto Akismet:

1
2

// Creamos el objeto Akismet
$akismet = new Akismet($blog_url ,$api_key);

Probamos si la clave (API key) es válida

Estas líneas sólo nos serviran para comprobar si la clave que tenemos es válida. Una vez veamos que todo va bien las podemos eliminar. O también podemos incluir todo el código que crearemos a continuación dentro del condicional, para que sólo se ejecute si la clave es válida.

1
2
3
4
5

if($akismet->isKeyValid()) {
echo '<p>La clave es buena</p>';// api key es buena
} else { 
echo '<p>La clave no vale</p>'; // api key no es buena
 }

Definir los campos a filtrar

A continuación establecemos qué campos de nuestro formulario son los que vamos a filtrar contra Spam. En este caso suponemos el nombre, e-mail, el comentario y una url. Las variables proceden del código que deberíamos haber creado previamente para obtener los valores de $_POST enviados por el formulario que una vez validados se asignan a cada variable.

1
2
3
4

$akismet->setCommentAuthor($nombre); 
$akismet->setCommentAuthorEmail($email);
$akismet->setCommentContent($comentarios);
$akismet->setCommentAuthorURL($url);

Establecer el enlace permanente donde el formulario es enviado

1
2

// Enlace permanente donde el formulario es enviado
$akismet->setPermalink('http://www.ejemplo.com/una-url/');

Condicional si se considera spam

Para saber si Akismet considera que es Spam podemos hacer:

1
2
3
4
5

if ( $akismet->isCommentSpam() ) { 
 // Aquí va el código, mensaje de error o lo que queramos, o incluso archivarlos en algún sitio para comprobarlos más adelante
 } else {
// Aquí va el código en el caso de que NO sea Spam
}

Y eso es todo, como véis es muy sencillo de usar. Todo el código junto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Incluimos la clase Akismet
include('includes/Akismet.class.php');
 
//Introducirmos la API key para nuestra web
$api_key = 'aqui va la clave';
$blog_url = "http://www.miweb.com";
 
// Creamos el objeto Akismet
$akismet = new Akismet($blog_url ,$api_key);
 
// Condicional para ver si la clave es válida
if($akismet->isKeyValid()) {
 
// Campos a filtrar
$akismet->setCommentAuthor($nombre); 
$akismet->setCommentAuthorEmail($email);
$akismet->setCommentContent($comentarios);
$akismet->setCommentAuthorURL($url);
 
// Enlace permanente donde el formulario es enviado
$akismet->setPermalink('http://www.ejemplo.com/una-url/');
 
// Decidimos qué hacer si es Spam y si no lo es
if ( $akismet->isCommentSpam() ) { 
 // Aquí va el código, mensaje de error o lo que queramos, o incluso archivarlos en algún sitio para comprobarlos más adelante.
 } else {
// Aquí va el código en el caso de que NO sea Spam, que normalmente será continuar con cualquier proceso de validación o incluso ya con el envío del formulario.
}
 
} // Fin del condicional si la clave es válida

Documentación adicional

Web de Akismet
Documentación de Akismet
Aching Brain, Akismet para PHP5

Sigo de manera diaria una gran cantidad de blogs sobre desarrollo, tanto en Castellano como en Inglés. Eso me lleva a tener la barra de favoritos una gran cantidad de páginas marcadas. Un día pensé que estaría bien llevar todos estos artículos que me gustan y que archivo para estudiarlos o para usos futuros a una web que los recogiera de manera constante y organizada. De ahí surgió la idea de http://www.codigoytrucos.com, recoger los mejores artículos de internet sobre desarrollo y diseño web.

Espero que os sea de utilidad. La web acaba de arrancar, por lo que aún le quedan algunos arreglos y mejoras, pero ya tiene contenido de dos días.

También busco con la web colaboración, para que enviéis aquellos enlaces que os parezcan de utilidad para los demás.

El blog ayudawordpress.com, centrado en artículos sobre Wordpress, ha publicado hoy un artículo mío que quizás os pueda interesar. Se llama 35 Funciones útiles para functions.php en Wordpress y recoje 35 funciones útiles (algunas más que otras) para incluir en el archivo functions.php de nuestro tema de Wordpress. Son especialmente útiles si creamos nuestro tema desde cero y le damos una funcionalidad propia.

Es el primer artículo que escribo en ayudawordpres.com, ha sido una buena experiencia que espero repetir cuando tenga algún otro artículo sobre Wordpress.

Vamos a ver cómo crear nuestra propia red social gracias a Wordpress y a BuddyPress. BudyPress es un impresionante plugin de Wordpress que transforma nuestra instalación de Wordpress en una potente red social. Antiguamente BuddyPress sólo funcionaba sobre Wordpress MU (Wordpress multiusuario), pero ahora desde BudyPress 1.2 podemos ya instalarlo sobre una versión normal de Wordpress (eso sí, hasta que no salga Wordpress 3.0 no podremos aprovechar la posibilidad de que los usuarios tengan sus propios blogs). Para empezar tenemos que:

1) Instalar Wordpress
2) Instalar BuddyPress desde Plugins/Añadir, buscando BuddyPress. Alternativamente podemos bajarnos la última versión de BuddyPress, decomprimirla y subirla a la carpeta de plugins.
3) Tenemos que cercionarnos que tenemos activados los enlaces permanentes en nuestra instalación de Wordpress.
4) Ahora en el gestor de Wordpress veremos que podemos activar BuddyPress desde la sección de plugins.
5) Seleccionar un tema compatible con Buddypress. Desde el administrador de Wordpress entramos en Apariencia y seleccionamos el tema por defecto de Buddypress (Default).
6) Traducir Buddypress al Castellano (doy por supuesto que tenemos ya Wordpress en Castellano). Para ello, buscamos dentro de la carpeta de wp-content/plugins la carpeta de buddypress. Dentro de esta hay una carpeta llamada bp-languages. Aquí copiamos el archivo buddypress-es_ES.mo que obtenemos de buddypress-es.com.

Ahora ya deberíamos tener Buddypress funcionando. Como podemos ver, tenemos una red social ya de inicio bastante potente. A partir de aquí nos toca trabajar para dar a nuestra red social una apariencia y funcionamiento que se ajuste a nuestras preferencias.

Para configurar las opciones de Buddypress podéis ver que en el administrador de Wordpress hay ahora un apartado entero de Buddypress:

Si además queremos crear un nuevo tema lo mejor, y hasta que tengamos un control grande sobre Buddypress y podamos crear un tema desde cero, es trabajar y modificar el tema que viene por defecto. Para ello los desarrolladores de Buddypress nos recomiendan que extendamos ese tema por defecto (llamado default). Esto nos permitirá heredar los estilos, los scripts, AJAX etc.. del original que queramos conservar y sobreescribir lo que queramos cambiar.

¿Cómo lo extendemos? Primero de todo creamos una carpeta en wp-content/themes con el nombre de nuestro tema, como si se tratara de un tema normal de Wordpress. En esta carpeta incluiremos sólo aquellas partes de nuestro tema (estilos, templates, etc..) que vayan a sobreescribir lo existente en el tema por defecto de BuddyPress (que se encuentra en wp-content/plugins/buddypress/bp-themes/bp-default, es decir, no en donde habitualmente tenemos nuestros temas en Wordpress).

Un buen método para sobreescribir cualquier template es copiarlo desde la carpeta del tema default de Buddypress a la carpeta de nuestro tema, y desde ahí cambiarlo (sin tocar el original. Es peligroso funcionar desde el original directamente ya que en cualquier actualización este se sobreescribirá entero). También podrás añadir en la nueva carpeta de tu tema cualquier archivo nuevo y propio de CSS, php, javascript, etc.. Cualquier archivo sobreescribirá al original del mismo nombre.

El primer paso es crear la hoja de estilos nueva. La crearemos dentro de la nueva carpeta de nuestro tema (supongamos que nuestro tema se llama Test, y estará en /wp-content/themes/test). En esta carpeta crearemos un archivo de estilos al que llamaremos “style.css”. Esta será la hoja de estilos de nuestro nuevo tema para dar una apariencia personalizada a nuestra nueva red social.

Abre “style.css” y escribe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*
Theme Name: BuddyPress Test
Theme URI: http://dondesea/
Description: Nuevo tema para BuddyPress.
Version: 1.0
Author: Nuestro Nombre
Author URI: http://nuestaweb/
Template: bp-default
Tags: buddypress
*/
/* Para heredar los archivos de estilo. Si quieres crear todo de cero no la incluyas */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
 
/* Para heredar los estilos de la barra de administración. Si quieres crear todo de cero no la incluyas */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

En “Template:” vemos como le decimos a Wordpress que queremos utilizar el tema por defecto de Wordpress (bp-default) como “tema padre” y heredar todos los templates y estilos de este. En “Tags:” pone buddypress, lo cual indica a Wordpress que estamos usando un tema de buddypress.

Graba el archivo y activa el nuevo tema (que hemos llamado Test) desde el administrador de Wordpress (en Apariencia).

A partir de aquí, en tu hoja de estilos nueva puedes sobreescribir cualquier estilo del original. Como comentaba antes cualquier archivo que grabes en la carpeta del nuevo tema que tenga igual nombre que el del original (por ejemplo, header.php) se cargará en lugar del original. Sólo hay una excepción a esta regla: aunque crees un archivo functions.php nuevo el original también se cargará.

Bueno, pues ha llegado el momento de enredar con nuestra nueva red social, con sus configuraciones, estilos, templates, etc… En siguientes artículos entraré un poco más en detalle en el funcionamiento interno de BuddyPress.

Webs recomendadas

Web oficial de BuddyPress
Documentación de BuddyPress en la web oficial
Plugins de BuddyPress en la web oficial
Buddypress-es.com, Buddypress en Castellano
wpmu.org
wpmudev.org

Una de las principales novedades que nos ha ofrecido Wordpress 2.9 es la posibilidad de crear Miniaturas de Entrada (en inglés Post Thumbnails). ¿Qué son las Miniaturas de Entrada? Son las imágenes que veréis en muchos blogs asociadas a las distintas entradas de dicho blog en su página principal. Veamos por ejemplo nettuts+:

Vemos que cada entrada tiene asociada a su izquierda una imagen (marcada con un círculo rojo) que ayuda a describir mejor el artículo asociado, además de mejorar la imagen general del blog. Hasta ahora la manera más habitual de conseguir situar estas miniaturas era mediante Campos Personalizados. Ahora hay ya una funcionalidad completa e independiente para crear las Miniaturas de Entrada. Vamos a verla en detalle.

Para poder usar las Miniaturas de entrada tenemos que activarlas. Esto lo hacemos desde el archivo functions.php de nuestro tema. Escribimos:

1

    if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }

Simplemente indica que si existe la función ‘add_theme_support’ se ejecute add_theme_support(‘post-thumbnails’). Lo habilitará tanto para páginas como para entradas. Si lo quieres sólo para uno de ellos:

1
2

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Sólo para entradas
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Sólo para páginas

Ahora al ir a escribir o a editar una entrada, tendremos en la columna de la derecha una nueva ventana, llamada, como no, Miniatura de Entrada:

Si hacemos click sobre Establecer miniatura aparecerá la pantalla habitual para añadir una imagen. La seleccionamos y veremos entonces:

En la parte de abajo, junto a Insertar en la entrada, vemos el enlace Usar como miniatura. Ese es el enlace sobre el que hay que hacer click. Entonces veremos que en el cuadro de Miniatura de entrada aparece la imagen que hemos seleccionado:



Ahora ya tendremos la imagen asociada a nuestro artículo. Pero nos queda un último paso: tenemos que incluir unas líneas dentro del loop para que se muestre la miniatura de entrada. Para ello tonamos el archivo que muestre las entradas en nuestro tema (por ejemplo index.php) y buscamos el loop, es decir, lo incluido entre

1
2
3
4
5

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// Aquí va lo que se llama el loop, es decir un bucle que muestra 
// las entradas de nuestro blog
<?php endwhile; ?>
<?php endif; ?>

Es ahí, dentro del loop, donde añadiremos un código que va a añadir la miniatura de cada entrada. Símplemente hay que escribir esta línea:

1

<?php the_post_thumbnail(); ?>

Un loop sencillo podría parecerse más o menos a esto:

1
2
3
4
5
6

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> // Titulo de la entrada
<?php the_post_thumbnail(); ?> // Miniatura de entrada
<?php the_content(); ?> // El contenido de la entrada
<?php endwhile; ?>
<?php endif; ?>

Si, para estar seguros, queremos saber si la entrada o artículo en cuestión tiene una miniatura asociada, podemos hacer:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
if ( has_post_thumbnail() ) {
// esta entrada tiene una miniatura, pondremos aquí
// un código que muestre la miniatura:
<?php the_post_thumbnail(); ?>
} else {
// esta entrada no tiene miniatura, podemos poner aquí
// algo alternativo, por ejemplo mostrar la miniatura mediante campos
// personalizados, como se hacía anteriormente, o una imagen
// genérica.
}
?>

Se puede seleccionar también el tamaño de la miniatura:

1
2
3
4
5
6
7
8
9
10
11

// Tamaño pequeño:
<?php the_post_thumbnail('thumbnail'); ?>
 
// Tamaño mediano:
<?php the_post_thumbnail('medium'); ?>
 
// Tamaño grande:
<?php the_post_thumbnail('large'); ?>
 
// Especificando el tamaño:
<?php the_post_thumbnail(array(225,225)); ?>

También se pueden añadir atributos como title y alt, así como una clase que nos servirá para dar estilo con nuestra hoja CSS:

1
2
3
4
5

// Aplicando una clase que llamaremos clase_miniatura en este caso:
<?php the_post_thumbnail('medium', array('class' => 'clase_miniatura')); ?>
 
// Definiendo los atributos title y alt:
<?php the_post_thumbnail('medium', array('class' => 'clase_miniatura', 'alt' => 'atributo_alt', 'title' => 'atributo_title')); ?>

En el caso de no asignar ninguna clase podemos dar estilo a la miniatura con .wp-post-image {}

Volvamos de nuevo al archivo functions.php de nuestro tema. Vimos al principio de todo que las Miniaturas teníamos que activarlas en dicho archivo. Podemos además especificar el tamaño de las miniaturas:

1
2
3
4
5

// Miniaturas redimensionadas a 50x50px 
set_post_thumbnail_size(50, 50); 
 
// Miniaturas cortadas a 50x50px
set_post_thumbnail_size(50, 50, true);

O asignar un tamaño concreto (también en functions.php):

1

add_image_size('custom-thumbnail', 300, 300);

Que usaríamos así dentro del loop (por ejemplo en index.php):

1

<?php the_post_thumbnail('custom-thumbnail'); ?>

Si queremos que en functions.php esté todo este código que hemos visto incluído de manera segura (es decir, tras comprobar que existe esa funcionalidad en nuestra versión de Wordpress), escribiríamos:

1
2
3
4
5

if (function_exists('add_theme_support')) { // a partir de WP 2.9
add_theme_support('post-thumbnails'); // activa las miniaturas
set_post_thumbnail_size(50, 50, true); // especifica su tamaño
add_image_size('custom-thumbnail', 500, 500); // tamaño concreto
}

Y para más seguridad, podemos poner como vimos antes, dentro del loop, el condicional que muestra las miniaturas. En el caso de que esta no exista podemos poner un plan alternativo, como puede ser una imagen de un campo personalizado:

1
2
3
4
5
6

if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
the_post_thumbnail();
} else {
$postimageURL = get_post_meta($post->ID, 'post-image', true);
if ($postimageURL) {
echo '<img src="'.$postimageURL.'" alt="" />'; } }

Lecturas recomendadas

bocabit.com: Todo sobre las miniaturas (thumbnails) de Wordpress 2.9
Mark Jaquith: New in WordPress 2.9: Post Thumbnail Images
Justin Tadlock: Everything you need to know about WordPress 2.9’s post image feature

El uso de Categorías y de Etiquetas (Tags en Inglés) es muy habitual en Wordpress. A la hora de crear una nueva entrada podemos asignarle una categoría (normalmente una categoría por entrada) y uno o varias etiquetas (normalmente varias etiquetas por entrada). Esto nos permite clasificar la información que estamos publicando para que luego sea más sencillo acceder a ella en función de las necesidades del usuario.

Tanto las Categorías como las Etiquetas son Taxonomías. ¿Qué es una Taxonomía? Veamos lo que dice el diccionario:

taxonomía. Ciencia que trata de los principios, métodos y fines de la clasificación. Se aplica en particular, dentro de la biología, para la ordenación jerarquizada y sistemática, con sus nombres, de los grupos de animales y de vegetales. 2. Por ext., clasificación.

Por defecto, Wordpress incluye tres taxonomías: categoría, etiquetas y categoría de los enlaces. En este artículo veremos cómo enriquecer las taxonomías de nuestro tema de Wordpress creando nuestras propias Taxonomías.

Desde Wordpress 2.8 es mucho más sencillo crear Taxonomías propias (Custom Taxonomies en Inglés) que nos pueden dar más flexibilidad que las tradicionales Categorías y Etiquetas. Esto puede sernos de utilizad para entradas que requieren un número alto de criterios de clasificación, de tal forma que las Categorías y las Etiquetas se nos queden cortas.

Por ejemplo, imaginémonos que tenemos una web de música y queremos introducir canciones y clasificarlas por Artista, Album, Género, Epoca, Autor, Duración, etc… Necesitamos la ayuda de las Taxonomías creadas por el usuario. Veremos que funcionan de manera muy parecida a las etiquetas.

Sigamos con el ejemplo de la web de música. Supongamos que tenemos esta canción:
Shine on your Crazy Diamond
Artista: Pink Floyd
Album: Wish you were here
Género: Rock Progresivo
Autor: Pink Floyd
Duración: 13:32 minutos
Fecha: 1975

La idea es poder fijar toda esta información a una entrada que realices sobre esta canción de forma parecida a como lo harías con las etiquetas. Para empezar tienes que registrar las taxonomías para luego poder utilizarlas. Esto lo haces en el archivo functions.php de tu tema de Wordpress. Escribríamos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    function taxonomias_propias() {
        register_taxonomy('artista', 'post', array(
                    'hierarchical' => false, 'label' => 'Artista',
                    'query_var' => true, 'rewrite' => true));
        register_taxonomy('album', 'post', array(
                    'hierarchical' => false, 'label' => 'Album',
                    'query_var' => true, 'rewrite' => true));
        register_taxonomy('genero', 'post', array(
                    'hierarchical' => false, 'label' => 'Género',
                    'query_var' => true, 'rewrite' => true));
        register_taxonomy('autor', 'post', array(
                    'hierarchical' => false, 'label' => 'Autor',
                    'query_var' => true, 'rewrite' => true));
        register_taxonomy('duracion', 'post', array(
                    'hierarchical' => false, 'label' => 'Duración',
                    'query_var' => true, 'rewrite' => true));
        register_taxonomy('fecha', 'post', array(
                    'hierarchical' => false, 'label' => 'Fecha',
                    'query_var' => true, 'rewrite' => true));
    }
    add_action('init', 'taxonomias_propias', 0);

Vamos a ver en detalle qué hemos hecho. Tomemos la primera taxonomía, artista:

1
2
3

register_taxonomy('artista', 'post', array(
         'hierarchical' => false, 'label' => 'Artista',
         'query_var' => true, 'rewrite' => true));

artista le dice a Wordpress cuál es el nombre de la Taxonomía.

post indica el tipo de objeto sobre el que se aplica la Taxonomía, en este caso entradas (post). Más abajo veremos cómo crear taxonomías en páginas.

hierarchical indica si los términos de la taxonomía van a estar jerarquizados (las categorías lo estan, las etiquetas no). Lo ponemos como false (falso) para que se comporten como las etiquetas.

Artista es el nombre de la taxonomía tal y como queremos que aparezca en el panel de administración de Wordpress.

query_var permite saber a WordPress si vas a querer poder seleccionar artículos utilizando la taxonomía. Más adelante veremos cómo. Ponemos TRUE (es decir, que sí vamos a querer poder hacerlo).

rewrite es para si quieres que Wordpress ofrezca urls amigables cuando se vea una página o archivo de una taxonomía (por ejemplo www.tusitio.es/autor/pink-floyd). Como sí queremos, ponemos TRUE (cierto).

Bien, ya hemos registrado nuestras taxonomías propias en el archivo functions.php de nuestro tema. Ahora si entramos en el administrador de Wordpress y abrimos o creamos una nueva entrada veremos que la columna lateral derecha (donde están las categorías y las etiquetas) ha cambiado. Ahora veremos (tengo una instalación de Wordpress en inglés, pero si lo tenéis en Castellano os saldrá bien):

Veremos que en cada casilla de cada nueva taxonomía podemos añadir una nueva etiqueta. Si, el funcionamiento ahora es como el de las etiquetas normales, lo que pasa es que ahora tenemos varios grupos personalizados de etiquetas.

También saldrás las taxonomías nuevas en el menú de la izquierda, al desplegar Entradas.

Una vez publicada la entrada podemos acceder directamente, por ejemplo, a

http://www.tusitio.es/autor/pink-floyd/

Estas nuevas URLs utilizarán archive.php de tu tema de Wordpress para mostrar todas las entradas que correspondan a esa taxonomía.

Si queremos mostrar una nube de etiquetas de una taxonomía en concreto (por ejemplo todos los Autores) lo haríamos con este código en cualquier sítio de cualquier archivo de nuestro tema:

1
2

<h3>Autores</h3>
<?php wp_tag_cloud(array('taxonomy' => 'autor', 'number' => 0)); ?>

En vez de autor pondríamos el nombre de la taxonomía que queramos, y en número (number) el número de etiquetas a mostrar de esa taxonomía (si ponemos 0, como en este caso, salen todas).

Si queremos que salgan todas las taxonomías y su nube de etiquetas podemos seguir las indicaciones de justintadlock.com:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php global $wp_taxonomies; ?>
 
<?php if ( is_array( $wp_taxonomies ) ) : ?>
 
	<?php foreach ( $wp_taxonomies as $tax ) : ?>
 
		<h2 class="taxonomy-label"><?php echo $tax->label; ?></h2>
 
		<p class="taxonomy-cloud">
			<?php wp_tag_cloud( array( 'taxonomy' => $tax->name, 'number' => 0 ) ); ?>
		</p><!-- .taxonomy-cloud -->
 
	<?php endforeach; ?>
 
<?php endif; ?>

Para mostrar todas las entradas que tengan una etiqueta concreta de una de nuestras taxonomías (por ejemplo, las 15 primeras entradas entradas con autor Pink Floyd) tendríamos que situar este código antes del loop de uno de los archivos de nuestro tema:

1
2
3
4

<?php query_posts(array('autor' => 'Pink Floyd', 'showposts' => 15)); ?>
// Y ahora va el loop:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// Etc..

Si queremos que se muestre para cada artículo una taxonomía concreta y los enlaces de las etiquetas relacionadas (por ejemplo, Autor: Pink Floyd donde Pink Floyd es un enlace) utilizaríamos este código en el sitio donde queremos que salgan los enlaces de las etiquetas separadas con comas dentro del loop:

1

<?php echo get_the_term_list($post->ID, 'autor', 'Autor: ', ', ', ''); ?>

Los tres últimos parámetros le indican a Wordpress qué escribir antes de los enlaces de las etiquetas, entre cada enlace y tras cada enlace.

Condicionales que podemos usar con las taxonomías:
is_tax(), is_tax(‘nombre-de-la-taxonomia’), is_tax(array(‘nombre1′,’nombre2′,’nombre3′))

Como veis el uso de las taxonomías es muy sencillo y nos puede permitir mejorar el uso de Wordpress para crear webs de mayor complejidad. Gracias a la posibilidad de crear nuevas plantillas y sabiendo que podemos acceder a una taxonomía en concreto a través de una url amigable podemos crear menús y submenús con facilidad en los que accedamos a páginas concretas para cada taxonomía, por ejemplo.

Taxonomías en páginas

En el ejemplo anterior creábamos taxonomías para su uso en entradas (posts). Ahora veremos cómo crearlas en las páginas.
Fuente: http://justintadlock.com/archives/2009/11/09/excerpts-and-taxonomies-for-pages-in-wordpress-2-9
Hay que recordar que en Wordpress 2.9 las Taxonomías no admiten jerarquización, como las categorías.
Supongamos que creamos una Taxonomía para páginas llamada “people”:

1
2
3
4
5
6
7
8
9
10
11
12

register_taxonomy( 'people', 'page', array( 'hierarchical' => false, 'label' => 'People', 'query_var' => true, 'rewrite' => true ) );
 
add_action( 'admin_menu', 'my_page_taxonomy_meta_boxes' );
 
function my_page_taxonomy_meta_boxes() {
	foreach ( get_object_taxonomies( 'page' ) as $tax_name ) {
		if ( !is_taxonomy_hierarchical( $tax_name ) ) {
			$tax = get_taxonomy( $tax_name );
			add_meta_box( "tagsdiv-{$tax_name}", $tax->label, 'post_tags_meta_box', 'page', 'side', 'core' );
		}
	}
}

En ocasiones necesitamos crear un formulario donde alguno de los campos requieren la selección de una fecha por parte del usuario, por ejemplo para la reserva de la habitación de un hotel, la compra de un billete de tren, etc..

La mejor manera de solicitar una fecha al usuario es a través de un calendario que se despliegue a la hora de introducir la fecha. Es lo que vamos a hacer en este ejemplo.

Para ello vamos a utilizar el plugin jQuery UI Datepicker.

Lo que vamos a conseguir es esto:

Para utilizarlo necesitamos:

1) jQuery, por supuesto:

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2) jQuery UI:

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

3) En cuanto a estilos, utilizaremos el jQuery UI CSS Framework (esta línea debería ir antes de las dos anteriores en nuestro código):

1

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />

Y sus iconos:

Si seguimos las instrucciones del plugin, vemos que utilizar el calendario para seleccionar una fecha es realmente sencillo. Sólo hay que escribir, en su forma más básica:

1
2
3
4
5

<script type="text/javascript">
$(document).ready(function() {
   $("#datepicker").datepicker();
});
</script>

Siendo en este caso “#datapicker” el id del input del formulario al que aplicamos el calendario:

1

<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />

Como veréis le hemos añadido el atributo readonly para que no pueda ser modificado el contenido del input por el usuario, es decir, que se quede la fecha elegida sin poder alterarla manualmente. Aunque algunos autores lo incluyen, es probable que sea mejor no incluirlo, ya que si Javascript está desactivado no podríamos escribir nada en el input.

Si unís todo el código anterior veréis que el calendario sale en inglés. Para ponerlo en Castellano (también se puede poner en Catalán o en Euskera) tenemos los archivos de localización.

En concreto, para que esté en Castellano:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

jQuery(function($){
	$.datepicker.regional['es'] = {
		closeText: 'Cerrar',
		prevText: '<Ant',
		nextText: 'Sig>',
		currentText: 'Hoy',
		monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
		'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
		monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
		'Jul','Ago','Sep','Oct','Nov','Dic'],
		dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
		dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
		dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['es']);
});

Vamos a unir ya todo el código antes de ver posibles modificaciones. Podéis ver este código funcionando en esta demostración y podéis bajar el código aquí.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Uso de jQuery Data Picker</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$.datepicker.regional['es'] = {
		closeText: 'Cerrar',
		prevText: '&#x3c;Ant',
		nextText: 'Sig&#x3e;',
		currentText: 'Hoy',
		monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
		'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
		monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
		'Jul','Ago','Sep','Oct','Nov','Dic'],
		dayNames: ['Domingo','Lunes','Martes','Mi&eacute;rcoles','Jueves','Viernes','S&aacute;bado'],
		dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
		dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['es']);
});    
 
$(document).ready(function() {
   $("#datepicker").datepicker();
 });
</script>
</head>
<body>
<h1>Uso de jQuery Data Picker</h1>
<form action="">
  <label> Seleccionar Fecha:</label>
  <input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
</form>
</body>
</html>

Ahora vamos a ver algunas formas de personalizar el calendario. Muchas de las opciones las hemos utilizado ya en el código de localización. La lista completa está en http://docs.jquery.com/UI/Datepicker

- altField y altFormat nos permiten guardar la fecha elegida en otro campo con un formato diferente, por ejemplo si lo queremos mostrar al usuario con un formato pero que nos llegue a nosotros con otro diferente.

- appendText, si queremos que se muestre un texto al lado del input, para una mejor comprensión para el usuario:

1
2
3

    $(document).ready(function() {
           $("#datepicker").datepicker({ appendText: ' Haga click para introducir una fecha' });
        });

Ver una demo con appendText

-autoSize, si lo ponemos en true se ajustará el input para dar cabida a la fecha introducida.

- numberOfMonths, para elegir el número de meses que van a salir. Si ponemos numberOfMonths:2, por ejemplo, saldrán dos meses. Esto lo aconsejan algunos expertos en usabilidad ya que hay más opción donde elegir de un solo vistazo. Veamos un ejemplo de numberOfMonths , donde se añade al anterior de appendText para ver cómo se unen dos opciones.

- Si queremos que el calendario se despliegue no al hacer click sobre el input sino sobre un botón adjunto (por ejemplo, una imagen de un calendario pequeño, como tienen muchas webs que habréis visto), utilizaremos las opciones buttonImage, buttonImageOnly y showOn:

1
2
3
4
5

$("#datepicker").datepicker({ 
   showOn: 'button', 
   buttonImageOnly: true, 
   buttonImage: 'images/datepicker.png' 
});

donde datapicker.png es un icono de un calendario. Al hacer click sobre él, se despliega el calendario. Veamos un ejemplo.

- dateformat, para cambiar el formato en el que se pega la fecha al input. En la demo está en dateformat: ‘dd/mm/yy’. Otra opción es por ejemplo ‘DD, MM, d, yy’ . Lista completa de formatos de fecha.

- maxDate y minDate, para poner una fecha máxima y otra mínima (supongamos que queremos que sólo salgan los meses de Junio a Octubre):

1
2
3
4
5
6
7
8

$(document).ready(function() {
   $("#datepicker").datepicker({
       minDate: new Date(2010, 5, 1),
       maxDate: new Date(2010, 9, 30),
       dateFormat: 'dd/mm/yy',
       constrainInput: true,
	});
});

Veamos un ejemplo de maxDate y minDate.

- buttonText, Si queremos que se abra el calendario al hacer click sobre un botón al que le ponemos nosotros el texto:

1
2
3
4
5

$(document).ready(function(){
  $("#datepicker").datepicker({ 
       showOn: 'button', 
       buttonText: "Seleccionar" });
 });

Veamos una demo del uso de buttonText.

- showAnim, si queremos cambiar el efecto con el que se muestra el calendario

1
2
3
4
5

$(document).ready(function(){
   $("#datepicker").datepicker({
    showAnim: 'fadeIn'
    });
});

Veamos una demo del uso de showAnim. Podemos usar como efecto ’show’ (por defecto), ’slideDown’, ‘fadeIn’, o cualquiera de los efectos para mostrar/ocultar de jQuery UI.

- changeMonth permite mostrar una lista desplegable de meses para poder ir con mayor rapidez al mes deseado:

1
2
3
4
5

$(document).ready(function(){
   $("#datepicker").datepicker({
    changeMonth: true 
    });
});

Veamos una demo del uso de changeMonth

Id probando todas las opciones de la página del plugin para ver las distintas opciones.

Por último, destacar una variación aportada por David Walsh en su artículo jQuery UI DatePicker: Disable Specified Days, para desactivar días concretos (por ejemplo, días que hayan sido ya reservados de un hotel y por lo tanto no puedan ser ya escogidos). También en su ejemplo se ve como desactivar los fines de semana y días de fiesta.