Prezentacija Sibina Grašića o greškama koje developeri u Wordpressu najčešće prave. Držana na 5. WP Serbia Meetupu.

1. Najčešće greške WordPress developera
S I B IN G RA Š IĆ / E T FOVAC .COM / S I B IN.G RAS IC@ZOOL.RS

2. O meni
• Student ETF-a / Softversko inženjerstvo
• Web konsultant u Fondaciji Novak Đoković
• WordPress developer od 2010.
• Preko 200 realizovanih WordPress projekata
• Specijalizovan za HighPerf custom WP sisteme

3. Najčešće greške u organizaciji
I KAKO IH ZAOBIĆI

4. Hiljade i hiljade dodataka
• Dodaci – bitni za svaku WP instalaciju
• Tri kategorije:
- nephodni
- opcioni
- nepotrebni
• Neophodni: SEO, bezbednost, xml sitemap
• Opcioni: Jetpack, , keširanje
• Nepotrebni: CPT i custom taksonomije, veličine slika, bekap
• Namenski razvoj vs plugin?

5. O čemu voditi računa?
Overhead Kompatibilnost
Core
funkcionalnost?
KISS

6. Overhead
• Bez obzira na sve, svaki dodatak ima overhead!
• Instanciranje klasa
• Čuvanje i učitavanje konfiguracije iz baze
• Optimizovanost koda?
• Bezbednost (timthumb)
• Ko je autor?

7. Kompatibilnost
• Sa većim brojem dodataka, veća šansa da nešto krene naopako
• Najčešći problemi:
- kod preklapanja funkcionalnosti
- ažuriranja sistema
- neažuriranja instaliranih dodataka
- promene specifikacije ili dodavanja funkcionalnosti
• Jedan dodatak pravi probleme u sinergiji sa drugim

8. „Core“ funkcionalnosti
• Sve funkcionalnosti koje se tiču podešavanja teme:
- veličine slika
- widgeti
- meniji
- CPT i custom taksonomije
• Siva zona u WP kodeksu
• Dodaci predstavljaju ogroman overhead
• Definisani set funkcionalnosti se vezuje za temu ili namenski
dodatak

9. Keep It Simple (Stupid)
• Nemojte izmišljati točak
• Nekad je dodatak brže i bolje rešenje od 250 linija koda
• Praktični primeri – kada je plagin bolje rešenje:
- jednostavan metabox -> Advanced Custom Fields
- FB opengraph -> WordPress SEO by Yoast®
- SM widget / integracija sa 3rd party servisima (Flickr, SmugMug)

10. Greške u kodiranju
SVI GREŠIMO – BITNO JE DA NAUČIMO NEŠTO IZ
GREŠAKA

11. Greške u kodiranju
Layering male Template
hijerarhija
CSS & JS
loading srednje
query
posts
get
posts
AJAX velike

12. Template hijerarhija

13. Template hijerarhija – dobra praksa
• front-page.php za glavnu stranicu – ne page template ili index.php
• Category / tag / search umesto archive.php
• Koristeći sve fajlove izbegavamo kondicionale
• Index.php mora da postoji kao fallback
• Page templates – isključivo za unikatne strane (kontakt, about, itd.)

14. Raslojavanje
• Delove koda / html-a koji se ponavljaju smestiti u zasebne fajlove
• Jedna izmena se primenjuje svugde gde se template fajl koristi
• Lakša organizacija koda po folderima
• Izbegavati slug i id definicije (page-contact.php)
• Drastično olakšava održavanje i potencira code reuse
• Get_template_part – WP način za „pametan“ PHP require

15. Raslojavanje - primeri

16. Učitavanje CSS i JS fajlova
• Hardkodovanje skripti uzrok najvećeg broja problema na frontendu
• Onemogućava kontrolu nad učitavanjem fajlova
• Povećava vreme učitavanja stranice
• WP kodeks zahteva učitavanje putem wp_enqueue funkcija

17. Učitavanje CSS-a i JS-a
Nepravilno:
Pravilno:

18. Zloupotreba query_posts funkcije
• Query_posts najčešće koriste developeri da prekroje template fajl
• Velika mana – zahteva još jedan SQL upit
• Dodatni problem – potreban $query_string za pravilnu paginaciju
• Codex preporučuje kačenje na pre_get_posts za izmenu WP_Query
• Na većim sajtovima filter eliminiše upite baze u 90% slučajeva

19. Primer zloupotrebe
• Upotreba query_posts na ovaj način:
- zahteva kondicional
- pravi novi SQL upit
- pravi šum u template fajlu

20. Pravilan način
• Pre_get_posts:
- vrši izmenu pre svih filtera
- ne pravi problem sa paginacijom
- nema overhead
- poboljšava keširanje

21. AJAX
• Način za dinamičko učitavanje podataka na web stranici
• WordPress nativno podržava AJAX zahteve kroz admin-ajax.php
• Svi drugi načini korišćenja AJAX-a su pogrešni
• Korišćenjem ne-nativnih pristupa smanjujemo bezbednost
• Jednostavna granulacija pristupa uz jednu liniju koda

22. Loši načini kodiranja AJAX funkcionalnosti
• AJAX putem fajla koji učitava wp-load.php
• AJAX putem template fajlova
• AJAX putem zasebnih GET i POST varijabli
Svi ovi načini otežavaju upotrebu wp_nonce funkcija a dodatno:
• Omogućavaju još jedan vektor napada
• Zahtevaju hardkodiranje parametara
• Otežavaju održavanje i ažuriranje isstema

23. Get_posts vs WP_Query
• Get_posts je funkcija koja se bazira na WP_Query objektu
• Oba načina služe za dohvatanje postova po nekom kriterijumu
• Oba načina prihvataju iste argumente za upit
• Oba su bezbedna za korišćenje u svakom delu teme / dodatka
• I jedan i drugi način imaju prednosti i mane

24. Primeri korišćenja get_posts i WP_Query
• Get_posts se koristi u slučajevima gde:
- ne planiramo da koristimo post funkcije (npr: the_title)
- su nam potrebne samo određene informacije vezane za post
- ne želimo prikazujemo postove na frontendu
• WP_Query koristimo u situacijama kada:
• - pravimo sekundarni loop
- prikazujemo postove na frontendu
- planiramo da vršimo dinamičku filtraciju postova na osnovu filtera

25. Pitanja?
Layering male Template
hijerarhija
CSS &
JS
loading
srednje
query
posts
get
post
s
AJAX velike