praksa wordpress
TRANSCRIPT
![Page 1: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/1.jpg)
Razvoj web sajta pomoću CMS alata WordPress
Prof. dr Angelina NjegušVanredni profesor
Niš, mart 2015.
![Page 2: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/2.jpg)
Agenda
Šta je CMS?
Šta je važnije sadržaj ili dizajn?
Osnove WordPress-a
Registracija
Kreiranje web strane
Kreiranje web posta
![Page 3: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/3.jpg)
Šta je CMS?
CMS - Content Management System
Informacioni sistem koji omogućava upravljanje sadržajem web sajta
![Page 4: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/4.jpg)
Šta je važnije sadržaj ili dizajn?
Dobar dizajn privlači, ali dobar sadržaj zadržava!
Dizajn i sadržaj treba da šalju istu poruku!
Dizajn i pisani sadržaj su ključni faktori u sticanju bolje pozicije kod pretraživača!
Web sajt je živa predstava i zahteva održavanje!
![Page 5: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/5.jpg)
Šta je važnije sadržaj ili dizajn?
Web dizajn i sadržaj su podjednako važni za uspešan razvoj i predstavljanje web sajta!
![Page 6: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/6.jpg)
CMS role
![Page 7: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/7.jpg)
Top 3 CMS alata
![Page 8: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/8.jpg)
Uvod u WordPress
Open source
Dobro pozicioniran kod pretraživača
Nije samo platforma za blogovanje!
Puno funkcionalnosti koje omogućavaju razvoj ozbiljnog eCommerce sajta!
![Page 9: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/9.jpg)
Osnove WordPress-a
WordPress je izgrađen oko dva osnovna koncepta:
Pages – web strana sa statičnim sadržajem, koji se ne menja često, na primer strana „O nama“
Posts – postovi se prikazuju hronološkim redom, na primer posts „Vesti“
![Page 10: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/10.jpg)
Registracija
https://wordpress.com/
![Page 11: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/11.jpg)
Registracija
Ukucajte spojeno vaše ime i prezime i godinu rođenja
![Page 12: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/12.jpg)
Registracija
Unesite vašu validnu email adresu
Unesite željene parametre za logovanje na sajt WordPress-a
Odaberite username
Odaberite željenu šifru
![Page 13: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/13.jpg)
Registracija
Kliknite na
No Thanks!
![Page 14: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/14.jpg)
Registracija
Odaberite besplatne teme za dizajn vašeg sajta
![Page 15: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/15.jpg)
Aktivirajte nalog
Otvorite vaš email i kliknite na Activate Account!
![Page 16: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/16.jpg)
Dobro došli u WordPress!
Kliknite na WP Admin!
![Page 17: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/17.jpg)
Odaberite željenu temu!
Kliknite na Appearance, a zatim na Themes!
![Page 18: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/18.jpg)
Odabir teme
Kliknite na Free
Odaberite Wilson temu i kliknite na Activate ili Preview
![Page 19: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/19.jpg)
Kreiranje Web strane!
Kliknite na Pages, a zatim na Add New!
Napomena:
Po difoltu su vam kreirane jedna strana About i jedan post Home!
![Page 20: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/20.jpg)
Kreiranje web strane
Naslov strane: Welcome
Tekst:
Obojite reči Univerzitet Singidunum drugom bojom
![Page 21: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/21.jpg)
Značenje menija
![Page 22: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/22.jpg)
Unos teksta i videa
Ubacite video
Pretražite na YouTube-u željeni video
Kliknite na Share i kopirajte link
Kliknite na Text Editor i postavite link
Kreirajte hiperlink
Otkucajte tekst: Posetite naš sajt www.singidunum.ac.rs
Selektujte adresu sajta i kliknite na ikonu za hiperlink
Unesite adresu:
![Page 23: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/23.jpg)
Pregled unetog sadržaja
Kliknite na Publish, a zatim Preview
![Page 24: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/24.jpg)
Ažuriranje postojeće strane
Otvorite postojeću stranu: About
Promenite naziv u: Kontakt
Kucajte u Text editoru sledeći tekst:
<h5 style="background-color: lightgrey;">Adresa:</h5>
Singidunum Univerzitet
Centar Niš
Nikole Pašića 28
18000 Niš
Srbija
<h5 style="background-color: lightgrey;">Pronađite nas::</h5>
![Page 25: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/25.jpg)
Ugrađivanje mape
Koraci dodavanja Google mape na stranu:
Idite na sajt maps.google.com
Ukucajte adresu: Nikole Pašića 28, Niš
Kliknite na Settings
![Page 26: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/26.jpg)
Ugrađivanje mape(nastavak)
Kliknite na Share or Embed Map
Odaberite karticu Embed Map
Odaberite mapu manje veličine: Small
Kopirajte link
U produžetku teksta (Text Editor) postavite (Paste) kopirani link
![Page 27: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/27.jpg)
Ubacivanje kontakt forme
U nastavku teksta (i dalje pod Text editor-om) kucajte:<h5 style="background-color: lightgrey;">Kontaktirajte nas:</h5>
Tel: 018/208300
e-mail: [email protected]
<h5 style="background-color: lightgrey;">Ukoliko želite možete popuniti i donji obrazac i mi ćemo vas kontaktirati:</h5>
Pređite na Visual Editor i kliknite na Add Contact Form
![Page 28: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/28.jpg)
Ubacivanje kontakt forme
Izmenite postojeća polja:
Umesto Name stavite Ime(prethodno kliknite na Edit)
Dodajte novo polje klikom na Add a new field koje ćete nazvati Prezime (tip polja je Text i čekirajte Required) i klikom na Move pomeriti do ispod imena
Dodajte novo polje Zanimanje (tip polja je Drop down), a nazivi opcija su: Profesor, Student, Radnik, Đak (ne mora da bude obavezno polje)
![Page 29: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/29.jpg)
Uređivanje kontakt forme
Kliknite na Email Notifications
Unesite željeni email, na koji će stizati sadržaji kontakt forme
![Page 30: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/30.jpg)
Finalni izgled kontakt forme
![Page 31: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/31.jpg)
Kreiranje posta
Pre nego što napravite svoj prvi post potrebno je da kreirate: Kategorije – služe za organizaciju postova. Neki postovi mogu imati
svoje nadređene (Parent) kategorije. Na primer, Kursevi i Konferencije mogu podređeni kategoriji Događaji.
Tagove – omogućavaju brže pronalaženje određenog sadržaja, lakšu navigaciju i pomažu pretraživačima da razumeju sadržaj vašeg sajta.
![Page 32: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/32.jpg)
Kreiranje kategorija
Kliknite na Posts, a zatim na Categories
![Page 33: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/33.jpg)
Izmena postojećeg posta
Kliknite na Posts i odaberite All Posts
Među postojećim se nalazi jedan post Hello World!
Umesto difoltnog teksta otkucajte sledeće i ubacite sliku:
Odaberite kategoriju: Događaji (sa krajnje desne strane)
![Page 34: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/34.jpg)
Ubacivanje slike
Odaberite slike (poželjno većeg formata) i sačuvajte na Desktopu
Kliknite na Add Media Upload Files
Prevucite ili kliknite na Select File i pronađite sa Desktopa vašu sliku
Kliknite Insert into Post
![Page 35: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/35.jpg)
Ubacivanje ankete (Poll)
Kliknite na Add Poll
![Page 36: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/36.jpg)
Kreiranje novog posta
Kliknite na Posts, a zatim na Add New
Naslov: Praksa
Nakon ukucanog prvog pasusa, kliknite na Insert read more tag, kako bi se tekst prelomio:
Ubacite Featured Image (sa krajnje donje desne strane)
Selektujte kategorije Događaji i Praksa
Kreirajte tagove: praksa, đaci
![Page 37: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/37.jpg)
Izgled posta
![Page 38: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/38.jpg)
Kreiranje menija
Appearance – Menus
Kreirati meni pod nazivom GlavniMeni, a zatim dodati kreirane strane i kategorije
![Page 39: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/39.jpg)
Ubacivanje dodataka (Widgets)
Appearance – Widgets
Dodati Kalendar: kliknuti na Calendar i prevući mišem do Sidebar. Dati naslov (Title) Kalendar događaja
Dodati meni: kliknuti na Custom Menu i prevući do Footer 1
Dodati pretragu: kliknuti na Search i prevući do Sidebar
Dodati prikaz najkorišćenijih i traženih tagova: Tag Cloud i prevući do Sidebar
Dodati fiksni tekst: Text prevući do Sidebar i uneti naslov Student u centru učenja, a u okviru sadržaja Kontakt telefon i email.
Dodati sliku: Image prevući do Sidebar. Dodati link na sliku.
![Page 40: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/40.jpg)
Podešavanja Settings
Opšta podešavanja: Settings - General Site title: modifikovati naziv sajta
Biranje Home stranice: Settings – Reading Front page display: Your latest posts ili A static page
![Page 41: Praksa WordPress](https://reader031.vdocuments.net/reader031/viewer/2022031817/55abcfaa1a28ab8b228b4792/html5/thumbnails/41.jpg)
Prof. dr Angelina NjegušE-mail: [email protected]