Šta je potrebno znati pre WordPressa
Ovo je jedna od važnih tema ako želite da se bavite pravljenjem sajtova u WordPressu. Kako su osnovni jezici weba html i css, njih neizostavno treba znati i to nema alternativu. Dolaskom page buildera to je pogotovo postalo bitno jer građenje sadržaja je bazirano na elementima koji povlače ništa drugo nego css pravila. Ako noćete dalje na custom teme onda vam treba i JS i PHP, ali nije nužno u startu ako ne radite custom teme.
Nephodna su i neka tehnička znanja, ali to možete usput da naučite.
Ako ne radite na lokalu morate imate web hosting: Zapravo to je server na kome će se nalaziti vaša WordPress instalacija. Mnogi hosting provajderi nude posebne pakete za WordPress, što olakšava instalaciju i održavanje, moj predlog su dva pristupa ili neko C panel okruženje ili neki namenski hosting, ali o tome ću pisati u posebnom tekstu. Većina opcija su C panel varijante i to je univerzalna priča.
Domen je naredna svtvar koja vam je nephodna i to je zapravo adresa vaše stranice na internetu vassajt.com . Možete ga registrovati preko hosting provajdera i zene su od 5 do 6 evra do 20, a imate i skuplje opcije .pizza, .agency i slične egzotičnije varijante. Klasika su .com .org . net, kao i nacionalni domeni kod nas je .rs, u hrvatskoj .hr, bosni .ba itd…..Predlog je ako nemate verzije na drugim jezicima da uzmete nacionalni domen. Uskoro će biti zasebna opširna tema hostinga i domena, servera…tako da sad neću ići u dubinu.
Ipak osnova veba su neophodni pa da prvo pojasnimo HTML
Strukturu dan donosi HTML, određujući šta je naslov, paragraf, slika, link, lista itd…. Bez HTML-a, sadržaj ne bi imao smislenu organizaciju i to je ono što je osnova svega. HTML pomaže čitaču veba (browseru) da razume sadržaj.
Semantika je druga važna stavka i došlja u verziji 5 HTML-a i omogućava da se sadržaj označi na način koji je razumljiv pretraživačima i drugim alatima, što je važno za SEO i pristupačnost. Nije sve opšti tak celine DIV, već su odvojeni Header, Aside, Section, Article, Footer…što je važan signal browseru o kojem delu sadržaja je reč.
Imate snimak ispod, ali na ovom članku umate i tekstualni deo.
Magiju ipak donosi CSS
CSS kontroliše vizuelni izgled web stranica. Boje, fontovi, veličine, raspored elemenata na stranicama – sve to se definiše pomoću CSS-a i njemu dugujemo lepotu sajtova.
CSS omogućava da se web stranica prilagodi različitim uređajima i veličinama ekrana (to se sove responzivni dizajn). Ovaj pristup je sad standard, jedna od glavnih stvari je da na moblinim uređajima i tabletima sve ok.
Takođe i u ovom delu teksta delim link na kome imate pored ovog videa ispod i tekstualni deo o CSS-u.
Zašto je ovo važno za WordPress?
Teme: WordPress teme su napravljenje pomoću HTML, CSS, PHP kao i JS koda. Poznavanje HTML-a i CSS-a vam omogućava da bolje razumete kako teme funkcionišu i da ih prilagodite svojim potrebama. Ali često i u samom kontentu, widgetima ima CSS-a ne možete zaobići nikako. Na sajtu wordpress org imate preko 11000 besplatnih tema.
Prilagođavanje: AKo ne nameravata da pravite sopstvene teme, poznavanje HTML-a i CSS-a vam omogućava da napravite manje izmene ili veće na postojećim temama (npr. promena boja, fontova, dodavanje elemenata) i ovo će biti vaša svakodnevica.
Kreiranje sadržaja i SEO: Poznavanje HTML-a vam omogućava da pravilno formatirate tekst, ubacujete slike i video zapise, kreirate tabele i drugi sadržaj u WordPress block editoru (ilil u nekom od page bildera) i da razumete pravi način kako to treba da uradite, pored toga i osnove dizajna uopšteno morate da znate, a o tome sam takođe pisao na blogu.
HTML i CSS su prosto temelj weba, a WordPress je platforma koja počiva na tim temeljima. Poznavanje ovih jezika će vam dati veću kontrolu nad vašom WordPress stranicom i omogućiti vam da je prilagodite svojim potrebama i željama, a pre svega želje klijenata su ono što vas tera da budete đto bolji. Zahtevi će biti i da radite i na zadati dizajn iz figme tako ove jezike morate znati.
Izrada layouta pomoću flexibilnih kontejnera
CSS flexbox je takođe važan segment, to je trenutno najdominantniji CSS pristup i potpuno je podražan od browsera za razliku od Grida i samim tim Flexbox morate naučiti.
Da bi vam taj posao išao lakše to možete naučiti besplatno na Websites Workshop besplatnom kursu Web dizajna. U linku ispred imate kategoriju koja sadrži članke u kojima imate i video sadržaje.
A ako želite samo video evo ga jedan konkretan video za Flexbox.
I na kraju projekat
Kada sam snimao ovaj besplatan kurs ja sam prvo snimio ovaj snimak koji ovde stavljam kao zadnji, ali mogao je slobodno biti i prvi u kome objađnjavam html, css i flexbox koncepte pa posle zalazite u dubinu, ali evo ja predlažem ovaj redosled kao u ovm članku.
CSS Flexbox će vam olakšati razumevanje i kreiranje layouta na vašim veb stranicama, uz Flexbox to je postao mnogo lakše.
Kada prođete ovaj projekat imaćete lepu osnovu za dalje vežbanje i nadgradnju.
Ima nešto još, što nisam siguran da li si spomenuo…
Pre nego što neko hoće da uđe u svet developera mora da nauči da koristi internet, tj. browsere i aplikacije 🙂
Radoznalost i spremnost na učenje kako funkcioniše internet je prvi korak, pa posle toga sledi kreativnost i želja da se ostavi svoj otisak na netu.
Veruj mi da postoji neko ko se još ne snalazi sa email-om.