Home
WordPress: Cómo personalizar la zona de administración mediante css

WordPress: Cómo personalizar la zona de administración mediante css

En el siguiente artículo veremos cómo podemos personalizar nuestra zona de administración en WordPress mediante css. La utilidad de este artículo reside en que a través de este método podremos ajustar nuestro backend o panel de administración de WordPress a nuestro gusto, cambiando colores, tipografías, ocultando elementos, etc.

Descargar el plugin completo en el que se han añadido más funciones de ejemplo por un café (1,50€).

CREACIÓN DEL PLUGIN PARA MODIFICAR APARIENCIA BACKEND WORDPRESS

En primer lugar comentar que el proceso lo haremos mediante un plugin para WordPress muy sencillo que crearemos y al que le añadiremos las correspondientes funciones para darle la funcionalidad que deseamos.Es aconsejable realizar el proceso en una instalación de WordPress en servidor local por aquello de trabajar más tranquilos.

El proceso es el siguiente: crearemos una carpeta con el nombre que deseemos en la carpeta de plugins, en este caso le he llamado admin-personalizado, ya veis que he usado un nombre descriptivo.

Dentro de la misma carpeta creamos un fichero php al que llamaremos de igual forma que a la carpeta. Aquí es dónde guardaremos nuestras funciones del plugin que nos permitirá cambiar la apariencia de nuestro panel de WordPress.

Declaramos nuestro plugin como podeis ver a continuación:

<?php
/*
Plugin Name: CSS Personalizado para el backend
Plugin URI: https://www.santinavarro.es
Description: Añade una o varias hojas de estilo para el backend
Author: Santi Navarro
Version: 1.0
Author URI: https://www.santinavarro.es
*/
?>

Una vez declarado y guardado el fichero podemos ir a nuestro backend, confirmar que lo reconoce en la sección de plugins y de paso podemos activarlo para ver que conecta bien.

Los siguientes pasos ya tratan de cómo crear las funciones correspondientes y los ficheros css que podremos cargar, tras ser creados.

CREACIÓN DEL FICHERO CSS PARA CAMBIAR APARIENCIA

Ahora ya podemos hacer un fichero css en el mismo directorio de nuestro php al que le podemos llamar igual que al plugin, ¿por qué no?. Aquí es dónde guardaremos nuestros estilos generales para todo el backend de WordPress personalizado que estamos creando.

Una vez creado el css ya estamos en disposición de crear nuestra primera función que cargará el css.

Para el ejemplo que estamos tratando pondremos el condicionante que para que cargue el css personalizado el usuario debe tener una ID de usuario diferente a 1. Si tiene ID igual a 1 no cargará nada.

FUNCIÓN PARA CARGAR CSS EN LA ZONA DE ADMINISTRACIÓN

La función podemos verla a continuación, se han comentado algunas líneas con el objetivo de facilitar la comprensión, de igual forma se disponen las URL de las funciones y variables globales de WordPress para más información.

<?php
/*GENERAL - Carga una hoja de estilos general para todo el backend*/
function estilo_general_backend() {
        global $current_user;
        get_currentuserinfo();
        /* http://codex.wordpress.org/Function_Reference/get_currentuserinfo */
        if ($current_user->ID != 1){
        /* Si la ID del usuario es diferente al valor de ID=1 carga el css con la ruta referida a la carpeta del actual plugin 
- http://codex.wordpress.org/Function_Reference/plugins_url */
        echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('admin-personalizado.css', __FILE__). '">';
    }
}
add_action('admin_head', 'estilo_general_backend');
?>

Como vemos esta función comprueba la ID del usuario, si la comprobación es exitosa añade el css al head del panel de administración de WordPress, con lo que mostrará los estilos que añadamos al fichero admin-personalizado.css.

Teniendo el plugin activado podemos comprobar que lo esta cargando de dos formas: la primera, desde el panel de administración hacemos click derecho sobre el mismo y seleccionamos la opción Ver código fuente. Cuando se abra la ventana inspeccionamos el head y comprobamos que está cargando el css.

La segunda opción es añadir cualquier regla css al elemento que deseemos y comprobar visualmente que cambia, nos podemos ayudar de la herramienta Firebug si lo deseamos para inspeccionar los elementos o con el inspector que traen por defecto los navegadores.

Realizada la comprobación ya podemos empezar a personalizar el panel de administración de nuestro WordPress mediante el css.

AÑADIR OTRO CSS SEGÚN LA PÁGINA DEL ADMIN

Ahora bien, nuestro backend se conforma de diferentes páginas que nos sirven para realizar diferentes tareas, crear páginas, editar páginas, crear categorías, editarlas, etc.
En estas páginas se repiten clases css por lo que posiblemente hayan reglas que sobreescribamos que no nos sirvan para todo el entorno del backend y que deseemos que las páginas estén modificadas en apariencia de forma diferente.

Pongamos el caso que deseamos ocultar un elemento que repite clase en otras páginas del backend.

Pero no hay problema para esto ya que según la página que estemos visualizando tenemos la posibilidad de cargar un css diferente al general y es lo que vamos a ver a continuación.

IDENTIFICACIÓN DE LA PÁGINA ACTUAL DESDE EL ADMIN

Un punto importante que no debo pasar por alto es comentar que para saber en qué página nos encontramos del panel de administración es ver la URL que marca nuestro navegador en su parte superior. Ahí es donde fácilmente podemos identificar qué página estamos visualizando en ese momento.

Si nos encontramos en el Escritorio no marcará ninguna página ya que es el index. Pero vamos a poner el ejemplo que hemos clicado la sección de Entradas, si nos fijamos en la URL pondrá lo siguiente:

http://midominio.es/wp-admin/edit.php

Por lo que viendo la URL y fijandonos en la parte final podemos afirmar que nos encontramos en la página de edit.php.

VARIABLE GLOBAL $pagenow

Ahora bien, cómo identificar la página a través de php en WordPress. Bien, WordPress nos ofrece la variable global $pagenow, nos facilita comprobar la página del backend de WordPress que estamos visualizando y que emplearemos en la siguiente función.

Ahora nuestros condicionantes van a ser dos, por un lado qué página estamos visualizando y por el otro la ID del usuario que sea diferente a 1. Además para la modificación en apariencia de éstas páginas en particular lo adecuado es crear un nuevo css, por lo que crearemos un nuevo css con un nombre descriptivo y que cargaremos desde la función que vemos a continuación:

<?php
/*NAVEGACIÓN - Carga una hoja de estilos particular para la página nav-menus.php del backend */
function estilo_nav_menus(){
		global $pagenow,$current_user;
		/* $pagenow - https://codex.wordpress.org/Global_Variables */
		get_currentuserinfo();
		if (( $pagenow == 'nav-menus.php')&&($current_user->ID != 1)){
			/* Comprobamos que la página actual es nav-menus.php y que la ID del usuario es diferente a 1 */
			echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('nav-menus-admin.css', __FILE__). '">';
		}
}
add_action('admin_head' , 'estilo_nav_menus' );
?>

Para esta función deseamos modificar la visualización en la página de nav-menus.php y cargamos el nav-menus-admin.css. Podemos hacer la comprobación de igual forma que anteriormente para ver que nos carga el fichero.

AÑADIR CSS SEGÚN VALOR PASADO POR $_GET

Finalmente en otros casos desde el panel administración de WordPress se muestran las páginas del backend tras pasar el valor de la variable $_GET.

Si por ejemplo estamos en la sección de categorías y nos fijamos en la URL, veremos la siguiente dirección:

http://midominio.es/wp-admin/edit-tags.php?taxonomy=category

De ahí podemos deducir que la página que se está mostrando parte de la página edit-tags.php y que le está pasando el valor category a taxonomy por $_GET para mostrar la página.

Por lo que habrá que añadir esto mismo a nuestro condicionante además del condicionante de la ID para que cargue el correspondiente css en la página que estamos visualizando. Añadiremos pues las reglas que precisamos.

De igual forma que en los anteriores casos crearemos un nuevo fichero css que es el que cargaremos en esta página.

A continuación escribimos la función correspondiente que cargará el css en estos casos:

<?php
/*CATEGORIAS - Carga una hoja de estilos en las categorías*/
function estilo_edita_categorias(){
		global $pagenow,$current_user;
		get_currentuserinfo();
		if (( $pagenow == 'edit-tags.php' ) && ($_GET['taxonomy'] == 'category')&&($current_user->ID != 1)){
			/* Comprobamos que la página actual es edit-tags.php, 
			que la taxonomía es igual a categoría y que la ID del usuario es diferente a 1  */
			echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('editar-categorias.css', __FILE__). '">';
		}
}
add_action('admin_head' , 'estilo_edita_categorias' );
?>

SUBIR EL FICHERO DE PERSONALIZACIÓN DESDE EL THEME ACTIVO

Según me preguntaban en los comentarios del post, para aquellos que lo deseen también es posible subir a WordPress del servidor el CSS de personalización general del backend desde el theme que esté actualmente activado.

Para esto debereis agregar el fichero CSS admin-personalizado al directorio del theme que tengais activo y en vuestro fichero functions.php añadir la siguiente función.

Solamente bastará con ir añadiendo los estilos que deseeis al fichero admin-personalizado.css.

<?php
/*GENERAL - Carga una hoja de estilos general para todo el backend*/
function estilo_general_backend() {
        global $current_user;
        get_currentuserinfo();
        /* http://codex.wordpress.org/Function_Reference/get_currentuserinfo */
        if ($current_user->ID != 1){
        /* Si la ID del usuario es diferente al valor de ID=1 carga el css con la ruta referida a la carpeta del actual plugin 
- http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri */
        echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/admin-personalizado.css">';
    }
}
add_action('admin_head', 'estilo_general_backend');
?>

CONCLUSIÓN

Como hemos visto podemos personalizar nuestro backend de WordPress de una forma muy general a muy particular mediante css según la página que estemos visualizando a través de este pequeño plugin. En el siguiente enlace podeis descargaros el plugin completo en el que se han añadido más funciones de ejemplo por un café (1,50€).

De esta forma sencilla podemos darle el toque personal al panel de administración de WordPress cambiando tipografías, tamaños de letras, colores, etc. De una forma rápida y sencilla.

Espero que os sea de utilidad el post y si os ha gustado estais invitados a compartirlo. Muchas gracias por vuestro tiempo y un saludo.

Artículos relacionados