Santi Navarro
Menu
  • INICIO
  • WORDPRESS
  • SOCIALMEDIA
  • YOUTUBE
  • SEO
  • RECURSOS
  • CONTACTO
Home
Wordpress
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€).

Contenido

  • 1 CREACIÓN DEL PLUGIN PARA MODIFICAR APARIENCIA BACKEND WORDPRESS
  • 2 CREACIÓN DEL FICHERO CSS PARA CAMBIAR APARIENCIA
  • 3 FUNCIÓN PARA CARGAR CSS EN LA ZONA DE ADMINISTRACIÓN
  • 4 AÑADIR OTRO CSS SEGÚN LA PÁGINA DEL ADMIN
  • 5 IDENTIFICACIÓN DE LA PÁGINA ACTUAL DESDE EL ADMIN
  • 6 VARIABLE GLOBAL $pagenow
  • 7 AÑADIR CSS SEGÚN VALOR PASADO POR $_GET
  • 8 SUBIR EL FICHERO DE PERSONALIZACIÓN DESDE EL THEME ACTIVO

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 podéis ver a continuación:

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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.</span>

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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.</span>

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-&gt;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');
?-->

<!--?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 sobreescribimos 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 fijándonos 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:

<strong style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Para esta función deseamos modificar la visualización en la página de nav-menus.php y cargamos el nav-menus-admin.css</strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">. Podemos hacer la comprobación de igual forma que anteriormente para ver que nos carga el fichero.</span>

<strong style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Para esta función deseamos modificar la visualización en la página de nav-menus.php y cargamos el nav-menus-admin.css</strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">. Podemos hacer la comprobación de igual forma que anteriormente para ver que nos carga el fichero.</span>

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:

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 deberás 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.

<strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">CONCLUSIÓN</span></strong>

<strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">CONCLUSIÓN</span></strong>

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 podéis 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 estáis invitados a compartirlo. Muchas gracias por vuestro tiempo y un saludo.

Post anterior
Siguiente post

Artículos relacionados de Wordpress

¿Cómo poner Google Adsense en WordPress?

¿Cómo poner Google Adsense en WordPress?

¿Qué debo saber antes de crear un blog en Internet?

¿Qué debo saber antes de crear un blog en Internet?

Twitter cards en WordPress, ¿cómo configurarlas?

Twitter cards en WordPress, ¿cómo configurarlas?

Cómo crear un formulario de contacto en WordPress con diseño responsive

Cómo crear un formulario de contacto en WordPress con diseño responsive


Los datos de los comentarios están seguros.

Responsable: Santi Navarro. Finalidad: Moderar los comentarios Legitimación: Consentimiento del Interesado. Destinatarios: Tus datos los guardará Disqus, el sistema que emplea esta web, que está acogido al acuerdo de seguridad EU-US Privacy. Derechos: podrás acceder, rectificar, limitar y suprimir tus datos.

ENTRADAS RECIENTES

  • Como eliminar comentarios desde la base de datos en WordPress
  • Como crear un botón para eliminar post o página en admin bar de WordPress
  • Cómo organizar las entradas de WordPress en categorías masivamente
  • Las Mejores Plantillas WordPress para Abogados Responsive
  • Tecnicas para ganar visibilidad en redes sociales gratis
  • Los mejores navegadores de internet para Android móvil y tablet
  • Mejores Plantillas de WordPress para Inmobiliaras y Agencias de Venta y Alquiler de Propiedades
  • Mejores Plantillas de WordPress para Empresas o Web Corporativa

Santi Navarro

Diseño web Wordpress, Posicionamiento web y Socialmedia

ARTÍCULOS SOBRE HOSTING

  • Hosting para Wordpress
  • Loading Alojamiento Web
  • Hosting Gratis

PLANTILLAS PARA WORDPRESS

  • Plantillas WordPress para Fotografía
  • Plantillas WordPress para Empresas
  • Plantillas WordPress para Abogados
  • Plantillas WordPress para Inmobiliarias
  • Plantillas WordPress para Restaurantes
  • Elegant Themes Plantillas Premium
  • Themeforest Envato Market

PUBLICACIONES

  • Página web barata
  • Descargar videos de Youtube sin programas
  • Como registrarse en Twitter fácilmente
  • Mejores Plantillas Responsive para Wordpress
  • Presupuesto Tienda Online
Copyright © 2023 Santi Navarro
Diseño web Wordpress en Valencia | Diseño web Gandia
Aviso legal - Política de privacidad - Uso de cookies - Mapa del sitio