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.
Tomado de; http://www.emenia.es/personaliza-wordpress-admin/
Sé el primero en comentar