Cuando estamos desarrollando una web en Wordpress, muchas veces algún cliente o nosotros mismos queremos cambiarle la apariencia a la zona de administración del sitio web.
Para ello podemos añadir o quitar funcionalidades o cambiar aspectos de diseño. Wordpress permite que podamos cambiar varias funcionalidades accediendo a sus hook. Un hook o gancho hace referencia a un evento que ocurre en Wordpress y que nosotros desde código podemos manipular.
Conociendo cual es el hook y en que momento se ejecuta podremos crear una función para que se ejecute cuando ocurra el evento hook determinado.
Un evento puede ser por ejemplo cuando se carga la pagina y se muestran las etiquetas <head></head>, podemos interceptar el hook admin_head y ejecutar una función para añadir por ejemplo una hoja de estilo en forma dinámica.
1. Añadir una hoja de estilo al administrador
Supongamos que deseamos incluir una hoja de estilo, entonces vamos al archivo functions.php y añadimos el siguiente código:
Existen dos eventos para gestionar los hooks en Wordpress:
Supongamos que queremos buscar una palabra clave y ponerla en negrita:
En la web de Wordpress tenemos todos los hook para consultar y ejemplo de cómo aplicarlos tanto:
Los Filter http:// elimina el menucodex.wordpress.org/Plugin_API/Filter_Reference
Los Action http:// elimina el menucodex.wordpress.org/Plugin_API/Action_Reference.
2. Modificar el logo de la pantalla de login
La pantalla de login de wordpress a muchos no les gusta y prefieren poner el de sus empresa o del proyecto web en vez del logo de WordPress encima del formulario.
Podemos modificar el logo a través del hook login_head añadiendo una función en el archivo functions.php de nuestra plantilla.
Aquí utilizaremos el hook admin_footer_text y crearemos una función en el archivo functions.php entonces podremos cambiar el texto:
Si queremos quitar opciones de menú de administrador para que no puedan ser accesibles, en muchos casos es útil para que alguien que no sabe administrar la web no pueda modificar la configuración o cambiar algo que rompa la web, entonces utilizaremos el hook admin_menu y crearemos la siguiente función.
Creamos la siguiente función para añadir funcionalidades a la barra de herramientas de Wordpress:
Vemos en la imagen como hemos personalizado e instalado distintos menú para facilitar el trabajo con nuestra web y además hemos creado nuevas funcionalidades como exportar un reporte que será un código php que deberemos crear y enlazar desde el menú en el panel de administración de wordpress.
Para crear los Post personalizados se utilizó el plugin Custom Post Type UI que se puede descargar e instalar en Wordpress desde el mismo administrador.
Para añadir los submenú veamos el siguiente código el id del menú superior es el que idica quien es el menú padre en este caso Autos:
Para ello podemos añadir o quitar funcionalidades o cambiar aspectos de diseño. Wordpress permite que podamos cambiar varias funcionalidades accediendo a sus hook. Un hook o gancho hace referencia a un evento que ocurre en Wordpress y que nosotros desde código podemos manipular.
Conociendo cual es el hook y en que momento se ejecuta podremos crear una función para que se ejecute cuando ocurra el evento hook determinado.
Un evento puede ser por ejemplo cuando se carga la pagina y se muestran las etiquetas <head></head>, podemos interceptar el hook admin_head y ejecutar una función para añadir por ejemplo una hoja de estilo en forma dinámica.
1. Añadir una hoja de estilo al administrador
Supongamos que deseamos incluir una hoja de estilo, entonces vamos al archivo functions.php y añadimos el siguiente código:
add_action('admin_head', 'nuevacss');
function nuevacss() {
echo '<link rel="stylesheet" type="text/css" href="directorio/estilo.css">';
}
Si quisiéramos añadir la hoja de estilo en el front de la web el hook será wp_headExisten dos eventos para gestionar los hooks en Wordpress:
- Action Hooks: Se usa comúnmente cuando se quiere ejecutar alguna función luego que ocurre un evento específico.
- Filter Hooks: Cuando ocurre un evento te permite pasar algún contenido a través de una función, normalmente se utiliza para modificar css o algún aspecto del diseño, como modificar texto o poner en negrita ciertas palabras en el contenido del post.
Supongamos que queremos buscar una palabra clave y ponerla en negrita:
function negritas($contenido) {
$contenido = preg_replace("/(palabra clave)/i", "<b>$1</b>", $contenido);
return $content;
}
add_filter("the_content", "negritas");
Esto significa que cuando aparezca la palabra clave en el contenido esta se vera en negrita automaticamente.En la web de Wordpress tenemos todos los hook para consultar y ejemplo de cómo aplicarlos tanto:
Los Filter http:// elimina el menucodex.wordpress.org/Plugin_API/Filter_Reference
Los Action http:// elimina el menucodex.wordpress.org/Plugin_API/Action_Reference.
2. Modificar el logo de la pantalla de login
La pantalla de login de wordpress a muchos no les gusta y prefieren poner el de sus empresa o del proyecto web en vez del logo de WordPress encima del formulario.
Podemos modificar el logo a través del hook login_head añadiendo una función en el archivo functions.php de nuestra plantilla.
function milogo() {
echo '<style type="text/css">
h1 a { background-image: url('.get_bloginfo('template_directory').'/images/logonuevo.png); } </style>';
}
add_action('login_head', 'milogo')
3. Modificar el pie de página del panel de administraciónAquí utilizaremos el hook admin_footer_text y crearemos una función en el archivo functions.php entonces podremos cambiar el texto:
function cambiatexto() {
echo '©2015 Copyright Nombre web.
Todos los derechos reservados –
Diseñada por <a href="http:// elimina el menuwww.midominio.com">Miempresa</a>'; }
add_filter('admin_footer_text', 'cambiatexto');
4. Eliminar opciones del menú de administradorSi queremos quitar opciones de menú de administrador para que no puedan ser accesibles, en muchos casos es útil para que alguien que no sabe administrar la web no pueda modificar la configuración o cambiar algo que rompa la web, entonces utilizaremos el hook admin_menu y crearemos la siguiente función.
function elimina_menu() {
elimina_menu('edit.php'); // elimina el menu elimina el menu Entradas
elimina_menu('upload.php'); // elimina el menu Multimedia
elimina_menu('link-manager.php'); // elimina el menu Enlaces
elimina_menu('edit.php?post_type=page'); // elimina el menu Páginas
elimina_menu('edit-comments.php'); // elimina el menu Comentarios
elimina_menu('themes.php'); // elimina el menu Apariencia
elimina_menu('plugins.php'); // elimina el menu Plugins
elimina_menu('users.php'); // elimina el menu Usuarios
elimina_menu('tools.php'); // elimina el menu Herramientas
elimina_menu('options-general.php'); // elimina el menu Ajustes
}
// Quitar para todos los usuarios inclusive para el administrador al mostrar menú
add_action('admin_menu', 'elimina_menu');
//Quitar para todos los usuarios excepto para el administrador al iniciar el administrador
if (!current_user_can('manage_options')) {
add_action( 'admin_init', 'elimina_menu' );
}
Añadir elementos y opciones en la barra de herramientas del panel de administración.
Creamos la siguiente función para añadir funcionalidades a la barra de herramientas de Wordpress:
function cambiarherramientas($barra) {
global $current_user; //Variable global con el dato del usuario logueado actualmente
//Variables para asignar las url de las distintas paginas en la barra de herramientas
$urlhome =get_site_url();
$listaclientes =get_admin_url() . '/edit.php?post_type=cliente'; //Lista de clientes
$anadircliente = get_admin_url() . '/post-new.php?post_type=cliente'; //Añadir un auto
$listadoautos = get_admin_url() . '/edit.php?post_type=auto'; //Lista de autos
$anadirauto = get_admin_url() . '/post-new.php?post_type=autos'; //Añadir un auto
$urlexportar= get_admin_url() . '/exportar.php'
//Elimina el logo de Wordpress
$barra->remove_menu('wp-logo');
// Elimina el icono de notificación de actualizaciones
$barra->remove_menu('updates');
//Añadimos varios menu con funcionalidades en la barra de herramientas
$barra->add_node(array(
'id' => 'ir_home',
'title' => 'Vista Web Home',
'href' => $urlhome,
'meta' => array('target' => 'home')
));
$barra->add_node(array(
'id' => 'clientes',
'title' => 'Clientes',
'href' => $urlclientes,
'meta' => array('target' => 'cliente')
));
$barra->add_node(array(
'id' => 'autos',
'title' => 'Autos',
'href' => $listadoautos,
'meta' => array('target' => 'autos')
));
$barra->add_node(array(
'parent' => 'clientes',
'id' => 'nuevocliente',
'title' => 'Añadir cliente',
'href' => $anadircliente,
'meta' => array('target' => 'nuevocliente')
));
$barra->add_node( array(
'parent' => 'autos',
'id' => 'nuevoauto',
'title' => 'Añadir Autos',
'href' => $anadirauto,
'meta' => false
));
$barra->add_node( array(
'parent' => 'autos',
'id' => 'exportar',
'title' => 'Exportar Reporte',
'href' => $urlexportar,
'meta' => false
));
}
add_action('admin_bar_menu', 'cambiarherramientas', 999);
Vemos en la imagen como hemos personalizado e instalado distintos menú para facilitar el trabajo con nuestra web y además hemos creado nuevas funcionalidades como exportar un reporte que será un código php que deberemos crear y enlazar desde el menú en el panel de administración de wordpress.
Para crear los Post personalizados se utilizó el plugin Custom Post Type UI que se puede descargar e instalar en Wordpress desde el mismo administrador.
Para añadir los submenú veamos el siguiente código el id del menú superior es el que idica quien es el menú padre en este caso Autos:
$barra->add_node(array(
'id' => 'autos',
'title' => 'Autos',
'href' => $listadoautos,
'meta' => array('target' => 'autos')
));
Para añadirle un submenú deberemos indicarle al nuevo menú quien es el menú padre o menú de jerarquía superior para ello utilizamos la propiedad parent.
$barra->add_node( array(
'parent' => 'autos',
'id' => 'nuevoauto',
'title' => 'Añadir Autos',
'href' => $anadirauto,
'meta' => false
));
De esta forma podríamos también luego extender las opciones de nuestro menú para tener un sub sub menú. Veamos un ejemplo partiendo del submenú Exportar, le añadimos opciones de exportación como Excel y PDF.
$barra->add_node( array(
'parent' => 'autos',
'id' => 'exportar',
'title' => 'Exportar Reporte',
'href' => $urlexportar,
'meta' => false
));
$barra->add_node( array(
'parent' => 'exportar',
'id' => 'exportarexcel',
'title' => 'Exportar Excel',
'href' => $urlexportarexcel,
'meta' => false
));
$barra->add_node( array(
'parent' => 'exportar',
'id' => 'exportarpdf',
'title' => 'Exportar PDF',
'href' => $urlexportarpdf,
'meta' => false
));
Conclusión
Como hemos visto podemos personalizar nuestro panel de administración o backend de WordPress mediante hooks que nos brinda el Api de wordpress pudiendo añadir o quitar funcionalidades.
Así podemos darle el toque personal al panel de administración de WordPress según el usuario si añadimos la posibilidad de identificar a quien esta logueado.
Los desarrolladores más experimentados recomiendan evitar que los usuarios puedan utilizar la barra de herramientas por defecto que tiene Wordpress en el panel de administración, lo que recomiendan es quitar todo lo que pueda ser configuración de la web como ajustes, plugins, temas y dejarle al usuario lo que necesite para añadir y publicar contenido, dejando todas las tareas de configuración y las actualizaciones a usuarios más experimentados o a desarrolladores.
Así podemos darle el toque personal al panel de administración de WordPress según el usuario si añadimos la posibilidad de identificar a quien esta logueado.
Los desarrolladores más experimentados recomiendan evitar que los usuarios puedan utilizar la barra de herramientas por defecto que tiene Wordpress en el panel de administración, lo que recomiendan es quitar todo lo que pueda ser configuración de la web como ajustes, plugins, temas y dejarle al usuario lo que necesite para añadir y publicar contenido, dejando todas las tareas de configuración y las actualizaciones a usuarios más experimentados o a desarrolladores.
