Personalizar la barra de navegación del administrador de WordPress

Tutoriales

Github

En ocasiones necesitamos agregar un nuevo elemento a nuestro menú del administrador de WordPress, un elemento personalizado que nos facilitará la navegación hacia uno o muchos elementos que usamos constantemente, es lindo poder personalizar nuestro panel, nos hace más productivo, resolvemos problemas rápidos, a veces olvidamos la ubicación de algunas opciones en el administrador y nada como tenerlo a la vista sin tener que estar buscando internamente en WordPress.

Para este tutorial lo que voy hacer es agregar un botón de Vista previa para mi Versión 4.7.3 de WordPress cuando hago click en el botón ‘Visitar sitio’ para ver mi proyecto, este me hable en la misma ventana, pero lo que yo haré es que el logo o nombre de nuestro proyecto me redirija al home del administrador y aparte tener un botón para ver la vista previa de nuestro proyecto en una nueva ventana, para que me entiendan veamos la siguiente imagen:

Lo cambiaré de esto

A esto:

Lo que aprenderemos es las nociones básicas para gestionar el menú luego el resto va ser más fácil y van a poder hacer cosas mas complejas teniendo esta información tan útil, vamos con el tutorial.

Nota: Las funciones y códigos que agregaremos serán al archivo functions.php, el cual lo podemos encontrar en el carpeta wp-includes.

Ocultar un botón

Primero voy a ocultar el botón Visitar sitio que se despliega cuando colocamos el puntero del mouse sobre el logo(nombre de nuestro proyecto), lo haremos mediante:

En el codigo anterior mediante la función nativa remove_node oculto el elemento llamado wp-admin-bar-view-site, si le damos inspeccionar al elemento del menú veremos que tiene un id llamado wp-admin-bar-view-site yo solo seleccionare la ultima parte de la id que seria: view-site.

Acá un punto importante a recordar:

Todos los elementos del menú del administrador de WordPress tienen como id al inicio el nombre: wp-admin-bar y luego el id del botón, es decir así:

Editar un botón

Bien ahora haré que el logo(nombre de nuestro proyecto) de nuestro administrador redireccione al home del administrador, es decir a:

miproyecto.com/wp-admin/

Para ello uso la función add_node nativa de wordpress, veamos el codigo completo:

Agregar un botón

Por ultimo agregare mi nuevo botón vista previa a mi barra de menú del administrador:

En el código anterior mediante la función add_node agrego mi nuevo botón, ahora antes de eso verifico si el menú esta dentro del administrador o mejor dicho en la url que contenga /wp-admin:

¿Porque hago esta verificación?

Es simple porque cuando habiendo iniciado sesión en el administrador, visito mi blog me va cargar la barra de edición del administrador, no tendría sentido mostrar este nuevo botón vista previa, ya que ya estoy viendo una vista previa de mi proyecto, para que me entiendan pueden ver la siguiente imagen:

Bien, dentro de nuestra función mi_nuevo_boton estoy agregando los siguientes elementos:

id: El identificador de mi nuevo botón

title: Un botón llamado dashicons-admin-site junto con el texto del botón ‘Vista Previa’

href: El enlace del botón

meta: Un array de propiedades como la clase, target y title (Puedes colocar las propiedades que desees)

Listo, tenemos configurada nuestra barra de navegación, podemos ver el siguiente resultado:

Bueno eso es todo, si deseas acceder a todos los recursos que tiene disponible WordPress para los desarrolladores y programadores, puedes visita el siguiente enlace: developer.wordpress.org

Esperamos que te sirva de mucho este tutorial.

No te olvides seguirnos en nuestras redes sociales y suscríbete a nuestro canal de Youtube eso nos motiva a seguir compartiendo contenido que te sirva de mucho en tu aprendizaje.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required