praksa wordpress

41
Razvoj web sajta pomoću CMS alata WordPress Prof. dr Angelina Njeguš Vanredni profesor Niš, mart 2015.

Upload: angelina-njegus

Post on 19-Jul-2015

122 views

Category:

Internet


4 download

TRANSCRIPT

Page 1: Praksa WordPress

Razvoj web sajta pomoću CMS alata WordPress

Prof. dr Angelina NjegušVanredni profesor

Niš, mart 2015.

Page 2: Praksa WordPress

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

Šta je CMS?

CMS - Content Management System

Informacioni sistem koji omogućava upravljanje sadržajem web sajta

Page 4: Praksa WordPress

Š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

Š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

CMS role

Page 7: Praksa WordPress

Top 3 CMS alata

Page 8: Praksa WordPress

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

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

Registracija

https://wordpress.com/

Page 11: Praksa WordPress

Registracija

Ukucajte spojeno vaše ime i prezime i godinu rođenja

Page 12: Praksa WordPress

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

Registracija

Kliknite na

No Thanks!

Page 14: Praksa WordPress

Registracija

Odaberite besplatne teme za dizajn vašeg sajta

Page 15: Praksa WordPress

Aktivirajte nalog

Otvorite vaš email i kliknite na Activate Account!

Page 16: Praksa WordPress

Dobro došli u WordPress!

Kliknite na WP Admin!

Page 17: Praksa WordPress

Odaberite željenu temu!

Kliknite na Appearance, a zatim na Themes!

Page 18: Praksa WordPress

Odabir teme

Kliknite na Free

Odaberite Wilson temu i kliknite na Activate ili Preview

Page 19: Praksa WordPress

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

Kreiranje web strane

Naslov strane: Welcome

Tekst:

Obojite reči Univerzitet Singidunum drugom bojom

Page 21: Praksa WordPress

Značenje menija

Page 22: Praksa WordPress

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

Pregled unetog sadržaja

Kliknite na Publish, a zatim Preview

Page 24: Praksa WordPress

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

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

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

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

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

Uređivanje kontakt forme

Kliknite na Email Notifications

Unesite željeni email, na koji će stizati sadržaji kontakt forme

Page 30: Praksa WordPress

Finalni izgled kontakt forme

Page 31: Praksa WordPress

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

Kreiranje kategorija

Kliknite na Posts, a zatim na Categories

Page 33: Praksa WordPress

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

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

Ubacivanje ankete (Poll)

Kliknite na Add Poll

Page 36: Praksa WordPress

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

Izgled posta

Page 38: Praksa WordPress

Kreiranje menija

Appearance – Menus

Kreirati meni pod nazivom GlavniMeni, a zatim dodati kreirane strane i kategorije

Page 39: Praksa WordPress

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

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

Prof. dr Angelina NjegušE-mail: [email protected]