En este artículo os voy a mostrar cómo crear menús en el panel de admin en WordPress.
Al personalizar el menu admin en WordPress, podemos crear nuevos menús y opciones de la forma que queramos. Requiere un poco de trabajo pero es una buena forma de personalizar la barra de herramientas en WordPress, dándole un toque ideal y distinguido frente a otros sitios WP.
En la siguiente imágen se pueden ver enmarcadas en rojo los nuevos menús y las nuevas opciones que vamos a añadir a nuestra barra admin bar en WordPress.
En nuestra nueva barra de administración de WordPress vamos a añadir las opciones de:
- Entrar en la Zona de Usuario. Con las sub-opciones:
- Perfil de usuario
- editar el perfil de usuario
- Resetear contraseña
Y otras dos opciones en el menú:
- Contactar
- Salir.
También añadiremos iconos a las nuevas opciones en admin bar de WordPress. Podremos utilizar los dashicons que lleva integrados WordPress, o también los iconos de FontAwesome.
Solo tendremos que cambiar la opción “title” del código anterior y poner el código del icono deseado.
Ahora si. ¿Cómo añadir nuevos elementos a la barra de admin de WordPress?
– Simplemente hemos de editar nuestro archivo functions.php y añadir el siguiente código.
– Por supuesto hemos de cambiar los enlaces a midominio.com (opción “href“) por los enlaces personalizados en cada uno de nuestros casos.
– También podeis editar el campo “title“, y añadir los items del menú que necesitéis.
– También pueden cambiarse los iconos.
– Podéis ver que este código añade __ delante de los arrays. Puede ser utilizado junto al plugin de traducción WPML. De esta forma el addon “string translation” de WPML puede reconocer estas cadenas y permitir su traducción.
Dicho y explicado todo esto, aquí tenéis la forma de agregar opciones en admin bar de WordPress!
Espero que os sea de mucha utilidad. Y no seais malos… Compartid!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | // Añadimos un enlace y un submenú con tres opciones function link_simple_toolbars($wp_admin_bar) { $link = array( 'id' => __('Opciones2'), // Identificador único 'title' => __('<span class="ab-icon"></span>ZONA DE USUARIO'), // Texto e icono del enlace 'href' => __('http://midominio.com/login/'), // URL de destino (si no queremos que apunte a ningún sitio, podemos dejarlo en blanco) 'meta' => array('class' => 'mi-clases') // Clase del elemento ); $sublink1 = array( 'id' => __('sublink11'), // Identificador único 'parent' => __('Opciones2'), // Identificador del elemento superior 'title' => __('Perfil de usuario'), // Título del enlace 'href' => __('http://midominio.com/wp-admin/profile.php'), // URL de destino 'meta' => array( 'title' => __('Perfil de usuario'), // Atributo "title" del enlace 'target' => '_self', // Destino ("_blank" abrirá el enlace en una página o pestaña nueva) 'class' => 'mi_link' // Clase del elemento ) ); $sublink2 = array( 'id' => __('sublink22'), 'parent' => __('Opciones2'), // Identificador del elemento superior 'title' => __('MODIFICAR PERFIL'), 'href' => __('http://midominio.com/editar-perfil-usuario/'), 'meta' => array( 'title' => __('MODIFICAR PERFIL'), 'target' => '_self', 'class' => 'mi_link' ) ); $sublink3 = array( 'id' => __('sub-linkk33'), 'parent' => __('Opciones2'), // Identificador del elemento superior 'title' => __('RESETEAR CONTRASE&Ntilde;A'), 'href' => __('http://midominio.com/resetear-contrasena/'), 'meta' => array( 'title' => __('RESETEAR CONTRASE&Ntilde;A'), 'target' => '_self', 'class' => 'mi_link' ) ); $wp_admin_bar->add_node($link); $wp_admin_bar->add_node($sublink1); $wp_admin_bar->add_node($sublink2); $wp_admin_bar->add_node($sublink3); } add_action('admin_bar_menu', 'link_simple_toolbars', 80); // 25 = En la primera posición (justo después del logo) /* * Estilos para el nuevo enlace */ function prefix_toolbar_styles7() { echo '<style>#wp-toolbar .mi-clases .ab-icon:before { content: "\f110"; top: 2px; }</style>'; } add_action( 'admin_head', 'prefix_toolbar_styles7' ); /* * Función para añadir nueva opción con icono en la barra de administración */ function prefix_link_with_icons_in_toolbar6($wp_admin_bar) { $args = array( 'id' => __('mi-linkkk'), // Identificador 'title' => __('<span class="ab-icon"></span>CONTACTA'), // Texto e icono del enlace 'href' => __('http://midominio.com/contacto/'), // URL de destino 'meta' => array('class' => 'mi-clase3') // Clase para poder editar los estilos ); $wp_admin_bar->add_node($args); } add_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar6', 100 ); // 25, si queremos que salga en primera posición /* * Estilos para el nuevo enlace, y código para el icono. */ function prefix_toolbar_stylesss() { echo '<style>#wp-toolbar .mi-clase3 .ab-icon:before { content: "\f348"; top: 2px; }</style>'; } add_action( 'admin_head', 'prefix_toolbar_stylesss' ); /* * Función para añadir nueva opción e icono en la barra de administración */ function prefix_link_with_icons_in_toolbar7($wp_admin_bar) { $args = array( 'id' => __('salir'), // Identificador 'title' => __('<span class="ab-icon"></span>SALIR'), // Texto e icono del enlace 'href' => __('http://midominio.com/?a=logout'), // URL de destino 'meta' => array('class' => 'mi-clase4') // Clase para poder editar los estilos ); $wp_admin_bar->add_node($args); } add_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar7', 100 ); // 25, si queremos que salga en primera posición |
Bueno el código es bastante extenso y podéis recortarlo para simplemente añadir una opción por ejemplo, o modificarlo para añadir otras diferentes.
Si te ha sido útil, no dudes en compartirlo!