WordPress iznutra – tvoj prvi sajt od blokova
Dosta priče. Danas ulazimo u kuću.
I nije slučajno što se cela ova priča svodi na pravu građevinu. Ljudi koji su pravili WordPress razmišljali su isto kao zidar: složene stvari se grade od prostih, gotovih delova. Da budem i precizan, jer ovo je i stručna knjiga: taj prostor u kome slažeš blokove sagrađen je u React-u – JavaScript tehnologiji iza koje stoji Fejsbuk i na kojoj počivaju najveće svetske platforme. I svaki blok koji staviš na stranicu u stvari je jedna gotova React komponenta. Znači i programeri, kad prave najozbiljnije stvari na internetu, rade isto što i ti sada: slažu gotove blokove u celinu. Cigla po cigla, blok po blok – metafora kuće ovde prestaje da bude metafora.
A najbolji deo? Kad završimo, videćeš da je cela ta stranica napravljena od svega pet vrsta cigala.
Prvo dizajn, pa tek onda WordPress
Evo navike koju hoću da poneseš iz ove knjige, jer će ti uštedeti sate lutanja: ne otvaraj WordPress dok ne znaš šta praviš.
Najgore mesto za smišljanje dizajna je prazan ekran WordPress-a. Tamo svaka odluka ide sporo, sve deluje komplikovanije nego što jeste, i lako odustaneš pre nego što si počeo. Kao da smišljaš raspored soba dok već mešaš malter.
E sad, da budem pošten do kraja: u WordPress-u postoje i teme sa gotovim demo sadržajem. Uvezeš demo, zameniš slike, tekst i boje – i dobiješ sajt koji izgleda sasvim pristojno. To ume da bude dobro rešenje, i neću da ti ga krijem.
Ali mi ovde ciljamo više. Hoću da naučiš WordPress do te mere da možeš da napraviš sajt za klijenta, i da za sebe sagradiš nešto unikatno – baš onako kako si zamislio, a ne onako kako je zamislio autor tuđeg šablona. Gotov dizajn je useljenje u tuđu kuću sa tuđim nameštajem. Mi zidamo svoju.
Zato prvo sedamo u Canvu i crtamo stranicu. A možete napraviti neki dizajn u bilo kom drugom softveru za te potrebe. Ja sam za ovu knjigu odabrao Canvu, o razlozima ću pisati u delu kada budem ozbiljnije koristio Canvu. Za „Dnevnik jednog programera“ skica izgleda ovako: veliko zaglavlje sa fotografijom i naslovom, sekcija o temama dnevnika, „o meni“ sa slikom, tri kartice bloga, tri usluge, poziv na kontakt i podnožje. Sedam sekcija, odozgo nadole.
U Canvi biraš boje (moje su tamnoplava i crvena), font, raspored – sve na jednom mestu gde vidiš celu sliku i gde je lako probati pet varijanti za pet minuta.
I tu se dešava ono najvažnije: sve odluke padnu u Canvi. Kad posle otvoriš WordPress, ne odlučuješ više ništa – samo sklapaš po planu koji držiš pred sobom. A sklapanje je lak deo.
Komandna tabla tvoje kuće
Kad se uloguješ na tvojdomen.rs/wp-admin, dočeka te kontrolna tabla. Odavde se upravlja celom kućom.
Prvi utisak je „mnogo dugmadi“. Ali suština je u nekoliko mesta:
- Objave i Strane – tu živi tvoj sadržaj. Strana je nešto stalno (Početna, O nama, Kontakt). Objava je ono što se niže po datumu – blog, vesti. Za današnji projekat treba nam samo jedna strana.
- Biblioteka medija – tu stižu sve tvoje slike i fajlovi. Ubaciš jednom, koristiš gde hoćeš. Prvi posao pre sklapanja: izvezeš fotografije iz Canva skice i sve ih odjednom ubaciš ovde, da te čekaju spremne.
- Izgled – tu su teme.
- Dodaci – tu su plaginovi. Način kako da proširimo osnovne WordPress mogućnosti.
- Podešavanja – ime sajta i osnovne opcije. Podesiš jednom i zaboraviš.
Ne moraš danas sve da razumeš. Kao kad se useliš – ne znaš prvog dana šta koji prekidač pali. Naučiš one koje koristiš, ostali te čekaju.
Šta je tema
Tema je fasada i enterijer tvoje kuće. Ona određuje kako sajt izgleda: boje, fontove, gde stoji meni, kako se ređaju elementi na ekranu.
A najvažnija rečenica u ovom tekstu glasi: tema i sadržaj su odvojeni. Tvoji tekstovi i slike žive u baz podatakai, sami za sebe. Tema je samo izgled navučen preko njih. Ne sviđa ti se? Promeniš temu – a nijedna rečenica, nijedna slika ne nestaje. Preurediš kuću bez rušenja zidova.
To je jedna od najlepših stvari kod WordPress-a: nisi zaključan ni za jedan izgled, nikad.
WordPress stiže sa svojom osnovnom temom. Za današnji projekat ona je sasvim dovoljna – i baš zato je danas ne diramo. Neka bude gola, da se vidi šta radi sam WordPress. No ja ću instalirati drugu da bi prošli i teme praktično.
Šta su plaginovi
Ako je tema izgled kuće, plaginovi su sprave koje unosiš u nju.
Plagin je dodatak koji WordPress-u daje novu sposobnost, bez ijednog reda koda. Treba ti kontakt forma? Plagin. Galerija, backup, prodavnica, SEO alat? Plagin, plagin, plagin. Instaliraš – i kuća odjednom ume nešto što juče nije umela.
Danas nam ne treba samo dva jedan jer ide uz temu, to su dodatni blokovi i kontakt forma, da naš sajt uspostavi komunikaciju sa posetiocima. I to je namerno: hoću da vidiš koliko daleko WordPress ide sam, čist, sa tek malo dodataka. Plaginove ćemo zvati kad nam zatrebaju – a ne zato što „svi kažu da moraš da imaš ovih deset“.
Blokovi – cigle od kojih zidaš
I sad srce svega: okruženje u kome se pravi sadržaj. Novi WordPress uređivač (postao je podrazumevani uređivač u WordPress‑u 5.0, koji je objavljen 6. decembra 2018.) je razvijen kroz projekat Gutenberg, zove se Block editor, no ime ti ne treba – treba ti ideja. A ideja je prosta:
Sve je blok. Pasus teksta je blok. Naslov je blok. Slika je blok. Dugme je blok. Razmak između njih – i on je blok. Stranicu praviš tako što ređaš blokove jedan ispod drugog, kao cigle. A kad ti treba nešto jedno pored drugog – slika levo, tekst desno – blokove složiš u kolone. To je cela nauka rasporeda.
Sad uzimamo skicu iz Canve i gledaj kako se sedam sekcija prevodi u cigle:
Zaglavlje sa fotografijom i naslovom – jedan jedini blok, zove se Naslovnica (Cover). Ubaciš fotografiju, dodaš tamni preliv da tekst bude čitljiv, ukucaš naslov preko. Ovo je trenutak kad prvi put pomisliš „čekaj, pa ovo već liči na pravi sajt“ – a prošlo je pet minuta.
Teme mog dnevnika – grupa sa tamnoplavom pozadinom, unutra kolone: levo naslov, desno tekst i dugme. Ovde naučiš dve stvari odjednom – kako sekcija dobija boju i kako se pravi raspored levo-desno.
O meni – za šablon „tekst sa jedne, slika sa druge strane“ postoji gotov blok, Medija i tekst. Ne moraš uvek sam da slažeš kolone – za česte rasporede cigla već postoji.
Blog – tri kolone, u svakoj slika, naslov i pasus. Tri kartice, kao na skici.
Kako vam mogu pomoći – ista logika kao „Teme“: grupa sa pozadinom, tri kolone, dugme na sredini. I tu se desi klik u glavi: obrasci se ponavljaju. Treću sekciju sa pozadinom praviš sam, bez gledanja u uputstvo.
Poziv na kontakt – opet Naslovnica, druga fotografija, veliki naslov. Ciglu koju si naučio na vrhu stranice sad koristiš drugi put.
Podnožje – grupa sa crvenom pozadinom, tri kolone: mreže, mejl, adresa. Za društvene mreže postoji čak i gotov blok sa ikonicama.
I to je to. Sedam sekcija – a svega pet vrsta cigala: Naslovnica, Grupa, Kolone, Medija i tekst, Dugme. Sve ostalo su naslovi, pasusi i slike koje već znaš.
Boje uneseš jednom – tamnoplavu i crvenu iz skice – i ponavljaš ih kroz sekcije. Kuća ima jednu paletu, ne dugine boje. I to je razlika između sajta koji izgleda „sklepan“ i sajta koji izgleda smišljen.
Ovde tekst staje, jer dalje se ne priča – dalje se gleda i radi. U lekciji sklapam celu stranicu pred tobom, blok po blok, svaki klik: kako se blok dodaje, kako se boji, kako se pomera, gde su zamke. Tekst ti je dao mapu – lekcija ti vodi ruku.
Zašto prvo golim rukama
Možda će ti posle više ležati Elementor. Možda ćeš hteti svoju temu do poslednjeg fajla. Sve je to u redu, i sve to stiže u narednim tekstovima.
Ali hoću da prvo osetiš golu kuću. Jer kad jednom razumeš šta je tabla, šta tema, šta plagin, šta blok – nijedan alat posle nije magija koju slepo pratiš. Znaš šta radi ispod, pa alat biraš, a ne veruješ mu na reč.
To je razlika između čoveka koji koristi svoj sajt i čoveka koji zavisi od tuđeg znanja. A cela ova knjiga postoji zbog te razlike.
Napišite odgovor ili komentar