Uvod u veb dizajn WORDPRESS – 3

Karlo Bala

dr Zoltan Geler

2/41

Sadržaj

1. Osnovni elementi veb sajta

2. Teme

3. Vidžeti

4. Dodaci

5. Osnovna podešavanja

6. HTML i CSS u WP

3/41

Osnovni elementi veb sajta - 1

1. Zaglavlje (Header)

2. Glavni sadržaj (Main Content)

3. Traka (Sidebar)

4. Podnožje (Footer)

4/41

Osnovni elementi veb sajta - 2

Zaglavlje

Naziv sajta, logo, meni, polje za pretragu, itd.

Najčešće isti format na svakoj strani sajta

Glavni sadržaj

Članci (dinamički sadržaj - blog)

Stranica (statični sadržaj - page)

Traka

Prostor za vidžete

Može biti više traka i mogu biti sa obe strane

Footer

Kopirajt

5/41

Sadržaj

1. Osnovni elementi veb sajta

2. Teme

3. Vidžeti

4. Dodaci

5. Osnovna podešavanja

6. HTML i CSS u WP

6/41

Teme

Skup osobina koje definišu korisnički i administratorski interfejs sajta (sličan princip kao kod tema u PP) Uopšteni izgled sajta

Fontovi

Boje

Raspored elemenata

Način prikaza bloga

Promenom teme menja se kompletan izgled veb sajta!

Promenom teme ne gubi se sadržaj, ali je neke elemente potrebno ponovo postaviti na mesto (pr. meniji – Manage Locations, vidžeti, itd.)!

7/41

Teme – primer

HappenStance MH Newsdesk lite

8/41

Teme – skladište

9/41

Teme – pretraga i instalacija 1

Dodaju se pritiskom na dugme ”Add New”

Mogu se pretraživati (“Search themes”) i instalirati (“Install”)

Mogu se postaviti i slanjem zip arhive sa računara (“Upload theme”)

U slučaju nemogućnosti instalacije teme (sajtovi hostovani na serveru FF) u fajl wp-config.php dodati sledeće: define('WP_PROXY_HOST', 'proxy.uns.ac.rs');

define('WP_PROXY_PORT', '8080');

define('WP_PROXY_BYPASS_HOST', 'localhost');

10/41

Teme – pretraga i instalacija 2

11/41

Teme – instalacija sa računara

Pronaći temu na sajtu www.wordpress.org i sačuvati zip arhivu na računaru

Poslati zip arhivu teme na sajt koristeći opciju

12/41

Teme - podešavanja

13/41

Teme – podešavanje zaglavlja

Podešavanje zaglavlja zavisi od teme do teme

Varira broj opcija, ponekad se razlikuju i nazivi za iste stvari

Podešavanja se nalaze u:

Appearance -> Customize -> …Header…

14/41

Sadržaj

1. Osnovni elementi veb sajta

2. Teme

3. Vidžeti

4. Dodaci

5. Osnovna podešavanja

6. HTML i CSS u WP

15/41

Vidžeti

Mali blokovi (elementi) koji vrše određenu funkciju (prikazuju neki poseban sadržaj)

Mogu se postaviti u traku ili drugo mesto predviđeno za postavljanje vidžeta (widget area)

16/41

Vidžeti - skladište

1. Dostupni vidžeti

2. Predefinisana mesta za vidžete

3. Postavljeni vidžeti (Right Sidebar - desna traka)

17/41

Vidžeti – podrazumevani 1

Prikazivanje mesečne arhive članaka

Prikazivanje kalendara

Prikazivanje kategorija

Prikazivanje korisničkog menija

Primer korisničkog vidžet menija

18/41

Vidžeti – podrazumevani 2

Prikazivanje stranica

Prikazivanje skorašnjih članaka

Prikazivanje polja za pretragu

Prikazivanje proizvoljnog teksta (može i HTML-a)

Primer vidžeta skorašnjih članaka

Primer polja za pretragu

19/41

Vidžeti - postavljanje

Novi vidžeti mogu se dodati u WP instalacijom dodataka (nema svaki instalirani dodatak svoje vidžete!)

Postavljaju se na stranicu prevlačenjem na željeno mesto (pr. right sidebar – desna traka)

20/41

Vidžeti - podešavanje

21/41

Vidžeti - pregled

22/41

Vidžeti – uklanjanje sa stranice

23/41

Sadržaj

1. Osnovni elementi veb sajta

2. Teme

3. Vidžeti

4. Dodaci

5. Osnovna podešavanja

6. HTML i CSS u WP

24/41

Dodaci

Dodaju novu funkcionalnost u WP

Bolji editor, višejezični sajt, prevod sa ćirilice na latinicu, kalendar događaja, Google mape, itd.

25/41

Dodaci – instalacija - 1

Dodaci se iz WP mogu instalirati klikom na link “Add New” (na slici levo)

26/41

Dodaci – instalacija - 2

Mogu se pretraživati pre instalacije

Mogu se instalirati sa računara

Nakon instalacije dodatak se mora aktivirati!

Ponekad je neophodno i podešavanje pre upotrebe!

27/41

Dodaci – instalacija sa računara

Pronaći dodatak na sajtu www.wordpress.org i sačuvati zip arhivu na računaru

Poslati zip arhivu dodatka na sajt koristeći opciju

28/41

Korisni dodaci - 1

Unapređeni tekst WYSIWYG editor

Višejezična podrška, omogućava pisanje sadržaja na više jezika

29/41

Korisni dodaci - 2

Konverter iz ćirilice u latinicu

Slajderi

Za srpski jezik podrazumevano pismo je ćirilica

Ovaj dodatak prevodi nazive ugrađenih elemenata (vidžeta) na latinicu

30/41

Korisni dodaci - 3

Foto galerija

Google mapa na sajtu

31/41

Sadržaj

1. Osnovni elementi veb sajta

2. Teme

3. Vidžeti

4. Dodaci

5. Osnovna podešavanja

6. HTML i CSS u WP

32/41

Osnovna podešavanja - 1

Naziv sajta, formati datuma i vremena, jezik

33/41

Osnovna podešavanja - 2

Početna stranica (blog – levo, statičan sadržaj - desno)

34/41

Osnovna podešavanja - 3

Komentari (isključivanje mogućnosti komentarisanja članaka)

35/41

Osnovna podešavanja - 4

Podešavanje skladišta sadržaja (podrazumevane rezolucije fotografija)

36/41

Osnovna podešavanja - 5

Prilikom postavljanja slika u skladište sadržaja, WP automatski pravi četiri veličine: Thumbnail, Medium, Large i Full Size

Za konfigurisanje maksimalne veličine fajla (podrazumevano je 2MB) koji se može poslati potrebno je: Otvoriti fajl pod nazivom .htaccess Uneti sledeće redove na kraj (broj označava

maksimalnu veličinu fajla za slanje) php_value upload_max_filesize 8M

php_value post_max_size 8M

php_value max_execution_time 300

php_value max_input_time 300

37/41

Sadržaj

1. Osnovni elementi veb sajta

2. Teme

3. Vidžeti

4. Dodaci

5. Osnovna podešavanja

6. HTML i CSS u WP

38/41

HTML u WP

Služi za dodavanje elemenata kojih nema u editoru i/ili dodacima (ubacuje se kôd samo za elemente – ekvivalentno <body> sekciji)

39/41

CSS u WP - 1

Služi za dekorisanje elemenata koje nije predviđeno editorom

40/41

CSS u WP - 2

HTML i CSS kod

41/41

CSS u WP - 3

Rezultat primene HTML-a i CSS-a

Uvod u veb dizajn WORDPRESS – 3

Karlo Bala

dr Zoltan Geler