Share
Con il rilascio di WordPress 3.8 ora abbiamo una nuova funzionalità per i temi dell'interfaccia utente di amministrazione. Ciò significa che ogni utente può cambiare la combinazione di colori del suo amministratore indipendentemente dal tema che viene utilizzato nel front-end. Per cambiare la combinazione di colori del tuo amministratore, vai a Utenti> Il tuo profilo.
Qui vedrai otto temi predefiniti tra cui puoi scegliere. Seleziona un tema da questi temi e vedrai le modifiche immediatamente. Quando hai finito di selezionare il tema, premi il pulsante "Aggiorna profilo".
Ma non è questo - cosa succede se si desidera aggiungere la propria combinazione di colori personalizzati per l'amministratore? Lo vedremo in questo tutorial.
Nota: Devi avere Ruby e Sass installati sul tuo sistema per seguire questo tutorial. Puoi trovare ulteriori istruzioni su come installare Ruby e Sass qui.
Creeremo il nostro plugin per aggiungere più combinazioni di colori all'interfaccia utente di amministrazione. In questo modo, ci conformeremo agli standard di WordPress per non mescolare la presentazione con la funzionalità.
Quindi andiamo nella nostra cartella dei plugin e creiamo una nuova directory chiamata "admin-color-themes". In quella directory, crea altre tre directory per i nostri stili, immagini e javascript. Creeremo anche un wordpress-admin-themes.php file e aggiungi il seguente codice:
Ora che abbiamo creato la struttura dei file necessaria, inizieremo ad aggiungere gli stili per i nostri nuovi schemi dell'interfaccia utente.
Copia dei file necessari:
Ci sono due passaggi che comportano quando si preparano schemi di colori personalizzati da aggiungere all'amministratore:
- Creare il foglio di stile della combinazione di colori
- Registrarlo con WordPress in modo che venga visualizzato nella pagina del profilo utente
WordPress 3.8 utilizza i file Sass per gestire le combinazioni di colori. Questi file Sass si trovano in wp-admin> css> colori. Entrando in questa directory, troverai tre file Sass:
- _variables.scss
- _mixins.scss
- _admin.scss
Noterai anche che gli schemi di colori predefiniti risiedono anche nella stessa directory.
Questi file Sass contengono mixin e variabili necessarie che possiamo riutilizzare per definire i nostri stili. Quindi copiare su questi tre file su plug-in> admin-colori-temi> css.
Abbiamo anche bisogno di alcuni stili di base che WordPress usa per il suo amministratore. Possiamo trovare questi stili in wp-admin> css denominazione colors.css e colori-rtl.css. Come suggerisce il nome, il successivo è per le lingue da destra a sinistra. Copia questi due file in plug-in> admin-colori-temi> css.
Ora che abbiamo copiato i file necessari, siamo pronti a personalizzarli per aggiungere temi di interfaccia utente personalizzati all'amministratore.
Personalizzazione dei file Sass:
Vai al tuo plug-in> admin-colori-temi> css cartella e apri i seguenti file Sass usando il tuo editor di codice:
- _variables.scss
- _mixins.scss
- _admin.scss
Ecco cosa fanno ognuno di questi file:
- _variables.scss contiene variabili di Sass per varie proprietà come il colore del testo, il colore di base, il colore di evidenziazione e il colore di notifica ecc. Possiamo modificare qui queste proprietà modificando i valori delle rispettive variabili.
- _mixins.scss contiene un mixin per creare un effetto pulsante 3d basato sul colore base che definiamo nel nostro _variables.scss file.
- _admin.scss contiene stili per vari elementi e i loro stati di interazione. Importa anche _variables.scss e _mixin.scss File. È qui che tutti quegli stili sono applicati agli elementi che abbiamo definito nelle nostre variabili e nei file mixins.
Abbiamo bisogno di creare altri due file chiamati colore-scheme.scss e colore-schema-rtl.scss nella cartella css. Nel colore-scheme.scss aggiungi il seguente codice:
@import 'colors.css'; @import 'admin';Nel frattempo colore-schema-rtl.scss, includeremo gli stili per il supporto di rtl:
@import 'colors-rtl.css'; @import 'admin';Si noti che non è necessario specificare l'estensione del file ".scss". Inoltre, abbiamo fatto riferimento al file usando Admin invece di _admin perché è parziale. Se hai bisogno di saperne di più su Sass '@import' e partial, puoi leggere su ognuno di essi nella documentazione di Sass.
Quindi, come puoi vedere, genereremo due file per qualsiasi combinazione di colori. Uno servirà per le lingue Left-to-Right mentre l'altro servirà l'altro se viene rilevata la locale da destra a sinistra.
Ora apri _variable.scss e inizia a sostituire i valori delle variabili. I nomi delle variabili sono piuttosto auto-descrittivi quindi non avremo alcun problema nella loro personalizzazione. Cambia i valori come mostrato di seguito:
$ text-color: #fff! default; $ base-colore: # 314029! predefinito; $ highlight-color: # CCBC39! default; $ notification-color: # 4D5C2E! default; $ link: # 8F9137! predefinito;Nella console, accedere alla cartella css all'interno di admin-color-themes e digitare il seguente comando:
sass color-scheme.scss forest-afternoon.css
sass color-scheme-rtl.scss forest-afternoon-rtl.cssQui, abbiamo generato due file css chiamati foresta-afternoon.css e foresta-pomeriggio-rtl.css. Possiamo aprire questi file e vedere che Sass si è unito _variables.scss, _mixins.scss e _admin.scss in un unico file. Questi file css appena creati utilizzano la normale regola css @ import per l'importazione di colors.css e colori-rtl.css File.
Ora, è necessario registrare questi fogli di stile con WordPress in modo che appaiano come un'opzione nella pagina Profilo utente.
Registrazione di fogli di stile con WordPress
Nel index.php per prima cosa definiremo una costante per il percorso:
define ('PATH', plugins_url (", __FILE__));Ora definiremo una funzione che verrà eseguita ogni volta che un utente accede all'amministratore:
function add_custom_admin_themes () add_action ('admin_init', 'add_custom_admin_themes');Dentro il add_custom_admin_themes funzione, registreremo i nostri nuovi stili generati usando il wp_admin_css_color funzione:
wp_admin_css_color ('forest-afternoon', __ ('Forest Afternoon'), PATH. "/css/forest-afternoon.css", array ('# 421F22', '# FFC042', '# 114F3F'));'Wp_admin_css_color' accetta cinque parametri per chiave, nome, URL, colori e colori delle icone. I primi tre sono obbligatori e gli altri due sono facoltativi.
Questi parametri sono definiti di seguito:
Dobbiamo anche prendere in considerazione il supporto per RTL. Quindi sopra la dichiarazione della funzione aggiungi il seguente codice:
$ suffix = is_rtl ()? '-rtl': ";
E cambia il parametro path nel file wp_admin_css_color chiamata di funzione al seguente:
SENTIERO . "/Css/forest-afternoon$suffix.css",
Questo bit controllerà se la locale corrente è una lingua da destra a sinistra. In tal caso, verrà caricato il foglio di stile con suffisso -rtl.
Il codice finale dovrebbe essere qualcosa del genere:
Accentsconagua
define ('PATH', plugins_url (", __FILE__)); function add_custom_admin_themes () $ suffix = is_rtl ()? '-rtl':"; wp_admin_css_color ('forest-afternoon', __ ('Forest Afternoon'), PATH. "/css/forest-after$$uffuff.css", array ('# 421F22', '# FFC042', '# 114F3F')); add_action ('admin_init', 'add_custom_admin_themes'); A questo punto, abbiamo registrato con successo il nuovo stile di amministrazione, possiamo verificarlo andando a Utenti> Il tuo profilo (assicurati di attivare prima il plugin):
Attiva il nuovo stile selezionandolo e premendo il Aggiorna il profilo pulsante.
Puoi creare tutti gli stili che desideri semplicemente modificando i valori nel _variables.scss file e quindi registrandoli nel tuo index.php. È possibile acquisire rapidamente fantastici schemi di colori utilizzando Adobe Kuler. Il tema che abbiamo usato in questo tutorial è Forest Afternoon.
Puoi scaricare il plugin completo qui.
In questo tutorial abbiamo visto come possiamo creare e aggiungere alcune combinazioni di colori all'amministratore di WordPress usando il preprocessore di Sass.
Se vuoi saperne di più su Sass, qui sotto trovi le risorse:
