Share
Nelle prime cinque parti di questa serie, ti ho mostrato come personalizzare l'amministratore di WordPress in vari modi, inclusa la personalizzazione della schermata di accesso, della dashboard e della schermata di post-editing.
In questo tutorial imparerai come aggiungere uno stile e un marchio agli schermi di amministrazione. Nello specifico imparerai come:
Creerò un plugin per farlo - se hai già creato un plugin dopo aver seguito le parti da 1 a 5 di questa serie potresti preferire aggiungere il codice da questo tutorial a quel plugin, dandoti un plugin con tutti le personalizzazioni dell'amministratore.
Per completare questo tutorial avrai bisogno di:
Poiché includerò immagini e fogli di stile con questo plug-in, creerò una cartella anziché un singolo file PHP. Dentro quella cartella creerò un file PHP che conterrà le funzioni principali nel mio plugin.
Ciò significa che ho una cartella chiamata wptutsplus-personalizzazione-admin6-styling, in cui ho due cartelle - immagini e css, e un file PHP.
All'inizio di quel file, aggiungo le seguenti righe:
/ * Nome plugin: WPTutsPlus Personalizza l'Admin Parte 6: stile e branding del dashboard URI del plug-in: http://rachelmccollin.co.uk Descrizione: Questo plugin supporta il tutorial in wptutsplus. Personalizza la schermata del dashboard di WordPress. Versione: 1.0 Autore: Rachel McCollin Autore URI: http://rachelmccollin.com Licenza: GPLv2 * /
Poiché ho già apportato alcune modifiche alla dashboard nelle parti precedenti di questa serie, non ha lo stesso aspetto del dashboard predefinito. Lo screenshot qui sotto mostra quello che sto iniziando con:
In questo tutorial aggiungerò alcuni stili per incorporare diversi colori, che potrebbero essere utilizzati per riflettere il tuo marchio.
Prima di fare qualsiasi altra cosa ho intenzione di impostare correttamente il foglio di stile. Invece di usare il wp_enqueue_scripts agganci come faresti se aggiungessi un foglio di stile da utilizzare nel front-end del tuo sito web, che usi admin_enqueue_scripts anziché.
Quindi, nel tuo plugin, aggiungi quanto segue:
Accentsconagua
// iniziamo con l'accodamento dei nostri stili correttamente function 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'); Dovrai anche creare un foglio di stile nel / css directory nella cartella del tuo plug-in, che è dove dovrai aggiungere lo styling più avanti in questo tutorial.
Il testo del piè di pagina predefinito in WordPress recita 'Grazie per aver creato con WordPress'. Se stai eseguendo un'installazione multisito o lo sviluppo per i clienti, puoi invece fare riferimento al tuo marchio qui. Fortunatamente questo può essere fatto usando il admin_footer_text filtro.
Ho intenzione di cambiare il testo e aggiungere un logo, quindi creerò un /immagini directory nella cartella del mio plugin e aggiungere il mio logo a quello.
Nel file principale del tuo plugin aggiungi quanto segue:
// cambia la funzione di testo footer wptutsplus_admin_footer_text () echo 'Questo tutorial ti è stato offerto da wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');
Questo aggiunge il nuovo testo dell'immagine e del piè di pagina, come mostrato nello screenshot:
Tuttavia l'immagine è un po 'grande, anche se ne ho caricata una piccola. È anche troppo vicino al testo. Per correggere ciò, aggiungi uno stile al foglio di stile che hai già registrato.
Nel foglio di stile che hai creato per il tuo plug-in, aggiungi quanto segue:
/ * styling per il footer * / #wpfooter # footer-left img height: 1.2em; larghezza: auto; margin-right: 0.5em;
Ora l'immagine ha le dimensioni corrette:
Nella parte 3 di questa serie, ti ho mostrato come personalizzare il contenuto del menu di amministrazione: ora dimostrerò come personalizzare lo stile. Cambierò i colori in modo abbastanza drastico: il risultato potrebbe non piacerti o no, ma mostra come farlo!
Nel foglio di stile che hai creato, aggiungi quanto segue:
/ * styling per il menu di amministrazione * / / * colore di sfondo e del testo * / #adminmenuback, #adminmenuwrap background-color: # 58595b; border-color: #fff; #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus background-color: # 58595b; colore: # d54e21; text-shadow: 0 1px 0 rgba (255,255,255,0.4); #adminmenu li.wp-menu-separator background: #fff; border-color: #fff; / * link nel menu di amministrazione * / #adminmenu a, #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus colore: # F F F; #adminmenu a: hover, #adminmenu a: active color: #fff; decorazione del testo: sottolineatura; #adminmenu .wp-submenu a color: # 58595b; / * cambia il colore della freccia nei sottomenu * / #adminmenu li.wp-non-corrente-sottomenu .wp-menu-arrow, #adminmenu li.wp-non-corrente-sottomenu .wp-menu-freccia div background: # 58595b; / * schermo attivo come visto nel menu - cambia lo sfondo e il colore delle frecce * / #menumenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, .necessario #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;
Ciò si traduce in alcuni colori molto diversi per il menu di amministrazione:
L'elemento più difficile da restyling è la freccia che punta alla pagina corrente o ad un sottomenu - questo è uno stile usando il .wp-menu-freccia elemento e il .wp-menu-arrow div elemento al suo interno. Il bello è che WordPress usa puro CSS per ottenere questa freccia e non un'immagine, quindi una volta identificati gli elementi da targetare, puoi cambiare il suo colore usando i CSS.
La dashboard ora appare così:
Voglio che i miei collegamenti riflettano i colori del marchio che ho usato per il menu del pannello di controllo: in particolare, desidero cambiare la sfumatura di rosso utilizzata quando i collegamenti vengono posizionati sopra o attivi.
Nel foglio di stile, aggiungi quanto segue:
/ * link altrove * / a: hover, a: active color: # 9e4059;
Questo modifica il rosso dei miei collegamenti come mostrato nello screenshot:
Il cambiamento di stile finale che voglio fare è quello di pulsanti. Ho intenzione di cambiare il colore dei pulsanti nelle schermate di amministrazione, sia quando sono attivi che inattivi. Questo per attirare l'attenzione su di loro e anche per legare con i colori del menu.
Nel foglio di stile, aggiungi il codice qui sotto:
/ * buttons * / .wp-core-ui .button-primary background: # 4b8938; background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 7ea367), a (# 4b8938)); background-image: -webkit-linear-gradient (in alto, # 7ea367, # 4b8938); background-image: -moz-linear-gradient (in alto, # 7ea367, # 4b8938); background-image: -ms-linear-gradient (in alto, # 7ea367, # 4b8938); background-image: -o-linear-gradient (in alto, # 7ea367, # 4b8938); background-image: linear-gradient (in basso, # 7ea367, # 4b8938); border-color: # 4b8938; colore: rgba (255,255,255,0,95); -webkit-box-shadow: inset 0 1px 0 rgba (0,0,0,0,1); box-shadow: inset 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; background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# ba7582), a (# 9e4059)); background-image: -webkit-linear-gradient (in alto, # ba7582, # 9e4059); background-image: -moz-linear-gradient (in alto, # ba7582, # 9e4059); background-image: -ms-linear-gradient (in alto, # ba7582, # 9e4059); background-image: -o-linear-gradient (in alto, # ba7582, # 9e4059); background-image: linear-gradient (in basso, # ba7582, # 9e4059); border-color: # 9e4059; colore: rgba (255,255,255,0,95); -webkit-box-shadow: inset 0 1px 0 rgba (0,0,0,0,1); box-shadow: inset 0 1px 0 rgba (0,0,0,0,1); text-shadow: 0 1px 0 rgba (0,0,0,0,1);
Ciò cambia lo sfondo e i colori dei bordi per i pulsanti sia nel loro stato di default che quando sono al passaggio del mouse sopra o attivi. Lo screenshot qui sotto mostra lo stato di default:
E questo è il colore quando si passa con il mouse su un pulsante o si fa clic:
E questo è tutto il mio stile - fatto!
In questa serie ti ho mostrato sei diverse tecniche per personalizzare l'amministratore di WordPress.
Ho coperto:
Spero che questo ti abbia dato qualche spunto per farti venire le idee da te.
WordPress è un sistema di gestione dei contenuti davvero eccezionale, con alcune personalizzazioni che puoi personalizzare e dare ai tuoi utenti e clienti un'esperienza che aggiunge ulteriore aiuto per loro e riflette anche il tuo marchio.
 . '){kind=icon}
Questo tutorial ti è stato offerto da wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');