Hay ocasiones en las que necesitamos variar el área de administración de WordPress para hacerlo más amigable, o para incluir (o excluir) funcionalidades con vistas a su uso por un cliente o una tercera persona.
Vamos a ver una serie de funciones que nos permitirán precisamente eso: adaptar un poco el gestor de WordPress. Vamos a verlas una a una.
Cambia el logo de la pantalla de login
En la pantalla de login del gestor sale el logo de WordPress encima del formulario. Podemos poner el logo que queramos en su lugar. Para ello añadimos esta función en el archivo functions.php de nuestro tema:
|
1 2 3 4 5 6 7 8 |
////////////////////////////////////////////////////////////////////////////////////////// // Logo personalizado en la página de login function custom_login_logo() { echo '<style type="text/css"> h1 a { background-image: url('.get_bloginfo('template_directory').'/images/logo.png) !important; } </style>'; } add_action('login_head', 'custom_login_logo'); |
La imagen (en este caso logo.png) la guardaríamos en el directorio “images” de nuestro tema.
Cambia el pie de página del panel de administración
El código iría igualmente en el archivo functions.php de vuestro tema. Esto os permite poner la frase que queráis, por ejemplo:
|
1 2 3 4 5 6 |
////////////////////////////////////////////////////////////////////////////////////////// // Cambiar el pie de pagina del panel de Administración function change_footer_admin() { echo '©2011 Copyright NOMBRE DE LA EMPRESA. Todos los derechos reservados - Web creada por <a href="http://www.emenia.es">Emenia</a>'; } add_filter('admin_footer_text', 'change_footer_admin'); |
Borra opciones del menú de administración
Igualmente, pegamos el código en functions.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
////////////////////////////////////////////////////////////////////////////////////////// // Borrar opciones de admin add_action('admin_menu', 'my_remove_menu_pages'); function my_remove_menu_pages() { remove_menu_page('edit.php'); // Entradas remove_menu_page('upload.php'); // Multimedia remove_menu_page('link-manager.php'); // Enlaces remove_menu_page('edit.php?post_type=page'); // Páginas remove_menu_page('edit-comments.php'); // Comentarios remove_menu_page('themes.php'); // Apariencia remove_menu_page('plugins.php'); // Plugins remove_menu_page('users.php'); // Usuarios remove_menu_page('tools.php'); // Herramientas remove_menu_page('options-general.php'); // Ajustes } |
Incluso podemos quitarlo sólo si no eres administrador, por ejemplo. En este caso quitamos “Multimedia”:
|
1 2 3 4 5 6 7 8 9 |
// Eliminamos Multimedia si no eres Administrador if (!current_user_can('manage_options')) { add_action( 'admin_init', 'more_remove_menu_page' ); function more_remove_menu_page() { remove_menu_page('upload.php'); // Multimedia } } |
Elimina metaboxes de las entradas
A la hora de crear una entrada en WordPress aparecen un montón de ventanas para introducir contenido o para mostrar información. Muchas veces nos sobran muchas de ellas y sólo generan confusión a usuarios que no sean conocedores de WordPress. Poniendo este código en functions.php podemos eliminar las que nos parezcan prescindibles:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
///////////////////////////////////////////////////////////////////////////////////////// // Eliminamos metaboxes de los posts if (is_admin()) : function my_remove_meta_boxes() { if(!current_user_can('administrator')) { remove_meta_box('linktargetdiv', 'link', 'normal'); remove_meta_box('linkxfndiv', 'link', 'normal'); remove_meta_box('linkadvanceddiv', 'link', 'normal'); remove_meta_box('postexcerpt', 'post', 'normal'); remove_meta_box('trackbacksdiv', 'post', 'normal'); remove_meta_box('commentstatusdiv', 'post', 'normal'); remove_meta_box('postcustom', 'post', 'normal'); remove_meta_box('commentstatusdiv', 'post', 'normal'); remove_meta_box('commentsdiv', 'post', 'normal'); remove_meta_box('revisionsdiv', 'post', 'normal'); remove_meta_box('authordiv', 'post', 'normal'); remove_meta_box('sqpt-meta-tags', 'post', 'normal'); } } add_action( 'admin_menu', 'my_remove_meta_boxes' ); endif; |
Como veis la función remove_meta_box tiene tres parámetros: el primero es el “id” de la ventana que queremos eliminar, el segundo puede ser “page”, “post” o “link” dependiendo donde estemos y el tercero “normal”, “advanced” o “side” dependiendo dónde esté la ventana. En esta función sólo se quitan si no eres administrador. Si elimináis ese condicional se quitarán en todos los casos. Podéis ver qué es cada ventana en función de su “id” en el código HTML.
Elimina metaboxes del escritorio
También en el escritorio hay unas cuantas ventanas que nos pueden sobrar. También para functions.php el código sería:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
////////////////////////////////////////////////////////////////////////////////////////// // Eliminamos metaboxes del Dashboard function example_remove_dashboard_widgets() { remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' ); remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' ); remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' ); remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' ); remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' ); remove_meta_box( 'dashboard_browser_nag', 'dashboard', 'normal' ); } add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' ); |
Aquí igualmente las podéis identificar por el ID de la ventana que queráis eliminar.
Fuerza el escritorio a una sola columna
Puede ser que hayáis quitado tantas cosas del escritorio que os queden las dos columnas originales pero tengáis sólo una ocupada. Podéis forzar al escritorio a que tenga una sola columna con esta función:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
////////////////////////////////////////////////////////////////////////////////////////// // Forzamos el escritorio a una sola columna function so_screen_layout_columns( $columns ) { $columns['dashboard'] = 1; return $columns; } add_filter( 'screen_layout_columns', 'so_screen_layout_columns' ); function so_screen_layout_dashboard() { return 1; } add_filter( 'get_user_option_screen_layout_dashboard', 'so_screen_layout_dashboard' ); |
Crea una ventana nueva en el escritorio
Como no siempre es sólo quitar, hay veces que también hay que añadir. Si queréis introducir una nueva ventana en el escritorio con algún texto (por ejemplo un texto de bienvenida), podéis poner en functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
////////////////////////////////////////////////////////////////////////////////////////// // Widget para el Dashboard function custom_dashboard_widget() { ?> <img src="<?php bloginfo('template_directory'); ?>/images/logo.png" /> <h1>¡Hola! Este es tu área personal en la web XXXX</h1> <p>Aquí va todo el texto que quieras, con todo el HTML que precises</p> <?php } function add_custom_dashboard_widget() { wp_add_dashboard_widget('custom_dashboard_widget', 'Bienvenido al editor de la web de XXXX', 'custom_dashboard_widget'); } add_action('wp_dashboard_setup', 'add_custom_dashboard_widget'); |
Como veis utilizamos la función de WordPress wp_add_dashboard_widget. Lamentablemente no parece que podamos elegir la ubicación de nuestro widget dentro del escritorio. Aparecerá abajo de todo. Si la posición es importante, podéis sustituir esta función por la normal de “add_meta_box”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
////////////////////////////////////////////////////////////////////////////////////////// // Widget para el Dashboard function custom_dashboard_widget() { ?> <img src="<?php bloginfo('template_directory'); ?>/images/logo.png" /> <h1>¡Hola! Este es tu área personal en la web XXXX</h1> <p>Aquí va todo el texto que quieras, con todo el HTML que precises</p> <?php } add_action( 'wp_dashboard_setup', 'my_dashboard_setup_function' ); function my_dashboard_setup_function() { add_meta_box( 'my_dashboard_widget', 'Bienvenido al editor de la web de XXXXX', 'custom_dashboard_widget', 'dashboard', 'normal', 'high' ); } |
Esto está muy bien, pero quizás queramos añadir estilos propios para este código HTML que hemos añadido. ¿Cómo lo haríamos? Podemos crear un plugin. Añadimos una carpeta en la carpeta wp-content/plugins que vamos a llamar admin-escritorio. Dentro de esta carpeta creamos dos archivos, uno que se llame admin-escritorio.php y el otro admin-escritorio.css.
El primero, admin-escritorio.php sería:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php /* Plugin Name: Estilos personalizados Widget Escritorio Admin Plugin URI: http://www.emenia.es Description: Añade una hoja de estilo para el Escritorio del Admin de Wordpress Author: Emenia Version: 1.0 Author URI: http://www.emenia.es */ function my_admin_head() { echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('admin-escritorio.css', __FILE__). '">'; } add_action('admin_head', 'my_admin_head'); ?> |
A continuación podéis poner la función que vimos más arriba, que contiene el código HTML. Como veis hemos incluido la hoja de estilo, que tendrá el nombre admin-escritorio.css:
|
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 |
/* Document : admin-escritorio Created on : 11-ene-2012, 8:06:12 Author: Emenia Author URI: http://www.emenia.es Email: info@emenia.es Description: Estilos para el admin de Wordpress */ .icon32.icon-dashboard, #icon-index, .index-php h2, .index-php h3.hndle { display: none; } .bienvenido h1 { font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif; font-size: 32px; font-weight: normal; line-height: 1.2; margin: .1em 0 .8em; } .index-php .inside h1, .index-php .inside h2, .index-php .inside p, .index-php .inside .button-primary { margin-left: 15px;} .index-php .inside h2 { display: block;} .index-php .inside h2 { margin: 10px 0 10px 15px;} |
Bueno, esos estilos no tendrán mucho sentido en este caso. Son de una web que he hecho recientemente. Podréis cambiarlos por otros que necesitéis en función del código HTML que hayáis puesto en la función que vimos más arriba.
A propósito, una vez añadido el código del plugin no os olvidéis de activarlo!
Elimina y añade opciones de la barra de Administración
Desde la versión 3.3 de WordPress podemos personificar la barra de administración de una manera distinta a como se hacía hasta ahora. Hay un artículo muy bueno de Craig Buckler que nos lo muestra. Como veis se usan los métodos “remove_node” para eliminar y “add_node” para añadir. En este último caso hay que pasar un array con varios parámetros:
- id — el id que aparecerá en el elemento HTML y que lo identifica
- title — el texto que aparecerá en el menú de la barra
- parent — el ID de la opción superior del menú, para el caso de submenú (opcional)
- href — el enlace hacia donde irá el usuario al hacer click (opcional)
- group — true (verdadero) si es un grupo (opcional)
- meta — un array que incluye otras etiquetas, como: html, class, onclick, target, title, tabindex
Pondremos en el archivo functions.php;
|
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 |
////////////////////////////////////////////////////////////////////////////////////////// // Eliminar opciones de la barra del administrador function change_toolbar($wp_toolbar) { global $current_user; $instrucciones = get_admin_url() . '/admin.php?page=instrucciones'; $ver_prendas = get_admin_url() . '//edit.php?post_type=ropa'; $anadir_prendas = get_admin_url() . '//post-new.php?post_type=ropa'; $volver = esc_url( get_author_posts_url( $current_user->ID ) ); $wp_toolbar->remove_node('wp-logo'); $wp_toolbar->remove_node('comments'); $wp_toolbar->remove_node('new-content'); $wp_toolbar->remove_node('site-name'); $wp_toolbar->add_node(array( 'id' => 'volver_web', 'title' => 'Ir a mi página en la web', 'href' => $volver, 'meta' => array('target' => 'volver') )); $wp_toolbar->add_node(array( 'id' => 'myhelp', 'title' => 'Ayuda', 'href' => $instrucciones, 'meta' => array('target' => 'help') )); $wp_toolbar->add_node(array( 'id' => 'prendas', 'title' => 'Mi ropa', 'href' => $ver_prendas, 'meta' => array('target' => 'ver') )); $wp_toolbar->add_node(array( 'id' => 'nueva_prenda', 'title' => 'Añadir ropa', 'href' => $anadir_prendas, 'meta' => array('target' => 'anadir') )); } add_action('admin_bar_menu', 'change_toolbar', 999); |
Como veréis hemos añadido varias opciones. Una es una pestaña que crearemos más adelante que llamamos “Ayuda”. Otras dos que son de posibles entradas personalizadas de “Ropa” y la última que lleva al usuario a su página de autor de la web (quizás estos ejemplos no os valgan de nada, pero al provenir de un caso real quizás os den alguna idea). Por otro lado hemos eliminado con remove_node las opciones que vienen por defecto.
Crear una nueva pestaña en el menú de administración
Imagina que quieres crear una nueva pestaña en el menú que está a la izquierda en el panel de administración de WordPress. Vamos a suponer que queremos crear una página de instrucciones para nuestro cliente. Para ello podemos crear un plugin. Abrimos en wp-content/plugins una carpeta que se llame “instrucciones” y dentro creamos un archivo que se llame “instrucciones.php” que sería así:
|
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 |
<?php /* Plugin Name: Instrucciones de uso Plugin URI: http://www.emenia.es Description: Para añadir una nueva opción en el menú con instrucciones Version: 1.0 Author: Emenia Author URI: http:www.emenia.es License: GPLv2 */ add_action('admin_menu', 'my_plugin_menu'); function my_plugin_menu() { add_menu_page( 'Instrucciones', 'Instrucciones', 'edit_posts', 'instrucciones', 'my_plugin_options' ); } function my_plugin_options() { if (!current_user_can('edit_posts')) { wp_die( __('No tiene suficientes permisos para acceder a esta página.') ); } ?> <div class="wrap"> <h1>Instrucciones</h1> <!-- Aquí va todo el código HTML que preciséis --> </div> <?php } ?> |
Si queréis que tenga estilos podéis incluirlos en el propio archivo HTML en el caso de que no sean muy complejos para ganar sencillez. Podéis también aprovechar la hoja de estilos que creamos anteriormente.
No os olvidéis de activar el plugin.
Pon iconos personalizados en el menú del panel de administración
Si quieres puedes cambiar los iconos del panel de administración por otros más de tu gusto. Esto es especialmente útil para las entradas personalizadas. Necesitarás poner en functions.php esta función:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
///////////////////////////////////////////////////////////////////////////////////////// // Iconos personalizados para la entrada personalizada add_action( 'admin_head', 'wpt_portfolio_icons' ); function wpt_portfolio_icons() { ?> <style type="text/css" media="screen"> #menu-posts-ropa .wp-menu-image { background: url(<?php bloginfo('template_url') ?>/images/nuevo-icono.png) no-repeat 6px 6px !important; } #menu-posts-ropa:hover .wp-menu-image, #menu-posts-ropa.wp-has-current-submenu .wp-menu-image { background-position:6px -16px !important; } #icon-edit.icon32-posts-ropa {background: url(<?php bloginfo('template_url') ?>/images/nuevo-icono-32.png) no-repeat;} </style> <?php } |
Como veis, en este caso el icono que ponemos se llama “nuevo-icono.png”. El icono debería tener un tamaño de 28×28 píxeles. El icono interior (una vez se ha hecho click y entramos en su página) tiene 32×32. Ambos se guardan, en este caso, en el directorio “images” de tu tema. En esta función tendréis que cambiar los id (que en el ejemplo son #menu-posts-ropa, #menu-posts-ropa:hover y #icon-edit.icon32-posts-ropa) por los correspondientes a la opción para la cual queréis cambiar el icono.
Campos personalizados, entradas personalizadas, cambios en el perfil de usuarios…..
Hay muchos más cambios que puedes realizar en el administrador de WordPress, aparte de los que acabamos de comentar, y que afectan a las entradas, a las páginas y a los perfiles de usuario.
Como los hemos visto en artículos anteriores, no voy a entrar en ellos. Haced click en la nube de etiquetas en “WordPress” y veréis artículos sobre los Usuarios, Taxonomías, Campos Personalizados, Entradas Personalizadas, etc..
¡Espero que este artículo os haya sido útil! ¡Os animo a que aportéis más trucos para personalizar el administrador de WordPress!
Pingback: Cómo editar la nueva barra de herramientas en WordPress 3.3 y personalizar el menú
Excelente artículo, precisamente necesitaba saber como añadir nuevas opciones al panel de administración.
Muchas gracias.
Hola Juan. También me parece un artículo excelente por toda la documentación y el cuidado que has tenido en explicarlo todo tan bien. Es un gran descubrimiento Emenia y vuestro blog.
Muchas gracias ))
Me ha funcionado el código para “Crear una nueva pestaña en el menú de administración”.
Pero mi web deja de verse cuando en functions.php pongo cualquiera de los códigos para “Borrar opciones del menú de administración”
Seguro que estoy haciendo algo mal; estoy comenzando con WordPress.
Pues eso, que va perfectamente
Muchas gracias por la info!! ahora también te sigo en twitter y google+
me has ayudado mucho de verdad!! lo único que no acabo de ver es como puedo llamar a una función javscript desde una opción del admin bar, un saludo compañero!!
Impresionante artículo!!!
un millón de gracias por la dedicación y por las explicaciones. Creo que a mas de uno nos va a venir de perlas!
Gracias!!
Gracias por compartir tan valiosa información. El plugin de añadir opciones al menu es la base para poder integrar en el WordPress cualquier artilugio de programación que se disponga. En mi caso va a permitir integrar en el WordPress un propio CRM. Genial!!
buenisimo
El mejor artículo de toda la web que reune todos esos temas tan rebuscados… ¡felicitaciones!
Gracias Erik!
Hola,
Interesante tus artículos y te estoy siguiendo
Mi duda es, ¿este tipo de modificaciones serán en el núcleo del CMS con lo cual se perderán en la actualización?. Lo interesante sería tener algún tipo de plugin que pueda sobreescribir estos ficheros y que quedara en una capa superior nuestras modificaciones. Es decir, que fuera parte de una plantilla por ejemplo.
gracias,
Hola Richard,
No, todo lo que esté en la carpeta de tu tema (como el archivo functions.php) no se borra al actualizar, lo mismo que los plugins que sólo se borran o modifican al actualizar ese plugin en concreto.
amigo toda la info esta buenisima, super interesante funcionan perfecto.
Sabes necesito de tu ayuda. Cree en el menu de admin una pagina llamada nueva entrada pero me gustaría carga la pagina post-new.php?post_type=page dentro de esta. Tienes algún método o código que me ayude a realizar esto.
o de cargar un php externo que muestre todo el contenido.
Muchas gracias
Curradísimo artículo. Muy interesante y bien explicado. Ahora a dedicarle un tiempo e ir probando todas estas propuestas.
Gracias
Un artículo utilísimo.
No he encontrado en ningún otro sitio tantos tips funcionales como en este.
Se gana mucho tiempo encontrando estas aclaraciones una detras de otra.
Además tienes una forma muy clara de explicarlo para los que no somos programadores.
Genial el post pero por ejemplo con “Borrar opciones del menú de administración” le veo un problema y es que cuando le quito las opcines de menu me lo quita incluso para el usuaro que está como ADMINITRADOR. Lo ideal sería que se pudiera hacer para un perfil de usuario determinado o al menos que no le desaparezcan al adminsitrador.
Muchas gracias por tu articulo, me ha servido mucho, llevaba dias buscando documentación y con tus pasos ahora entiendo mucho mejor las cosas, saludos!
Excelente información!!!
Gracias por compartir este conocimiento
Saludos!!
Excelente artículo, has logrado reunir muchas funciones utiles evitando usar plugins.
Gracias
Excelente tutorial, donde mas aqui pues XD.
Lo voy ha implementar varios de ellos en mi thema function, para futuros colaboradoes. incluso para futuros clientes al desarrollarles la administracion mas simple.
Gracias por este excelente aporte a la comunidad que sigue wordpress.
Despues de haber probado varios de los TIPS ,
tengo una pequeña duda , lo que sucede es que quiero eliminar estas usando WORDPRESS 3.42
Una entrada muy útil y bastante intersante.
En ella se explica cómo quitar el apartado multimedia si no se es el administrador. Pero, cómo sería el código para permitir que los usuarios tengan sólo tengan acceso a añadir una nueva entrada y no a todas? Cuál es su página php que hay que incluir en el código?
Muchisimas gracias