En el desarrollo web, la organización y la eficiencia son clave, especialmente cuando trabajamos con clientes que no quieren verse abrumados por opciones y herramientas que no necesitan. Este artículo se centra en una técnica sencilla pero efectiva para mejorar la interfaz de administración de WordPress ocultando elementos de menú innecesarios. Gracias a un botón de acceso, podemos desplegar un popup con todas las opciones del menú, asegurando que solo aquellos elementos esenciales sean visibles de manera predeterminada.
Imagina que estás creando una página web para un cliente que solo necesita acceder a las opciones de contenido y configuración básica, pero no quiere lidiar con pestañas como el plugin de seguridad, el plugin de cookies y otros plugins que fueron instalados para configuraciones iniciales. Este enfoque no solo limpia el menú, sino que también mejora la experiencia del usuario al proporcionar un entorno más enfocado y menos confuso. En este artículo, exploraremos cómo implementar esta solución utilizando un script de jQuery y algo de CSS, permitiendo un acceso fácil y rápido a todo el menú administrativo cuando sea necesario. Así, tu cliente puede disfrutar de una interfaz de administración ordenada y personalizada a sus necesidades, con la posibilidad de acceder al menú completo en cualquier momento.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
function admin_menu_popup_scripts() {
?>
<script>
jQuery(document).ready(function($) {
const menuItemsToHide = [
"admin.php?page=wp_file_manager",
"admin.php?page=snippets",
"admin.php?page=wc-admin",
"admin.php?page=elementor",
"admin.php?page=ct-dashboard",
"edit.php?post_type=elementor_library&tabs_group=library",
"themes.php",
"tools.php",
"options-general.php",
"plugins.php",
"index.php", // Dashboard
"admin.php?page=wpforms-overview",
"admin.php?page=loco",
"admin.php?page=ultimate_affiliates_pro"
];
// Ocultar elementos del menú
function hideMenuItems() {
menuItemsToHide.forEach(function(item) {
$('#adminmenu a[href$="' + item + '"]').closest('li').addClass('hide-menu-item');
});
}
// Mostrar elementos del menú permitidos
function showAllowedMenuItems() {
$('#adminmenu').removeClass('menu-hidden');
hideMenuItems();
$('#adminmenu').addClass('show-menu');
}
// Mostrar el popup al hacer clic en el botón
$('#show-admin-menu-button').on('click', function(e) {
e.preventDefault();
$('#admin-menu-popup').fadeIn(200);
});
// Ocultar el popup al hacer clic en el botón de cerrar
$('#admin-menu-popup .close-button').on('click', function() {
$('#admin-menu-popup').fadeOut(200);
});
// Manejo de los submenús
$('#admin-menu-popup').on('mouseenter', '.menu-item', function() {
$(this).find('.submenu').fadeIn(200);
}).on('mouseleave', '.menu-item', function() {
$(this).find('.submenu').fadeOut(200);
});
// Generar menú dentro del popup
function generatePopupMenu() {
var popupMenuHtml = '';
$('#adminmenu > li').each(function() {
var menuItem = $(this).find('a.menu-top');
var menuItemHref = menuItem.attr('href');
var menuItemText = menuItem.find('.wp-menu-name').text();
if (menuItemHref && menuItemText) {
popupMenuHtml += '<div class="menu-item">';
popupMenuHtml += '<a href="' + menuItemHref + '">' + menuItemText + '</a>';
var submenuHtml = '';
$(this).find('.wp-submenu a').each(function() {
var subMenuItem = $(this);
var subMenuItemHref = subMenuItem.attr('href');
var subMenuItemText = subMenuItem.text();
if (subMenuItemHref && subMenuItemText) {
submenuHtml += '<a href="' + subMenuItemHref + '">' + subMenuItemText + '</a>';
}
});
if (submenuHtml) {
popupMenuHtml += '<div class="submenu">' + submenuHtml + '</div>';
}
popupMenuHtml += '</div>';
}
});
$('#admin-menu-popup-content').html(popupMenuHtml);
}
// Mostrar elementos permitidos después de que la página haya terminado de cargar
$(window).on('load', function() {
showAllowedMenuItems();
generatePopupMenu();
});
});
// Mostrar el menú lateral cuando la página haya terminado de cargar
jQuery(window).on('load', function() {
jQuery('#adminmenu').removeClass('menu-hidden');
});
</script>
<style>
/* Ocultar el menú lateral al cargar la página */
#adminmenu {
display: none;
}
#adminmenu.show-menu {
display: block !important;
}
.hide-menu-item {
display: none;
}
#show-admin-menu-button {
position: fixed;
bottom: 10px;
left: 10px;
background: #0073aa;
color: #fff;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
z-index: 10001;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background 0.3s;
}
#show-admin-menu-button:hover {
background: #005177;
}
#admin-menu-popup {
display: none;
position: fixed;
top: 10%;
left: 10%;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
z-index: 10000;
padding: 20px;
max-height: 80%;
width: 300px;
overflow-y: auto;
border-radius: 10px;
}
#admin-menu-popup .close-button {
background: #f1f1f1;
border: none;
padding: 10px;
cursor: pointer;
margin-bottom: 10px;
font-size: 14px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#admin-menu-popup .menu-item {
margin-bottom: 15px;
padding: 10px;
background: #f9f9f9;
border: 1px solid #e1e1e1;
border-radius: 5px;
transition: background 0.3s;
}
#admin-menu-popup .menu-item:hover {
background: #e9e9e9;
}
#admin-menu-popup .menu-item a {
text-decoration: none;
color: #0073aa;
display: block;
padding: 5px 0;
font-size: 16px;
}
#admin-menu-popup .submenu {
display: none;
margin-left: 20px;
}
#admin-menu-popup .submenu a {
display: block;
padding: 5px 0;
text-decoration: none;
color: #0073aa;
font-size: 14px;
}
</style>
<?php
}
add_action('admin_footer', 'admin_menu_popup_scripts');
function add_show_menu_button() {
echo '<div id="show-admin-menu-button">Mostrar Menú</div>';
}
add_action('admin_footer', 'add_show_menu_button');
function generate_admin_menu_popup() {
?>
<div id="admin-menu-popup">
<button class="close-button">Cerrar</button>
<div id="admin-menu-popup-content"></div>
</div>
<?php
}
add_action('admin_footer', 'generate_admin_menu_popup');
function load_custom_jquery() {
if (!wp_script_is('jquery', 'enqueued')) {
wp_enqueue_script('jquery');
}
}
add_action('admin_enqueue_scripts', 'load_custom_jquery');
Lenguaje del código: PHP (php)Entendiendo el Código
1. Función admin_menu_popup_scripts
Esta función es responsable de agregar el script y los estilos necesarios para gestionar el menú de administración de WordPress. Se utiliza add_action('admin_footer', 'admin_menu_popup_scripts'); para asegurar que el script y los estilos se agreguen al pie de página del área de administración.
Script en JavaScript:
- Document Ready: Se usa
jQuery(document).readypara asegurar que el DOM esté completamente cargado antes de ejecutar cualquier código. - Array de Elementos a Ocultar:
menuItemsToHidees un array que contiene los identificadores de los elementos del menú que se deben ocultar. - Función
hideMenuItems: Itera sobre los elementos del arraymenuItemsToHidey oculta cada uno de ellos agregando la clase CSShide-menu-item. - Función
showAllowedMenuItems: Se asegura de que el menú se muestre eliminando la clasemenu-hiddeny luego llamando ahideMenuItemspara ocultar los elementos especificados. Finalmente, se agrega la claseshow-menupara mostrar el menú con estilo adecuado. - Eventos de Clic para el Popup: Al hacer clic en el botón para mostrar el menú, se muestra el popup con una animación. Al hacer clic en el botón de cerrar del popup, este se oculta con una animación.
- Manejo de Submenús: Se utilizan eventos de
mouseenterymouseleavepara mostrar y ocultar los submenús dentro del popup. - Generación Dinámica del Menú Popup: La función
generatePopupMenurecorre los elementos del menú de administración original, construye el HTML del popup dinámicamente y lo inserta en el contenedor del popup. - Carga Completa de la Página: Cuando la página ha terminado de cargar, se llama a
showAllowedMenuItemsygeneratePopupMenupara mostrar el menú permitido y generar el menú en el popup.
Estilos en CSS:
- Ocultar el Menú Inicialmente: Se utiliza
display: none;para ocultar el menú completo inicialmente. - Clase
.show-menu: Esta clase asegura que el menú se muestre correctamente cuando se eliminan las restricciones de estilo iniciales. - Clase
.hide-menu-item: Esta clase oculta elementos específicos del menú. - Estilo del Botón para Mostrar el Menú: Se define un botón flotante que aparece en la esquina inferior izquierda, con estilos para el estado normal y el estado
hover. - Estilo del Popup: Define cómo se muestra el popup, incluyendo su posición, fondo, sombra y capacidad de desplazamiento.
2. Función add_show_menu_button
Esta función agrega un botón flotante al pie de página del área de administración de WordPress que, al hacer clic, mostrará el popup del menú.
3. Función generate_admin_menu_popup
Esta función genera el contenedor del popup que se llenará dinámicamente con los elementos del menú de administración.
4. Función load_custom_jquery
Se asegura de que jQuery esté cargado en el área de administración de WordPress. Si no está en cola, se agrega usando wp_enqueue_script('jquery');.
Resumen del Flujo de Trabajo
- Inicialmente Ocultar el Menú: El menú se oculta completamente al cargar la página.
- Mostrar Solo los Elementos Permitidos: Después de que la página ha cargado completamente, se muestran solo los elementos permitidos del menú y se genera el menú dentro del popup.
- Interacción con el Usuario: Se proporciona un botón flotante para mostrar el popup del menú. Este popup contiene una copia dinámica del menú original, con submenús que se despliegan al pasar el ratón sobre ellos.
Este enfoque asegura una experiencia de usuario coherente y mantiene la interfaz de administración de WordPress limpia, ocultando elementos del menú según sea necesario y proporcionando un método para acceder a ellos mediante un popup.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.