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:

//---------------------------------------------------------------------
// Estilos especiales pantalla de ingreso
//---------------------------------------------------------------------
function apk_login_logo() {?>

    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/login-logo.png);
            -webkit-background-size: auto; 
            -moz-background-size: auto; 
            background-size: auto; 
            height: 47px; 
            width: 100%; 
        } 
    </style> 
<?php } 

add_action( 'login_enqueue_scripts', 'apk_login_logo' );

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.

//---------------------------------------------------------------------
// Link personalizado pantalla de ingreso
//---------------------------------------------------------------------
function apk_login_custom_site_url($url) {  
    return home_url(); //Devuelve la URL del home
}  
add_filter('login_headerurl', 'apk_login_custom_site_url');

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»:

//---------------------------------------------------------------------
// Título personalizado para el enlace del logo pantalla de ingreso
//---------------------------------------------------------------------  
function apk_login_header_title($message) {  
    return get_bloginfo('name'); //Devuelve el nombre del sitio
}  
add_filter('login_headertitle', 'apk_login_header_title');

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.

//---------------------------------------------------------------------
// Eliminar paneles del escritorio
//---------------------------------------------------------------------
function apk_remove_dashboard_widgets() {
    remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
    remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
}
add_action( 'wp_dashboard_setup', 'apk_remove_dashboard_widgets' );

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:

//---------------------------------------------------------------------
// Mover el widget "De un vistazo" a la derecha
//---------------------------------------------------------------------
function apk_move_dashboard_widget() {
    global $wp_meta_boxes;
    $widget = $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'];
    unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'] );
    $wp_meta_boxes['dashboard']['side']['core']['dashboard_right_now'] = $widget;
}
add_action( 'wp_dashboard_setup', 'apk_move_dashboard_widget' );

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:

//---------------------------------------------------------------------
// Widgets personalizados
//---------------------------------------------------------------------
function apk_add_dashboard_widgets() {
    wp_add_dashboard_widget( 'apk_dashboard_welcome', 'Bienvenido al panel de control', 'apk_add_welcome_widget' );
    wp_add_dashboard_widget( 'apk_dashboard_links', 'Links de interés', 'apk_add_links_widget' );
}

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:

// Creamos el HTML del widget de bienvenida
function apk_add_welcome_widget(){ ?>

    <p>Este sitio web funciona sobre <strong><a href="http://wordpress.org" target="_blank">WordPress</a></strong>, el CMS más utilizado alrededor del mundo.</p>

    <p>Con este sistema de administración de contenidos podrás gestionar tu sitio web editando el material existente o publicando nuevas páginas.</p>

    <p>Desde el menú izquierdo podrás gestionar lo siguiente:</p>

    <ul>
    	<li><strong>Entradas</strong> - los diferentes artículos del blog.</li>
        <li><strong>Medios</strong> - repositorio de todas las imágenes y archivos que hayas subido al sitio.</li>
        <li><strong>Diapositivas</strong> - las imágenes que van cambiando en la página de inicio.</li>
        <li><strong>Páginas</strong> - contenido estático del sitio web.</li>
    </ul>

    <p>El sistema es muy simple, pero si lo necesitas, en cada pantalla encontrarás en la parte superior derecha un botón que te dará cierta ayuda.</p>

<?php }

// Creamos el HTML del widget de links
function apk_add_links_widget() { ?>

    <p>Si quieres aprender más deberías dar un vistazo a estos links:</p>

    <ul>
        <li><a href="http://dominandowordpress.apkestudio.com" target="_blank">Curso gratuito de APK Estudio sobre wordpress</a></li>
        <li><a href="http://apkestudio.com" target="_blank">El sitio de APK Estudio</a></li>
        <li><a href="http://wordpress.org" target="_blank">El sitio de wordpress</a></li>
    </ul>
<?php }

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«:

add_action( 'wp_dashboard_setup', 'apk_add_dashboard_widgets' );

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:

Direcciones para el 2017 (y una revisión del 2016)

En diciembre del año pasado te conté que para este 2016 no tendría objetivos específicos sino direcciones en las cuales avanzar. La lógica detrás de esto es que plantearse objetivos siempre te devuelve un resultado binario, en donde alcanzas el resultado deseado o no lo haces, mientras que plantearse direcciones abre posibilidades más amplias que […]

Seguir leyendo...

El camino de la creatividad (Mi vida con Trastorno Creativo Compulsivo)

En esta charla compartiré contigo parte de mi historia como creativo y las ventajas y problemas que me he encontrado en el camino. Espero que te parezca interesante y si quieres agregar algo, déjame un comentario. Hasta la próxima Un abrazo @FranciscoAMK

Seguir leyendo...

¿Qué es genesis framework?

No. No me hice una cirugía facial, lo que pasa es que hoy tenemos un invitado especial y es él quien aparece en la imagen 🙂 En este episodio de Huevos Revueltos, respondemos una pregunta de Silvana, quien no sabe qué es Genesis Framework ni cual es el origen de su popularidad. La verdad es 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.322 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

Ya me suscribí antes, no me muestres esto.