36
Uvod u veb dizajn WORDPRESS 2 Karlo Bala dr Zoltan Geler

Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

  • Upload
    others

  • View
    2

  • Download
    1

Embed Size (px)

Citation preview

Page 1: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

Uvod u veb dizajn WORDPRESS – 2

Karlo Bala

dr Zoltan Geler

Page 2: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

2/35

Sadržaj

1. Prikaz, skladište sadržaja i editor

2. Stranice (Pages)

3. Članci (Posts)

4. Povezivanje sadržaja (meniji)

Page 3: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

3/35

Upravljanje sadržajem u WordPress-u

Osnovni načini za prikaz sadržaja su:

Stranice (pages)

Članci (posts)

Stranice

Služe za prikazivanje statičnog sadržaja (sadržaj koji se ne menja često)

Hijerarhijski su uređene (odnos roditelj / dete)

Članci

Služe za prikazivanje dinamičkog sadržaja (sadržaj koji se često menja i dopunjuje)

Razvrstani su u kategorije

Page 4: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

4/35

Skladište sadržaja

Služi za čuvanje sadržaja poput slika, video zapisa, dokumenata i ostalih vrsta fjalova

Sadržaje je na stranice i članke moguće linkovati sa drugih sajtova, ali oni nestaju ukoliko se obrišu sa originalnog sajta

Prozor za rad sa skladištem sadržaja pokreće se klikom na link “Media”

Page 5: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

5/35

Skladište sadržaja – postavljanje

Novi sadržaj dodaje se klikom na dugme “Add New”

Fajlove je moguće prevući mišem iz drugih programa ili odabrati klikom na dugme “Select Files”

Page 6: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

6/35

Editor sadržaja

Za unos sadržaja na stranice i članke koristi se WYSIWYG (What You See Is What You Get) editor

Page 7: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

7/35

Editor sadržaja - opcije

1. Dodavanje sadžaja iz skladišta

2. Formatiranje

3. Povezivanje

Dodavanje i brisanje linkova

4. Dodavanje “Read more” oznake u tekst

5. Prikaz dodatnih opcija editora

6. Način prikaza (WYSIWIG ili Tekst)

7. Sakrivanje svih opcija u WP osim editora

Page 8: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

8/35

Editor sadržaja – dodavanje iz skladišta

Otvara se klikom na ikonu

U skladištu se mogu nalaziti slike, video materijali, dokumenti ili bilo koji drugi fajlovi

Sadržaj se ubacuje na mesto kursora u editoru klikom na željenu ikonu, a zatim i na dugme “Insert into post”

Page 9: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

9/35

Editor sadržaja - formatiranje

Formatiranje se vrši na sličan načio kao u programu Word

Nakon selektovanja sadržaja bira se alatka iz palete

Page 10: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

10/35

Editor sadržaja - povezivanje

Linkovi se ubacuju selektovanjem teksta (slike) i pritiskom na ikonu

Link je moguće uneti direktno u polje ili otvoriti dijalog prozor sa dodatnim opcijama klikom na točkić

U dijalogu dodatnih opcija nalazi se polje za unos URL-a linka, naziva linka, opcija za otvaranje u novoj kartici, polje za pretragu i lista stranica sajta

Page 11: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

11/35

Sadržaj

1. Načini prikaza sadržaja i editor

2. Stranice (Pages)

3. Članci (Posts)

4. Povezivanje sadržaja (meniji)

Page 12: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

12/35

Stranice (Pages)

Služe za prikazvanje statičnog sadržaja na sajtu (sadržaj koji se ne menja često)

Dodaju se klikom na link “Pages” sa leve strane Dashboard-a, a zatim na dugme “Add New”

Page 13: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

13/35

Stranice - primer

Page 14: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

14/35

Stranice – pregled i objava

Nakon unosa, stranica se može pregledati klikom na link “Preview” i/ili objaviti klikom na link “Publish”

Objavljena stranica vidljiva je svim posetiocima sajta

Page 15: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

15/35

Stranice – organizacija1

Stranice u WordPress-u su hijerarhijski organizovane u odnosu roditelj / dete

Može biti i bez roditelja (prvi nivo)

Hijerarhijska organizacija stranica ima strukturu poput foldera u Windows-u

Služi za internu organizaciju sadržaja radi lakše pretrage i modifikacije

Može da posluži i za automatsko uređenje veb sajta (npr. automatsko kreiranje strukture menija iz hijerarhija stranica – napredno korišćenje hijerarhija)

Page 16: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

16/35

Stranice – organizacija 2

U listi koja prikazuje hijerarhiju, stranica koja je dete uvučena je za jedno mesto u desno u odnosu na roditelja

Page 17: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

17/35

Stranice – opcije 1

Opcije za podešavanje stranica većinom se nalaze sa desne strane editora

Prikaz opcija može se menjati klikom na dugme “Screen Options”

Page 18: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

18/35

Stranice – opcije 2

Brza promena opcija može se uraditi u listi stranica klikom na dugme “Quick Edit”, nakon čega se pojavljuje sekcija za promenu opcija

Page 19: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

19/35

Stranice – opcije 3

1. Naziv stranice

2. Autor

3. Roditelj stranice

4. Redosled stranice u okviru istog roditelja

Page 20: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

20/35

Sadržaj

1. Načini prikaza sadržaja i editor

2. Stranice (Pages)

3. Članci (Posts)

4. Povezivanje sadržaja (meniji)

Page 21: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

21/35

Članci (Posts)

Služe za unos dinamičkog sadržaja koji je organizovan hronološki od najnovijeg ka najstarijem (Blog)

Na blog strani, članci se mogu prikazati u celosti ili u izvodu (sa ili bez slike, u kolonoma, itd.)

Page 22: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

22/35

Članci - dodavanje

Dodaju se klikom na link “Posts” sa leve strane Dashboard-a, a zatim na “Add new”

Page 23: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

23/35

Članci – organizacija 1

Nemaju hijerarhijsku strukturu poput stranica

Smeštaju se u kategorije (skladišta članaka) koje služe za filtriranje članaka prilikom pregleda

Članci koji nisu smešteni u neku od kategorija podrazumevano se smeštaju u kategoriju “Uncategorized”

Page 24: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

24/35

Članci – organizacija 2

Stranica za kreiranje i brisanje kategorija otvara se klikom na link “Posts” zatim na “Categories”

Page 25: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

25/35

Članci – organizacija 3

Kategorije su organizovane hijerarhijski slično kao i stranice

Svaka kategorija može, ali i ne mora da ima roditelja

Prilikom dodavanja nove kategorije unosi se naziv kategorije i roditelj

Page 26: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

26/35

Članci – opcije 1

Smeštanje članaka u određenu kategoriju vrši se tako što se popuni polje za potvrdu pored imena kategorije

Page 27: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

27/35

Članci – opcije 2

Brza promena opcija može se uraditi klikom na dugme “Quick Edit” nakon čega se pojavljuje sekcija za promenu opcija

Page 28: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

28/35

Sadržaj

1. Načini prikaza sadržaja i editor

2. Stranice (Pages)

3. Članci (Posts)

4. Povezivanje sadržaja (meniji)

Page 29: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

29/35

Povezivanje sadržaja

Radi lakše navigacije, sadržaji (stranice, članci, itd.) u WordPress-u povezani su linkovima

Linkovi se obično nalaze u vrhu ili sa strane sajta i grupisani su u menije (izbornike)

Page 30: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

30/35

Povezivanje sadržaja – meniji 1

Prozor za upravljanje menijima otvara se klikom na link “Appearance”, a zatim na “Menus”

Page 31: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

31/35

Povezivanje sadržaja – meniji 2

Kreiranje menija sastoji se od sledećih koraka:

1. Obeležavanje stranica, postova ili kategorija i dodavanje klikom na dugme “Add to Menu”

Page 32: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

32/35

Povezivanje sadržaja – meniji 3

Kreiranje menija sastoji se od sledećih koraka:

2. Uređivanje linkova mišem

Linkovi se prevlače mišem gore - dole i levo – desno

Linkovi koji su pomereni desno u odnosu na link iznad čine podmeni

Page 33: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

33/35

Povezivanje sadržaja – meniji 4

Kreiranje podrazumeva sledeće korake:

3. Dodeljuje se naziv meniju zatim se sačuva

Page 34: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

34/35

Povezivanje sadržaja – meniji 5

Kreiranje podrazumeva sledeće korake:

4. Odabira se lokacija za meni

U zavisnosti od ostalih podešavanja, sajt može imati više predviđenih pozicija za menije

Page 35: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

35/35

Povezivanje sadržaja – meniji 6

Dodavanje linka u meniju na prizvoljnu stranicu na internetu:

Otvoriti sekciju “Custom Links”

U polje URL uneti adresu stranice

U polje “Link Text” uneti naziv linka i kliknuti na dugme “Add to Menu”

Page 36: Uvod u veb dizajn WORDPRESS 2 - University of Novi Sadinformatika.ff.uns.ac.rs/wp-content/uploads/2017/05/uvod... · 2017-05-28 · 15/35 Stranice – organizacija1 Stranice u WordPress-u

Uvod u veb dizajn WORDPRESS – 2

Karlo Bala

dr Zoltan Geler