Share
În primele cinci părți din această serie, v-am arătat cum să personalizați administratorul WordPress într-o varietate de moduri, inclusiv personalizarea ecranului de conectare, a tabloului de bord și a ecranului de editare post.
În acest tutorial veți învăța cum să adăugați ceva stil și branding pe ecranele de administrare. În mod specific veți învăța cum să:
Voi crea un plug-in pentru a face acest lucru - dacă ați creat deja un plugin după ce ați urmat părțile 1-5 din această serie, ați putea prefera să adăugați codul din acest tutorial în plugin-ul respectiv, oferindu-vă un plugin cu toate personalizările dvs. de administrare.
Pentru a finaliza acest tutorial, veți avea nevoie de:
Pe măsură ce voi include imagini și foi de stil cu acest plugin, creez un folder pentru el mai degrabă decât un singur fișier PHP. În interiorul acelui dosar voi crea un fișier PHP care va conține funcțiile de bază din plugin-ul meu.
Asta înseamnă că am un dosar numit wptutsplus-particularizare-admin6-styling, în care am două dosare - imagini și css, și un fișier PHP.
La începutul dosarului, adaug următoarele rânduri:
/ * Nume Plug-in: WPTutsPlus Personalizați partea Admin 6 - styling și branding URI Plugin URI: http://rachelmccollin.co.uk Descriere: Acest plugin acceptă tutorialul în wptutsplus. Personalizează ecranul de bord WordPress. Versiune: 1.0 Autor: Rachel McCollin Autor URI: http://rachelmccollin.com Licență: GPLv2 * /
Deoarece am făcut deja unele modificări în tabloul de bord în părțile anterioare ale acestei serii, acesta nu arată la fel ca tabloul de bord implicit. Imaginea de mai jos arată ce încep cu:
În acest tutorial voi adăuga un stil pentru a încorpora culori diferite, care ar putea fi folosite pentru a reflecta propriul brand.
Înainte de a face orice altceva, voi configura setul de stiluri în mod corespunzător. În loc de a utiliza wp_enqueue_scripts cârlig ca în cazul în care adăugați o foaie de stil pentru a fi utilizată în capătul frontal al site-ului dvs. pe care îl utilizați admin_enqueue_scripts in schimb.
Deci, în plugin-ul dvs., adăugați următoarele:
Accentsconagua
// sa incepem prin incarcarea corecta a stilurilor noastre 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'); De asemenea, va trebui să creați o foaie de stil în / css director în dosarul plugin-ului dvs., unde veți adăuga stilul mai târziu în acest tutorial.
Textul implicit al subsolului din WordPress citește "Vă mulțumim pentru crearea cu WordPress". Dacă executați o instalare multisite sau în curs de dezvoltare pentru clienți, poate doriți să vă referiți aici la propriul dvs. brand. Din fericire, acest lucru se poate face folosind admin_footer_text filtru.
Voi schimba textul și voi adăuga și un logo, așa că voi crea un / imagini director în dosarul plugin-ului meu și adăugați logo-ul meu la asta.
În fișierul principal al pluginului adăugați următoarele:
// modificați funcția de text subsol wptutsplus_admin_footer_text () echo 'Acest tutorial vă este adus de wptutsplus. '; add_filter ("admin_footer_text", "wptutsplus_admin_footer_text");
Acest lucru adaugă noul text de imagine și subsol după cum se arată în captura de ecran:
Cu toate acestea imaginea este puțin mare, chiar dacă am încărcat unul mic. De asemenea, este prea aproape de text. Pentru a corecta acest lucru, adăugați un anumit stil în foaia de stil pe care ați înregistrat-o deja.
În foaia de stil pe care ați creat-o pentru pluginul dvs., adăugați următoarele:
/ * stil pentru footer * / #wpfooter # footer-left img height: 1.2em; lățime: auto; margin-dreapta: 0,5;
Acum, imaginea are dimensiunea corectă:
În Partea 3 din această serie, v-am arătat cum să personalizați conținutul meniului admin - acum voi demonstra cum să personalizați stilul. Voi schimba culorile destul de drastic - poate ca sau nu ca rezultatul, dar arata cum sa o fac!
În foaia de stil pe care ați creat-o, adăugați următoarele:
/ * stil pentru meniul admin * / / * fundal și text text * / #adminmenuback, #adminmenuwrap background-color: # 58595b; culoare frontală: #fff; #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focalizare background-color: # 58595b; culoare: # d54e21; text-shadow: 0 1px 0 rgba (255,255,255,0,4); #adminmenu li.wp-meniu-separator fundal: #fff; culoare frontală: #fff; / * link-uri din meniul admin * / #adminmenu a, #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus culoare: # fff; #adminmenu a: mutați, #adminmenu a: activ culoare: #fff; text-decorare: subliniere; #adminmenu .wp-submeniul a culoare: # 58595b; / * schimba culoarea săgeții în submeniuri * / #adminmenu li.wp-nu-curent-submeniu .wp-meniu-săgeată, #adminmenu li.wp-nu-curent-submeniu .wp-meniu-arrow div # 58595b; / * ecran activ ca în meniu - schimbarea fundalului și a culorii săgeții * / #adminmenu li.wp-are-curent-submeniu a.wp-are-curent-submeniu, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-are-curent-submeniu, .folded #adminmenu li.current.menu-top, #adminmenu .wp-meniu-săgeată, #adminmenu .wp-are-curent-submeniu .wp-submeniu. wp-submeniu-cap fundal: # 9e4059; #adminmenu li.wp-are-curent-submeniu .wp-meniu-săgeată, #adminmenu li.wp-are-curent-submeniu .wp-meniu-arrow div fundal: # 9e4059;
Acest lucru are ca rezultat câteva culori foarte diferite pentru meniul admin:
Cel mai dificil element de restabilire este săgeata îndreptată către pagina curentă sau către un submeniu - aceasta este desenată folosind .wp-menu-săgeată element și .wp-menu-arrow div element în el. Lucrul minunat este că WordPress folosește CSS pur pentru a realiza această săgeată și nu o imagine, așa că odată ce ați identificat elementele pe care să le vizați, puteți schimba culoarea folosind CSS.
Tabloul de bord acum arată astfel:
Vreau ca linkurile mele să reflecte culorile de marcă pe care le-am folosit pentru meniul de bord - în special vreau să schimb umbra roșu utilizat atunci când link-urile sunt suspendate sau active.
În foaia de stil, adăugați următoarele:
/ * link-uri în altă parte * / a: hover, a: active culoare: # 9e4059;
Aceasta ajută la redarea legăturilor mele așa cum se arată în screenshot:
Schimbarea finală a stilului pe care vreau să o fac este prin butoane. Voi schimba culoarea butoanelor în ecranele de administrare, atât atunci când sunt active, cât și inactive. Acest lucru este de a atrage atenția asupra lor și, de asemenea, să se conecteze cu culorile meniului.
În foaia de stil, adăugați codul de mai jos:
/ * butoane * / .wp-core-ui .button-primar fundal: # 4b8938; fundal-imagine: -webkit-gradient (liniar, stânga sus, partea stângă jos, de la (# 7ea367), la (# 4b8938)); fundal-imagine: -webkit-gradient linear (top, # 7ea367, # 4b8938); fundal-imagine: -moz-linear-gradient (top, # 7ea367, # 4b8938); fundal-imagine: -ms-gradient linear (top, # 7ea367, # 4b8938); fundal-imagine: -o-linear-gradient (top, # 7ea367, # 4b8938); fundal-imagine: gradient liniar (spre fund, # 7ea367, # 4b8938); culoarea frontală: # 4b8938; culoare: rgba (255,255,255,0,95); -webkit-box-shadow: inserție 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-primar: activ background: # 9e4059; background-image: -webkit-gradient (liniar, stânga sus, partea stângă jos, de la (# ba7582), până la (# 9e4059)); fundal-imagine: -webkit-gradient linear (sus, # ba7582, # 9e4059); fundal-imagine: -moz-linear-gradient (sus, # ba7582, # 9e4059); fundal-imagine: -ms-linear-gradient (sus, # ba7582, # 9e4059); fundal-imagine: -o-linear-gradient (sus, # ba7582, # 9e4059); fundal-imagine: gradient linear (la fund, # ba7582, # 9e4059); culoarea frontală: # 9e4059; culoare: rgba (255,255,255,0,95); -webkit-box-shadow: inserție 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);
Aceasta schimbă culorile de fundal și de margine ale butoanelor, atât în starea lor implicită, cât și când sunt pline sau active. Imaginea de mai jos afișează starea implicită:
Și aceasta este culoarea atunci când un buton este plutind sau clic pe:
Și asta e tot stilul meu - făcut!
În această serie i-am arătat șase tehnici diferite pentru personalizarea administratorului WordPress.
Am acoperit:
Sperăm că acest lucru ți-a dat o sursă de inspirație pentru a veni cu idei proprii.
WordPress este un sistem de gestionare a conținutului cu adevărat grozav, cu o oarecare personalizare pe care o puteți face a ta și vă oferă utilizatorilor și clienților o experiență care le adaugă ajutor suplimentar și reflectă, de asemenea, marca dvs..
 . '){kind=icon}
Acest tutorial vă este adus de wptutsplus. '; add_filter ("admin_footer_text", "wptutsplus_admin_footer_text");