Share
En las primeras cinco partes de esta serie, le mostré cómo personalizar el administrador de WordPress de varias maneras, incluida la personalización de la pantalla de inicio de sesión, el panel de control y la pantalla de edición posterior..
En este tutorial, aprenderá cómo agregar un poco de estilo y marca a sus pantallas de administrador. Específicamente aprenderás cómo:
Voy a crear un complemento para hacer esto: si ya ha creado un complemento después de seguir las Partes 1 a 5 de esta serie, es posible que prefiera agregar el código de este tutorial a ese complemento, dándole un complemento con todos tus personalizaciones de administrador.
Para completar este tutorial necesitarás:
Como incluiré imágenes y hojas de estilo con este complemento, estoy creando una carpeta para él en lugar de un solo archivo PHP. Dentro de esa carpeta crearé un archivo PHP que contendrá las funciones principales de mi complemento.
Esto significa que tengo una carpeta llamada wptutsplus-customizing-admin6-styling, en el que tengo dos carpetas - imagenes y css, y un archivo PHP.
Al comienzo de ese archivo, estoy agregando las siguientes líneas:
/ * Nombre del complemento: WPTutsPlus Personalice la Parte 6 del administrador: diseñe y marca el URI del complemento del panel de instrumentos: http://rachelmccollin.co.uk Descripción: Este complemento admite el tutorial en wptutsplus. Personaliza la pantalla del panel de WordPress. Versión: 1.0 Autor: Rachel McCollin Autor URI: http://rachelmccollin.com Licencia: GPLv2 * /
Debido a que ya hice algunas modificaciones en el panel de control en las partes anteriores de esta serie, no se ve igual que el panel de control predeterminado. La siguiente captura de pantalla muestra lo que estoy empezando con:
En este tutorial agregaré algunos estilos para incorporar diferentes colores, que podrían usarse para reflejar su propia marca..
Antes de hacer cualquier otra cosa, voy a configurar la hoja de estilo correctamente. En lugar de utilizar el wp_enqueue_scripts enganche como lo haría si agregara una hoja de estilo para usar en la parte delantera de su sitio web, use admin_enqueue_scripts en lugar.
Entonces, en tu plugin, agrega lo siguiente:
Accentsconagua
// comencemos por poner en orden nuestros estilos correctamente funcion wptutsplus_admin_styles () wp_register_style ('wptuts_admin_stylesheet', plugins_url ('/css/style.css', __FILE__)); wp_enqueue_style ('wptuts_admin_stylesheet'); add_action ('admin_enqueue_scripts', 'wptutsplus_admin_styles'); También necesitarás crear una hoja de estilo en el / css directorio en la carpeta de su complemento, que es donde agregará el estilo más adelante en este tutorial.
El texto del pie de página predeterminado en WordPress lee "Gracias por crear con WordPress". Si está ejecutando una instalación multisitio o en desarrollo para clientes, es posible que desee consultar su propia marca aquí. Por suerte esto se puede hacer usando el admin_footer_text filtrar.
Voy a cambiar el texto y agregar un logotipo también, así que crearé un / imágenes directorio en la carpeta de mi plugin y añadir mi logo a ese.
En el archivo principal de su complemento agregue lo siguiente:
// cambiar la función de texto del pie de página wptutsplus_admin_footer_text () echo 'Este tutorial es presentado por wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');
Esto agrega la nueva imagen y el texto del pie de página como se muestra en la captura de pantalla:
Sin embargo, la imagen es un poco grande, aunque he subido una pequeña. También es demasiado cerca del texto. Para corregir eso, agregue un poco de estilo a la hoja de estilo que ya ha registrado.
En la hoja de estilo que ha creado para su complemento, agregue lo siguiente:
/ * estilo para el pie de página * / #wpfooter # footer-left img altura: 1.2em; ancho: auto; margen derecho: 0.5em;
Ahora la imagen es del tamaño correcto:
En la Parte 3 de esta serie, le mostré cómo personalizar el contenido del menú de administración; ahora demostraré cómo personalizar el estilo. Cambiaré los colores bastante drásticamente, puede que te guste o no el resultado, pero muestra cómo hacerlo.!
En la hoja de estilo que ha creado, agregue lo siguiente:
/ * estilo para el menú de administración * / / * fondo y color del texto * / #adminmenuback, #adminmenuwrap background-color: # 58595b; color de borde: #fff; #adminmenu li.menu-top: flotar, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus background-color: # 58595b; color: # d54e21; texto-sombra: 0 1px 0 rgba (255,255,255,0.4); #adminmenu li.wp-menu-separator background: #fff; color de borde: #fff; / * enlaces en el menú de administración * / #adminmenu a, #adminmenu li.menu-top: flotar, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus color: # fff #adminmenu a: hover, #adminmenu a: active color: #fff; texto-decoración: subrayado; #adminmenu .wp-submenu a color: # 58595b; / * cambiar el color de la flecha a los submenús * / #adminmenu li.wp-not-current-submenu .wp-menu-arrow, #adminmenu li.wp-not-current-submenu .wp-menu-arrow div background: # 58595b; / * pantalla activa como se ve en el menú: cambie el color de fondo y de la flecha * / #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top, #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu. wp-submenu-head background: # 9e4059; #adminmenu li.wp-has-current-submenu .wp-menu-arrow, #adminmenu li.wp-has-current-submenu .wp-menu-arrow div background: # 9e4059;
Esto da como resultado colores muy diferentes para el menú de administración:
El elemento más difícil de reiniciar es la flecha que apunta a la página actual o a un submenú. .wp-menu-arrow elemento y el .wp-menu-arrow div elemento en su interior. Lo bueno es que WordPress utiliza CSS puro para lograr esta flecha y no una imagen, por lo que una vez que haya identificado los elementos a los que desea apuntar, puede cambiar su color utilizando CSS..
El tablero ahora se ve así:
Quiero que mis enlaces reflejen los colores de la marca que he usado para el menú del panel de control, en particular quiero cambiar el tono de rojo que se usa cuando los enlaces están sobre o activos..
En la hoja de estilo, agregue lo siguiente:
/ * en otro lugar * / a: hover, a: active color: # 9e4059;
Esto ajusta el rojo de mis enlaces como se muestra en la captura de pantalla:
El cambio de estilo final que quiero hacer es a los botones. Voy a cambiar el color de los botones en las pantallas de administración, tanto cuando estén activos como inactivos. Esto es para llamar la atención sobre ellos y también para vincularlos con los colores del menú..
En la hoja de estilo, agregue el siguiente código:
/ * botones * / .wp-core-ui .button-primary background: # 4b8938; imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, de (# 7ea367), a (# 4b8938)); imagen de fondo: -webkit-linear-gradient (arriba, # 7ea367, # 4b8938); imagen de fondo: -moz-lineal-gradiente (arriba, # 7ea367, # 4b8938); imagen de fondo: -ms-linear-gradient (arriba, # 7ea367, # 4b8938); imagen de fondo: -o-lineal-gradiente (arriba, # 7ea367, # 4b8938); imagen de fondo: gradiente lineal (al final, # 7ea367, # 4b8938); color de borde: # 4b8938; color: rgba (255,255,255,0.95); -webkit-box-shadow: recuadro 0 1px 0 rgba (0,0,0,0.1); box-shadow: recuadro 0 1px 0 rgba (0,0,0,0.1); text-shadow: 0 1px 0 rgba (0,0,0,0.1); .wp-core-ui .button-primary.active, .wp-core-ui .button-primary: hover, .wp-core-ui .button-primary: active background: # 9e4059; imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# ba7582), hasta (# 9e4059)); imagen de fondo: -webkit-linear-gradient (arriba, # ba7582, # 9e4059); imagen de fondo: -moz-lineal-gradiente (arriba, # ba7582, # 9e4059); imagen de fondo: -ms-linear-gradient (arriba, # ba7582, # 9e4059); imagen de fondo: -o-lineal-gradiente (arriba, # ba7582, # 9e4059); imagen de fondo: degradado lineal (al final, # ba7582, # 9e4059); color de borde: # 9e4059; color: rgba (255,255,255,0.95); -webkit-box-shadow: recuadro 0 1px 0 rgba (0,0,0,0.1); box-shadow: recuadro 0 1px 0 rgba (0,0,0,0.1); text-shadow: 0 1px 0 rgba (0,0,0,0.1);
Esto cambia los colores de fondo y de borde de los botones tanto en su estado predeterminado como cuando se desplazan sobre o están activos. La siguiente captura de pantalla muestra el estado predeterminado:
Y este es el color cuando un botón se desplaza sobre o se hace clic:
Y eso es todo mi estilo - hecho!
En esta serie, te he mostrado seis técnicas diferentes para personalizar el administrador de WordPress..
He cubierto
Con suerte, esto te ha dado un poco de inspiración para crear ideas propias..
WordPress es un excelente sistema de administración de contenido, con cierta personalización que puede personalizar, y brinda a sus usuarios y clientes una experiencia que se suma a la ayuda adicional y también refleja su marca..
 . '){kind=icon}
Este tutorial es presentado por wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');