Vamos a ver una serie de funciones que nos permitirán precisamente eso: adaptar un poco el gestor de WordPress. Vamos a verlas una a una.

Cambia el logo de la pantalla de login

En la pantalla de login del gestor sale el logo de WordPress encima del formulario. Podemos poner el logo que queramos en su lugar. Para ello añadimos esta función en el archivo functions.php de nuestro tema:

1
2
3
4
5
6
7
8

//////////////////////////////////////////////////////////////////////////////////////////
// Logo personalizado en la página de login
function custom_login_logo() {
        echo '<style type="text/css">
        h1 a { background-image: url('.get_bloginfo('template_directory').'/images/logo.png) !important; }
        </style>';
}
add_action('login_head', 'custom_login_logo');

La imagen (en este caso logo.png) la guardaríamos en el directorio “images” de nuestro tema.

Cambia el pie de página del panel de administración

El código iría igualmente en el archivo functions.php de vuestro tema. Esto os permite poner la frase que queráis, por ejemplo:

1
2
3
4
5
6

//////////////////////////////////////////////////////////////////////////////////////////
// Cambiar el pie de pagina del panel de Administración
function change_footer_admin() {
    echo '&copy;2011 Copyright NOMBRE DE LA EMPRESA. Todos los derechos reservados - Web creada por <a href="http://www.emenia.es">Emenia</a>';
}
add_filter('admin_footer_text', 'change_footer_admin');

Borra opciones del menú de administración

Igualmente, pegamos el código en functions.php.

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

//////////////////////////////////////////////////////////////////////////////////////////
// Borrar opciones de admin
 
add_action('admin_menu', 'my_remove_menu_pages');
 
	function my_remove_menu_pages() {
            remove_menu_page('edit.php'); // Entradas
            remove_menu_page('upload.php'); // Multimedia
            remove_menu_page('link-manager.php'); // Enlaces
            remove_menu_page('edit.php?post_type=page'); // Páginas
            remove_menu_page('edit-comments.php'); // Comentarios
            remove_menu_page('themes.php'); // Apariencia
            remove_menu_page('plugins.php'); // Plugins
            remove_menu_page('users.php'); // Usuarios
            remove_menu_page('tools.php'); // Herramientas
            remove_menu_page('options-general.php'); // Ajustes
	}

Incluso podemos quitarlo sólo si no eres administrador, por ejemplo. En este caso quitamos “Multimedia”:

1
2
3
4
5
6
7
8
9

// Eliminamos Multimedia si no eres Administrador        
if (!current_user_can('manage_options')) {
 
	add_action( 'admin_init', 'more_remove_menu_page' );
 
	function more_remove_menu_page() {
            remove_menu_page('upload.php'); // Multimedia         
	}
}

Elimina metaboxes de las entradas

A la hora de crear una entrada en WordPress aparecen un montón de ventanas para introducir contenido o para mostrar información. Muchas veces nos sobran muchas de ellas y sólo generan confusión a usuarios que no sean conocedores de WordPress. Poniendo este código en functions.php podemos eliminar las que nos parezcan prescindibles:

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

   /////////////////////////////////////////////////////////////////////////////////////////
    // Eliminamos metaboxes de los posts
    if (is_admin()) :
        function my_remove_meta_boxes() {
         if(!current_user_can('administrator')) {
          remove_meta_box('linktargetdiv', 'link', 'normal');
          remove_meta_box('linkxfndiv', 'link', 'normal');
          remove_meta_box('linkadvanceddiv', 'link', 'normal');
          remove_meta_box('postexcerpt', 'post', 'normal');
          remove_meta_box('trackbacksdiv', 'post', 'normal');
          remove_meta_box('commentstatusdiv', 'post', 'normal');
          remove_meta_box('postcustom', 'post', 'normal');
          remove_meta_box('commentstatusdiv', 'post', 'normal');
          remove_meta_box('commentsdiv', 'post', 'normal');
          remove_meta_box('revisionsdiv', 'post', 'normal');
          remove_meta_box('authordiv', 'post', 'normal');
          remove_meta_box('sqpt-meta-tags', 'post', 'normal');
         }
        }
    add_action( 'admin_menu', 'my_remove_meta_boxes' );
    endif;

Como veis la función remove_meta_box tiene tres parámetros: el primero es el “id” de la ventana que queremos eliminar, el segundo puede ser “page”, “post” o “link” dependiendo donde estemos y el tercero “normal”, “advanced” o “side” dependiendo dónde esté la ventana. En esta función sólo se quitan si no eres administrador. Si elimináis ese condicional se quitarán en todos los casos. Podéis ver qué es cada ventana en función de su “id” en el código HTML.

Elimina metaboxes del escritorio

También en el escritorio hay unas cuantas ventanas que nos pueden sobrar. También para functions.php el código sería:

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

   //////////////////////////////////////////////////////////////////////////////////////////
   // Eliminamos metaboxes del Dashboard
 
    function example_remove_dashboard_widgets() {
            remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
            remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
            remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
            remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' );
            remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
            remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
            remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
            remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
            remove_meta_box( 'dashboard_browser_nag', 'dashboard', 'normal' );
    }
 
    add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

Aquí igualmente las podéis identificar por el ID de la ventana que queráis eliminar.

Fuerza el escritorio a una sola columna

Puede ser que hayáis quitado tantas cosas del escritorio que os queden las dos columnas originales pero tengáis sólo una ocupada. Podéis forzar al escritorio a que tenga una sola columna con esta función:

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

   //////////////////////////////////////////////////////////////////////////////////////////
   // Forzamos el escritorio a una sola columna
 
    function so_screen_layout_columns( $columns ) {
        $columns['dashboard'] = 1;
        return $columns;
    }
    add_filter( 'screen_layout_columns', 'so_screen_layout_columns' );
 
    function so_screen_layout_dashboard() {
        return 1;
    }
    add_filter( 'get_user_option_screen_layout_dashboard', 'so_screen_layout_dashboard' );

Crea una ventana nueva en el escritorio

Como no siempre es sólo quitar, hay veces que también hay que añadir. Si queréis introducir una nueva ventana en el escritorio con algún texto (por ejemplo un texto de bienvenida), podéis poner en functions.php:

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

    //////////////////////////////////////////////////////////////////////////////////////////
    // Widget para el Dashboard
 
    function custom_dashboard_widget() { ?>
            <img src="<?php bloginfo('template_directory'); ?>/images/logo.png" />
            <h1>¡Hola! Este es tu área personal en la web XXXX</h1>
            <p>Aquí va todo el texto que quieras, con todo el HTML que precises</p>
    <?php }
    function add_custom_dashboard_widget() {
            wp_add_dashboard_widget('custom_dashboard_widget', 'Bienvenido al editor de la web de XXXX', 'custom_dashboard_widget');
    }
    add_action('wp_dashboard_setup', 'add_custom_dashboard_widget');

Como veis utilizamos la función de WordPress wp_add_dashboard_widget. Lamentablemente no parece que podamos elegir la ubicación de nuestro widget dentro del escritorio. Aparecerá abajo de todo. Si la posición es importante, podéis sustituir esta función por la normal de “add_meta_box”:

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

    //////////////////////////////////////////////////////////////////////////////////////////
    // Widget para el Dashboard
 
    function custom_dashboard_widget() { ?>
            <img src="<?php bloginfo('template_directory'); ?>/images/logo.png" />
            <h1>¡Hola! Este es tu área personal en la web XXXX</h1>
            <p>Aquí va todo el texto que quieras, con todo el HTML que precises</p>
    <?php }
 
    add_action( 'wp_dashboard_setup', 'my_dashboard_setup_function' );
 
function my_dashboard_setup_function() {
    add_meta_box( 'my_dashboard_widget', 'Bienvenido al editor de la web de XXXXX', 'custom_dashboard_widget', 'dashboard', 'normal', 'high' );
}

Esto está muy bien, pero quizás queramos añadir estilos propios para este código HTML que hemos añadido. ¿Cómo lo haríamos? Podemos crear un plugin. Añadimos una carpeta en la carpeta wp-content/plugins que vamos a llamar admin-escritorio. Dentro de esta carpeta creamos dos archivos, uno que se llame admin-escritorio.php y el otro admin-escritorio.css.

El primero, admin-escritorio.php sería:

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

<?php
/*
Plugin Name: Estilos personalizados Widget Escritorio Admin
Plugin URI: http://www.emenia.es
Description: Añade una hoja de estilo para el Escritorio del Admin de Wordpress
Author: Emenia
Version: 1.0
Author URI: http://www.emenia.es
*/
 
function my_admin_head() {
        echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('admin-escritorio.css', __FILE__). '">';
}
 
add_action('admin_head', 'my_admin_head');
 
?>

A continuación podéis poner la función que vimos más arriba, que contiene el código HTML. Como veis hemos incluido la hoja de estilo, que tendrá el nombre admin-escritorio.css:

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

/*
    Document   : admin-escritorio
    Created on : 11-ene-2012, 8:06:12
    Author: Emenia
    Author URI: http://www.emenia.es
    Email: info@emenia.es
    Description: Estilos para el admin de Wordpress
*/
.icon32.icon-dashboard, #icon-index,
.index-php h2,
.index-php h3.hndle { display: none; }
 
.bienvenido h1 {
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.2;
    margin: .1em 0 .8em;
}
.index-php .inside h1,
.index-php .inside h2,
.index-php .inside p,
.index-php .inside .button-primary { margin-left: 15px;}
.index-php .inside h2 { display: block;}
.index-php .inside h2 { margin: 10px 0 10px 15px;}

Bueno, esos estilos no tendrán mucho sentido en este caso. Son de una web que he hecho recientemente. Podréis cambiarlos por otros que necesitéis en función del código HTML que hayáis puesto en la función que vimos más arriba.

A propósito, una vez añadido el código del plugin no os olvidéis de activarlo!

Elimina y añade opciones de la barra de Administración

Desde la versión 3.3 de WordPress podemos personificar la barra de administración de una manera distinta a como se hacía hasta ahora. Hay un artículo muy bueno de Craig Buckler que nos lo muestra. Como veis se usan los métodos “remove_node” para eliminar y “add_node” para añadir. En este último caso hay que pasar un array con varios parámetros:

• id — el id que aparecerá en el elemento HTML y que lo identifica
• title — el texto que aparecerá en el menú de la barra
• parent — el ID de la opción superior del menú, para el caso de submenú (opcional)
• href — el enlace hacia donde irá el usuario al hacer click (opcional)
• group — true (verdadero) si es un grupo (opcional)
• meta — un array que incluye otras etiquetas, como: html, class, onclick, target, title, tabindex

Pondremos en el archivo 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
37
38
39
40

   //////////////////////////////////////////////////////////////////////////////////////////    
    // Eliminar opciones de la barra del administrador
    function change_toolbar($wp_toolbar) {
        global $current_user;
        $instrucciones = get_admin_url() . '/admin.php?page=instrucciones';
        $ver_prendas = get_admin_url() . '//edit.php?post_type=ropa';
        $anadir_prendas = get_admin_url() . '//post-new.php?post_type=ropa';
        $volver = esc_url( get_author_posts_url( $current_user->ID ) );
 
        $wp_toolbar->remove_node('wp-logo');
        $wp_toolbar->remove_node('comments');
        $wp_toolbar->remove_node('new-content');
        $wp_toolbar->remove_node('site-name');
        $wp_toolbar->add_node(array(
            'id' => 'volver_web',
            'title' => 'Ir a mi página en la web',
            'href' => $volver,
            'meta' => array('target' => 'volver')
        ));
        $wp_toolbar->add_node(array(
            'id' => 'myhelp',
            'title' => 'Ayuda',
            'href' => $instrucciones,
            'meta' => array('target' => 'help')
        ));
        $wp_toolbar->add_node(array(
            'id' => 'prendas',
            'title' => 'Mi ropa',
            'href' => $ver_prendas,
            'meta' => array('target' => 'ver')
        ));
        $wp_toolbar->add_node(array(
            'id' => 'nueva_prenda',
            'title' => 'Añadir ropa',
            'href' => $anadir_prendas,
            'meta' => array('target' => 'anadir')
        ));
 
    }
    add_action('admin_bar_menu', 'change_toolbar', 999);

Como veréis hemos añadido varias opciones. Una es una pestaña que crearemos más adelante que llamamos “Ayuda”. Otras dos que son de posibles entradas personalizadas de “Ropa” y la última que lleva al usuario a su página de autor de la web (quizás estos ejemplos no os valgan de nada, pero al provenir de un caso real quizás os den alguna idea). Por otro lado hemos eliminado con remove_node las opciones que vienen por defecto.

También podemos mostrar la barra sólo a los administradores:

1
2
3

if (!current_user_can('manage_options')) {
	add_filter('show_admin_bar', '__return_false');
}

Crear una nueva pestaña en el menú de administración

Imagina que quieres crear una nueva pestaña en el menú que está a la izquierda en el panel de administración de WordPress. Vamos a suponer que queremos crear una página de instrucciones para nuestro cliente. Para ello podemos crear un plugin. Abrimos en wp-content/plugins una carpeta que se llame “instrucciones” y dentro creamos un archivo que se llame “instrucciones.php” que sería así:

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

<?php
/*
Plugin Name: Instrucciones de uso
Plugin URI: http://www.emenia.es
Description: Para añadir una nueva opción en el menú con instrucciones
Version: 1.0
Author: Emenia
Author URI: http:www.emenia.es
License: GPLv2
*/
add_action('admin_menu', 'my_plugin_menu');
 
function my_plugin_menu() {
        add_menu_page( 'Instrucciones', 'Instrucciones', 'edit_posts', 'instrucciones', 'my_plugin_options' );
}
 
function my_plugin_options() {
	if (!current_user_can('edit_posts'))  {
		wp_die( __('No tiene suficientes permisos para acceder a esta página.') );
	} ?>
	<div class="wrap">
        <h1>Instrucciones</h1>
 
        <!-- Aquí va todo el código HTML que preciséis -->
	</div>
<?php }
?>

Si queréis que tenga estilos podéis incluirlos en el propio archivo HTML en el caso de que no sean muy complejos para ganar sencillez. Podéis también aprovechar la hoja de estilos que creamos anteriormente.

No os olvidéis de activar el plugin.

Pon iconos personalizados en el menú del panel de administración

Si quieres puedes cambiar los iconos del panel de administración por otros más de tu gusto. Esto es especialmente útil para las entradas personalizadas. Necesitarás poner en functions.php esta función:

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

    /////////////////////////////////////////////////////////////////////////////////////////
    // Iconos personalizados para la entrada personalizada
 
    add_action( 'admin_head', 'wpt_portfolio_icons' );
 
    function wpt_portfolio_icons() {
        ?>
        <style type="text/css" media="screen">
            #menu-posts-ropa .wp-menu-image {
                background: url(<?php bloginfo('template_url') ?>/images/nuevo-icono.png) no-repeat 6px 6px !important;
            }
            #menu-posts-ropa:hover .wp-menu-image, #menu-posts-ropa.wp-has-current-submenu .wp-menu-image {
                background-position:6px -16px !important;
            }
            #icon-edit.icon32-posts-ropa {background: url(<?php bloginfo('template_url') ?>/images/nuevo-icono-32.png) no-repeat;}
        </style>
    <?php }

Como veis, en este caso el icono que ponemos se llama “nuevo-icono.png”. El icono debería tener un tamaño de 28×28 píxeles. El icono interior (una vez se ha hecho click y entramos en su página) tiene 32×32. Ambos se guardan, en este caso, en el directorio “images” de tu tema. En esta función tendréis que cambiar los id (que en el ejemplo son #menu-posts-ropa, #menu-posts-ropa:hover y #icon-edit.icon32-posts-ropa) por los correspondientes a la opción para la cual queréis cambiar el icono.

Campos personalizados, entradas personalizadas, cambios en el perfil de usuarios…..

Hay muchos más cambios que puedes realizar en el administrador de WordPress, aparte de los que acabamos de comentar, y que afectan a las entradas, a las páginas y a los perfiles de usuario.
Como los hemos visto en artículos anteriores, no voy a entrar en ellos. Haced click en la nube de etiquetas en “WordPress” y veréis artículos sobre los Usuarios, Taxonomías, Campos Personalizados, Entradas Personalizadas, etc..

¡Espero que este artículo os haya sido útil! ¡Os animo a que aportéis más trucos para personalizar el administrador de WordPress!

Pero ¿qué hacer cuando queremos que se pueda subir una imagen desde el campo personalizado? Supongamos que las entradas de nuestra página de WordPress son “Productos”, y que cada producto tiene tres imágenes. Podemos subir las imágenes desde el apartado “Multimedia” y luego crear tres campos personalizados de texto y escribir en ellos el nombre de cada archivo. Puede ser que para nosotros sea más que suficiente. Pero, ¿y si le estás haciendo la página a un cliente no experto en WordPress? La primera vez que le explicas el proceso de subir la imagen del producto puede ser que veas que no se está enterando de nada…

En estos casos es mejor que el campo personalizado sea directamente un botón para subir la imagen. Al hacer click en crear o editar una entrada queremos que nos salga esto:

Y una vez subimos una imagen queremos que esta se vea para ser más sencillo saber qué es lo que hemos subido (por cierto, una pulsera de Teresa Aldama)

Vamos a crear un sencillo plugin que nos va a crear tres campos personalizados para subir tres imágenes diferentes (siguiendo el ejemplo del “Producto”). Hay muchos plugins de WordPress que nos permiten hacer esto, pero muchas veces son tan completos y complejos que lo que queremos es una solución simple y propia, que podamos editar sin problemas según nuestras necesidades y a nuestro antojo.

Para crear este plugin hay muchos artículos y discusiones que me han servido de fuente, como estos:
- Using the WordPress Uploader in Your Plugin or Theme
- Multiple Media Uploads in WordPress’ Functions.php
- Y sobre todo la ayuda del gran libro Professional WordPress Plugin Development

Vamos a crear dos archivos, uno al que llamaremos imagenes-meta-box.php, donde estará toda la lógica del plugin, y otro al que llamaremos imagenes-meta-box.js, donde estará el código javascript para que salga el cargador de medios de WordPress. Creamos una carpeta en wp-content/plugins que se llame “imagenes-meta-box” y guardamos ahí los dos archivos.

Vamos con el primer archivo, imagenes-meta-box.php. Vamos a verlo poco a poco, sólo tendréis que unir las partes que vayamos viendo en el mismo orden ( bajaros el plugin completo al final del artículo).

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

<?php
/*
Plugin Name: Imágenes en campos personalizados
Plugin URI: http://www.emenia.es/plugin-subir-imagenes-campo-personalizado-wordpress
Description: Para añadir imágenes en Entradas, Páginas o Entradas personalizadas
Version: 1.0
Author: Emenia
Author URI: http:www.emenia.es
License: GPLv2
*/
 
//hook para crear el meta box
add_action( 'add_meta_boxes', 'em_mtbx_img_crear' );
 
function em_mtbx_img_crear() {
 
	// Creamos el meta box personalizado
	add_meta_box(
                'em-img-meta', // atributo ID
                '<h2><strong>FOTOS</strong>: Fotos del Producto</h2>', // Título
                'em_mtbx_img_function', // Función que muestra el HTML que aparecerá en la pantalla
                'post', // Tipo de entrada. Puede ser 'post', 'page', 'link', o 'custom_post_type'
                'normal', // Parte de la pantalla donde aparecerá. Puede ser 'normal', 'advanced', o 'side'
                'default' // Prioridad u orden en el que aparecerá. Puede ser 'high', 'core', 'default' o 'low'
                );
 
}

La primera parte, como veis, utiliza la función de WordPress add_metabox para crear el meta-box personalizado. Aqui hay varias opciones que podéis personalizar según vuestras necesidades, como el tipo de entrada donde van a salir (‘post’, ‘page’, ‘link’, o ‘custom_post_type’, en este último caso poned el nombre de la entrada personalizada), la parte de la pantalla donde aparecerá y en qué posición.
Como veis se llama a la función em_mtbx_img_function que es la que mostrará los campos en la pantalla agregando el código HTML

Seguimos con la siguiente parte, que será precisamente esa función:

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

function em_mtbx_img_function( $post ) {
 
    echo '<h2><strong>FOTOS DE PRODUCTO</strong><br />En rojo el tamaño que debe de tener cada una.</h2>';
 
	$em_mtbx_img1 = get_post_meta( $post->ID, '_em_mtbx_img1', true );
	?>
        <h4>Foto 1 del producto - <span style="color: red; font-weight: bold;">TAMAÑO: 600px por 667 píxeles</span>:</h4>
        <input id="em_mtbx_img1" class="em_mtbx_img" type="text" size="75" name="em_mtbx_img1" value="<?php echo esc_url( $em_mtbx_img1 ); ?>" />
    	  <input id="img_boton1" type="button" value="Seleccionar imagen" class="img_boton button-secondary"  />
          <br /><br />
          <?php if($em_mtbx_img1 && $em_mtbx_img1 != '') echo '<img src="' . esc_url( $em_mtbx_img1 ) .'" width="300" height="333" alt="" />'; ?>
          <div class="clear"></div>
          <br /><hr />
 
	<?php //si ya existe esa imagen obtemos su valor
	$em_mtbx_img2 = get_post_meta( $post->ID, '_em_mtbx_img2', true );
	?>
        <h4>Foto 2 del producto - <span style="color: red; font-weight: bold;">TAMAÑO: 600px por 667 píxeles</span>:</h4>
        <input id="em_mtbx_img2" class="em_mtbx_img" type="text" size="75" name="em_mtbx_img2" value="<?php echo esc_url( $em_mtbx_img2 ); ?>" />
    	  <input id="img_boton2" type="button" value="Seleccionar imagen" class="img_boton button-secondary"  />
          <br /><br />
          <?php if($em_mtbx_img2 && $em_mtbx_img2 != '') echo '<img src="' . esc_url( $em_mtbx_img2 ) .'" width="300" height="333" alt="" />'; ?>
          <div class="clear"></div>
          <br /><hr />
 
	<?php //si ya existe esa imagen obtemos su valor
	$em_mtbx_img3 = get_post_meta( $post->ID, '_em_mtbx_img3', true );
	?>
        <h4>Foto 3 del producto - <span style="color: red; font-weight: bold;">TAMAÑO: 600px por 667 píxeles</span>:</h4>
        <input id="em_mtbx_img3" class="em_mtbx_img" type="text" size="75" name="em_mtbx_img3" value="<?php echo esc_url( $em_mtbx_img3 ); ?>" />
    	  <input id="img_boton3" type="button" value="Seleccionar imagen" class="img_boton button-secondary"  />
          <br /><br />
          <?php if($em_mtbx_img3 && $em_mtbx_img3 != '') echo '<img src="' . esc_url( $em_mtbx_img3 ) .'" width="300" height="333" alt="" />'; ?>
          <div class="clear"></div>
          <br />
	<?php
}

Empezamos en la línea 3 con el título, que lo podéis cambiar al título que queráis y al tamaño que queráis (yo he puesto como etiqueta h2 por lo que sale bastante grande).

En la línea 5 obtenemos el valor del primer campo, es decir, la URL completa de la primera imagen (en el caso de que ya la hubiéramos subido, claro).

En las líneas 7 a 10 creamos el campo donde se podrá escribir la URL de una imagen o hacer click sobre el botón que abre la ventana característica de WordPress para cargar medios. El funcionamiento de este botón lo gestionaremos mediante el archivo imagenes-meta-box.js, como ya dijimos antes y veremos más tarde. Vemos que si existe ya algún valor previo este se mostrará en su campo respectivo. Podemos además añadir campos de texto explicativos, como en este caso el tamaño que deben tener las imágenes (en ocasiones muy importante si es un tercero el que las va a subir). La clase “button-secondary” del botón es propia de la hoja de estilos de WordPress.

En las líneas 11 a 13 comprobamos si existe el valor previo y mostramos la imagen.

Lo que viene a continuación es una simple repetición para las imágenes dos y tres. Aquí podéis quitar o añadir en función de las necesidades, cuidando también de añadir o quitar en la última función en la que se graban los campos.

Seguimos con una serie de funciones que permiten que el código javascript y el estilo, thickbox, que es el que usa WordPress, se carguen sólo al crear o editar una entrada:

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

//para cargar el archivo imagenes-meta-box.js sólo al crear y editar una entrada
add_action('admin_print_scripts-post.php', 'em_mtbx_img_admin_scripts');
add_action('admin_print_scripts-post-new.php', 'em_mtbx_img_admin_scripts');
 
function em_mtbx_img_admin_scripts() {
	wp_enqueue_script( 'em-image-upload', plugins_url( '/imagenes-meta-box/imagenes-meta-box.js' ), array( 'jquery','media-upload','thickbox' ) );
}
 
//usando thickbox para subir la imagen al crear o editar una entrada
add_action('admin_print_styles-post.php', 'em_mtbx_img_admin_styles');
add_action('admin_print_styles-post-new.php', 'em_mtbx_img_admin_styles');
 
function em_mtbx_img_admin_styles() {
	wp_enqueue_style( 'thickbox' );
}

Y acabamos grabando los campos:

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

//Para grabar los campos. Añadir uno nuevo por cada campo existente, en este caso tres.
add_action( 'save_post', 'em_mtbx_img_save_meta' );
 
function em_mtbx_img_save_meta( $post_id ) {
 
	if ( isset( $_POST['em_mtbx_img1'] ) ) {
 
		update_post_meta( $post_id, '_em_mtbx_img1', esc_url_raw( $_POST['em_mtbx_img1'] ) );
 
	}
 
	if ( isset( $_POST['em_mtbx_img2'] ) ) {
 
		update_post_meta( $post_id, '_em_mtbx_img2', esc_url_raw( $_POST['em_mtbx_img2'] ) );
 
	}
 
	if ( isset( $_POST['em_mtbx_img3'] ) ) {
 
		update_post_meta( $post_id, '_em_mtbx_img3', esc_url_raw( $_POST['em_mtbx_img3'] ) );
 
	}
}

Si tenéis más imágenes tendréis que añadir uno por imagen. Como veis comprueba si existe cada entrada y en su caso la graba en la base de datos, limpiándola antes con esc_url_raw.

Vamos a ver ahora el archivo imagenes-meta-box.js. Este archivo va a permitir que al hacer click en el botón del formulario aparezca el cargador de medios de WordPress.

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

jQuery(document).ready(function($) {
 
   var formfield = null;
 
   $('.img_boton').click(function() {
      $('html').addClass('Image');
      formfield = $(this).prev('.em_mtbx_img').attr('name');
      tb_show('', 'media-upload.php?type=image&TB_iframe=true');
      return false;
    });
 
   window.original_send_to_editor = window.send_to_editor;
   window.send_to_editor = function(html){
      var fileurl;
 
      if (formfield != null) {
        fileurl = $('img',html).attr('src');
        $('#'+formfield).val(fileurl);
        tb_remove();
        $('html').removeClass('Image');
        formfield = null;
       } else {
        window.original_send_to_editor(html);
       }
    };
});

Cada vez que hacemos click en un botón con la clase .img_boton añadimos a la etiqueta “html” la clase “Image” (línea 6) y guardamos en una variable llamada “formfield” el valor del atributo “name” del elemento anterior con la clase “em_mtbx_img” a aquel sobre el que se haya hecho click ($this) (línea 7). Esta parte es muy importante porque gracias a ese valor vamos a poder seleccionar en la línea 18 el ID de dicho input para establecer el valor del mismo en función de la imagen seleccionada. Por eso es importante que los atributos ID y name de los inputs sean iguales.

Bueno, pues ya tenemos nuestro plugin. Ya sólo hay que ir a la sección de plugins del administrador y activarlo.

Ahora viene la segunda parte. ¿Cómo obtenemos las imágenes dentro de nuestro tema? Pues como si de cualquier otra entrada personalizada se tratara. Supongamos que estamos en single.php de nuestro tema, dentro del loop haríamos:

1
2
3
4
5
6
7

..........
// para obtener el valor de la primera imagen
<?php $em_mtbx_img1 = get_post_meta( $post->ID, '_em_mtbx_img1', true );
if($em_mtbx_img1 != '') { // Si existe el valor ?>
    <img src="<?php echo $em_mtbx_img1; ?>" alt="" />
<?php } ?>
..........

Lo mismo sería para las otras dos imágenes.

Si queréis descargar el plugin, lo podéis hacer aquí:

Descargar plugin

A propósito, el plugin lo he probado con el RC2 de WordPress 3.3 y funciona perfectamente con el nuevo cargador de medios.

¡Espero vuestros comentarios! Seguro que se os ocurren maneras de mejorarlo para que sea más útil para todos.

La web se ha creado utilizando WordPress como gestor de contenidos, utilizando HTML5.

Ir a la web de Powertrack

Como sabéis, en WordPress tenemos varios tipos de roles preestablecidos que permiten al dueño de una web determinar lo que cada usuario puede y no puede hacer:

• Super Administrador – En el caso de una red de blogs tiene acceso a todas las opciones de administración de dicha red.
• Administrador: Tiene acceso a todas las opciones de administración de la web
• Editor: Puede publicar y gestionar entradas y páginas tanto suyos como ajenos.
• Autor: Puede publicar y gestionar sus propias entradas.
• Colaborador: Puede escribir y gestionar sus entradas, pero no publicarlas.
• Subscriptor: Sólo puede gestionar su perfil.

Vamos a ver una serie de funciones prácticas que nos pueden ayudar a mejorar las posibilidades de nuestro tema a la hora de manejar los usuarios de nuestra web.

Modificar el perfil del Usuario

Una vez demos de alta a un Usuario quizás veamos que su perfil se nos queda un poco corto. Quizás necesitamos incorporar nuevos campos y opciones, o una imagen (un logo, por ejemplo), o quizás no queramos que pueda cambiar su contraseña.

Para ello vamos a tener que abrir el archivo functions.php de nuestro tema. Vamos a ver distintas opciones posibles, aunque hay muchas más (os animo a aportarlas en los comentarios!):

Ejemplo 1: Vamos a añadir dos nuevos campos personalizados al perfil de usuario. Para hacerlo lo más genérico posible uno será para elegir entre dos niveles (Nivel 1 o Nivel 2) y el otro será para introducir un campo de texto, por ejemplo el nombre de una imagen que subamos a través de Multimedia (por ejemplo, un logo). para ello me he basado es este artículo de Justin Tadlock.

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

 
    add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
    add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );
 
    function my_show_extra_profile_fields( $user ) { ?>
            <h3>Logo de la empresa</h3>
            <table class="form-table">
                <tr>
                    <th><label for="imagen">Nombre de la imagen (ej. imagen1.jpg):</label></th>
 
                    <td>
                        <?php $imagen = esc_attr( get_the_author_meta( 'imagen', $user->ID ) ); ?>
                        <input type="text" name="imagen" value="<?php echo $imagen; ?>" id="imagen" />
                        <p>Subir el archivo con la opción del menú Multimedia y escribir aquí su nombre.</p>
                    </td>
                </tr>
            </table>
            <h3>Seleccionar Nivel</h3>
 
            <table class="form-table">
                <tr>
                    <th><label for="nivel">Tipo de usuario</label></th>
 
                    <td>
                        <?php $nivel = esc_attr( get_the_author_meta( 'nivel', $user->ID ) ); ?>
                        <input type="radio" name="nivel" value="Nivel1" id="nivel1" <?php if ( $nivel == 'Nivel1' ) echo 'checked="checked"'; ?> />  Nivel1
                        <input type="radio" name="nivel" value="Nivel2" id="nivel2" <?php if ( $nivel == 'Nivel2' ) echo 'checked="checked"'; ?> />  Nivel2
                    </td>
                </tr>
            </table>
    <?php }
 
    add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
    add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
 
function my_save_extra_profile_fields( $user_id ) {
 
    global $wpdb;
 
	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;
 
	/* Copiar y pegar esta linea para campos adicionales, cambiando el nombre del campo */
        if(isset($_POST['imagen'])){
            update_usermeta( $user_id, 'imagen', wp_kses($_POST['imagen'], none ));
        } else {
            $_POST['imagen'] == '';
        }
         if(isset($_POST['nivel'])){
            update_usermeta( $user_id, 'nivel', wp_kses($_POST['nivel'], none) );
        } else {
            $_POST['nivel'] == '';
        }
}

Vamos a suponer que no queremos que el usuario pueda cambiar el Nivel, que sólo lo pueda cambiar el administrador. Entonces haríamos:

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

  <?php if (current_user_can( 'administrator' ) ) { // Solo si es administrador  ?> 
 
            <h3>Seleccionar Nivel</h3>
 
            <table class="form-table">
                <tr>
                    <th><label for="nivel">Tipo de usuario</label></th>
 
                    <td>
                        <?php $nivel = esc_attr( get_the_author_meta( 'nivel', $user->ID ) ); ?>
                        <input type="radio" name="nivel" value="Nivel1" id="nivel1" <?php if ( $nivel == 'Nivel1' ) echo 'checked="checked"'; ?> />  Nivel1
                        <input type="radio" name="nivel" value="Nivel2" id="nivel2" <?php if ( $nivel == 'Nivel2' ) echo 'checked="checked"'; ?> />  Nivel2
                    </td>
                </tr>
            </table>
 
  <?php } // Fin de si es administrador

Vale, ya tenemos que algunos usuarios son de Nivel 1 y otros de Nivel 2. ¿Cómo usarlo en nuestro tema? Sabiendo el ID del usuario podemos obtener el “Nivel” del mismo gracias a la función de WordPress get_the_author_meta():

1
2
3
4
5
6

 
// Si estamos dentro del loop podemos obtener el ID del usuario:
$usuarioID = get_the_author_meta( "ID" );
 
// Una vez tenemos su ID podemos obtener el campo de su perfil que queramos, por ejemplo su Nivel, que acabamos de añadir.
$nivel = strtolower(get_the_author_meta( 'nivel', $usuarioID ));

También puede ser que queramos obtener fuera del loop el “Nivel” que hemos creado (o cualquier otro campo) para añadir, por ejemplo, un “id” a la etiqueta body que nos ayude a dar estilos diferentes según a qué opción pertenezca el usuario:

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

<?php
    // Para poner un id en Body con el Nivel.
 
    // Obtenemos el usuario actual
    if(isset($_GET['author_name'])) :
        $curauth = get_userdatabylogin($author_name);
    else :
        $curauth = get_userdata($author);
    endif;
 
?>
<body <?php body_class(); ?> <?php if(isset($curauth) && ($curauth->nivel != '')) echo 'id="' . $curauth->nivel . '"';?>>

Otra función interesante de WordPress es get_userdatabylogin. Sabiendo el nombre de usuario podemos acceder a los valores de su perfil:

1

<?php get_userdatabylogin( $user_login ) ?>

ACTUALIZACION: La función get_userdatabylogin se deja de utilizar a partir de WordPress 3.3.

Y por ejemplo si queremos obtener una lista de usuarios que sean de Nivel 1 (por seguir con el ejemplo), con su URL y su nombre, entonces podemos usar la función get_users(), que nos permite incluir en sus parámetros el campo personalizado que hemos creado, y la función que ya hemos visto get_userdatabylogin():

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

        <aside id="archives" class="widget">
                <?php $args = array( // Argumentos para la selección de usuarios. Suponiendo que sólo queremos Colaboradores (Contributors) de Nivel 1
                    'blog_id' => $GLOBALS['blog_id'],
                    'role' => 'contributor',
                    'meta_key' => 'nivel',
                    'meta_value' => 'Nivel1',
                    'orderby' => 'nicename',
                    'order' => 'ASC',
                    'who' => 'contributors'
                     ); ?>
                <?php $blogusers = get_users( $args ); // Grabamos los usuarios en una variable ?> 
 
                <?php    foreach ($blogusers as $user) { // Foreach de todos los usuarios
 
                    $user = get_userdatabylogin($user->user_login); // Obtenemos el objeto $user a partir de su nombre usando la función que vimos antes
 
                    $author_url = esc_url( get_author_posts_url( get_the_author_meta('ID', $user->ID) ) ); // Obtenemos la URL del usuario
                    echo '<li><a href=' . $author_url . '" title="" >' . $user->display_name . '</a></li>'; // Ponemos el enlace con la URL y su nombre
                } ?>
        </aside>

Ejemplo 2: Vamos a eliminar algunos campos del perfil de usuario que pueden sobrarnos. No sé cómo eliminar gran cantidad de campos como no sea a través de Javascript ocultándolos. Como eso no me gusta demasiado no lo voy a poner aquí. Los que sí sé cómo quitar:

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

//////////////////////////////////////////////////////////////////////////////////////////
/// Eliminar selecciones de color del perfil y algunos campos de contacto, añadiendo dos nuevos (Twitter y Facebook)
add_action('admin_head', 'admin_del_color_options');
 
function admin_del_color_options() {
   global $_wp_admin_css_colors;
   $_wp_admin_css_colors = 0;
}
 
function new_contactmethods( $contactmethods ) {
  $contactmethods['twitter'] = 'Twitter'; // Add Twitter
  $contactmethods['facebook'] = 'Facebook'; // Add Facebook
  unset($contactmethods['yim']); // Remove Yahoo IM
  unset($contactmethods['aim']); // Remove AIM
  unset($contactmethods['jabber']); // Remove Jabber
 
return $contactmethods;
}
 
add_filter('user_contactmethods','new_contactmethods',10,1);

Ejemplo 3: Que sólo el Administrador pueda cambiar la contraseña de los autores. Una vez insertado este código al autor no le saldrá el campo de Contraseña y por lo tanto no podrá cambiarla.

1
2
3
4
5
6
7
8

//////////////////////////////////////////////////////////////////////////////////////////
// Para que sólo el Administrador pueda cambiar la contraseña de los autores
if ( is_admin() )
  add_action( 'init', 'disable_password_fields', 10 );
function disable_password_fields() {
  if ( ! current_user_can( 'administrator' ) )
    $show_password_fields = add_filter( 'show_password_fields', '__return_false' );
}

Los usuarios en la base de datos

Si echas un vistazo a la base de datos de tu instalación de WordPress verá que los datos de los usuarios se encuentran en dos tablas (vamos a suponer que el prefijo que has usado es wp_, aunque esto no sea recomendable):

• wp_users: Donde tendrás una lista de los usuarios de tu web con los siguientes campos:
  • ID – El ID del usuario
  • user_login – El nombre de usuario
  • user_pass – La contraseña
  • user_nicename – Es la versión limpia del user_login, que se emplea por ejemplo en las URLs.
  • user_email – El email del usuario
  • user_url – La web del usuario
  • user_registered – Fecha de registro
  • user_activation_key – Utilizado para verificar la cuenta al borrar la contraseña
  • user_status – No parece que se use para nada…
  • display_name – El nombre introducido al dar de alta al usuario, normalmente el que queremos que aparezca publicamente.
• wp_usermeta: Almacena la información de cada usuario, llamada meta data. Tiene los siguientes campos:
  • umeta_id: El ID del campo.
  • user_id: El ID del usuario.
  • meta_key: El nombre del campo.
  • meta_value: El valor del campo.

Por ejemplo, los campos personalizados anteriores (“nivel” e “imagen”), se grabarán en wp_usermeta, siendo meta_key “nivel” y meta_value “Nivel1″ (por ejemplo).

Hay ocasiones en que las funciones de WordPress se nos pueden quedar limitadas y necesitemos acceder directamente a la base de datos. Veréis que esto no es muy difícil. En este artículo podéis encontrar más información.

Cambios en la lista de Usuarios: Añadiendo los campos personalizados

Hemos añadido nuevos campos en el perfil de usuario (nivel e imagen). Cuando hacemos click en Usuarios y nos salen todos los usuarios registrados en la web quizás queramos incluir los nuevos campos que hemos añadido en dicha tabla. Vamos a ver cómo hacerlo (como veréis he añadido a la tabla el ID del usuario, que a veces puede ser interesante verlo de forma rápida):

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

//////////////////////////////////////////////////////////////////////////////////////////
// Añadimos a la lista de usuarios los campos personalizados
add_action('manage_users_columns','manage_users_columns');
add_action('manage_users_custom_column','custom_manage_users_custom_column',10,3);
 
function manage_users_columns($column_headers) {
    $column_headers['nivel'] = 'Nivel';
    $column_headers['imagen'] = 'Imagen';
    $column_headers['ID'] = 'ID del cliente';
    return $column_headers;
}
 
function custom_manage_users_custom_column($custom_column,$column_name,$user_id) {
 
    if($column_name == 'nivel'){
        $user_info = get_userdata($user_id);
        $nivel = $user_info->nivel;
        $custom_column = "\t{$nivel}\n";
    }
    if($column_name == 'imagen'){
        $user_info = get_userdata($user_id);
        $imagen = $user_info->imagen;
        $custom_column = "\t{$imagen}\n";
    }
    if($column_name == 'ID'){
        $custom_column = "\t{$user_id}\n";
    }
    return $custom_column;
}
 
add_action('manage_users_columns','remove_user_posts_column');
function remove_user_posts_column($column_headers) {
    unset($column_headers['role']);
    return $column_headers;
}

Filtrar por usuario las entradas

Si tenéis muchos usuarios diferentes echaréis en falta que en la tabla de entradas se puedan filtrar estas por el Autor. Para ello pegamos este código en nuestro archivo functions.php:

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

//////////////////////////////////////////////////////////////////////////////////////////
///////// Para añadir un filtro por el nombre del usuario
 
 if ( current_user_can( 'administrator' ) ){
add_action('restrict_manage_posts', 'filtro_autores');
 
function filtro_autores() {
    $args = array('name' => 'author', 'show_option_all' => 'Ver todos los autores');
    if (isset($_GET['user'])) {
        $args['selected'] = $_GET['user'];
    }
    wp_dropdown_users($args);
}
}

Cambios en las capacidades de un determinado rol de usuario

Ejemplo 1: Que el Colaborador pueda subir imágenes. Una crítica que se suele hacer al rol de Colaborador es que no puede subir imágenes. Eso es facilmente modificable:

1
2
3
4
5
6
7
8
9

//////////////////////////////////////////////////////////////////////////////////////////
// Para que los contributors puedan subir imágenes
if ( current_user_can('contributor') && !current_user_can('upload_files') )
    add_action('admin_init', 'allow_contributor_uploads');
 
function allow_contributor_uploads() {
    $contributor = get_role('contributor');
    $contributor->add_cap('upload_files');
}

Ejemplo 2: Que el Colaborador pueda editar sus entradas. Otra limitación de los Colaboradores es que no pueden editar sus entradas. Podemos también modificar esto manteniendo la necesidad de que una vez editados sean de nuevo enviados para ser autorizados por el Administrador.

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

/////////////////////////////////////////////////////////////////////////////////////////
// Para que el Colaborador pueda editar posts......
function change_user_permissions() {
 
$role = get_role( 'contributor' ); // Obtiene el rol del usuario
 
$role->add_cap( 'edit_published_posts' ); // que pueda editar sus propias entradas
}
 
add_action( 'admin_init', 'change_user_permissions');
 
//////////////////////////////////////////////////////////////////////////////////////////
// ... pero que al editarlos vuelva a tener que pedir permiso
add_filter('wp_insert_post_data','re_aprove');
function re_aprove($data){
    global $current_user;
    get_currentuserinfo();
    // comprobar que el usuario actual no es administrador
    if (!current_user_can('manage_options')){
        if ($data['post_status'] == "publish"){
            $data['post_status'] = "pending";
        }
    }
    return $data;
}

Ejemplo 3: Que el Colaborador reciba un email cuando se publique su entrada

1
2
3
4
5
6
7
8
9
10
11

function wpr_authorNotification($post_id) {
   $post = get_post($post_id);
   $author = get_userdata($post->post_author);
 
   $message = "
      Hola ".$author->display_name.",
      Tu entrada, ".$post->post_title." ha sido publicada. Gracias.
   ";
   wp_mail($author->user_email, "Tu entrada ha sido publicada", $message);
}
add_action('publish_post', 'wpr_authorNotification');

Ejemplo 4: Que cada autor sólo pueda ver sus entradas

1
2
3
4
5
6
7
8
9

//////////////////////////////////////////////////////////////////////////////////////////
// Que cada autor sólo pueda ver sus artículos
    function query_set_only_author( $wp_query ) {
    global $current_user;
    if ( is_admin() && !current_user_can('manage_options') ) {
        $wp_query->set( 'author', $current_user->ID );
    }
}
add_action('pre_get_posts', 'query_set_only_author' );

Ejemplo 5: Que sólo el administrador pueda ver los avisos de actualizaciones

1
2
3
4
5
6

       global $user_login;
       get_currentuserinfo();
       if (!current_user_can('update_plugins')) { // ver si el usuario puede actualizar plugins
        add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
        add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
       }

Saber si un autor tiene o no entradas

Imaginémonos que tenemos una lista de autores pero no queremos que salga ninguno que no tenga entradas. Con esta función podemos hacerlo, pasándole el ID del usuario y de manera opcional el tipo de entrada, que puede ser un tipo de entrada personalizado.

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

//////////////////////////////////////////////////////////////////////////////////////////
/* Para saber si un autor tiene productos */
function wpse31443_author_has_custom_post_type( $post_author, $post_type = 'post' ) {
 
    $post_author = (int)$post_author;
 
    global $wp_post_types; // If nonexistent post type found return
 
    if ( array_intersect((array)$post_type, array_keys($wp_post_types))
        != (array)$post_type ) return false;
 
    static $posts = NULL; // Cache the query internally
    if ( !$posts ) {
        global $wpdb;
 
        $sql = "SELECT `post_type`, `post_author`, COUNT(*) AS `post_count`".
            " FROM {$wpdb->posts}".
            " WHERE `post_type` NOT IN ('revision', 'nav_menu_item')".
            " AND `post_status` IN ('publish', 'pending')".
            " GROUP BY `post_type`, `post_author`";
 
        $posts = $wpdb->get_results( $sql );
    }
 
    foreach( $posts as $post ) {
        if ( $post->post_author == $post_author
            and in_array( $post->post_type, (array)$post_type )
            and $post->post_count ) return true;
    }
 
    return false;
}

Algunos plugins útiles

Para terminar, aparte de las funciones que os he puesto, quizás os sean de utilidad estos plugins:

• Para enviar un email cuando un Colaborador ha enviado una entrada para revisión: WP Status Notifier
• Para añadir una foto al perfil de usuario: User Avatar
• Igual que el anterior: User Photo
• Plugin para modificar los roles de los usuarios con funcionalidades adicionales: Members
• Plugin para cambiar el permalink de los usuarios. Si quieres cambiar “authors” por cualquier otra cosa: Custom Author Base

Diseñada y desarrollada por Pocket Widget, uno de los líderes en desarrollo y comercialización de apps para plataformas móviles y tv, y por Emenia, que ha desarrollado los frontends en HTML5, Liga Live, Premier Live y Bundesliga Live permiten al usuario estar al día de la actualidad de fútbol, resultados, calendario, clasificación, narraciones en vivo, noticias y las estadísticas más completas.

Descárgate gratis en tu Smartphone las nuevas apps más completas de las mejores ligas europeas, para seguir las últimas noticias, live, un comparador de jugadores exclusivo y mucho más:

Apple App Store

• Liga Live
• Premier Live
• Bundesliga Live

Android Market

• Liga Live
• Premier Live
• Bundesliga Live

Ir a la web de Nascia

La web se ha creado utilizando WordPress como gestor de contenidos y cuenta con gran cantidad de contenido, como un blog propio, sistemas de autoevaluación, noticias o Biblioteca con artículos interesantes sobre el estrés, la ansiedad o el Biofeedback, por ejemplo.

Además Emenia gestiona la campaña de Marketing Online de Nascia que incluye la gestión de sus redes sociales (Facebook, Twitter, LinkedIn y You Tube) incluyendo desarrollos personalizados como landing pages o promociones, gestión de Newsletters, posicionamiento natural en buscadores (SEO) o campañas de publicidad en Google y Facebook.

Browserstack

Una de las últimas incorporaciones a mi lista. Al ser usuario de Mac necesito comprobar la compatibilidad de mis desarrollos con las distintas versiones Internet Explorer. Normalmente utilizo VMWare Fusion y MAMP, pero desde que llegó Browserstack no paro de utilizarlo. Permite también comprobar webs que tengas sólo en local y soporta gran cantidad de navegadores diferentes, todos con herramientas tipo Firebug, IE Developer tools, Firebug lite o Web Developer.

Ultimate CSS Gradient Generator

Este editor de Colorzilla es muy útil para crear gradientes con CSS3 ya que te permite crearlos como si de Photoshop o Fireworks se tratara, pero además te crea las instrucciones de CSS correspondientes que sólo tendrás que copiar y pegar en tu hoja de estilos.

My Lovely Charts

Normalmente, y sobre todo si nuestro proyecto tiene complejidad, necesitamos organizar nuestras ideas (y muchas veces las del cliente), tener clara la estructura de nuestra web. Tanto esta aplicación como la que viene a continuación (MindNode Pro) nos ayudan en este fin. Llama la atención la gran cantidad de tipos diferentes de diagramas que ponemos hacer con My Lovely Charts.

MindNode Pro

Esta es mi herramienta favorita para crear diagramas rápidos de la estructura de una web, por ejemplo. Mientras analizo con un cliente cómo va a ser su web siempre suelo estar usando este programa que ayuda a visualizar y a organizar mejor lo que se va a hacer. Tiene una gran facilidad de uso. Ojo, es de pago y sólo para Mac, aunque tiene una versión limitada de prueba. Es barata y desde mi punto de vista merece realmente la pena.

Smush It

Es importante que las imágenes que subamos a nuestra web estén lo más optimizadas posibles, no digamos ya si estamos sirviendo imágenes para móvil. Smush It, de Yahoo, permite reducir el peso de nuestras imágenes sin pérdida de calidad.

PageSpeed de Google

El tiempo de carga de nuestra web es muy importante para dar un buen servicio a nuestros usuarios. Si queremos tener una web centrada en el usuario tenemos que optimizar los tiempos de carga. Es por ello por lo que buscadores como Google pueden penalizar tu sitio si el tiempo de carga es muy lento. Esta herramienta analiza tu web y te ofrece consejos para mejorar la velocidad de carga.

YSlow

La alternativa a PageSpeed ofrecida por Yahoo! es YSlow. Está bien utilizar los dos para comparar. YSlow lo puedes instalar en tu navegador.

Otra buena aplicación online para detectar problemas en la carga de tu página web es WebPagetest.

HTML Validator para Firefox

Lo bueno de este validador de HTML es que funciona desde el propio navegador, en tiempo real y en local, por lo que no necesitas conectarte a ninguna web externa o tener tu web online para poderla validar. El desarrollador está tardando en tener una versión actualizada para Mac y Firefox 6 aunque ya tiene una compilada que funciona bien.

HTML5 Validator

Estaba acostumbrado al HTML Validator y necesitaba algo igual pero para HTML5 y el desarrollador Roger Johansson lo ha conseguido. Funciona también como extensión de Firefox y en local. Sólo tiene que configurar si para validar lo hace conectándose online o no, dependiendo de si instalas en tu ordenador validator.nu

Firebug

Qué decir de Firebug que no sepáis ya. Aunque cada vez uso más Chrome y su Inspector sigo pensando que Firebug es superior. Es una pena que su versión de Chrome sea mucho menos potente que la versión de Firefox. Imprescindible.

Web Developer

Otro clásico es Web Developer,de la que seguro no hace falta que os hable. Lo podéis tener instalado tanto en Firefox como en Chrome.

Skitch

Skitch es gratuita y la utilizo constantemente. Me permite capturar trozos de la pantalla y exportarlos a Photoshop o Fireworks sólo arrastrando la pestaña de la imagen. También te permite escribir o pintar sobre la imagen o sacar fotos usando la cámara del ordenador. La ha adquirido recientemente la gente de Evernote.

Snippely

El IDE que uso normalmente es Neatbeans. El sistema que tiene para grabar trozos de código útiles que nos puedan servir para otros proyectos no me gusta nada. Ya podía ser como el de Coda, por ejemplo!
Es por eso por lo que uso este pequeño programa gratuito para almacenar códigos útiles (aunque muchas veces he de reconocer que se me olvidan los trozos de código que guardo y muchas veces he rehecho cosas que ya tenía almacenados en Snippely….)

Emulador iOS y Emulador Android

Últimamente estoy haciendo frontends para móvil con HTML5 y jQuery Mobile, por lo que estoy continuamente pegado a ambos emuladores. De todas formas siempre viene bien tenerlos a mano para comprobar cómo se ve nuestra web en un móvil, especialmente si hacemos diseños ajustables al ancho de pantalla.

FoxGuide

Esta extensión de Firefox te permite crear una regla y crear guías en el navegador tal y como lo harías en Photoshop o Fireworks. Muy útil para saber si tienes elementos alineados.

MeasureIt

Extensión para Firefox, Chrome o Safari que te permite medir áreas en la pantalla del navegador. ¿Quieres saber cuánto mide en pixels un rectángulo de una web? Activas MeasureIt y lo mides.

SEOmoz toolbar

Como diseñador y desarrollador de webs creo fundamental saber tanto de SEO como te sea posible, tanto desde el punto de vista de la arquitectura óptima de la web que estás creando como de la estrategia de contenidos de la misma. Es por ello por lo que utilizo varias herramientas de SEO. En el navegador tengo varias instaladas (SEOmoz toolbar, Rank Checker, SEO4Firefox, Seoquake).
Al estar suscrito a SEOmoz Pro utilizo mucho la barra de esta empresa tanto en Firefox como en Chrome. En su versión gratuita tiene varias opciones interesantes. Os podría dar una lista larga de utilidades, pero por ejemplo, una herramienta de pago muy buena para seguir los rankings en buscadores es Advanced Web Ranking.

Dropbox

No entiendo cómo lo hacía antes de conocer Dropbox. Como uso varios ordenadores Dropbox me permite tener sincronizados todos mis archivos de tal manera que si edito un archivo de una web, por ejemplo, tengo esa versión editada en todos los demás. Me sirve también como copia de seguridad externa, así como elemento de comunicación con mis clientes, ya que puedo compatir carpetas con ellos donde me guardan textos, imágenes, etc..

El único problema es que no encripta los archivos antes de enviarlos a sus servidores, por lo que para ficheros con información sensible utilizo Wuala.

Font Squirrel

Si quieres usar nuevas fuentes en tus páginas web utilizando @font-face Font Squirrel es tu sitio. No sólo tienes una gran cantidad de fuentes disponibles, sino que además te crea el código que tienes que pegar en tu hoja de estilos.

Sprite Me

Este es una utilidad muy interesante ya que combina todas las imágenes que uses de fondo y te crea un CSS Sprite e incluso te da el código CSS para acceder a cada uno.

CSS-Tricks Button Maker

Os permite crear botones utilizando gradientes CSS3 con gran facilidad, ya que os crea igualmente el código CSS.

Color Scheme Designer

Te crea un esquema de colores a partir de un color de partida, muy útil para encontrar colores que estén relacionados con uno que vayas a utilizar.

¿Qué es el Responsive Web Design o Diseño Web Adaptable?

Son una serie de técnicas que permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma. Los tamaños de pantalla cambian según el medio con el que se accede (no es lo mismo una pantalla de un iPhone que la de un monitor panorámico de sobremesa) pero el usuario cada vez más exige que su experiencia usando nuestra web sea la óptima en cada caso concreto. Utilizando HTML y principalmente CSS podemos servir al usuario una versión de nuestra web en función del ancho de pantalla utilizado. Es decir, nuestra web se adapta al ancho de pantalla, responde ante los cambios del tamaño la misma. Además podemos pensar en mejorar el acceso a formularios, botones, etc… Eso es Responsive Web Design o Diseño Web Adaptable.

¿Por qué es importante el Diseño Web Adaptable?

Como nos dice este artículo de InternetRetailing la web a través del móvil está defraudando a los usuarios. ¿La razón? Los sitios no están optimizados, no están pensados para verse a través de una pantalla tan pequeña como la del móvil. Como decíamos antes, si el usuario es lo más importante no podemos permitr que esto suceda con nuestra web.

Además, tal y como explico en el artículo Haz una auditoría SEO a tu web, la experiencia de usuario debe ser prioritaria a la hora de pensar en tu estrategia SEO. Las webs con mejor experiencia de usuario gustarán más, serán más compartidas, mejor valoradas, más populares. Y eso en SEO es muy importante.

Dado el gran número de medios y navegadores existentes no es factible crear una versión de nuestra web para cada uno de ellos, por lo que necesitamos un sistema para que nuestra web se adapte al contexto en el que está siendo vista, optimizándose de manera automática.

Primer paso: El diseño fluido

El principal concepto en el que se apoya el Diseño Web Adaptable es en abandonar los anchos fijos de nuestra web. Estos deberán ser fluidos. En lugar de diseñar nuestra web basándonos en valores fijos (por ejemplo width: 960px), el diseño fluido está pensado en términos de proporciones. De esta manera cuando veamos nuestra web a través de la pequeña pantalla de un móvil todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. Por ejemplo, para saber ahora el ancho de un elemento tendremos que dividir el ancho inicial del mismo entre el ancho del elemento “padre”, por llamarlo de alguna manera sencilla. Pongamos que tenemos por ejemplo esta estructura:

En este ejemplo partíamos de unos valores fijos: un contenedor de 960 pixels y dentro del mismo un elemento de 360 pixels de ancho. Si dividimos el segundo entre el primero y multiplicamos el resultado por 100 obtendremos el valor de 37,5%, que será el ancho que aplicaremos a dicho elemento. Es decir, el ancho del elemento interior será siempre el 37,5% del ancho del primero. De esta forma cuando el ancho del elemento “padre” se adapta, todos los anchos de los elementos interiores varían en función de su porcentaje. Ahora el elemento interno, en la hoja de estilos, tendrá en lugar de un width=”360px” un width=”37,5%”.

Lo mismo haremos con los tamaños de las fuentes (por ejemplo, si el tamaño general es del 100%, que equivale a 16px, y tenemos un título de 22px, su nuevo tamaño será de 22/16 = 1.375em). ¿Pero, qué pasa con las imágenes u otros elementos que tienen un ancho fijo? Podemos adaptar su ancho así:

1

img, video, object { max-width:100%; }

De esta manera su ancho nunca excederá del ancho del elemento que la contiene. Y si dicho elemento cambia de ancho, también lo hará la imagen en todos los navegadores modernos. ¿He dicho modernos? Efectivamente, IE7 e IE6 no lo soportan. Para estos navegadores lo mejor es incluir en su hoja de estilos específica:

1

img, video, object {width:100%; }

Esta regla es completamente distinta de la anterior: Ahora decimos que la imagen (por ejemplo) siempre tendrá el mismo ancho de su contenedor. Es por ello por lo que hay que tener cuidado sobre qué elemento se aplica.

Esta última opción está aplicada de manera general (no sólo para IE) en nuestra página de trabajos realizados. Probad a reducir el ancho de la ventana del navegador y veréis como se reduce el tamaño de cada imagen.

Esto está muy bien hasta que nos encontramos con anchos de pantalla realmente pequeños (por ejemplo un móvil). Si tenemos una web con tres columnas, montones de botones, menú horizontal a la derecha del logo, etc.. al comprimir tanto el tamaño de la pantalla, por mucho que los anchos sean fluidos, puede acabar todo en un caos. Es probable que tengamos que prescindir de ciertos elementos de la web o situarlos en un lugar diferente. Para ello utilizaremos los Media Queries.

Segundo paso: Los Media Queries

Como decíamos ningún diseño escala de manera adecuada cuando cambia el contexto para el que fue pensado. Los Media Queries forman parte de CSS3 e inspeccionan las características físicas del medio que va a mostrar nuestro diseño (no olvidemos que “query” equivale a “pregunta”, es como preguntar: ¿qué medio se está usando?). Si las características del medio utilizado por el usuario están dentro de un condicional establecido con los Media Queries, se aplicarán una serie de instrucciones CSS contenidas dentro del mismo, de esta manera cuando nuestro diseño fluido cambia de tamaño podremos aplicar una serie de instrucciones CSS pensadas en exclusiva para ese nuevo tamaño. Vamos a ver un ejemplo.

El ancho de pantalla actual del iPhone es de 320px. Vamos a suponer que para ese ancho nuestro diseño fluido presenta una serie de dificultades (puede ser desde cambiar el logo, eliminar una columna, cambiar la organización de los elementos de la pantalla, etc…). Dentro de nuestra hoja de estilos haríamos:

1
2
3

@media screen and (max-width: 320px) {
   /* Aquí van las reglas CSS necesarias */
}

Como veis la instrucción se compone de dos partes: el tipo de medio utilizado (o Media Type, en este caso “screen”, que agrupa a todos los medios que se ven via una pantalla) combinándolo mediante un “and” con el Media Query (max-width: 320px). Estamos preguntando: ¿Es un medio con pantalla y tiene un ancho de 320px o menor? Entonces le aplicamos los estilos situados entre los corchetes correspondientes.

Podemos empezar desde este ancho e ir subiendo a otras posibles opciones. Algunos autores recomiendan optimizar estos anchos de pantalla:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

La mayor parte de las veces estos son demasiados anchos de pantalla, no hay tiempo suficiente para tanta optimización. Investiga bien cuales serán (o son si tienes ya datos históricos gracias por ejemplo a tu herramienta de analítica web) los anchos usados por tus usuarios y céntrate en ellos. Lo más habitual es, al menos, hacerlo para 480 píxeles.

También puedes, si quieres, dar una serie de reglas CSS para pantallas superiores a un ancho determinado, usando min-width. Por ejemplo, para anchos superiores a 1.200px:

1
2
3

@media screen and (min-width: 1200px) {
   /* Aquí van las reglas CSS necesarias */
}

Como veis podemos tener perfectamente separados los estilos de cada ancho de pantalla para el que queramos optimizar nuestro diseño. Si queréis incluso separar las hojas de estilo podéis también hacerlo. Por ejemplo, si queréis cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

1

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" />

O también:

1

@import url("style.css") screen and (max-device-width: 480px);

Podéis ir incluso más allá gracias al uso de “and” para poner un mínimo y un máximo en los anchos de pantalla donde aplicar los estilos:

1

@import url(style.css) screen and (min-width:800px) and (max-width:1280px);

O detectar si es un iPhone 4 (por Thomais Maier):

1

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

O incluso detectar si estamos en un iPad y su orientación (por Cloudfour):

1
2

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

¿Qué navegadores soportan los Media Query?

En general todos los navegadores modernos lo soportan. Eso quiere decir que Internet Explorer 8, 7 y 6 no lo soportan (qué raro!). Afortunadamente hay soluciones utilizando Javascript, por ejemplo respond.js. Tal y como podéis ver (y traduzco) “respond.js proporciona un script rápido y ligero (3kb minified / 1kb gzipped) que permite utilizar diseños web adaptables en navegadores que no soportan CSS3 Media Queries – en concreto Internet Explorer 8 e inferiores”.
Otra opción (que es la que uso yo normalmente) es usar Modernizr.

Meta tags

Por último, es importante añadir un meta-tag dentro del elemento header de nuestra web que le diga al navegador que use el ancho del medio (por ejemplo, del móvil) como ancho de la web, anulando la escala inicial:

1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

¿Puedo ver un ejemplo?

Hay muchos diseñadores que están ya realizando nuevas versiones de sus webs utilizando media queries y diseño fluido. Creo que un buen ejemplo es el nuevo diseño de CSS-Tricks. Si cargáis la página, a medida que reducís el ancho de la ventana del navegador veréis cómo se va adaptando el diseño. Incluso ha introducido animaciones para mover elementos de sitio (como el buscador) a medida que reducimos el ancho de pantalla. Como podéis leer en el artículo, Chris Coyier explica su nuevo diseño, destacando:

• Su diseño por defecto es para navegadores con un ancho superior a 1200px
• Hay dos optimizaciones con media query a 1024 y 860px
• Utiliza Respond.js para hacer funcionar los Media Queries en Internet Explorer

Otro gran ejemplo es Robot or Not?, utilizado por Ettan Marcotte como ejemplo de su gran libro Responsive Web Design.

Otro ejemplo, quizás menos efectista que los anteriores, es esta web sobre Garret Keizer.

En Media Queries podéis ver una colección de sitios que usan Diseño web adaptable.

Artículos recomendados

Os recomiendo que leais el artículo de Ethan Marcotte en A List Apart. Es el que empezó a hablar del “Responsive Web Design” o Diseño Web Adaptable.

También es interesante ver Frameworks que te ayudarán a acelerar tus desarrollos o a aprender más sobre el tema investigando cómo están hechos, como el 320 and Up. Otro conocido framework es Less Framework 4.

Using Media Queries in the Real World es también otro artículo interesante con valiosos consejos.

Para testear tu diseño web adaptable con distintos anchos de pantalla en el mismo navegador. También te puede interesar esta plantilla con ejemplo para Photoshop de Elliot Jay Stocks de 1000px para diseño web adaptable.

Otro interesante artículo es el de Cloud Four, en el que nos avisa de que los media queries no son la solución definitiva, especialmente debido al problema de las imágenes y a la mayor lentitud de carga de los móbiles.

En relación a este último artículo hay que decir que el Diseño Web Adaptable no es siempre la mejor solución para llevar un sitio web al móvil. Hay que pensar siempre en el contexto en el que el usuario va a ver nuestra web y qué información va a demandar. Es probable que a través del móvil muchas veces busquemos una información distinta que la que buscamos desde el ordenador de sobremesa, por lo que no vale con servir la misma información a un tamaño diferente. Además, sitios web con más carga de imagen que de texto lo tendrán más dificil, dada la menos velocidad de descarga del móvil. Nota: Es interesante http://adaptive-images.com/, que permite servir una imagen diferente según el ancho de pantalla.

Emenia gestiona Facebook, Twitter, You Tube y LinkedIn, además de gestionar el blog de la empresa. Esto incluye desde la creación de los perfiles, personalización de los mismos y la labor de Community Manager y estrategia de contenidos.

Más información sobre Smartick: www.smartick.es

Con la finalidad de que podáis ver si vuestra web cumple al menos con las mejores prácticas desde el punto de vista SEO, podéis seguir los pasos que os indico en este artículo y así hacer una auditoría SEO de vuestra web. Aunque lo vayamos a ver resumido (una auditoría web puede ocupar más de cincuenta hojas), vamos a ver en este artículo los puntos más importantes.

Qué es SEO

Antes de nada hemos de saber qué es SEO. Significa Search Engine Optimization, es decir, Optimización frente a buscadores como Google, Bing o Yahoo! ¿Qué implica? Toda una serie de técnicas, tácticas y estrategias que tienen a la web como centro con la finalidad de situarnos en los primeros puestos cuando un usuario realiza una búsqueda relacionada con el producto, servicio o contenidos que ofrecemos en nuestra web. Si domináis el inglés os aconsejo este video en el que se nos explica la evolución de un consultor SEO moderno hacia la figura del “estratega web”.

Una vez que tenemos esto claro vamos a ver los puntos más importantes que debe cuidar vuestra web para estar bien optimizada. Igualmente, si contratáis a un consultor SEO y no os habla de lo que veremos a continuación, mala cosa…. Empezamos, punto por punto, sin guardar un orden concreto.

Google y Bing Webmasters tool & Google Analitycs

Si no lo estás ya da de alta tu web en Google Webmasters tool, en Herramientas de Administrador Web de Bing y en Google Analitycs. Las dos primeras te mostrarán cualquier problema grave que los buscadores vean en tu web. La segunda te mostrará el tráfico de tu web y te ayudará a analizarlo. Ten siempre presente que el tráfico a tu web no se usa para determinar rankings de búsquedas, pero te orientará sobre qué contenidos están gustando más, sobre el porcentaje de rebote de tu web (lo veremos más adelante), sobre las rutas de navegación dentro de tu web, de donde vienen los usuarios y a donde van, etc…. Un dato importante es que el valor que obtendrás de “visitantes únicos” no es un valor cierto, ya que en realidad se refiere a “navegadores únicos”. Si un usuario ha visitado con 5 navegadores distintos tu web, contará como cinco. Además cada vez que borre las cookies será un visitante nuevo.

Diseño apropiado

¿Es el diseño apropiado para el producto o servicio que se ofrece y para el cliente objetivo que va a usar la web? Quizas sorprenda que comience con algo tan genérico y subjetivo como el diseño de la página, pero realmente el diseño importa. Hacer SEO es cada vez más hacer “estrategia web”, y una buena base de partida es que la impresión general de confianza, de comodidad, de satisfacción que siente el usuario al instante de cargar una web sea buena. ¿Cual es el porcentaje de rebote de tu página de inicio, o de la web en general? Si no tienes un blog (donde el porcentaje de rebote suele ser muy alto) un porcentaje de rebote alto indica problemas (el porcentaje de rebote indica el % de usuarios que sólo ve una página de tu web y se va sin ver una segunda página). En definitiva, diseño limpio, centrado en el usuario, con un sistema de navegación coherente, que no haga pensar, accesible a todos los navegadores y sistemas (ordenadores, móviles, tabletas…).

Estudio de Palabras clave

Si no lo has hecho aún todavía estás a tiempo: analiza cuales son las palabras clave por las que vas a competir en buscadores (con herramientas como Google keywords tool, Google Insights y Google Trends. También Google Analitycs te dirá que palabras clave están usando ya tus usuarios para encontrarte). Podrás ver qué está buscando la gente en buscadores y te ayudará a optimizar los contenidos de tu página.

Cada palabra clave importante debería tener su página propia dentro de tu web, optimizada para dicha palabra o frase tal y como veremos más adelante. Si tienes un blog deberías tenerlo en cuenta para cada artículo. Intenta evitar lo que se llama canibalización, es decir, cuando dos o más páginas de tu web están centradas en la misma palabra clave.

No tengas en cuenta sólo la popularidad de una palabra, ten en cuenta también cual es la competencia por la misma. Hay herramientas de pago que te permiten verlo. También analizando la autoridad de los que están en las primeras posiciones te puedes hacer una idea. La barrita de competencia que trae Google keywords, aunque se refiere a competencia en los anuncios pagados, te puede dar también una idea.

También ten en cuenta la tendencia en su uso y su estacionalidad. Google Insights y Google Trends te puede ayudar.

No llenes el texto de la página con la palabra clave, ya que el efecto que conseguirás será el contrario del deseado. Escribe para el usuario, no para los buscadores. Como nos dice SEOmoz “2-3X en páginas cortas, 4-6X en páginas largas y nunca más de lo que tendría sentido en el contexto del contenido”. Utiliza además variaciones de la palabra. Al menos una de las veces pon la palabra clave en negrita, en itálica o ambas.

Javascript y Flash

Los buscadores tienen más problemas a la hora de interpretar Javascript y Flash que a la hora de interpretar simple HTML. Intenta no utilizar ninguno de los dos (especialmente Flash por los problemas de accesibilidad que puede presentar, ya que no lo soportan el iPhone ni el iPad) a la hora de mostrar contenidos importantes de tu web.

Jerarquía de la información

La imagen que veis a continuación, de Rand Fishkin de SEOmoz, es muy conocida y muestra la mejor manera de optimizar una URL con una palabra clave o frase. La palabra clave está presente en todos los elementos SEO de la página, siempre sin sobreusarla. Cada página de nuestra web debería estar optimizada para una palabra clave determinada.

Arquitectura de la web

Es muy importante que nuestra web esté bien estructurada, que el usuario pueda acceder de una forma ordenada a cada área de la web, que no hayamos creado islas donde nadie pueda acceder. Normalmente es la página de inicio la que recibe la mayor cantidad de enlaces externos. Tenemos que lograr que el valor de esos enlaces se distribuya de forma armónica por toda la web. Una estructura ordenada puede ser esta:

Como veis en el ejemplo, de la página de inicio salen enlaces a las categorías principales de la web. Estos enlaces están normalmente en el menú de la página, menú que se repite en todas las páginas de la web (ni que decir tiene que el menú tiene que ser el mismo y estar en el mismo sitio en toda la web). En una web pequeña, donde no haya categorías, la página de inicio enlazará directamente con cada página. Las páginas de cada categoría, si están bien optimizadas, suelen funcionar muy bien desde el punto de vista SEO.

La profundidad a la que llegarán los buscadores en nuestra web dependerá de la popularidad del dominio dado (popularidad medida en función del número de enlaces y de la calidad de los mismos). Podéis pensar en un ejemplo sencillo: si pensamos en nuestra web como una serie de galerías conectadas que hay que rellenar de agua, dependiendo el volúmen de agua que tenemos de la popularidad que tenga nuestra web, quizás no nos de el agua para rellenar todas las galerías (se pueden quedar páginas sin indexar o a las que no llegue nada del valor de los enlaces que aporta la página de inicio). Es por eso por lo que deberíais pensar también si tenéis páginas con contenidos poco o nada relevantes que puedan ser eliminadas, así como en cómo vais a crear la estructura de enlaces (pensad siempre en la cantidad de “agua” que puede pasar una página a las demás que tiene enlazadas). También es importante que desde la página de inicio haya enlaces a las páginas más importantes, a los que tienen los términos que más nos interesan (por ejemplo los productos más destacados de nuestro catálogo), pero no te pases poniendo enlaces, especialmente si la “popularidad” de tu página es baja (puedes usar la barra de SEOmoz, que te mide la popularidad del dominio y de cada página).

Cuando hagáis enlaces en los contenidos (al estilo Wikipedia) tened en cuenta que Google sólo tiene en cuenta el texto del primer enlace que se encuentre cuando haya varios que van a la misma URL, por lo que es importante que este sea el que tiene el mejor texto para enlazar.

Por último, asegúrate de que todas tus páginas han sido indexadas por los buscadores. Si no es así analiza las causas.

Canonicalización y contenido duplicado

Por canonicalización entendemos evitar que se pueda acceder a una página web con URLs diferentes. Imaginaros que vuestra web es www.ejemplo.es y que os dais cuenta de que podéis acceder de todas estas maneras:

El problema que se plantea es que podemos estar recibiendo enlaces destinados a una misma página web divididos en varias URLs diferentes, con lo que la popularidad de la página se divide a su vez. Hay que intentar consolidar la popularidad que nos dan los enlaces en una sola URL. Para solucionarlo redirige usando una redirección 301 con .htaccess o con PHP a la opción que tenga ya más enlaces. Según algunos estudios con una redirección 301 pierdes entre el uno y el diez por ciento del valor del enlace. ¡Lo malo es que con una redirección 302 lo pierdes todo!. Vamos a ver cómo hacerlo:

1
2
3
4
5
6
7
8
9
10
11

// Redireccionar un solo fichero o directorio a un dominio diferente
Redirect 301 /pagina-antigua.html  http://www.dominio-nuevo/nueva-pagina.html
 
// Redireccionar http://ejemplo.es a http://www.ejemplo.es en todo el dominio
RewriteEngine on
RewriteCond %{HTTP_HOST}
^ejemplo\.es [NC]
RewriteRule (.*) http://www.ejemplo.es/$1 [L,R=301]
 
// Redirigir el dominio entero a un nuevo dominio
Redirect 301 / http://www.nuevodominio.es/

Otro problema que podéis tener es el del contenido duplicado. Imaginaros que tenéis una tienda online en la que vendéis un tipo de producto determinado. El usuario puede ordenar el producto en función de su precio, de su nombre, de su color, etc… Eso es perfecto para el usuario, pero lo malo es que vamos a tener una serie de URLs diferentes para mostrar el mismo contenido. Para solucionarlo tienes la etiqueta rel=”canonical”, para decirle a los buscadores cual de las URLs es la que vale. Cuando para solucionar contenido duplicado el redireccionamiento 301 no sea una solución factible, hay que usar rel=”canonical”. Hay que ubicarlo dentro de la sección head del código html de la página web. Por ejemplo, si tenemos una página que se llama ejemplo.es/articulo.php y otra ejemplo.es/articulo.php?p=2 y muestran exactamente lo mismo (aunque esté en otro orden, o sea una página para imprimir, etc..) habría que poner en las dos páginas:

1
2
3
4
5

<head>
....
<link rel="canonical" href="http://www.ejemplo.es/articulo.php" />
...
</head>

URL de la página

En primer lugar las URLs de tu web deberían tener lo que se denomina “URLs amigables”. Podéis ver en este artículo cómo crear URLs amigables con un archivo .htaccess.

Una vez tengas URLs amigables, la palabra clave para la que está optimizada cada página de tu web debería estar en la URL, cuidando siempre que la URL no sea muy larga (de hecho, cuanto más corta, mejor). Algunos ejemplos:

Por regla general es siempre mejor usar carpetas que subdominios, es decir, siempre mejor ejemplo.es/blog que blog.ejemplo.es

Título de la página

En estos momentos, y según diversos estudios, el título de una página web es el factor SEO individual más importante de dicha página. Es fundamental que cada página tenga su propio título. Dependiendo de si lo realmente importante en tu caso es tu marca o cada palabra clave de las diferentes páginas, lo más recomendado es la siguiente estructura:

Si hacéis click con el botón derecho del ratón sobre la web y seleccionáis “Ver código fuente” deberíais ver en las primeras líneas el título de la página web entre las etiquetas title. Por ejemplo, para este artículo es:

1

<title>Haz una auditoría SEO a tu web | emenia.es</title>

El título es además muy importante al ser utilizado por los buscadores y en las redes sociales como enlace a la página, por lo que debe estar lo suficientemente bien pensado como para favorecer que la gente haga click. Intenta que no tenga más de 60 caracteres para que no salga cortado en los resultados de las búsquedas.

Meta descripción

Al ver el código de nuestra página web veremos la meta descripción cerca del título. Un ejemplo de una descripción de un artículo de este blog:

1

<meta name="description" content="Artículos sobre desarrollo web para diseñadores y creadores de páginas web así como artículos sobre marketing online, redes sociales, comercio electrónico." />

Cada página de tu web tiene que tener su propia meta-descripción. Puedes pensar en las meta descripciones como publicidad gratuita que aparece en los buscadores cuando estos muestran tu página. En muchas ocasiones el texto que aparece debajo del enlace en el resultado de una búsqueda es el texto de la meta-descripción (cuando las palabras usadas en la búsqueda se encuentren en la meta descripción):

Las meta descripciones no son usadas directamente por los buscadores para establecer rankings, por lo que son más válidas como medio de atraer gente a tu página. Piensa pues en el usuario cuando la estés redactando. Son un lugar perfecto para incluir tus palabras claves de forma apropiada (saldrán en negrita cuando coincidan en el resultado de una búsqueda). Es importante que la descripción no supere los 160 caracteres para que no salga truncada en los resultados de búsqueda.

Meta keywords

Incluyo aquí este apartado para desmitificar el uso de esta meta etiqueta. Actualmente la meta keywords ya no se toma en cuenta por los buscadores y sólo sirve para que le muestres a tu competencia cuales son tus palabras clave. Hay muchos autores que incluso aconsejan no utilizarla.

Titulares html (h1 a h6)

Los titulares han dejado de ser factores importantes para los buscadores. Recientes estudios de SEOmoz han mostrado que hay muy baja correlación de la etiqueta h1 y los rankings en los resultados de las búsquedas (cercana a cero). Con tener las palabras clave en las primeras 30 o 40 palabras de la página web, vale. Eso no impide que se recomiende el uso adecuado de los titulares dentro de cada página para lograr una mejor jerarquía de la información.

Imágenes

Es importante que cada imagen que uses en cada página web tengan su etiqueta alt propia donde escribas su descripción, utilizando la palabra clave correspondiente. También es recomendable utilizar texto relevante antes o después de la imagen, así como un pie de foto, para poner más en contexto la imagen. Según estudios de correlación de SEOmoz las descripciones en las etiquetas alt de las imágenes es un factor importante en los rankings de los resultados de búsqueda. Intenta también usar la palabra clave en el nombre del archivo de la imagen (en vez de usar por ejemplo imagen1.jpg). También es fundamental que si tienes textos importantes estos no formen parte de una imagen, sino que sea texto suelto, independiente de la imagen sobre la que pueda estar ubicado. Ten en cuenta que los buscadores no pueden leer el texto que hayas puesto en una imagen.

Archivos robots.txt y sitemap.xml

• El archivo robots.txt está situado en el directorio raiz de tu web y se utiliza para decirle a los buscadores a qué directorios y archivos no deben acceder. Podéis ver por ejemplo la recomendación de Jeff Star para el archivo robots.txt en WordPress.
• El archivo sitemap.xml indica a los buscadores las URLs que componen tu página web, aparte de ofrecer información sobre su importancia relativa, su frecuencia de actualización, etc.. Para WordPress hay plugins para crear sitemap de manera dinámica. También hay aplicaciones online que os lo crean como XML-Sitemaps.com

Como norma general ten cuidado de que el archivo robots.txt no esté impidiendo el acceso a páginas que sí deberían ser accesibles por los buscadores. Si se puede es preferible usar la etiqueta meta robots (noindex, follow) porque mantiene la URL fuera de los resultados (noindex) pero permite a todos los enlaces de la página enviar el valor del enlace (follow).

Si puedes crear varios sitemaps (uno de imágenes y otro de vídeos si los tuvieras) mejor. Un sitemap no ayuda en los rankings pero sí a que los buscadores conozcan mejor y más rápido cual es la estructura de tu web. Si tienes páginas de tu web sin indexar quizás te pueda ayudar.

Velocidad de carga de la página

La velocidad de carga de tu web es un parámetro más que usa Google para realizar los rankings en las búsquedas. Hay autores que dicen que a no ser que la velocidad sea muy lenta no afecta. De todas formas es mejor que optimices tu página web todo lo que puedas. Lo mejor es que utilices una herramienta como YSlow de Yahoo! o Pagespeed de Google y sigas sus indicaciones.

Uso de microdata: Schema.org

Si no tienes etiquetadas áreas de contenido importante en tu web es el momento de hacerlo. Puedes ver en este mismo blog este artículo sobre el uso de Schema.org

Apuntes finales

La labor del SEO está cambiando muy rápidamente, sobre todo desde la nuevas actualizaciones de Google (Google Panda) orientadas a dar más relevancia a webs cuyos contenidos sean más “populares”. Os recomiendo que veais este vídeo de SEOmoz (está en inglés, pero tenéis la transcripción debajo que podéis traducir). Veréis los cambios que suponen Google Panda y os dará pistas para posicionar mejor vuestra web.

Espero que este artículo os haya sido útil. Cualquier comentario sobre el mismo, ampliación, corrección que podáis aportar será bienvenido!!