Crear una zona de administración personalizada con CSS

Como podemos crear una zona de administración personalizada con CSS

En esta ocasión aprenderemos a crear una zona de administración personalizada con CSS, es decir, vamos a crear un Escritorio a medida, ya sea para ti mismo o para tus clientes.

Hace algún tiempo hemos visto cómo cambiar el Escritorio utilizando código y plugins (el fantástico plugin de Francisco Aguilera). pero en esta ocasión vamos a aprender a hacerlo mediante estilos CSS.

Ya sabes que cuantos más plugins te ahorres, mucho mejor para el rendimiento de tu WorPress 🙂

¿Porqué código CSS en lugar de PHP?

Es una buena pregunta, y la respuesta tiene que ver con la sencillez que buscamos: si eres de aquellos a los que no se le da bien el código PHP (como a mí). o si simplemente quieres cambiar el aspecto visual de tu Escritorio, necesitarás utilizar estilos CSS.

Lo que pretendemos no es esconder, modificar, borrar o añadir secciones en el Escritorio, simplemente queremos hacerlo más acorde a la imagen corporativa de nuestro cliente, y no utilizar los distintos esquemas de colores que trae WordPress por defecto.

Primeros pasos para crear una zona de administración personalizada con CSS

Lo primero que tenemos que hacer es crear un código PHP que nos permita a su vez utilizar estilos CSS de una hoja de estilos que vamos a crear nosotros mismos.

Si volvemos a leer el párrafo anterior, nos damos cuenta de que vamos a utilizar un código PHP (que colocaremos como siempre en nuestro archivo functions.php del tema activo, o en nuestro plugin de funciones). Este código PHP hará una llamada a una hoja de estilos CSS en la que pondremos todos esos estilos que harán que nuestro Escritorio cambie su aspecto.

¡Vamos a ello!.

Código PHP que hará la llamada a la hoja de estilos CSS

Utilizaremos un código parecido a este:

function estilos_para_el_escritorio() {
wp_enqueue_style('my-admin-style', get_stylesheet_directory_uri() . '/estilos-escritorio.css');
}
add_action('admin_enqueue_scripts', 'estilos_para_el_escritorio');

Este código hace lo siguiente: crea una funcion llamada estilos_para_el_escritorio(), a continuación asocia esa función al contenido de un archivo llamado /estilos-escritorio.css que crearemos nosotros en el directorio principal de nuestro tema activo (/).

Código para crear zona de administración personalizada con CSS
Código para crear zona de administración personalizada con CSS

Crear la hoja de estilos CSS que personalizará el Escritorio de nuestro WordPress

Para hacerlo, vamos al directorio raiz del tema que tenemos activo y creamos un documento llamado estilos-escritorio.css, y dentro de él, creamos los estilos CSS que va a modificar el aspecto visual de nuestro Escritorio.

Por hacer algo sencillo, podemos utilizar este código de ejemplo:

#wpcontent {
background-color: #2d2e30;
color: #ffffff;
}
div.update-nag {
background-color: #a8a6a8;
color: #ffffff;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
}
div.welcome-panel {
background-color: #a8a6a8;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}
#update-nag {
background-color: #a8a6a8;
color: #ffffff;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
}
div.notice.notice-info.is-dismissible {
background-color: #a8a6a8;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
}
div.wrap h1 {
color: #ffffff;
}
div.postbox {
background-color: #a8a6a8;
color: #ffffff;
}
div.welcome-panel-content h2 {
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}
p.about-description {
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}
h2.hndle.ui-sortable-handle span {
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}

Esto cambiará el color de fondo por uno casi negro, las cajitas del Escritorio serán de un color gris y el texto blanco, mayúsculas. negrita y con un tamaño px.

Creación del archivo y resultado final:

Crear archivo para el código CSS personalizado
Código personalizado para el Escritorio
Código personalizado para el Escritorio

Como hemos dicho antes, hemos puesto un código sencillo para aprender a cambiar el estilo del Escritorio, ahora está en tu mano aplicar más colores, tamaños, etc para crear una zona de administración personalizada con CSS única para tu WordPress.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *