Cómo personalizar el panel de administración de WordPress

Cuando empezamos a trabajar con WordPress habitualmente comenzamos a aprender todo aquello que tiene que ver con la apariencia y funcionalidades de la web. Esto se traduce como desarrolladores en conocer todo lo necesario para poder crear un tema desde cero y construir nuevas herramientas a través de plugins.

Pero en ocasiones nos olvidamos de aquella parte que nuestros clientes van a valorar más en el día a día si se encargan de trabajar con WordPress y crear nuevos contenidos. Hablamos del panel de administración de WordPress.

En las siguientes líneas vamos a intentar ofrecer algunas soluciones en formato código que nos permitirán modificar el dashboard de WordPress a nuestro antojo y conseguir de ese modo facilitar la vida a nuestros clientes. Además, conseguiremos ahorrarnos muchas molestias y tiempo perdido en el caso de que nos toque también ofrecer soporte técnico para el proyecto.

Personalizando el dashboard de WordPress

Aquí va un recopilatorio de algunos fragmentos de código que nos permitirán modificar el panel de administración de WordPress a nuestro antojo. Simplemente deberemos tener en cuenta insertar este código en el archivo functions.php de nuestro tema activo, o encapsularlo dentro de un plugin si queremos que sea independiente de la apariencia elegida en el sitio web.

Modificar el estilo de colores de panel

Disponemos por defecto de ocho gamas de colores diferentes que podemos personalizar como usuarios en el panel de control. Puede parecer algo poco relevante, pero interviniendo en este apartado podemos decidir qué colores queremos que tengan los usuarios nuevos o existentes adaptando esa apariencia al estilo general del proyecto.

Las gamas de colores que tenemos a nuestra disposición son las siguientes: default, light, blue, coffee, ectoplasm, midnight, ocean o sunrise.

// Modificar el estilo de colores de panel
function set_default_admin_color($user_id) {
    $args = array(
        'ID' => $user_id,
        'admin_color' => 'sunrise'
    );
    wp_update_user( $args );
}
add_action('user_register', 'set_default_admin_color');

Añadir enlaces en la barra de herramientas

Además de los enlaces clásicos de la barra de administración que permiten al editor de contenidos acceder más fácilmente a cada uno de los accesos para crear nuevas entradas o páginas, podemos añadir elementos personalizados.

Suele resultar interesante enlazar a una sección de soporte o de ayuda que hayamos podido crear previamente para que puedan contactar fácilmente con nosotros. De ese modo cualquier cliente o usuario nos tendrá a mano para cualquier consulta.

// Añadir enlaces en la barra de herramientas
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'support',
        'title' => 'Help Section', 
        'href' => 'https://www.google.com', 
        'meta' => array(
            'class' => 'support', 
            'title' => 'Help Section'
            )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);

Modificar el pie de página del panel

Debemos estar agradecidos a WordPress y toda su comunidad por ofrecernos un gestor de contenidos abierto, versátil y con enormes posibilidades, y por ese motivo, mantener la mención a WordPress allá donde se encuentr debería ser algo casi obligado.

No obstante podemos modificar o completar la mención a WordPress que aparece en el pié del panel aprovechando por ejemplo para hacer referencia a nuestra propia compañía.

// Modificar el pie de página del panel
function remove_footer_admin () {
echo 'Powered by WordPress | Built by Acme Inc';
}
add_filter('admin_footer_text', 'remove_footer_admin');

Eliminar enlaces a WordPress.org de la barra de herramientas

El primero de los elementos que nos encontramos en el dashboard de WordPress es precisamente un icono que nos ofrece un menú desplegable con enlaces a WordPress.org, el Codex de documentación de WordPress y los foros de soporte.

Tal y como hemos comentado en el punto anterior, es interesante que esos enlaces sigan ahí, pero si por algún motivo queremos deshacernos de ellos, tenemos también a nuestra disposición la opción para poder hacerlo.

// Eliminar enlaces a WordPress.org de la barra de herramientas
add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
 
function remove_wp_logo( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

Eliminar todos los enlaces de la barra de administración

Si queremos ir un paso más allá, podemos llegar a eliminar todos los enlaces de esa barra de administración simplificando al máximo las opciones que podemos encontrarnos.

// Eliminar todos los enlaces de la barra de administración
function remove_admin_bar_links() {
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('wp-logo');          // Remove the WordPress logo
    $wp_admin_bar->remove_menu('about');            // Remove the about WordPress link
    $wp_admin_bar->remove_menu('wporg');            // Remove the WordPress.org link
    $wp_admin_bar->remove_menu('documentation');    // Remove the WordPress documentation link
    $wp_admin_bar->remove_menu('support-forums');   // Remove the support forums link
    $wp_admin_bar->remove_menu('feedback');         // Remove the feedback link
    $wp_admin_bar->remove_menu('site-name');        // Remove the site name menu
    $wp_admin_bar->remove_menu('view-site');        // Remove the view site link
    $wp_admin_bar->remove_menu('updates');          // Remove the updates link
    $wp_admin_bar->remove_menu('comments');         // Remove the comments link
    $wp_admin_bar->remove_menu('new-content');      // Remove the content link
    $wp_admin_bar->remove_menu('my-account');       // Remove the user details tab
}
add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );

Eliminar enlaces de la barra de administración salvo para administradores

Si los hacks anteriores nos parecen demasiado agresivos, tenemos la posibilidad de eliminar algunos elementos solamente para determinados usuarios. En este caso, eliminaríamos la opción de crear nuevo contenido para usuarios que no tengan el rol de administrador en WordPresss.

// Eliminar enlaces de la barra de administración salvo para administradores
function remove_admin_bar_links() {
    global $wp_admin_bar, $current_user;
    
    if ($current_user->ID != 1) {
        $wp_admin_bar->remove_menu('updates');          // Remove the updates link
        $wp_admin_bar->remove_menu('comments');         // Remove the comments link
        $wp_admin_bar->remove_menu('new-content');      // Remove the content link
    }
}
add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );

Eliminar elementos del menú principal

Siguiendo con esta tendencia de hacer las cosas lo más simples posibles, también podemos eliminar elementos del menú principal de WordPress, el que se sitúa en la parte lateral izquierda. En este caso, dejamos listados todos los elementos habituales en este snippet para poder reutilizarlo a nuestro antojo.

// Eliminar elementos del menú principal
 function remove_menus(){
   remove_menu_page( 'index.php' );                  //Dashboard
   remove_menu_page( 'jetpack' );                    //Jetpack* 
   remove_menu_page( 'edit.php' );                   //Posts
   remove_menu_page( 'upload.php' );                 //Media
   remove_menu_page( 'edit.php?post_type=page' );    //Pages
   remove_menu_page( 'edit-comments.php' );          //Comments
   remove_menu_page( 'themes.php' );                 //Appearance
   remove_menu_page( 'plugins.php' );                //Plugins
   remove_menu_page( 'users.php' );                  //Users
   remove_menu_page( 'tools.php' );                  //Tools
   remove_menu_page( 'options-general.php' );        //Settings
   }
  add_action( 'admin_menu', 'remove_menus' );

Modificar el logotipo de acceso

El acceso al panel de control será el primer lugar que cualquier usuario observe antes de registrarse o identificarse en el sitio. Y si hablamos de branding es un buen lugar para poder hacer referencia a nuestra empresa o la empresa del cliente.

Podemos alojar por ejemplo dentro del tema instalado una imagen que queramos usar y sustituir el logotipo de WordPress por el deseado. Una forma sencilla de hacer branding o de que el usuario se encuentre más familiarizado con el acceso.

// Modificar el logotipo de acceso
function my_login_logo() { ?><?php } add_action( 'login_enqueue_scripts', 'my_login_logo' );

Reordenar los elementos comunes del menú de administración

Si queréis tener a mano algunos elementos que utilicéis más habitualmente, podemos también reordenar la disposición de los elementos comunes a cualquier instalación de WordPress como son las secciones de páginas, entradas, comentarios o medios, entre otros.

// Reordenar los elementos comunes del menú de administración
function custom_menu_order($menu_ord) {
  if (!$menu_ord) return true;
  return array(
    'index.php',               // Dashboard
    'upload.php',              // Media
    'plugins.php',             // Plugins
    'edit-comments.php',       // Comments
    'edit.php?post_type=page', // Pages
    'edit.php',                // Posts
  );
}
add_filter('custom_menu_order', 'custom_menu_order');
add_filter('menu_order', 'custom_menu_order');

Añadir widgets de contenido en la portada del panel

Si queremos que el contenido extra que estamos añadiendo en el panel esté aún más presente, podemos añadir un widget en la propia portada del dashboard de WordPress.

A la información existente sobre el último contenido publicado, estadísticas de diferentes servicios o las novedades de WordPress, podemos añadir bloques personalizados donde aparezca nuestra marca personal o la de nuestra empresa, o donde simplemente podamos añadir la información de interés que deseemos.

// Añadir widgets de contenido en la portada del panel
add_action('wp_dashboard_setup', 'recopilatorio_dashboard_widgets');
  
function recopilatorio_dashboard_widgets() {
global $wp_meta_boxes;
 
wp_add_dashboard_widget('recopilatorio_help_widget', 'Help Section Title', 'recopilatorio_dashboard_help');
}
 
function recopilatorio_dashboard_help() {
echo '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere ipsum at porttitor lobortis.

';
}

Eliminar widgets de contenido de la portada

Algunos elementos que a veces nos pueden molestar o que pueden despistar a los nuevos usuarios de WordPress son los bloques de contenido que aparecen en la portada del panel de administración.

// Eliminar widgets de contenido de la portada
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
  global $wp_meta_boxes;
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);  //remove at-a-glance
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);    //remove WordPress-newsfeed
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);  //remove quick-draft
}

Crear una sección de ayuda dentro del panel de WordPress

Si ponemos en conjunto unas cuantas acciones y herramientas podremos crear una sección de soporte y ayuda ideal para que nuestros clientes tengan a mano siempre que quieran utilizarla.

Podremos añadir de este modo, y dentro del propio panel, información de interés y todo tipo de documentación, evitando así generar consultas de soporte innecesarias. Muy interesante si tenemos documentación que compartimos con nuestros clientes habitualmente para poder reutilizarla y que esté siempre disponible.

// Create menu section under Tools in WordPress admin
add_action( 'admin_menu', 'docs_admin_menu' );
// New section under Tools 
function docs_admin_menu() {
	add_management_page( 'Docs', 'Docs', 'manage_categories', 'docs', 'content_docs_admin_menu' );
}
// Contents for the new section
function content_docs_admin_menu() {

// text here using several echo calls

}
/**
* Redirect Editor role to new section
* @author  <mg@maugelves.com>
*/
function mg_dashboard_redirect(){
    
	// Get the current user
	$user = wp_get_current_user();
    
	// Asking for Editor role
	if( in_array( 'editor', $user->roles ) ):
    
		// If Editor role exists then redirect
		wp_redirect(admin_url('tools.php?page=docs'));
		exit;
    
	endif;
    
}
add_action('load-index.php', 'mg_dashboard_redirect');

Como habéis sido bastante buenos este pasado año y los Reyes Magos quizás se hayan retrasado un poco por el estado del tráfico y las carreteras, hemos preparado este pequeño plugin que recopila todas estas funciones. Tan solo hace falta personalizarlo ligaramente para después instalarlo.

• Enlace a Gist.

En resumen, podemos decir que WordPress no tiene apenas límites en la personalización del panel de administración. Tan solo tendremos que imaginar aquello que nos pueda venir bien para nuestros proyectos, que seguro encontraremos una solución que se adapte a nuestras necesidades, las de nuestros clientes o las de los usuarios del sitio web en el que estamos trabajando.