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

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' );
		}
	}
}

Dado el gran éxito de Wordpress son cada vez más altas las preocupaciones de sus usuarios por estar al día de todos los consejos relativos a la seguridad de su web. No es raro encontrar usuarios a los que les han hackeado su web, les han instalado un virus que borra toda la base de datos, tienen cuentas de administradores fantasmas o de repente generan miles de comentarios con enlaces a material adulto o de venta de viagra. Al ser tan popular Wordpress los ataques se disparan. Puedes pensar que esto no te va a pasar a tí, pero si no tomas las medidas necesarias de precaución aumentarás la probabilidad de que te ocurra.

Para evitar estos problemas o, al menos, para ponérselo lo más difícil posible a cualquier hacker o a cualquier robot que ande por la red buscando instalaciones de Wordpress desprevenidas lo mejor es seguir unas recetas básicas de seguridad antes, durante y después de la instalación de Wordpress.

Antes de la instalación

a) Muchas empresas de alojamiento ofrecen la posibilidad de instalar Wordpress de manera automática mediante Fantástico. Aunque es una opción realmente cómoda, tiene un inconveniente: No nos permite configurar a nuestro gusto la instalación de Wordpress, especialmente en cuanto al prefijo de las tablas en la base de datos, ya que se utilizará wp_, que es el que utiliza el programa de instalación por defecto. Si podéis, haced una instalación manual. Si preferís usar Fantástico recordad cambiar más adelante el prefijo de las tablas de la base de datos (veréis más adelante cómo hacerlo)

b) Antes de instalar Wordpress hemos de decidir dónde instalarlo. Lo podemos instalar en el directorio raíz de tu web, que sería lo normal. Pero también podemos instalarlo en una carpeta a la que le podemos dar un nombre cualquiera, por ejemplo “comentarios” u otro que se nos ocurra (algunos autores recomiendan utilizar nombres absurdos y difíciles de imaginar). Si hemos elegido “comentarios”, y para que nuestra web no aparezca como en http://www.miweb.es/comentarios/, necesitaremos mover los archivos index.php y .htaccess desde dentro de la carpeta “comentarios” al directorio raíz. Después habría que cambiar dentro de index.php estas líneas:

1

require('./wp-blog-header.php');

a estas:

1

require('./comentarios/wp-blog-header.php');

Una vez hayas instalado Wordpress entra en tu panel de administración (www.miweb.es/comentarios/wp-admin) y ve a Opciones/General y asegúrate de que la Dirección de Wordpress (URL) sea http://www.miweb.es/comentarios/ (o cualquiera que sea en tu caso) y que la Dirección del Blog (URL) sea http://www.miweb.es/

De esta manera se adquiere un plus extra de seguridad frente a bots escaneando la red buscando archivos de Wordpress. Además, como ventaja, se obtiene un directorio raíz más limpio.

Durante la instalación

Durante la instalación hay varios procedimientos que fortalecerán tu instalación de Wordpress:

a) En primer lugar es recomendable cambiar el prefijo de de las tablas de la base de datos antes de que esta se genere. Este prefijo se cambia en el archivo wp-config.php. Por defecto aparece “wp_”. Cámbialo por cualquier otro prefijo. Por ejemplo:

1

$table_prefix  = 'wp57B458F_';

Si ya hemos instalado Wordpress y queremos cambiar el prefijo a posteriori, hay plugins que lo hacen por nosotros: WP Prefix Table Changer, WordPress Table Prefix Rename Plugin o Wp-Security Scan (del que hablaremos también más adelante).

b) Igualmente, en wp-config.php puedes definir cuatro claves de seguridad que te ayudan a incrementar la seguridad de Wordpress. Estas claves se pueden crear manualmente o a través de Wordpress.org. Estas cuatro claves se asignan a diferentes cookies y se utilizan en diversos lugares para incrementar la seguridad de Wordpress. Estas claves son:
* AUTH_KEY
* SECURE_AUTH_KEY T
* LOGGED_IN_KEY
* NONCE_KEY
Símplemente copia los valores que hayas obtenido de manera automática en el enlace anterior de Wordpress.org en cada línea correspondiente de tu wp-config.php, por ejemplo:

1
2
3
4

define('AUTH_KEY',        '+tmh1=-+IPI[w{e_a-}_iK{@f#=?O0x0r|kMQ@{2@p%RTy9c&GyCd)KavDk} H;F');
define('SECURE_AUTH_KEY', 'd,QY(bCxGwtdn>QR=Gyi]3cS0}$DEz-+`,+%j!R[F@wGci;9g$`9sx#dlyE>H6W|');
define('LOGGED_IN_KEY',   '2!N--t@ML1]Xb|x0~Y C%J 4Q]-+~yBl$,k9ZX<<RxoG*B$1_r(_RPPi0HiRdIyA');
define('NONCE_KEY',       '_w~2=`[pZpyZFf:]W.A{=)yuafy}QkZ@+X$@>DgQUD8}QRXg^z5*j!Z(x6|lr|KB');

Una vez instalado Wordpress

a) Crear un archivo vacío index.html en aquellos directorios que no lo tengan, lo que permite que no se pueda listar el contenido del directorio. Como alternativa más sencilla podemos añadir esta línea en nuestro archivo .htaccess: Options -Indexes

b) Utilizar acceso seguro. Si en tu solución de hosting tienes posibilidad de utilizar acceso vía SSL (Secure Socket Layer), aunque sea compartido, utilízalo. Para ello tendrás que activarlo en el archivo wp-config.php:

1

define ('FORCE_SSL_LOGIN', true);

c) Cambiar el nombre del usuario. El usuario por defecto de la nueva instalación será “admin”. Dejar este usuario es dar facilidades a cualquiera malintencionado. Hay dos opciones: o crear un nuevo usuario y borrar el usuario “admin” tal y como explico en un artículo anterior (Primeros pasos tras una nueva instalación de Wordpress) o crear un nuevo usuario con funciones de administrador y al usuario admin cambiarle el rol a Suscriptor, para que no pueda hacer nada.

d) Mover el archivo wp-config.php: También explicado en mi artículo anterior. Este archivo es vital para proteger la seguridad de tu web. En él están datos vitales como los que permiten el acceso a tu base de datos. Wordpress permite mover este archivo a UNA carpeta superior dentro del alojamiento de la web. De esta manera podemos sacar este archivo fuera del acceso público sin ningún problema. Por ejemplo, si tenemos una estructura con varias carpetas en la que una es public_html, que es donde está la web, podemos sacar el archivo a la carpeta superior no accesible por el público general:

e) Suprimir el mensaje de error en la entrada al administrador: Cuando vamos a acceder al administrador de Wordpress y nos equivocamos por ejemplo en la contraseña saldrá un mensaje que nos dirá que lo que está mal es la contraseña. Si no queremos dejar pistas podemos incluir esta línea en el archivo functions.php de nuestro tema:

1

add_filter('login_errors',create_function('$a', "return null;"));

f) Utilizar una contraseña segura, que sea difícil de adivinar. Utiliza una contraseña larga, con mezcla de mayúsculas, minúsculas, números… Que sea una contraseña única que no hayas utilizado para ninguna otra cosa. Además es una buena idea cambiar de contraseña cada cierto tiempo.

g) Haz copias de seguridad de tu Base de Datos tan frecuentemente como sea necesario. Para hacer copias de seguridad manualmente vía phpMyadmin puedes seguir esta guía paso a paso de Wordpress.org. Hay también plugins que hacen la copia de seguridad por ti e incluso te la envían por email si así lo quieres, como WP-DBManager o WP-DB-Backup

h) Asegúrate de que el ordenador desde el que entras a tu panel de administración está libre de virus, spyware y cualquier programa malicioso. Es importante que tengas en tu ordenador un buen antivirus puesto al día.

i) Mantén tu versión de Wordpress siempre actualizada a la última versión disponible. Hay ocasiones en la que incluso se crean nuevas versiones para hacer frente a agujeros de seguridad que se han descubierto en ese momento. Igualmente es importante mantener actualizados todos tus plugins.

j) Instala Plugins de Seguridad. Entre ellos destacan:
- WP Security Scan, que comprueba tu instalación de Wordpress, busca áreas vulnerables y te propone acciones para corregirlas.
- WordPress Exploit Scanner, que busca entre los ficheros de la web y entre las entradas y comentarios en las tablas de la base de datos cualquier cosa sospechosa.También busca entre los plugins activos ficheros con nombres sospechosos. No borra nada, símplemente te informa de los resultados de sus análisis.
- Limit Login Attempts, que limita el número de intentos posibles para entrar en el área de administración. Por defecto Wordpress permite un número ilimitado de intentos, lo cual es una facilidad añadida a cualquiera que quiera entrar mediante prueba-error.
- AntiVirus for Wordpress, que se centra en la detección de software malintencionado que pueda atacar nuestra instalación de Wordpress. Incluso te puede enviar notificaciones por email
- Askimet, que viene instalado con Wordpress y sólo hay que activarlo, y que elimina todo el spam de los comentarios.

k) Seguridad vía .htaccess. Hay muchas opciones (ver Hardening WordPress with htaccess). Por ejemplo:

Si no podemos llevarnos el archivo wp-config.php como indicamos más arriba podemos protegerlo añadiendo en el archivo .htaccess que está en el directorio raiz lo siguiente para negar todos los accesos al archivo:

1
2
3
4
5

# proteger wp-config.php
<files wp-config.php>
Order deny,allow
deny from all
</files>

Si queremos negar todos los accesos excepto los de una IP en particular al archivo wp-config-php:

1
2
3
4
5
6

# proteger wp-config.php
<Files wp\-config\.php>
Order Deny,Allow
Deny from all
Allow from 123.123.123
</Files>

Si tu IP es dinámica (como suele ser normalmente) y varía entre dos números (por ejemplo, entre 123.456.789.1 y 123.456.789.255) puedes poner:

1
2
3
4
5
6

# proteger wp-config.php
<Files wp\-config\.php>
Order Deny,Allow
Deny from all
Allow from 123.456.789
</Files>

También podemos proteger el directorio wp-admin. La manera más sencilla de hacerlo es a través del archivo .htaccess situado dentro de dicho directorio (si no existiera puedes crearlo). Haríamos igual que antes:

1
2
3
4
5
6

# Proteger archivos de wp-admin
<FilesMatch "*.*">
Order Deny,Allow
Deny from all
Allow from 123.456.789
</FilesMatch>

Debes tener cuidado al proteger el directorio wp-admin, ya que puede bloquear el acceso a algunos plugins o a algunas funcionalidades de Wordpress. Para evitar jaleos puedes instalar un plugin que haga esto por tí, como AskApache Password Protection o WP-Adminprotection

Además, podemos proteger toda una serie de archivos sensibles (.htaccess, .htpasswd, php.ini, scripts php, archivos flash .fla, archivos de photoshop .psd o archivos log) de igual manera:

1
2
3
4
5
6

# Proteger archivos sensibles por tipo de fichero
<FilesMatch "\.(htaccess|htpasswd|ini|phps|fla|psd|log)$">
Order Deny,Allow
Deny from all
Allow from 123.456.789.0
</FilesMatch>

l) Hay autores que aconsejan borrar el archivo wp-admin/install.php tras realizar la instalación de Wordpress ya que en alguna rara ocasión puede suceder que tras un error Wordpress piense que aún no está instalado y trate de ejecutar el archivo install.php
Otra oción es sustituir el contenido del archivo por esto, mucho más útil, tal y como proponen en Important Security Fix for WordPress (lo he dejado en inglés, como en el original):

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

<?php // install.php replacement page: http://perishablepress.com/press/2009/05/05/important-security-fix-for-wordpress/ ?>
<?php header("HTTP/1.1 503 Service Temporarily Unavailable"); ?>
<?php header("Status 503 Service Temporarily Unavailable"); ?>
<?php header("Retry-After 3600"); // 60 minutes ?>
<?php mail("your@email.com", "Database Error", "There is a problem with teh database!"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Error Establishing Database Connection</title>
</head>
<body>
<img src="images/wordpress-logo.png" />
<h1>Error Establishing Database Connection</h1>
<p>We are currently experiencing database issues. Please check back shortly. Thank you.</p>
</body>
</html>

m) Dejar de mostrar la versión de Wordpress que tenemos instalada. Muchos temas de Wordpress la muestran, lo cual no deja de dar pistas a usuarios malintencionados. Para ello añadiríamos la siguiente línea al archivo functions.php de nuestro tema:

1

<?php remove_action('wp_head', 'wp_generator'); ?>

n) Evitar que otras webs utilicen imágenes u otro contenido de tu web (lo que se suele llamar hotlinks). Me ha ocurrido en ocasiones que otras webs han utilizado imágenes, iconos, etc.. de webs mías simplemente enlazándolas con lo cual utilizan ancho de banda mío. Para evitarlo lo podemos hacer vía el archivo .htaccess:

1
2
3
4
5
6
7
8
9

# Protección frente a hotlinks de archivos .jpg, .jpeg, .jpe, .gif, .png
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g?|png)$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://([^.]+\.)?domain\. [NC]
RewriteRule \.(gif|jpe?g?|png)$ - [F,NC,L]
</ifModule>

Podemos encontrar más consejos sobre este particular en Creating the Ultimate htaccess Anti-Hotlinking Strategy.

o) En septiembre del 2009 hubo un ataque generalizado a muchas instalaciones de Wordpress, que fueron infectadas con código malicioso. Recientemente Jeff Starr de Perishable Press ha propuesto una solución que protege igualmente de ataques futuros. Simplemente hay que crear un fichero php con este código y guardarlo en la carpeta plugins. Al activarlo desde el panel de administración nos protegerá silenciosamente detectando solicitudes con cadenas demasiado grandes (más de 255 caracteres) así como la presencia de “eval(” o “base64” en el URI solicitado.

1
2
3
4
5
6
7
8
9
10

    <?php /* Plugin Name: Block Bad Queries */
 
    if (strlen($_SERVER['REQUEST_URI']) > 255 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") ||
    strpos($_SERVER['REQUEST_URI'], "base64")) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
    } ?>

Hay muchas más opciones recomendables, aunque con las anteriores se conseguiría un nivel de protección muy alto. Es conveniente estar suscrito a blogs de Wordpress donde estar al día de las novedades que vayan surgiendo sobre el particular, como por ejemplo el blog en Español Ayuda Wordpress.

Recuerdo que cuando veía periódicos o revistas creados con Wordpress me preguntaba ¿Cómo crearán un menú con los distintos tipos de noticias? y sobre todo ¿Cómo lo harán para tener en una misma página las noticias separadas en función de su tema (deportes, economía, política, etc…) si sólo hay un loop?

Cuando me puse a investigarlo vi que era muy sencillo. Vamos a verlo en detalle:

Cómo crear un navegador con categorías

Tendríamos un menú principal de este tipo, por ejemplo:

de tal manera que al hacer click en una de las opciones vayamos a una página que incluya solamente las noticias de la categoría escogida (por ejemplo, Sociedad).

Lo primero que tendríamos que hacer es crear nuestras categorías en el Administrador de Wordpress. Si abrimos el administrador, para escribir un nuevo artículo haríamos click en Entradas (menú de la izquierda, arriba) y luego en Añadir. Estaríamos entonces en una ventana que se llama Agregar Nueva Entrada. Aquí escribimos nuestro artículo. Como veis en la siguiente imagen, a la derecha tenéis un cuadro que se llama Categorías. Aquí asignáis una (o varias) categorías a vuestro artículo. Si no existiese la categoría correspondiente, la creáis.

También se pueden crear y editar categorías en la opción del menú Entradas/Categorías.

Por lo tanto, al crear un nuevo artículo seleccionamos la categoría en la que queramos encuadrarlo (Nacional, Internacional, Deportes, Política, Sucesos o cualquier otra categoría que hayamos creado).

El navegador de nuestra web, que normalmente suele estar en header.php, suele estar definido de esta forma:

1

<?php wp_list_pages('&title_li='); ?>

Así crearemos una lista con tódas las páginas creadas. Pero si lo que queremos son categorías y no páginas lo haríamos de esta forma:

1

<?php wp_list_categories('&title_li='); ?>

Pero si queremos mezclar páginas con categorías (por ejemplo la página de Portada seguida de las categorías):

1
2

<?php wp_list_pages('include=3&title_li='); ?>
<?php wp_list_categories('&title_li='); ?>

Aquí incluimos primero la página que tiene el ID 3 (suponemos que la de Portada. En el administrador de Wordpress eligiríamos esta página como la de apertura del blog), y luego las categorías.

Con esto tendríamos ya nuestro navegador, al que le daríamos los estilos que más nos convengan.

Pero, ¿qué hará Wordpress si hacemos click en el enlace Deportes (por ejemplo)? Buscará en nuestro tema la página correspondiente a esa Categoría donde sólo saldrán las entradas que tengan esa Categoría.

Cada Categoría tiene un ID (o número que la identifica). Si en el menú de la izquierda del Administrador vamos a Entradas/Categorías veremos todas nuestras categorías. Al situar el ratón sobre una categoría se muestra abajo en el navegador el URL de esa categoría con un número al final. Ese es su ID. Ahora supongamos que la categoría “Deportes” tiene un ID=3. Al hacer click sobre “Deportes” en el navegador que hemos creado, Wordpress va a buscar la página category-3.php en la carpeta de nuestro tema.

Es decir, siempre va a buscar primero category-ID.php, donde ID es el ID de la categoría correspondiente. Si no existe el category-ID.php buscará el archivo category.php, y si este no existe buscará archive.php y si (por último) este no existe buscará index.php

Por lo tanto, si quieres hacer que una Categoría cuyo ID=3 sea diferente a las páginas de otras categorías necesitarás crear un category-3.php

Para crearlo es aconsejable copiar el archivo category.php y cambiarlo de nombre para empezar a trabajar desde los contenidos de category.php adaptándolos con los cambios que queramos realizar.

Vamos ahora con nuestro segunda pregunta, cómo conseguir que en una misma página (por ejemplo la portada de un periódico) tengamos distintas noticias en lugares distintos del periódico agrupadas en función de su categoría.

Distintos loops en la misma página diferenciados por categorías

Para crear una portada que incluya noticias de todas las categorías pero ordenadas según su categoría (por ejemplo, por un lado las de Actualidad, por otro las de Sociedad, etc..) no nos vale con el “loop” único que tenemos en Wordpress por defecto. Necesitaremos un “loop” por cada categoría. Como en este ejemplo, de un periódico nacional:

Como vemos las noticias se agrupan en función de su categoría (en este caso Internacional, España, Economía y Cultura).

Si no queremos tener todas las noticias juntas y queremos agruparlas según su categoría y darles un estilo y ubicación diferente en función de dicha categoría necesitaremos crear un “loop” para cada categoría. Esto se consigue sustituyendo el “loop” habitual de Wordpress…

1
2
3
4
5
6
7
8
9
10

<?php while (have_posts()) : the_post(); ?>
  <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace a <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
          <div class="entry">
	    <?php the_content('Leer el resto de esta noticia &raquo;'); ?>
	  </div>
	<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?>Publicado en <?php the_category(', ') ?> | <?php edit_post_link('Editar', '', ' | '); ?>  <?php comments_popup_link('No hay comentarios &#187;', '1 Comentario &#187;', '% Comentarios &#187;'); ?></p>
  </div>
<?php endwhile; ?>

… por tantos “loops” como sea necesario, y esto se consigue gracias a WP_Query.

Por ejemplo, si queremos una sección que sólo muestre la categoría “Deportes”, necesitarás haber creado esa categoría previamente en Wordpress así como diversas noticias que pertenezcan a esa categoría.

El código ahora (en vez del anteriormente visto) será ahora:

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

<?php 
  $deportes = new WP_Query();
  $deportes->query('category_name=Deportes&showposts=5');
 
  while($deportes->have_posts()) : $deportes->the_post();	?>
    <div class="post">
      <h4><?php the_title(); ?></h4>
      <div class="entry">
        <?php the_content('Leer el resto de esta noticia &raquo;'); ?>
      </div>
    </div>
  <?php endwhile; ?>

$deportes es la variable que utilizamos aquí para la sección de Deportes creando una nueva instancia de WP_Query(). Luego aplicamos los parámetros que necesitemos, en este caso que se muestren sólo las entradas cuyo nombre de categoría sea Deportes y que se muestren 5 entradas. El resto es una versión corta del “loop” de wordpress.

Si queremos utilizar el ID de la categoría en vez de su nombre cambiaríamos esta línea (suponiendo que Deportes sea la categoría 3):

1

$deportes->query('cat=3&showposts=5');

¿Que además de Deportes queremos Nacional, Internacional, Economía, etc…? Pues sólo hay que crear un bloque de código como el anterior para cada categoría. ¡Así de sencillo!

Más lecturas recomendadas

Function, habla un poco sobre los “loops” personalizados.
NetPlus tiene un artículo completo sobre como crear un periódico con Wordpress.
WP_Query en la documentación de Wordpress.
Sobre el Loop y WP_Query en el manual de referencia de Wordpress.
WPEngineer.com muestra varios trucos para WP_Query

Esta es una recopilación de los mejores trucos que he ido recopilando para Wordpress de diversas fuentes (las principales están al pie del artículo). Muchos de ellos los utilizo con frecuencia.

Sobre Artículos

Mostrar los artículos más recientes

Este código muestra los cinco artículos más recientes:

1
2
3
4
5
6

<?php query_posts('showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Mostrar los artículos o páginas recientemente actualizadas

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

<?php
$today = current_time('mysql', 1);
$howMany = 5; //Número de entradas que quieres mostrar
if ( $recentposts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_modified_gmt < '$today' ORDER BY post_modified_gmt DESC LIMIT $howMany")):
?>
<h2><?php _e("Ultimas actualizaciones"); ?></h2>
<ul>
<?php
foreach ($recentposts as $post) {
if ($post->post_title == '') $post->post_title = sprintf(__('Post #%s'), $post->ID);
echo "<li><a href='".get_permalink($post->ID)."'>";
the_title();
echo '</a></li>';
}
?>
</ul>
<?php endif; ?>

Mostras los artículos “pegados” (sticky) más recientes

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

<?php
/* Obtener todos los artículos sticky */
$sticky = get_option( 'sticky_posts' );
 
/* Ordenar los artículos sticky con los más nuevos arriba */
rsort( $sticky );
 
/* Obtener los dos artículos sticky más nuevos (cambia el 2 por el número que quieras) */
$sticky = array_slice( $sticky, 0, 2 );
 
/* Hacer un query_posts con los artículos sticky */
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
?>

Mostrar los artículos más populares en función del número de comentarios

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

<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

Añadir enlaces de traducción de los artículos a otros idiomas

1

<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&amp;langpair=es%7Cen" class="translate" title="Translate this page using Google Translate" rel="nofollow">Translate this page into English</a>

Para otros idiomas simplemente sustituye el en de langpair=es%7Cen por de (Alemán), fr (Frances), it (Italiano), pt (Portugués), ar (Arabe), ja (Japonés, ko (Koreano), etc…

Incluir código PHP dentro de los artículos (desde el administrador)

Al escribir código desde el editor del administrador dentro de un artículo Wordpress transforma los códigos de inicio y final de php en caracteres de texto, por lo tanto si escribes:

1

<? php query_posts('p=5'); ?>

no ocurrirá nada. Hay que sustituirlo por sus códigos equivalentes:

1

<? php query_posts('p=5'); ?>

Lista de futuros artículos

1
2
3
4
5
6
7

<?php query_posts('showposts=10&post_status=future'); ?>  
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  
   <h2><?php the_title(); ?></h2>  
   <span class="datetime"><?php the_time('j. F Y'); ?></span></p>  
<?php endwhile;  
else: ?><p>No está programado ningún artículo</p>  
<?php endif; ?>

Mostrar otros artículos del mismo autor y de la misma categoría

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

post->post_author;
$tempQuery = $wp_query;
  $currentId = $post->ID;
 
// Otros artículos del mismo autor
  $newQuery = "posts_per_page=5&author=" . $authorPosts;
  query_posts( $newQuery );
$authorPosts = "";
  $count = 0;
if (have_posts()) {
  while (have_posts()) {
  $count++;
  the_post();
  if( $count<4 && $currentId!=$post->ID) {
  $count++;
  $authorPosts .= '
<li><a href="%27%20.%20get_permalink%28%29%20.%20%27">' . the_title( "", "", false ) . '</a></li>
 
';
  }
  }
  }
 
// Otros artículos de la misma categoría
  $catlist = "";
  forEach( $cats as $c ) {
  if( $catlist != "" ) { $catlist .= ","; }
  $catlist .= $c->cat_ID;
  }
  $newQuery = "posts_per_page=5&cat=" . $catlist;
  query_posts( $newQuery );
$categoryPosts = "";
  $count = 0;
if (have_posts()) {
  while (have_posts()) {
  the_post();
  if( $count<4 && $currentId!=$post->ID) {
  $count++;
  $categoryPosts .= '
<li><a href="%27%20.%20get_permalink%28%29%20.%20%27">' . the_title( "", "", false ) . '</a></li>
 
';
  }
  }
  }
  $wp_query = $tempQuery;
  ?>

Mostrar un submenú de páginas en la barra lateral

1
2
3

<?php$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');if ($children) { ?><ul> <?php echo $children; ?>
</ul>
<?php } ?>

Sobre Comentarios

Mostrar los últimos comentarios

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

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"en " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

Reordenar los comentarios para que aparezcan primero los más recientes

Busca esta línea en comments.php:

1

foreach ($comments as $comment)

Añade antes de ella esta otra línea:

1

$comments = array_reverse($comments);

Dar un diseño diferente a los comentarios del autor del blog

Fuente: Highlight Author Comments in Wordpress

Abre tu hoja de estilos (normalmente style.css) y añade este código:

1
2
3

.authcomment {
background-color: #B3FFCC !important;
}

Solamente hemos cambiado el fondo del comentario. Aquí podrás dar el diseño que te parezca más oportuno.

Después ve al archivo comments.php y busca esta línea:

1

<li class=”<?php echo $oddcomment; ?>

Y sustitúyela por:

1
2
3
4

<li class=”<?php
if (1 == $comment->user_id)
$oddcomment = “authcomment”;
echo $oddcomment;?>

Ten en cuenta que el autor por defecto en Wordpress es “admin” por lo que el valor por defecto de “user_id” es ‘1?, por lo que si has cambiado el administrador por defecto (muy recomendable) creando un nuevo usuario tendrás que cambiar el valor de “user_id” por el nuevo, que se puede encontrar facilmente en Usuarios -> Autores y Usuarios de tu Tablero de Wordpress pasando el ratón sobre el número de entradas. El URL será algo parecido a http://www.tudominio.com/wp-admin/edit.php?author=”user_id”

Sobre Categorías

Mostrar una lista de categorías

1
2
3
4

<h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>

Eliminar ciertas categorías del Loop

1
2
3
4
5
6
7

<?php query_posts('cat=-3'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
	<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Ir a <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
	<p><?php the_time('j'); ?> de <?php the_time('F'); ?> de <?php the_time('Y'); ?></p>
	<?php the_content(); ?>
<?php endwhile; ?>

Mostrar las categorías en un menú desplegable

1
2
3
4
5
6

<form action="<?php bloginfo('url'); ?>/" method="get">
<?php
$select = wp_dropdown_categories('show_option_none=Seleccionar categor&iacute;a&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select); echo $select; ?>
<noscript><input type="submit" value="Ver" /></noscript>
</form>

Relacionados con el Loop

Crea tus propios Loops utilizando WP_Query

1
2
3
4
5
6
7
8
9

<?php  
$myPosts = new WP_Query();  
$myPosts->query('showposts=5');  
 
while ($myPosts->have_posts()) : $myPosts->the_post(); ?>  
   the_title();  
   the_content();  
endwhile;  
?>

Crear un loop con la primera imagen de cada artículo

Primero hay que crear esta función y añadirla en functions.php de nuestro tema:

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

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ // Define una imagen por defecto
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Ahora ya podemos obtener las imágenes y crear el loop:

1
2
3
4
5
6
7
8
9

<?php
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
        <a href="<?php the_permalink();?>" title="<?php the_title(); ?>" class="img-loop">
        <img src="http://media1.smashingmagazine.com/wp-content/uploads/images/wordpress-loop-hacks/<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" />
        </a>
    endwhile;
endif;
?>

Relacionados con el Archivo

Mostrar los archivos por meses

1
2
3
4

<h2>Archivos</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

Mostrar los archivos en un menú desplegable

1
2
3

<select name=\"archive-dropdown\" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=\"\"><?php echo attribute_escape(__('Seleccionar Mes')); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

Relacionados con los Avatares

Mostrar Gravatars

1

<?php if(function_exists(’get_avatar’)){ echo get_avatar($comment, ‘50?);} ?>

Cambiar el tamaño del avatar

1

<?php wp_list_comments('avatar_size=80'); ?>

Relacionados con las Etiquetas

Mostrar las etiquetas

1

<?php the_tags(); ?>

Mostrar una nube de etiquetas

1

<?php wp_tag_cloud('smallest=8&largest=36&'); ?>

Mostrar artículos relacionados sin plugin en base a etiquetas

Abre single.php e incluye este código dentro del loop. Obtiene la primera etiqueta y muestra los últimos 5 artículos con la misma etiqueta:

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

<?php
/para usar dentro del loop, muestra los títulos de 5 artículos relacionados con la primera etiqueta del artículo actual
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  echo 'Art&iacute;culos relacionados';
  $first_tag = $tags[0]->term_id;
  $args=array(
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
    'showposts'=>5,
    'caller_get_posts'=>1
   );
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
      <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace a <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
      <?php
    endwhile;
  }
}
?>

Obtener etiquetas relacionadas con una categoría

Obtenido de WpRecipes. Se incluye esta función 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

function get_category_tags($args) {
	global $wpdb;
	$tags = $wpdb->get_results
	("
		SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, null as tag_link
		FROM
			wp_posts as p1
			LEFT JOIN wp_term_relationships as r1 ON p1.ID = r1.object_ID
			LEFT JOIN wp_term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
			LEFT JOIN wp_terms as terms1 ON t1.term_id = terms1.term_id,
 
			wp_posts as p2
			LEFT JOIN wp_term_relationships as r2 ON p2.ID = r2.object_ID
			LEFT JOIN wp_term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
			LEFT JOIN wp_terms as terms2 ON t2.term_id = terms2.term_id
		WHERE
			t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id IN (".$args['categories'].") AND
			t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
			AND p1.ID = p2.ID
		ORDER by tag_name
	");
	$count = 0;
	foreach ($tags as $tag) {
		$tags[$count]->tag_link = get_tag_link($tag->tag_id);
		$count++;
	}
	return $tags;
}

Entonces ya podemos llamar a la función en nuestro tema:

1
2

$args = array('categories' => '12,13,14');
$tags = get_category_tags($args);

Relacionados con Imágenes

Obtener la primera imagen de cada artículo y ofrecerla en la página principal del blog como imagen del artículo

Es una alternativa a los campos personalizados utilizados para este mismo uso.

Hay que añadir esta función al archivo functions.php de tu tema:

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

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Imagen por defecto
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

En la página principal de tu blog (index.php) incluye ahora una llamada a la función:

1

<?php echo catch_that_image() ?>

Cambiar de forma automática el tamaño de las imágenes usando Timthumb

Permite cambiar de manera automática el tamaño de las imágenes. Para ello necesitar bajarte este timthumb.php, crear un directorio en tu tema que se llame scripts y copiarlo ahí. Una vez hecho puedes mostrar las imágenes haciendo (en este caso lo redimensionamos a 150×150):

1

<img src="/scripts/timthumb.php?src=/images/nombredelaimagen.jpg&h=150&w=150&zc=1" alt="Screenshot" />

Cambiar de forma automática el tamaño de las imágenes usando funciones internas de Wordpress

Fuente: Create thumbnails using Wordpress built-in functions

En wp-includes/media.php hay una serie de funciones que Wordpress usa para manipular ficheros. La que necesitamos es image_resize():

1
2
3
4

/**
 *Reducir una imagen a un tamaño concreto y grabar una nueva copia de la imagen.
 */
function image_resize( $file, $max_w, $max_h, $crop=false, $suffix=null, $dest_path=null, $jpeg_quality=90)

Puedes usarlo así para crear una nueva imagen de 100×60:

1
2

// cambiar el tamaño de la imagen
$thumb = image_resize($img,100,60,true);

Lo malo es que como Wordpress utiliza esta función en el administrador se necesita algo de código que no está disponible por defecto en los códigos. Esto lo puedes arreglar incluyendo wp-admin/includes/image.php en la prate superior del archivo functions.php de tu tema:

1
2

/// admin image API
require_once(ABSPATH . '/wp-admin/includes/image.php');

Relacionados con Búsquedas

Indicar el término incluido en la búsqueda

1

<h4>Has buscado "<?php the_search_query() ?>". Aqu&iacute; est&aacute;n los resultados:</h4>

Remarcar el término buscado en los resultados de una búsqueda

Abre search.php file y sustituye

1

the_title()

por

1

echo $title;

Y justo antes de esa línea recién modificada añade:

1
2
3
4
5
6
7

<?php
	$title = get_the_title();
	$keys= explode(" ",$s);
	$title = preg_replace('/('.implode('|', $keys) .')/iu',
		'<strong class="search-excerpt">\0</strong>',
		$title);
?>

Y en tu hoja de estilos, normalmente style.css, añade:

1

strong.search-excerpt { background: yellow; }

Relacionados con Redes Sociales, RSS, Compartir artículos

Mostrar un RSS externo

1
2

<?php include_once(ABSPATH.WPINC.'/rss.php');
wp_rss('http://wpforums.com/external.php?type=RSS2', 5); ?>

Compartir el artículo por e-mail

1
2
3

<a href="mailto:?subject=<?php the_title();
?>&amp;body=<?php the_permalink() ?>" title="Send this
article to a friend!">Email this</a>

Crear un botón para “Compartir en Facebook”

1

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Compartir en Facebook</a>

Mostrar enlaces válidos a redes sociales en una tabla

Requiere añadir los iconos de las redes sociales, que se encuentran facilmente en internet. También requiere el nombre de usuario en Twitter, en vez de la de Alex Denning (de WPShout, autor original del artículo, incluído en Lecturas Recomendadas).

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

<table border="0">
  <tr>
  <td><a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Marca este art&iacute;culo en Delicious"><img src="<?php bloginfo('template_url'); ?>/images/delicious.png" alt="Compartir en Delicious" /></a></td>
 
<td><a rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Enviar este art&iacute;culo a Digg"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" alt="Compartir en Digg" /></a></td>
 
<td><a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Compartir en Reddit"><img src="<?php bloginfo('template_url'); ?>/images/reddit.png" alt="Compartir en Reddit" /></a></td>
 
<td><a rel="nofollow" href="http://feeds2.feedburner.com/nombre" title="Suscribir mediante RSS"><img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Suscribir mediante RSS" /></a></td>
 
<td><a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Compartir en StumbleUpon"><img src="<?php bloginfo('template_url'); ?>/images/stumbleupon.png" alt="Compartir en StumbleUpon" /></a></td>
 
<td><a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("RT @AlexDenning: "); ?><?php the_title(); ?> --> <?php the_permalink(); ?>" title="Compartir con tus seguidores de Twitter"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Compartir en Twitter" /></a></td>
 
</tr>
 
</table>

Mostrar la entrada de Twitter más reciente

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

<?php
// Tu usuario de Twitter.
$username = "UsuariodeTwitter";
// Prefijo - Texto que quieras incluir antes de tus últimos tweets.
// (Puede ser HTML pero asegúrate de poner barras invertidas antes de las comillas, por ejemplo: href=\"link.html\")
$prefix = "";
// Sufijo - texto que quieras mostrar después de tu último tweet. (Mismas reglas que con el prefijo.)
$suffix = "";
$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=1";
function parse_feed($feed) {
$stepOne = explode("<content type=\"html\">", $feed);
$stepTwo = explode("</content>", $stepOne[1]);
$tweet = $stepTwo[0];
$tweet = str_replace(”&lt;”, “<”, $tweet);
$tweet = str_replace(”&gt;”, “>”, $tweet);
return $tweet;
}
$twitterFeed = file_get_contents($feed);
echo stripslashes($prefix) . parse_feed($twitterFeed) . stripslashes($suffix);
?>

Relacionados con jQuery

Incluir jQuery (incluído en la instalación de Wordpress)

Incluye la propia copia de jQuery incluída en Wordpress. Debe ir antes de wp_head

1

<?php wp_enqueue_script("jquery"); ?>

Incluir jQuery desde Google (en vez del incluído en Wordpress)

Se añade este código en functions.php de nuestro tema:

1
2
3
4
5

if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
   wp_enqueue_script('jquery');
}

La última línea logra que no haya hacer nada en el header por lo que con esto bastaría, siempre y cuando en tu tema tengas incluído en la cabecera wp_head();

Relacionados con Campos Personalizados

Usando campos personalizados (Custom Fields)

Mostrarlos en una lista

1

<?php the_meta(); ?>

Utilizar campos personalizados para mostrar imágenes (y cambiarlas su tamaño usando timthumb), con una imagen alternativa si no hubiera imagen
Necesitas tener cargado timthumb en tu tema/scripts (ver más arriba cómo usarlo).

1
2
3
4
5
6
7

<?php $postimageurl = get_post_meta($post->ID, 'Image', true);
if ($postimageurl) {
?>
<img src="<?php bloginfo(‘template_url’); ?> /scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "Image", true); ?>&h=250&w=250&zc=1" alt="<?php the_title(); ?>" />
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/noimage.jpg" alt="No hay imagen disponible" />
<?php } ?>

Mostrar el valor de un campo personalizado específico

1

<?php echo get_post_meta($post->ID, 'mood', true); ?>

Mostrar múltiples valores de un campo personalizado que tiene el mismo ID

1
2
3
4
5
6
7

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
<h3>Art&iacute;culo inspirado por:</h3>
<ul>
	<?php foreach($songs as $song) {
		echo '<li>'.$song.'</li>';
	} ?>
</ul>

Mostrar un campo personalizado sólo si existe

1
2
3
4
5
6

<?php
    $url = get_post_meta($post->ID, 'snippet-reference-URL', true); 
	if ($url) {
	    echo "<p><a href='$url'>URL de Referenc&iacute;a</a>";
	}
?>

Varios

Títulos dinámicos

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

<title><?phpif (is_home()) { echo bloginfo('name');
} elseif (is_404()) {
echo '404 No Encontrado';
} elseif (is_category()) {
echo 'Categor&iacute;a:'; wp_title('');
} elseif (is_search()) {
echo 'Resultados de la b&uacute;squeda';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archivos:'; wp_title('');
} else {
echo wp_title('');
}
?></title>

Incluir una página dentro de otra

1
2
3
4

<?php $recent = new WP_Query("page_id=**ID**"); while($recent->have_posts()) : $recent->the_post();?>
       <h3><?php the_title(); ?></h3>
       <?php the_content(); ?>
<?php endwhile; ?>

Obtener el ID de la página de jerarquía superior

1
2
3
4
5
6
7
8
9

<?php
if ($post->post_parent)	{
	$ancestors=get_post_ancestors($post->ID);
	$root=count($ancestors)-1;
	$parent = $ancestors[$root];
} else {
	$parent = $post->ID;
}
?>

Dar una clase dinámica a body en función del tipo de página, de la categoría, etc..

1

<body <?php body_class(); ?>>

Mostrar una guía (breadcrumbs) de Inicio/Categoría/Título

1

<?php bloginfo(‘home’); ?> / <?php the_category(); ?> / <?php the_title(); ?>

Proteger tu e-mail de spam

Si no tienes más remedio que mostrar tu dirección de e-mail puedes utilizar la función antispambot() que se encuentra en Wordpress:

1

<?php echo antispambot(get_the_author_email()); ?>

Uso de la función post_class() para incluir nuestras propias clases

Permite incluir nuestras propias clases. Su uso sería para añadir la clase estilo, por ejemplo:

1

<div id="post-<?php the_ID(); ?>" <?php post_class('estilo'); ?>>

El resultado sería:

1

<div class="post sticky hentry category-icons estilo" id="post-5966">

Lecturas recomendadas y fuentes del artículo

Wordpress Hacks – Huge compilation of Wordpress Code
WPShout, 10 Really Useful WordPress Code Snippets
Smashing Magazine, 10 Useful WordPress Loop Hacks
Smashing Magazine, 10 Exceptional WordPress Hacks
Vanderlay, 9 WordPress Hacks to Encourage User Interactivity
Noupe, Mastering Your WordPress Theme Hacks and Techniques

Si tenemos una web creada con Wordpress con contenidos diferentes en páginas distintas, puede que necesitemos una barra lateral diferente para cada página de la web. Esto lo podemos conseguir:

a) Con un solo archivo sidebar.php con condicionales que detecten en qué página estamos para aplicar un contenido distinto a cada una.
b) Utilizando barras laterales diferentes repartidas en distintos archivos, uno por cada barra lateral (ejemplo: sidebar-servicios.php, sidebar-productos.php, etc..).
c) En el caso de que utilicemos widgets, veremos cómo usar widgets distintos en cada página.

Un sólo archivo sidebar.php para todas las barras laterales

Todo este código (u otro semejante en función de nuestras necesidades) estaría dentro del archivo sidebar.php:

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

<div id="sidebar">
 
<?php if(is_home()){ ?> 
  // Código de la barra lateral para la página de Inicio
<?php } ?>	
 
<?php if(is_page('5')){ ?> 
  // Código de la barra lateral de la página 5
<?php } ?>		 
 
<?php if(is_category('4') || (is_single() && in_category('4')) ){ ?> 
  // Código de la barra lateral para una página de una categoría concreta
<?php } ?>	
 
<?php if(is_search()){ ?> 
  // Código de la barra lateral de la página de búsqueda
<?php } ?> 
 
</div>

En este ejemplo concreto estamos diciendo que si estamos en la página de inicio de la web, se ejecute un código determinado para la barra lateral, exclusivo para ella. Si estamos en la página 5 de la web se ejecutará otro código (para saber el número que corresponde a cada página creada hacemos click en Páginas. Al situar el ratón por encima del nombre de cada página veremos en la barra inferior del navegador el enlace al que va a ir si hacemos click, algo así como /wp-admin/page.php?action=edit&post=15. En este caso el número de la página, su ID, es 15. Cambiaríamos el 5 por un 15) . A continuación indicamos que si estamos en la categoría 4 o el artículo está dentro de la categoría 4 se ejecute otro código. Y por último, si estamos en la página de búsqueda se va a ejecutar otro código diferente. Por supuesto estos condicionales se pueden cambiar en función de nuestras necesidades. Podemos ver más condicionales en Wordpress.org.

Un archivo sidebar.php por cada barra lateral

La manera más sencilla de hacerlo es:
1- Buscar el archivo sidebar.php de tu tema y abrirlo con tu editor.
2- Hacer una copia del mismo grabándola con otro nombre, por ejemplo sidebar-productos.php (recuerda que siempre tiene que mantenerse en el nombre este formato sidebar-NOMBRE.php).
3- En este nuevo archivo introduce todo el código específico de esta nueva barra lateral.
4- Ahora abre la página donde quieres que se muestre esta barra lateral (siguiendo con nuestro ejemplo puede ser una página que se llame productos.php). Normalmente tendrás en esta página una llamada a la barra lateral como esta:

1

<?php get_sidebar(); ?>

5- Cambia esta línea por esta otra (en vez de productos puedes poner el nombre que tú le hayas dado al archivo sidebar-NOMBRE.php):

1

<?php get_sidebar('productos'); ?>

Recordad que entre comillas va el nombre que hemos puesto a nuestra barra lateral. Si es sidebar-NOMBRE.php habría que poner NOMBRE.

Ahora, una vez grabados los cambios, al abrir la página de Productos (o la que hayamos usado para hacer estos cambios) nos saldrá la nueva barra lateral que hemos creado específicamente para esa página.

Widgets diferentes para páginas diferentes

Si nuestra barra lateral se crea a base de widgets y queremos que en una página salga un widget y en otra salga otro widget diferente lo primero que tenemos que crear son distintas barras laterales para la página de widgets del administrador. Si en el menú de la izquierda hacemos click en Apariencia y luego en Widgets veremos algo así:

Para crear más barras laterales tenemos que abrir el archivo functions.php de nuestro tema. Si no existiera habría que crearlo. Normalmente en el archivo functions.php encontramos unas líneas como estas:

1
2
3
4
5
6
7
8
9
10

<?php
if ( function_exists('register_sidebar') ) {
   register_sidebar(array(
       'before_widget' => '<li id="%1$s" class="widget %2$s">',
       'after_widget' => '</li>',
       'before_title' => '<h2 class="widgettitle">',
       'after_title' => '</h2>',
   ));
}
?>

Estas líneas crean la barra lateral que vemos en la imagen anterior (el cuadro situado más a la derecha con el nombre Barra Lateral 1) y además dicen qué código HTML incluir antes y después del widget. Los widgets se añaden arrastrando el widget que deseemos al cuadro de la barra lateral (el que se llama en la imagen Barra Lateral 1).

Pero como queremos varias barras laterales diferentes donde arrastrar widgets diferentes cambiaremos el código anterior por uno de este tipo:

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

if ( function_exists('register_sidebar') ) register_sidebar(array(
'name' => 'Barra Lateral Inicio',
'id' => 'solo_inicio',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
 
if ( function_exists('register_sidebar') ) register_sidebar(array(
'name' => 'Barra Lateral Producto',
'id' => 'solo_producto',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>', ));
 
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
                'name' => 'Tercera Barra Lateral',
                'id' => 'tercera_barra',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));
}

Hemos creado tres barras laterales (tres cuadros distintos donde arrastrar widgets). Ahora el lado derecho de la página de Widgets, en el administrador de la web, aparecerá esto:

Pero vamos a explicar en detalle el código nuevo. Hemos repetido tres veces el código inicial, para crear tres barras laterales. Sólo hemos cambiado para cada una dos cosas: Su nombre (el que aparecerá en la cabecera de cada cuadro) que se especifica en ‘name’ => ‘Tercera Barra Lateral’ y el ID de cada uno que se especifica en id’ => ‘tercera_barra’. Un poco más adelante veremos dónde se utiliza este ID único que identifica cada barra lateral con sus widgets propios.

Ahora vamos a situar cada barra lateral dinámica en su página correspondiente. Antes hemos visto cómo crear distintos archivos sidebar (ejemplos: sidebar-producto.php, sidebar-blog.php, etc…). Lo más probable es que tengamos unas líneas como estas en el archivo sidebar.php y en cualquiera que hayamos creado a partir de una copia de este:

1

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Este condicional lo que consigue es que si hay widgets se pongan los widgets en la barra lateral, y si no existen se ejecuten las líneas de código que siguen al condicional. Vamos a cambiar este condicional para la página de Producto (siguiendo con el ejemplo anterior) o para la página que deseemos. Para ello en sidebar-producto.php cambiamos ese condicional por:

1

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('solo_producto') ) : ?>

Como vemos hemos añadido el ID de la barra lateral que antes hemos llamado Barra Lateral Producto al añadirla en functions.php.

Ahora en sidebar-producto.php estarán sólo los widgets que hayamos arrastrado a esta barra lateral.

Otras lecturas recomendadas

BlogCraving, How To: Different Homepage and Single Post Sidebars
Wordpress.org, Customizing Your Sidebar
Things by Mike, Wordpress – Using a different sidebar for pages and single posts.

No hace mucho, y gracias al tema Starkers, descubrí una nueva función de wp-includes/post-template.php en Wordpress 2.8, body_class().

Esta función me ha permitido introducir de manera automática clases en el elemento body, normalmente situado en el archivo header.php de nuestro tema de Wordpress. Estas clases varían según la página en la que se encuentra el usuario, y son muy útiles para luego poder aplicar estilos diferentes a cada página.

Se usa así:

1

<body <?php body_class(); ?>>

Vamos a ver ejemplos de qué genera:

Si estamos en la página de inicio y además tenemos el blog en la misma página, la clase que genera es esta:

1

<body class="home blog">

Como vemos genera dos clases separadas que podemos usar en nuestra hoja de estilos.

Pero si estamos en la página de inicio y esta es una página estática que no incluye el blog, la clase que generaría podría ser algo como esta:

1

<body class="home page page-id-3 page-template page-template-inicio-php">

Como vemos en este caso nos genera diversas clases: una al ser la página de inicio, otra por ser una página, otra que identifica la página y finalmente otra que identifica el template utilizado en la página. Esto nos permite, por ejemplo, aplicar un estilo único a todas las páginas que utilicen un template determinado, o aplicar un diseño individualizado a cada página.

Otro uso perfecto sería para dar estilo a un navegador creado con imágenes, para identificar la página en la que nos encontramos y marcarla como tal.

En el caso de que estemos en un artículo del blog lo que generaría sería algo de este tipo:

1

<body class="single postid-71">

Lo que nos ayuda a identificar que es un artículo del blog y además lo hace de manera individual, lo que nos permitiría dar un estilo diferente a cada artículo si así lo quisiéramos.

En resumen, body_class() genera clases CSS dinámicas basadas en el tipo de contenido y en las circunstancias bajo las que estás viendo una página concreta (por ejemplo si estás registrado o no en el caso de solicitarse).

Pero si queremos que además de las clases generadas dinámicamente se añada una clase elegida por nosotros, escribiríamos:

1

<body <?php body_class('nombre_clase'); ?>>

Más lecturas recomendadas sobre body_class():

Nathan Rice blog.
WPEngineer.com, que incluye además una lista completa de las clases que se generan.
Código de la función get_body_class().
Perisable Press muestra diversas maneras de establecer IDs dinámicos en Wordpress.