{"id":8319,"date":"2014-10-16T08:15:59","date_gmt":"2014-10-16T07:15:59","guid":{"rendered":"https:\/\/eltallerdelbit.com\/?p=8319"},"modified":"2020-08-24T00:27:40","modified_gmt":"2020-08-23T22:27:40","slug":"crear-menu-admin-wordpress","status":"publish","type":"post","link":"https:\/\/eltallerdelbit.com\/crear-menu-admin-wordpress\/","title":{"rendered":"Agregar men\u00fa y opciones en el panel de admin en WordPress"},"content":{"rendered":"<h2>En este art\u00edculo os voy a mostrar c\u00f3mo <strong>crear men\u00fas en el panel de admin en WordPress<\/strong>.<\/h2>\n<p>&nbsp;<br \/>\nAl <strong>personalizar el menu admin en WordPress<\/strong>, podemos crear nuevos men\u00fas 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\u00e1ndole un toque ideal y distinguido frente a otros sitios WP.<br \/>\n&nbsp;<br \/>\nEn la siguiente im\u00e1gen se pueden ver enmarcadas en rojo los nuevos men\u00fas y las nuevas <strong>opciones que vamos a a\u00f1adir a nuestra barra <em>admin bar<\/em> en WordPress<\/strong>.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8339\" src=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2014\/10\/Agregar-opciones-admin-bar-Wordpress.jpg\" alt=\"Agregar opciones en la barra de admin bar de WordPress\" width=\"404\" height=\"32\" srcset=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2014\/10\/Agregar-opciones-admin-bar-Wordpress.jpg 404w, https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2014\/10\/Agregar-opciones-admin-bar-Wordpress-300x23.jpg 300w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><center> La <strong>personalizaci\u00f3n de la barra de men\u00fa de <em>admin bar<\/em> en WordPress<\/strong> puede servir para ofrecer proyectos WordPress personalizados a clientes.<\/center><br \/>\n&nbsp;<br \/>\nEn nuestra nueva <strong>barra de administraci\u00f3n de WordPress<\/strong> vamos a a\u00f1adir las opciones de:<\/p>\n<ul>\n<li><em>Entrar en la Zona de Usuario<\/em>.\u00a0Con las sub-opciones:<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<ul style=\"padding-left: 30px;\">\n<ul style=\"padding-left: 30px;\">\n<li>Perfil de usuario<\/li>\n<li>editar el perfil de usuario<\/li>\n<li>Resetear contrase\u00f1a<\/li>\n<\/ul>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Y otras dos opciones en el men\u00fa:<\/p>\n<ul>\n<li>Contactar<\/li>\n<li>Salir.<\/li>\n<\/ul>\n<p>Tambi\u00e9n a\u00f1adiremos iconos a las <strong>nuevas opciones en admin bar de WordPress<\/strong>. Podremos utilizar los\u00a0<em>dashicons<\/em> que lleva integrados WordPress, o tambi\u00e9n los <a href=\"\/lista-completa-de-iconos-de-font-awesome\/\" title=\"Lista completa de iconos de Font Awesome\" rel=\"noopener noreferrer\" target=\"_blank\">iconos de <em>FontAwesome<\/em><\/a>.<\/p>\n<p>Solo tendremos que cambiar la opci\u00f3n &#8220;<em>title<\/em>&#8221; del c\u00f3digo anterior y poner el c\u00f3digo del icono deseado.<br \/>\n&nbsp;<br \/>\n<br \/>\n&nbsp;<\/p>\n<h3 style=\"text-align: center;\"><span style=\"text-decoration: underline;\">Ahora si. \u00bfC\u00f3mo <strong>a\u00f1adir nuevos elementos a la barra de admin de WordPress<\/strong>?<\/span><\/h3>\n<p>&nbsp;<br \/>\n<center><\/p>\n<p style=\"text-align: left;\">&#8211; Simplemente hemos de editar nuestro archivo <em>functions.php<\/em> y a\u00f1adir el siguiente c\u00f3digo.<\/p>\n<p style=\"text-align: left;\">&#8211; Por supuesto hemos de cambiar los enlaces a <em>midominio.com<\/em> (opci\u00f3n &#8220;<em>href<\/em>&#8220;) por los enlaces personalizados en cada uno de nuestros casos.<\/p>\n<p style=\"text-align: left;\">&#8211; Tambi\u00e9n podeis editar el campo &#8220;<em>title<\/em>&#8220;, y a\u00f1adir los items del men\u00fa que necesit\u00e9is.<\/p>\n<p style=\"text-align: left;\">&#8211; Tambi\u00e9n pueden cambiarse los iconos.<\/p>\n<p style=\"text-align: left;\">&#8211; Pod\u00e9is ver que este c\u00f3digo a\u00f1ade __ delante de los arrays. Puede ser utilizado junto al plugin de traducci\u00f3n WPML. De esta forma el addon &#8220;<em>string translation<\/em>&#8221; de WPML puede reconocer estas cadenas y permitir su traducci\u00f3n.<\/p>\n<p><\/center><\/p>\n<p>&nbsp;<\/p>\n<h3>Dicho y explicado todo esto, aqu\u00ed ten\u00e9is la <strong>forma de agregar opciones en admin bar de WordPress<\/strong>!<\/h3>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4>Espero que os sea de mucha utilidad. Y no seais malos&#8230; Compartid!<\/h4>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n\/\/ A\u00f1adimos un enlace y un submen\u00fa con tres opciones\r\nfunction link_simple_toolbars($wp_admin_bar) {\r\n    $link = array(\r\n        'id' => __('Opciones2'), \/\/ Identificador \u00fanico\r\n        'title' => __('<span class=\"ab-icon\"><\/span>ZONA DE USUARIO'), \/\/ Texto e icono del enlace\r\n        'href' => __('http:\/\/midominio.com\/login\/'), \/\/ URL de destino (si no queremos que apunte a ning\u00fan sitio, podemos dejarlo en blanco)\r\n        'meta' => array('class' => 'mi-clases') \/\/ Clase del elemento\r\n        );\r\n\r\n\r\n    $sublink1 = array(\r\n        'id'    => __('sublink11'), \/\/ Identificador \u00fanico\r\n        'parent' => __('Opciones2'), \/\/ Identificador del elemento superior\r\n        'title' => __('Perfil de usuario'), \/\/ T\u00edtulo del enlace\r\n        'href'  => __('http:\/\/midominio.com\/wp-admin\/profile.php'), \/\/ URL de destino\r\n        'meta'  => array(\r\n            'title' => __('Perfil de usuario'), \/\/ Atributo \"title\" del enlace\r\n            'target' => '_self', \/\/ Destino (\"_blank\" abrir\u00e1 el enlace en una p\u00e1gina o pesta\u00f1a nueva)\r\n            'class' => 'mi_link' \/\/ Clase del elemento\r\n            )\r\n        );\r\n \r\n\r\n   $sublink2 = array(\r\n        'id'    => __('sublink22'),\r\n        'parent' => __('Opciones2'), \/\/ Identificador del elemento superior\r\n        'title' => __('MODIFICAR PERFIL'),\r\n        'href'  => __('http:\/\/midominio.com\/editar-perfil-usuario\/'),\r\n        'meta'  => array(\r\n            'title' => __('MODIFICAR PERFIL'),\r\n            'target' => '_self',\r\n            'class' => 'mi_link'\r\n            )\r\n        );\r\n\t\r\n\r\n   $sublink3 = array(\r\n        'id'    => __('sub-linkk33'),\r\n        'parent' => __('Opciones2'), \/\/ Identificador del elemento superior\r\n        'title' => __('RESETEAR CONTRASE&amp;Ntilde;A'),\r\n        'href'  => __('http:\/\/midominio.com\/resetear-contrasena\/'),\r\n        'meta'  => array(\r\n            'title' => __('RESETEAR CONTRASE&amp;Ntilde;A'),\r\n            'target' => '_self',\r\n            'class' => 'mi_link'\r\n            )\r\n        );\r\n\r\n    $wp_admin_bar->add_node($link);\r\n    $wp_admin_bar->add_node($sublink1);\r\n    $wp_admin_bar->add_node($sublink2);\r\n\t$wp_admin_bar->add_node($sublink3);\r\n}\r\n\r\nadd_action('admin_bar_menu', 'link_simple_toolbars', 80); \/\/ 25 = En la primera posici\u00f3n (justo despu\u00e9s del logo)\r\n\r\n\r\n\r\n\/*\r\n * Estilos para el nuevo enlace\r\n *\/\r\nfunction prefix_toolbar_styles7() {\r\n    echo '<style>#wp-toolbar .mi-clases .ab-icon:before { content: \"\\f110\"; top: 2px; }<\/style>';\r\n}\r\nadd_action( 'admin_head', 'prefix_toolbar_styles7' );\r\n\r\n\r\n\r\n\/*\r\n * Funci\u00f3n para a\u00f1adir nueva opci\u00f3n con icono en la barra de administraci\u00f3n\r\n *\/\r\nfunction prefix_link_with_icons_in_toolbar6($wp_admin_bar) {\r\n    $args = array(\r\n        'id'    => __('mi-linkkk'), \/\/ Identificador\r\n        'title' => __('<span class=\"ab-icon\"><\/span>CONTACTA'), \/\/ Texto e icono del enlace\r\n        'href'  => __('http:\/\/midominio.com\/contacto\/'), \/\/ URL de destino\r\n        'meta'  => array('class' => 'mi-clase3') \/\/ Clase para poder editar los estilos\r\n        );\r\n    $wp_admin_bar->add_node($args);\r\n}\r\nadd_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar6', 100 ); \/\/ 25, si queremos que salga en primera posici\u00f3n\r\n\r\n\r\n\/*\r\n * Estilos para el nuevo enlace, y c\u00f3digo para el icono.\r\n *\/\r\nfunction prefix_toolbar_stylesss() {\r\n    echo '<style>#wp-toolbar .mi-clase3 .ab-icon:before { content: \"\\f348\"; top: 2px; }<\/style>';\r\n}\r\nadd_action( 'admin_head', 'prefix_toolbar_stylesss' );\r\n\r\n\r\n\r\n\/*\r\n * Funci\u00f3n para a\u00f1adir nueva opci\u00f3n e icono en la barra de administraci\u00f3n\r\n *\/\r\nfunction prefix_link_with_icons_in_toolbar7($wp_admin_bar) {\r\n    $args = array(\r\n        'id'    => __('salir'), \/\/ Identificador\r\n        'title' => __('<span class=\"ab-icon\"><\/span>SALIR'), \/\/ Texto e icono del enlace\r\n        'href'  => __('http:\/\/midominio.com\/?a=logout'), \/\/ URL de destino\r\n        'meta'  => array('class' => 'mi-clase4') \/\/ Clase para poder editar los estilos\r\n        );\r\n    $wp_admin_bar->add_node($args);\r\n}\r\nadd_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar7', 100 ); \/\/ 25, si queremos que salga en primera posici\u00f3n\r\n<\/pre>\n<p>&nbsp;<br \/>\nBueno el c\u00f3digo es bastante extenso y pod\u00e9is recortarlo para simplemente a\u00f1adir una opci\u00f3n por ejemplo, o modificarlo para a\u00f1adir otras diferentes.<br \/>\n&nbsp;<br \/>\n<br \/>\n&nbsp;<\/p>\n<h4>Si te ha sido \u00fatil, no dudes en compartirlo!<\/h4>\n<p>&nbsp;<\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo os voy a mostrar c\u00f3mo crear men\u00fas y nuevas opciones en el panel de admin en WordPress, para crear una barra de admin personalizada y elegante.<\/p>\n","protected":false},"author":1,"featured_media":5342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false},"categories":[157],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/posts\/8319"}],"collection":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/comments?post=8319"}],"version-history":[{"count":0,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/posts\/8319\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/media\/5342"}],"wp:attachment":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/media?parent=8319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/categories?post=8319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/tags?post=8319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}