WordPress | 13 de enero de 2014

Mejorando la experiencia de administración

Cuando desarrollamos un sitio web para un cliente, es muy probable que quien se encargue de actualizar y publicar contenidos sea él mismo. Si este es su primer sitio (o al menos el primero autoadministrable) de seguro no ha tenido experiencias previas utilizando WordPress u otro CMS, por lo tanto como profesionales que somos, lo menos que podemos hacer es simplificar su experiencia administrando la web.

Dentro de este contexto son muchas las cosas que podemos hacer, pero en el artículo de hoy nos centraremos en 3 puntos que a mi parecer los los más significativos:

  1. Capacitación
  2. La pantalla de ingreso
  3. La pantalla de bienvenida

Vamos a ello.

Capacitación

Como ya lo dije anteriormente, la relación de nuestro cliente con WordPress es muy pequeña y probablemente nula, por lo que debemos entregarle algunas directrices sobre qué hacer frente a la necesidad de actualizar su sitio.

Esta información puede ser entregada mediante una documentación por escrito (PDF) ilustrada con diferentes pantallazos para mostrar los pasos a seguir frente a cada situación o también puede ser mediante un video instructivo, en el cual grabando la pantalla y una voz relatando paso a paso, se guiará al cliente en las diferentes acciones que deberá tomar en el sitio.

Esta última opción es mi preferida y para la mayoría de los sitios web que hago, entrego al cliente un video explicativo al cual, según me han comentado, acuden cada vez que algo se les olvida.

Hasta hace unos meses la duración de estos videos era de aproximadamente 1 hora, dividido en 3 o 4 partes, ya que debía llevar al cliente desde conocer a WordPress hasta realizar las tareas más específicas de cada sitio, sin embargo, desde que lancé Dominando WordPress, mis videos son mucho más cortos (cerca de 15 a 20 minutos) ya que le doy al cliente acceso directo al curso y centro el instructivo en las tareas específicas de cada sitio en particular.

Si al igual que a mí te gusta entregar videos a los clientes, es una buena idea generar ciertos videos con los contenidos base que aplican a todos los clientes para ahorrar trabajo con cada cliente. Mi amigo Rai de Acuario Pro también lo ha hecho así, creando una serie de videos cubriendo los temas base.

Ahora bien, si los videos no son lo tuyo y no quieres entregar al cliente un documento impreso o PDF que éste pueda extraviar, también tienes la posibilidad de utilizar el plugin WP Help que generará una nueva pantalla en el área de administración en donde el cliente podrá acceder a tu documentación sin salir de su propio sitio.

La pantalla de ingreso

El primer contacto que un administrador tiene con su CMS siempre será la pantalla de ingreso, en donde deberá ingresar su usuario y contraseña.

EL logo de WordPress está bastante bien diseñado, es agradable y lo queremos, sin embargo en este primer contacto, es probable que el administrador no se explique qué hace ese logo allí al ingresar a su sitio, ni tampoco entienda por qué al clickear sobre él su navegador se dirige hacia wordpress.org.

Encontrarse en esta pantalla con su propio logo sería lo ideal, y si hacemos click sobre él, lo lógico sería que redireccionara a la página de inicio. Afortunadamente, en WordPress esta tarea es bastante simple así que a continuación veremos cómo hacerlo, para que la pantalla de ingreso luzca similar a la de este sitio que he estado desarrollando durante esta semana:

Pantalla de ingreso UNAB

Lo que haremos será agregar una acción a «login_enqueue_scripts» de tal modo que podamos ingresar cierto código CSS al head de la pantalla de ingreso. Para ello vamos a subir una imagen con el logo a la carpeta de imágenes de nuestro tema e ingresaremos el siguiente código en el archivo «functions.php» del mismo:

Lo que hace este código es crear una función llamada «apk_login_logo» a la cual puedes cambiar el nombre por lo que tu quieras. Lo que hace esta función es imprimir en pantalla un poco de código CSS que aplica algunos estilos al enlace que contiene el logo de WordPress. Estos estilos modifican sólo algunos aspectos, en este orden:

  1. Cambia la imagen de fondo por la que hayamos subido a nuestra carpeta de imagenes. La ruta está definida por «get_stylesheet_directory_uri» que nos da la ruta base a la carpeta de nuestro tema seguida por la ruta específica a la imagen.
  2. Previene que la imagen se adapte a las dimensiones de su elemento contenedor
  3. Actualiza el alto del enlace según las dimensiones de la imagen
  4. Actualiza el ancho del enlace para que ocupe el 100% del espacio disponible.

Puedes extender este fragmento de CSS para personalizar por completo cada elemento de la pantalla de ingreso, pero nosotros llegaremos hasta acá solamente con los estilos.

Finalmente, como puedes ver en la línea 18, asociamos esta función con la acción «login_enqueue_scripts» .

Pero eso no es todo, el enlace todavía nos dirige a wordpress.org, por lo que utilizaremos el filtro «login_headerurl» para modificar este enlace.

Con este código creamos la función «apk_login_custom_site_url» que lo único que hace es devolver la url de la página de inicio del sitio, después de recibir el contenido de la variable $url. Luego asociamos esta función al filtro «login_headerurl» y entra en acción.

Por último cambiaremos el título del enlace, que se ve al dejar el mouse detenido por más de un segundo sobre el logo. Para ello usaremos otro filtro, en esta ocasión usaremos «login_headertitle»:

Con este código creamos la función «apk_login_header_title» que devuelve el nombre del sitio al momento de definir el título del enlace que muestra el logo.

Así, con estas pocas líneas de código ya tenemos nuestra pantalla de ingreso personalizada, haciendo mucho más amable el primer encuentro de nuestro cliente con la administración de su sitio.

En mi caso se ve así:

Pantalla de ingreso personalizada

La pantalla de bienvenida

Antes de que nuestro cliente realice cualquier acción y luego de ingresar con su usuario y contraseña, lo que verá es la pantalla de bienvenida, donde se encontrará con algunos bloques que presentarán alguna información como la actividad reciente y un breve resumen de los contenidos en «De un vistazo«. Además, tendrá la posibilidad de habilitar o deshabilitar algunos paneles extras desde la pestaña «opciones de pantalla» como el «Borrador rápido» y «Noticias de WordPress«.

Si bien algunos de estos paneles pueden resultar interesantes, otros son absolutamente irrelevantes para nuestro cliente por lo que los desactivaremos permanentemente.

Con este código creamos la función «apk_remove_dashboard_widgets» y la asociamos a la acción «wp_dashboard_setup«. El objetivo de esta función es remover ciertos widgets del escritorio utilizando la función «remove_meta_box» a la cual le pasamos el identificador de cada panel.

A continuación moveremos el widget «de un vistazo» a la columna derecha de widgets:

Asociamos la función «apk_move_dashboard_widget» a la acción «wp_dashboard_setup«. Lo que hacemos en esta función es guardar en la variable $widget el widget que queremos mover, luego eliminamos el widget y finalmente lo rehabilitamos, pero cambiando su posición al lado derecho (side).

Ahora lo que haremos será añadir 2 widgets extra, para ello comenzaremos con lo siguiente:

Con este código creamos la función «apk_add_dashboard_widgets» en la cual utilizamos la función «wp_add_dashboard_widget» para crear cada uno de los nuevos widgets. Aquí pasamos los siguientes datos:

  1. El identificador del widget
  2. El título del Widget
  3. El nombre de la función que define el HTML del widget

Como puedes ver, vamos a necesitar crear las funciones «apk_add_welcome_widget» y «apk_add_links_widget» para que esto funcione:

Estas funciones son bastante simples, básicamente lo que hicimos fue escribir el HTML de los widgets.

Por último tenemos que asociar la función «apk_add_dashboard_widgets» a la acción «wp_dashboard_setup«:

Con todo este código añadido al archivo functions.php de nuestro tema activo, nuestro escritorio queda así:

Escritorio personalizado

De este modo hemos hecho que la experiencia uso de WordPress sea mucho más amigable para nuestro cliente de lo que sería sin nuestra intervención, y todo el mundo sabe que un cliente que ha tenido una buena experiencia es un cliente feliz.

¿Crees que hay alguna otra personalización que debiéramos hacer el área de administración cuando realizamos un sitio para clientes? Espero tu opinión en los comentarios.

También te podría interesar:

Por qué presentar solo una propuesta de diseño

¿Cuál es el trabajo de un profesional? ¿Presentar opciones o proveer una solución? Al menos en el área del diseño, creo que estamos de acuerdo en que la segunda opción es la correcta. A pesar de ello, gran parte de los diseñadores actúa de forma diferente, enfocándose en presentar multiples alternativas más que en solucionar […]

Seguir leyendo...

Clientes complicados: ¿Cómo evitarlos?

Quienes ofrecemos nuestros servicios profesionales de manera freelance o independiente no trabajamos solos, necesitamos de una contraparte que nos encargue algún proyecto y nos pague por ello: nuestros queridos clientes. Clientes hay de todo tipo, pero hay un grupo de ellos en particular con los que ningún profesional creativo quiere trabajar, me refiero a los […]

Seguir leyendo...

El componente más importante de todo sitio web

Un sitio web puede estar compuesto de múltiples componentes como fotografías, textos, botones, diseños, colores, formas, enlaces a las redes sociales, videos, sliders y audios, solo por mencionar algunos. Sin embargo, uno de ellos es significativamente más importante que el resto. Al leer esto, y saber que lo escribe un diseñador, tal vez pienses que […]

Seguir leyendo...

Hay 3 opiniones

  1. Buenos días,
    Me interesa poder personalizar el administrador de WP para hacerlo más «user friendly» al cliente. Una deficiencia que he notado en WP, es que un usuario/cliente se vuelve loco para editar por ejemplo la página de inicio, la portada de la web. ¿Por qué? Porque no es intuitivo si no ha manejado antes WP. Por ejemplo, la página de portada tiene un slider, el cual al ser un plugin se modifica desde el plugin, no desde la página de inicio. Por otra parte, la página de inicio se modifica desde Páginas>Inicio. Pero a parte he modificado la plantilla (a mano) para que muestre en la página de inicio abajo los tres ultimos posts. Esto a su vez son entradas, y se modifican desde las Entradas…
    Me gustaría hacer una gran transformación en el administrador de WP para que todo lo relativo a la página de Inicio, por ejemplo, esté agrupado en un item del menu del administrador. Aunque esto suponga crear plugins, modificar otros plugin como por ejemplo el slider… Si no para el cliente es un lío.
    Si te animas con este «proyecto» podemos colaborar
    Saludos

    • Hola Mike, tengo un curso que trata sobre la personalización del área de administración y ahí voy más en profundidad en el asunto.

      Lo que propones, si bien tiene sentido, significa un cambio completo en la estructura del administrador de WordPress, lo cual implicaría de cierta forma que dejaría de ser WordPress. La administración de contenidos en WordPress sí es intuitiva de manera nativa, son los plugins y temas quienes lo vuelven complejo, por lo tanto hacer que WP sea tan intuitivo como tú mencionas habría que intervenir los temas y plugins.

      En mi caso soy bien cuidadoso con ello, y por eso creo mis propios temas, en los cuales trato de que la administración sea lo más fácil posible para mis clientes.

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.158 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.