Comunidad de diseño web y desarrollo en internet

Personalizar la barra de administración de wordpress

Mientras más fácil nos ponemos las cosas a nosotros mismos en la administración de nuestro blog, más llevadera será esta tarea. WordPress desde la versión 3.1 agregó la barra de administración para ayudarnos en la administración del blog, y muchos la eliminan por que les estorba. En este post agregaremos botones que funcionen como acceso directo a las tareas más comunes que realizamos sin necesidad de ir al panel de control del blog, y eliminaremos los que no nos interesen, además agregaremos un enlace para eliminar entradas y páginas desde la barra y moveremos la barra de administración de lugar.

En wordpress no existe un entorno gráfico para agregar botones personalizados a esta barra, pero los agregaremos añadiendo funciones y utilizando los ganchos que nos proporciona el API de wordpress. En este tutorial explicaré cómo agregar vínculos individuales y vínculos anidados en la barra de administración de wordpress.



Agregar un enlace simple a la barra de administración



Para agregar un nuevo enlace personalizado en la barra de administración de WordPress, agregamos la siguiente función en el archivo function.php de tu theme.

Aprovecharé y utilizarée mi blog como ejemplo, agregarée algunos botones de zonas que visito con mucha frecuencia y un enlace a la zona de descargas y otro al panel de estadísticas, y los organizaré de la siguiente forma.

  • Mis Herramientas
    - Descargar
    - Estadísticas
    - Comentarios

Código :

function add_custom_link_admin_bar() {
   global $wp_admin_bar;
   if ( !is_super_admin() || !is_admin_bar_showing() )
      return;
   $wp_admin_bar->add_menu( array(
   'id' => 'CustomLink',//ID del link
   'title' => __( 'Mis herramientas'),//Nombre a mostrar en el enlace
   'href' => __('http://www.web-desings.com/'),//Enlace del link
   ) );
}
add_action('admin_bar_menu', 'add_sumtips_admin_bar_link',25);


Es una función bastante simple, sólo debes editar los valores de ID, title, href, por el valor que desees.

Agregar sub-menú en la barra de administración de wordpress


Para agregar otros enlaces como sub menú al link Mis Herramientas, sólo debemos agregar un valor más al array, este es el valor parent=>id_link_padre, de esta forma los enlaces que contengan parent=>CustomLink serán agregados como hijos del link Mis Herramientas, analicen el siguiente código y lean los comentarios y seguro lo entienden perfectamente.



Código :

// Add sub menu link "Descargas"
   $wp_admin_bar->add_menu( array(
      'parent' => 'CustomLink',//Nombre del link padre
      'id'     => 'downloadLink',//ID del link
      'title' => __( 'Descargas'),//Nombre a mostrar en el enlace
      'href' => __('vinculo aqui'),//Vínculo del link
   ));

   // Add sub menu link "Estadísticas"
   $wp_admin_bar->add_menu( array(
      'parent' => 'CustomLink',//Nombre del link padre
      'id'     => 'Estat',
      'title' => __( 'Estadísticas'),
      'href' => __('vinculo aqui'),
   ));

   // Add sub menu link "Comentarios"
   $wp_admin_bar->add_menu( array(
      'parent' => 'CustomLink',//Nombre del link padre
      'id'     => 'Comment',
      'title' => __( 'Comentarios'),
      'href' => __('vinculo aqui'),
   ));


Eliminar enlaces de la barra de administración de wordpress


Ademas de agregar podemos eliminar cualquiera de los enlaces que por defecto de la barra de administración, para este ejemplo eliminare la alerta de actualizaciones, esta es una función interesante cuando se le entrega una web creada con wordpress a un cliente.

Código :

function remove_admin_bar_links() {
    global $wp_admin_bar;
    // Elimina el logo de WordPress (desaparece también todo el submenú)
    $wp_admin_bar->remove_menu('wp-logo');
    // Elimina el icono de notificación de actualizaciones
    $wp_admin_bar->remove_menu('updates');
}
add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );


Además de wp-logo y updates, wordpress nos ofrece la posibilidad de eliminar los demás enlaces solamente agregando una nueva linea de código pasando los siguientes parámetros.

  • search:para eliminar la caja de búsqueda.
  • comments:Para eliminar el aviso de comentarios
  • updates:Eliminar el aviso de actualizaciones
  • edit:Elimina editar entrada y páginas
  • get-shortlink:Proporciona un enlace corto a esa página/post
  • my-sites:Elimina el menu my sitios, si utilizas la función multisitios de wordpress
  • site-name:Elimina el nombre de la web
  • wp-logo:Elimina el logo(y el sub Menú)
  • my-account:Elimina los enlaces a su cuenta. El ID depende de si usted tiene Avatar habilitado o no.
  • view-site:Elimina el sub menú que aparece al pasar el cursor sobre el nombre de la web
  • about:Elimina el enlace “Sobre WordPress
  • wporg:Elimina el enlace a wordpress.org
  • documentation:Elimina el enlace a la documentación oficial (Codex)
  • support-forums:Elimina el enlace a los foros de ayuda
  • feedback:Elimina el enlace “Sugerencias”

De esta forma podemos eliminar algunos de los botones que trae wordpress por defecto en la barra de administración.

Mover de posición la barra de administración de wordpress


Para realizar esta tarea solo debemos agregar la siguiente función en el archivo function.php y editar el código css que contiene dependiendo el lugar donde necesitemos mover la barra de administración.

Código :

function custom_move_adminbar() {
    echo '<style type="text/css">
   body {
      margin-top: -28px;
      padding-bottom: 28px;
   }
   body.admin-bar #wphead {
      padding-top: 0;
   }
   body.admin-bar #footer {
      padding-bottom: 28px;
   }
   #wpadminbar {
      top: auto !important;
      bottom: 0;
   }
   #wpadminbar .quicklinks .menupop ul {
      bottom: 28px;
   }
   </style>';
}
add_action( 'admin_head', 'custom_move_adminbar' );
add_action( 'wp_head', 'custom_move_adminbar' );


Si mueves la barra en la parte inferior de tu pantalla, debes tener en cuenta que los menús desplegables de deslizan hacia abajo y puede que no se visualicen, con lo cual tendrás que tocar el css de los sub-menú, mi recomendación es dejarla la cual está, para evitar perdidas de tiempo.

Cambiar el aspecto visual de la barra de administración de wordpress


Código :

// Editamos el aspecto visual de la barra
function custom_style_adminbar() {
   $adminlogo = '/images/adminlogo.png'; // Especificar ruta (tamaño = 20 x 20 px)
     echo"<style>
         #wpadminbar { background: #000 !important; }
         #wp-admin-bar-wp-logo &gt; .ab-item .ab-icon {
         background: ('URL de la imagen') left top !important;}
     </style>";
   }
add_action('admin_head', 'custom_style_adminbar');

Para personalizar la barra de administración solo debemos editar el código css de la barra de administración y colocarlo dentro de la función anterior, si quiere cambiar el logo se coloca en esta función la ruta de la imagen a colocar.

Desactivar la barra de administración en wordpress 3.3


En wordpress 3.3 los desarrolladores recomiendan y pretenden evitar la desactivación de la barra de administración, o al menos ponerlo un poco más difícil al usuario, ellos dicen que hacen esto por que esta barra de administración tiene información de mucha utilidad para el usuario y además se combina con funciones de header y por ello no recomiendan eliminarla totalmente.

En wp.tutsplus.com explican cómo eliminar la barra de administración de wordpress 3.3, pueden mirar este tutorial si les interesa eliminar la barra o utilizar alguno de estos pluguins.

Conclusión


A muchos puede parecer estúpido el editar o agregar funcionalidades a esta barra de administración, pero puedo decirles que esto puede sacarte de algún apuro con algún cliente, a los clientes mientras mas fácil le pones las cosas mejor para tí y para él. Esta barra puede servir para agregarles accesos directo a zonas que deben de visitar frecuentemente.

Sólo hay que saber sacarle provecho a estas herramientas y seguro que pueden servirte para algo, espero sea de ayuda y alguna vez puedan utilizarlo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate