Share
În primul post din această serie, am aruncat o privire asupra câtorva lucruri pe care le putem face pentru a menține instalarea WordPress sănătoasă. Dar nu putem face totul.
În acest post, vom aborda ce trebuie să faceți cu ajutorul materialelor, cum ar fi foile de stil, fișierele JavaScript, imaginile și multe altele.
Mai puțin este mai mult. Este cam mesajul pe care încerc să-l prezint cu întreaga serie. În acest scop, am vorbit despre ce să faceți cu HTML-ul depășit, a făcut referire la câteva resurse care vă vor ajuta să începeți să scrieți codul tematic curat, precum și să găsiți pluginurile potrivite.
Acum este timpul să ne concentrăm asupra activelor noastre: foi de stil, JavaScript și imagini.
Toți suntem obișnuiți să scriem CSS, nu? Chiar și începătorii dintre noi au atins o linie de CSS aici sau acolo. Ați folosit vreodată a display: none undeva? Acolo, ai aplicat o regulă de stil.
În forma cea mai crudă, sunt sigur că le-am folosit cu toții. Cei mai experimentați vor ști că este o idee bună să țineți stilurile în locul lor: în foile de stil. Aceasta este în primul rând o chestiune de mentenabilitate. Dacă aveți stiluri inline pe toate șabloanele dvs., vă veți pierde, încercând să găsiți locul potrivit pentru a ajusta ceva, iar când ajustați acel lucru, trebuie să descoperiți încă cinci alte locuri care au același stil inline aplicat acestora.
Punerea stilurilor în fișierele de stil are un alt avantaj: puteți scrie mai puțin pentru a face același lucru, utilizând reguli de stil generic în locul celor focalizate, dar puteți chiar să faceți un pas mai departe și să utilizați un procesor pre-procesor.
Stylus, LESS și Sass sunt toate pre-procesoare CSS. Puteți să le folosiți pentru a scrie mai puțin cod și a obține un rezultat final mai curat. Citeste ca: Mai putina munca, mai putin cod, mai usor de intretinut!
În timp ce Stylus este o excepție aici, ambele LESS și Sass au pluginuri WordPress disponibile. Dacă puteți evita utilizarea acestora, faceți acest lucru. Există modalități de a genera o foaie de stil de la a .Mai puțin și .Sass fișier o singură dată, fără a utiliza aceste pluginuri.
Fără a fi prea specific, aceste pre-procesoare vă vor permite să scrieți un cod mult mai puțin, pentru a ajunge la același rezultat final. În multe cazuri, acestea vor combina chiar stiluri împreună, făcând foile dvs. de stil mai curate și mai ușor de întreținut. Un tutorial rapid pe LESS și unul pe Sass au tutoriale existente chiar aici pe Tuts+.
În ceea ce privește ceea ce este mai bine, acest lucru se bazează foarte mult pe preferințele personale. Toți cei trei procesatori sunt în creștere și își găsesc calea. Puteți găsi o comparație cu privire la cei trei procesoare disponibile aici, care vor elabora mai amănunțit cu privire la fiecare dintre punctele lor forte.
JavaScript a devenit o parte acceptată a dezvoltării web. Cu câțiva ani în urmă, am acceptat totuși că este normal ca vizitatorii noștri să aibă JavaScript dezactivat, dar aceasta este acum excepția, nu regula.
Personal, prefer să construiesc site-urile fără ea și apoi să adaug script-urile ca accesoriu. Acest lucru are avantajul de a mă lăsa să păstreze scripturile până la minim lor, deoarece site-ul deja funcționează imediat out-of-the-box fără ea.
Singura opțiune reală de a scrie mai puțin JavaScript este de a face exact acest lucru. Scrie mai puțin; cu toate acestea, un sfat bun aici este de a utiliza biblioteca jQuery care vine ambalate cu WordPress, deoarece este proiectat special pentru a vă permite să scrie mai puțin pentru a obține același rezultat, dar totuși să rămână rapid și ușor de utilizat.
Amintiți-vă primul post din această serie? Am menționat că, în ultimii trei ani, site-urile web au avut o creștere absurdă de 235%. Crazy, nu-i așa? Iată un alt fapt: o mare parte din această creștere are formă de imagini. Mă îndoiesc că cineva este surprins de faptul că utilizarea imaginilor mari a devenit oarecum o tendință de design, dar chiar și așa, ar trebui să ne străduim să facem mai bine.
Dar cum?
Asigurați-vă că dacă utilizați WordPress pentru a seta dimensiunile potrivite pentru imaginile dvs. Nu are sens să încărcați o imagine 500x500 dacă utilizați numai o versiune de 100x100 în design. Următoarea opțiune este să utilizați un serviciu cum ar fi smush.it sau kraken.io. Ambele au pluginuri WordPress disponibile și amândouă fac aproape același lucru: Împrășesc lucrurile în imaginile pe care nu le aveți nevoie sau le doriți, optimizați-le și returnați cele mai mici fișiere posibile pe care le pot face din imaginea dvs. fără a pierde nici o calitate. Smush.it este un serviciu gratuit, unde Kraken are o soluție gratuită, precum și o soluție plătită care vă va optimiza imaginile în zbor.
Până acum, puteți vedea că sunt tot mai puțin. Mai puțin cod, mai puține imagini, mai puțin tot. Sfârșitul drumului, deși: Rapid ca sistemele mele minimaliste ar putea fi, eu încă vreau că extra mile de minunat. Voi asigura-mi ca codul meu este la fel de intretinut cum poate fi, stilurile mele cat mai mici posibil si scripturile mele scurte. Totuși, aceasta este, în primul rând, pregătirea. La urma urmei, voi avea în continuare rezultate minime. Folosind pre-procesorul pentru stilurile mele de stiluri, am deja posibilitatea de a realiza o ediție minificată. Pentru scripturi există soluții similare disponibile.
Aici este important să vă asigurați că scripturile și foile de stil sunt afișate utilizând wp_enqueue_script și wp_enqueue_style funcții. Nu le arunca doar în cap din șablonul dvs., dar utilizați function.php pentru a le înlătura și pentru a lăsa wp_head funcția de ieșire reală.
De ce este important acest lucru? Deoarece dacă încorporați în mod adecvat scripturile și foile de stil, diferitele pluginuri de cache și minificare care sunt disponibile pot fi combinate corespunzător într-o singură foaie de stil și script.
Caching? Da, cache. Alături de fuzionarea foilor de stil și a script-urilor, aceste pluginuri oferă un sistem pentru stocarea în memoria cache a iesirii din baza de date sau chiar întreaga pagină care iese. Ambele vor reduce în mod drastic timpul necesar încărcării unui site. Este dincolo de sfera acestei serii de a elabora pe larg pluginurile de caching disponibile și caracteristicile acestora, Adam Burucs a scris un articol care compară cele două mari plugin-uri de caching care este un loc bun pentru a începe dacă căutați câteva informații despre cele două.
Resursele externe sunt un pic interesant din toate acestea. Pe de o parte, utilizarea unui furnizor extern va descărca traficul de pe propriul server. De obicei, va fi mai rapid din cauza limitărilor browserului privind cantitatea de cereri care pot fi trimise unui singur server. Dar există un dezavantaj. Nu puteți controla ceea ce coboară de la gazda dvs. externă și trebuie să aveți încredere în faptul că datele vor rămâne aceleași, precum și că gazda rămâne disponibilă. În unele cazuri, ar putea fi o idee mai bună să vă păstrați resursele pe propriul dvs. site.
Pentru a rezuma: păstrați-l subțire, asigurați-vă că foile de stil și scripturile sunt la fel de mici pe cât le puteți obține, apoi le minificați și mai mult. Încărcați imagini la dimensiunea de care aveți nevoie și trageți-le printr-un optimizator cum ar fi smush.it sau kraken.io. Utilizați un plugin de cache ca un final final pentru ieșirea dvs. după ce ați minimizat toate elementele înainte de a introduce orice cache.
Mai există încă o tranșă din această serie, în care vom acoperi referințe suplimentare la subiectele pe care le-am discutat și sperăm să oferim câteva informații utile suplimentare.
Accentsconagua