Personalizar la administración de WordPress con CSS y jQuery

Inicio » Tecnología » Diseño Web » Personalizar la administración de WordPress con CSS y jQuery

Personalizar administración de WordPress

En el siguiente artículo vamos a aprender como personalizar el área de administración de WordPress con css y jquery, la personalización consiste en personalizar nuestra administración o backend y dejarlo a nuestro gusto o simple y sencillamente para engañar darle una apariencia parecida a nuestro front-end o página principal, cambiando tipografía, colores, ocultar algunos elementos, cargar algunos scripts de jquery para darle algunos efectos, etc.

Creación de un plugin para personalizar la administración

El proceso consistirá en crear un pequeño plugin muy sencillo donde iremos agregando algunas funciones que nos permitirán realizar lo que estamos buscando, recomiendo realizar todo el proceso en una instalación local primero debido a que nos facilitará el trabajo ya que tendremos que ir actualizando la página constantemente para ver los cambios y lo segundo por razones de seguridad, no vaya a ser que al ir agregando funciones asignemos una que nos tira la instalación y perderemos algunos minutos de actividad de la web.

cómo primer paso debemos crear una carpeta con el nombre que deseemos dentro de la carpeta plugins (se encuentra dentro de wp-content), en mi caso le puse el nombre de admin-customize, ustedes pueden usar el nombre que deseen.

Como segundo paso tenemos que crear un fichero php dentro de la carpeta que acabamos de crear el nombre debe ser el mismo que la carpeta, y aquí es donde iremos declarando todas las funciones que necesitemos.

Este plugin bien nos puede servir para cargar algunas de las muchas funciones que le cargamos al functions.php de nuestro theme (shortcodes, personalizaciones, etc.), así que cada vez que cambiemos de theme dichas personalizaciones se mantengan.

Ahora que ya hemos creado nuestra carpeta y el primer fichero, vamos a declarar el plugin:

Plugin Name: es el nombre del plugin

Plugin URI: Donde puede haber más información sobre el plugin.

Description: Una breve descripción de lo que realiza el plugin.

Author: Quién lo está creando.

Versión: 1, 2, 3… ? la versión del plugin, entendible no?.

Author URI: La web del autor, posiblemente la web del autor no es la misma que donde está la info.

Una vez que hemos declarado el plugin, ya podemos ingresar a la administración y verificar que está reconociendo nuestro plugin y dicho sea de paso lo activamos para ver si conecta bien.

Creación del fichero para cambiar la apariencia

Para cambiar la apariencia de la administración lo haremos cargando una hoja de estilos (stylesheet o css), en el mismo directorio de nuestro plugin o podemos crear una carpeta para el fichero llamada “css”, sea cual sea nuestra opción tendremos que declarar la ruta correcta hacia el fichero, en este archivo iremos cargando los estilos o formatos que cambiarán la apariencia de nuestra administración.

Una vez que hemos creado nuestro archivo css correctamente ya estamos en condiciones de asignar la primera función para cargar nuestra hoja de estilos.

Función para cargar CSS en la administración

Con la siguiente función vamos a cargar nuestra hoja de estilos en la administración, se ha comentado algunas líneas con la finalidad de entender mejor su funcionalidad.

Si todo ha ido bien hasta entonces, si actualizamos la página de la administración y visualizamos el código fuente podremos apreciar que nuestro archivo se está cargando correctamente o podremos agregarle algunos formatos para ver si se están cargando correctamente.

Una vez realizada la comprobación ya podremos iniciar a personalizar nuestra administración.

Si utilizamos firefox les recomiendo utilizar el plugin firebug para ir analizando la página y obtener de ella las condicionales a las que iremos aplicando los formatos.

Cargar scripts Jquery para aplicar efectos a la administración

Es posible que nuestro theme lleve algunos scripts jquery para crear algunos efectos en la página, en el caso de CyberDocentes, utilizo el script jquery “nicescroll” que es el que permite tener ese efecto en las barras de desplazamiento de la página, y por lógica si estoy tratando de brindar a la administración una apariencia parecida a mi página principal lo ideal sería cargar este tipo de scripts para brindarle el mismo efecto.

Es conveniente organizar nuestras carpetas para cargar los diferentes scripts, en nuestro caso he creado la carpeta “js” donde he subido el script “jquery.nicescroll.js” y lo siguiente será cargar el script en nuestro plugin y cargar además el efecto que este realiza.

Para hacer esto debemos agregar estas líneas al código anterior donde cargamos la hoja de estilos:

Al final nuestro código quedaría de la siguiente manera:

Con esto ya hemos cargado nuestro archivo jquery y al recargar nuestra página de administración podremos apreciar el efecto de dicho script.

Personalizar la administración desde el theme

Crear el plugin que nos permitiría personalizar nuestra área de administración era una de las opciones, sin embargo dicha tarea también la podemos realizar a través del archivo functions.php de nuestro theme.

Este trabajo lo podemos realizar de dos maneras: 1.- copiar las funciones que se encuentran en el archivo admin-customize.php directamente en el archivo functions.php y, 2.- Crear una carpeta dentro del theme y mover allí los archivos del plugin y llamar al archivo admin-customize.php desde el archivo functions.php; la verdad es que encuentro más factible la segunda opción, es mucho más fácil y más rápido de realizar a mi parecer, así que vamos ha realiza la segunda forma, si alguien quiere hacerlo de la primera forma deja un comentario para ayudarle en la implementación.

Primero debemos crear una carpeta dentro del theme, para casos prácticos yo tengo una carpeta llamada “lib” donde agrego archivos con funciones que van a afectar de alguna manera el área de administración, dentro de la carpeta “lib” que acabamos de crear, copiamos el contenido de la carpeta “admin-customize” del plugin.

Una vez copiado los archivos dentro del la carpeta “lib”; abrimos el archivo “admin-customize.php” y realizamos los siguientes cambios:

Deberán notar que lo que se está cambiando es la forma de llamar a la hoja de estilos admin-custom, para lo cual estamos utilizando “get_stylesheet_directory_uri” lo cual carga la ruta completa a la carpeta del theme, y acto seguido indicamos la ruta del archivo css dentro de la carpeta del theme, en este caso dentro de la carpeta “lib”; en el caso del archivo jQuery “nicescroll”, lo he cargado directamente de la carpeta “js” directamente de la raíz del theme, que es donde se encuentra el archivo jQuery con el que trabaja la web, y copiar dicho archivo dentro de la carpeta lib era consumir un poco más de espacio y tener dos copias del mismo archivo.

Una vez hecho esto, vamos a la administración, desactivamos el plugin si lo tenemos activado y acto seguido pasamos a la última parte que es cargar el archivo admin-customize.php desde el archivo functions.php para lo cual al inicio del archivo de funciones del theme agregamos la siguiente línea:

Guardamos el archivo, vamos a la administración y actualizamos y bualá, ya tenemos personalizada nuestra administración.

Por cierto no vayan a olvidar de eliminar la parte superior del archivo admin-customize.php donde se encuentra la declaración del plugin.

Cambiar pie de página de la administración

Como plus les dejo una pequeña función que pueden agregar al fichero del plugin, lo que hace es cambiar el pie de página de la administración:

En la función anterior el año actual y el nombre del dominio se cargan automáticamente, lo demás puede ser modificado a su gusto y criterio.

Pueden encontrar más información y más funciones en:

Fuente: Personalizar Administración con CSS

Observaciones: En el fichero de descarga del plugin realizado, en la hoja de estilos se encuentran los formatos para el cuerpo y los enlaces de la zona de administración, pueden ver el resultado ingresando a la administración de la web.

Comparte este artículo para poder descargar el plugin para personalizar la administración de WordPress:

Plugin para personalizar la administración:

Plugin para personalizar la administración

Probando si se muestra seleccin de Google Adsense

3 respuestas a “Personalizar la administración de WordPress con CSS y jQuery”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: En el siguiente artículo vamos a aprender como personalizar el área de administración de WordPress con css y jquery, la personalización consiste en personalizar nuestra administración o backend y dejarlo a nuestro gusto …

  2. Karen dice:

    HOla !!! Excelente información, voy a probarla ya mismo después te cuento cómo me resultó! Gracias !!! 🙂

Deja un comentario