1

Upute za izradu web sjedišta u alatu

Wordpress

1. Postupak registracije

Spojiti se na stranicu http://www.wordpress.com

Postupak registracije započet će klikom na gumb Create Website

Registracija se sastoji od 5 koraka.

1. Korak - određuje se adresa web stranice izrađene u Wordpressu.

Za vježbu upišite za naziv bloga svoje ime i prezime (zajedno, sve malim slovima, bez

razmaka), ali za projektni zadatak upišite naziv tvrtke koju obrađujete u zadaći.

2. . korak- otvaranje korisničkog računa na Wordpress–u

Popuniti polja s traženim podacima, upisati aktivnu e-mail adresu i odrediti korisničko

ime i lozinku s kojom će se svaki slijedeći put logirati na Wordpress.

3. korak – predložene su moguće domene za stranicu, domene se naplaćuju i potrebno je

OBAVEZNO kliknuti na gumb NO thanks s kojim prelazite na slijedeći korak

4. korak – mogućnost odabira teme stranice, odabrani predložak u kasnijem radu može se

mijenjati

2

NAPOMENA: Prilikom odabira željene teme pripaziti da li se radi o besplatnom

predlošku. Teme koje su označene oznakom Purchase ili $ se naplaćuju. Birati samo

besplatne predloške.

5. korak - odabir verzije WordPressa koja će se koristit za izradu web mjesta.

Odabrati Free for life – kliknuti na gumb Select free

2. Izrada web sjedišta - Rad s administratorskim sučeljem

Nakon završene registracije otvorit će se sučelje u kojem su prikazane sve mogućnosti

WordPressa

View Site

opcija koja omogućava pogled izgleda web sjedišta – kako ga posjetitelji vide

WP Admin

opcija kojom se ulazi u administratorsko sučelje koje omogućava upravljanje web

1

2

3

5

1

4

6

2

7

8

3

sjedištem pomoću izbornika kroz koji se oblikuje web sjedište

Stats

opcija koja omogućava praćenje aktivnosti na web sjedištu - daje izvještaje o broju

posjetitelja, pogleda, klikova, pretraživanju na stranici itd.

Blog Posts

opcija koja omogućava unos i uređivanje postova (vijesti)

Pages

opcija koja omogućava dodavanje stranica, izbornika i podizbornika na web sjedište

Themes

opcija koja omogućava izbor između različitih tema, predložaka za izgled web sjedišta.

Customize

opcija kojom se omogućava prilagodba web stranice za različite preglede (putem tableta,

mobitela), dodavanje widgeta, slika naslovnice itd.

Menus

omogućava se dodavanje i kreiranje izbornika na web sjedištu.

Kako bi se započela izrada web sjedišta jedan od načina je da se pristupi administratorskom

sučelju putem opcije WP Admin.

Klikom na opciju WP Admin otvara se sučelje prikazano na slici.

Izbornikom s lijeve strane upravlja se s izgledom i sadržajem web sjedišta.

3

4

5

6

7

8

4

2.1. Izbor predloška (teme)

Web sjedište bitan je dio prezentacije poduzeća i njegovog poslovanja, stoga je vrlo važno kako

će ona izgledati i kakav će dojam ostaviti na klijente jer često je upravo web stranica prvi

kontakt s potencijalnim kupcima. Web sjedište mora biti vizualno privlačno i potaknuti klijenta

na daljnje korištenje stranice. Wordpress daje velik izbor besplatnih predložaka (tema) koje se

mogu koristi za oblikovanje stranice.

Predložak se dodaje na sljedeći način:

U izborniku WP admin kliknuti na opciju Appearance, izbornik Appearance sadrži

nekoliko mogućnosti koje su prikazane u nastavku.

Izbor tema, predložaka

Dodavanje slike naslovnice, promjena vrsta i boje slova itd.

Dodavanje widgeta npr. pretraživači, kalendar itd.

Kreiranje izbornika

Upravljanje pozadinskim slikama i bojama web sjedišta

Optimiziranje web sjedišta za pregled na različitim

uređajima

kako bi izabrali ili promijenili predložak potrebni je kliknuti na opciju Themes

prikazat će se raspoložive teme (odabirati samo između besplatnih tema)

kako bi se aktivirala željena tema (predložak), u njenom donjem kutu potrebno je

kliknuti na opciju Activate

NAPOMENA: Odabirati teme koje su označene s oznakom Activate, teme koje su

označene sa oznakom Purchase se naplaćuju.

2.1.1. Dodavanje pozadinskih slika

Ako se umjesto predloženog dizajna i boja odabrane teme želi dodati slika kao pozadina web

sjedišta učinit će se kroz opciju Appearance.

kliknuti na opciju Appearance - Background

učitati sliku s računala ili iz galerije slika

nakon što se odabrana slika učita kliknuti na gumb Save Changes

5

2.1.2. Dodavanje slika u zaglavlje web sjedišta

Kako bi se dodala slika na u zaglavlje stranice, potrebno je učiniti sljedeće:

Kliknuti na opciju WP admin- Appearance - Customize - Header Image

Učitati sliku s računala ili iz galerije slika

Nakon što je odabrana slika učitana kliknuti na gumb Save Changes

2.2. Dodavanje stranica, izbornika i podizbornika na web sjedište

Web mjesto potrebno je popuniti s informacijama, slikama te ostalim sadržajima npr. podacima

o poduzeću, kontakt podacima, proizvodima i uslugama koje poduzeće nudi itd. Da bi se to

učinilo potrebno je napraviti stranice, podstranice, a time i izbornike, podizbornike kako bi

omogućili navigaciju po web sjedištu. Stranicama se upravlja pomoću opcije Pages koja se

nalazi na administratorskom sučelju Wordpress-a.

Putem opcije Pages – All Pages prikazat će sve stranice i podstranice web sjedišta

Kroz opciju Pages - Add New dodaje se nova stranica na web sjedište

Elementi dodavanja nove stranice

Upisati naziv stranice

Sadržaj stranice

Objava stranice

Opcija za Like i dijeljenje web sjedišta na društvenim Mrežama

6

Nakon unosa željenih podataka na stranicu kliknuti na gumb Publish, a nakon svake slijedeće

promjene kliknuti na gumb Update.

Važna opcija prilikom dodavanja nove stranice, izbornika te podizbornika je opcija Page

Attributes. Ona služi za određivanje stranica te podstranica i redoslijeda istih u prikazu

izbornika stranice. Ako prilikom dodavanja nove stranice za opciju Parent odaberemo No

parent definiramo da se radi o stranici, glavnoj stranici. Ukoliko želimo dodati podstranicu,

pod opcijom Parent odabire se stranica kojoj želimo dodati podstranicu.

Primjerice, stranici Proizvodi želimo dodati podstranice Proizvod 1, Proizvod 2. To će se učiniti

na sljedeći način, prilikom kreiranja stranice Proizvod 1 pod opcijom Parent odabirete

Proizvodi, a pod opcijom Order određuje se kojim će se redoslijedom prikazati Proizvod 1 ako

imate nekoliko podstranica stranice Proizvodi. Na isti način dodaje se i podstranica Proizvod 2,

pod opcijom Parent ponovno odabrati Proizvodi, ali pod opcijom Order je potrebno upisati broj

2, ukoliko želimo da se Proizvod 2 prikazuje ispod Proizvoda 1 u podizborniku. Ako je na obje

podstranice vrijednost opcije Order 0, prvi podizbornik biti će podstranica koja je zadnja

kreirana.

Postavke stranice Proizvodi Postavke stranice Proizvod 1

(stranica se nalazi u Izborniku web mjesta) (stranica je prvi podizbornik stranice

Proizvodi na web mjesta)

2.3. Postavke prikaza postova (vijesti) na početnoj stranici

Način prikaza početne stranice (Home page) određuje se putem opcije Settings - Reading.

Postoje 2 mogućnosti prikaza početne stranice, prikaza po posljednjem unesenom postu (Your

latest post ) ili prikaz putem statične stranice (Static page).

7

NAPOMENA: Za vježbu je potrebno postaviti opciju "Your latest post" da se na početnoj

stranici uvijek vidi najnoviji post (vijest).

2.3.1. Unos i uređivanje postova (vijesti)

Post predstavlja osnovni sadržaj bloga i obično se postavlja na početnu stranicu. Postovima

(vijestima) se upravlja kroz administratorsko sučelje putem opcije Posts.

Dodavanje novog posta (vijesti)

Kliknuti na opciju Posts - Add New Post

Nakon što su se unijeli svi željeni podaci kliknuti na gumb Publish

Post (vijest) je objavljena na početnoj stranici

Izmjena objavljenog posta (vijesti)

Kliknuti na Posts - All Post

Odabrati post (vijest) koja se želi izmijeniti

Kliknuti na opciju Edit

Nakon izmjene kliknuti na gumb Update

8

2.4. Umetanje slika i poveznica (linkova) na druge stranice

Vizualni element je prvo što posjetitelj stranice uoči te ako je on skladan i privlačan klijent će

nastaviti istraživati stranicu. Wordpress pomoću opcije Media omogućava dodavanje slika,

videa i ostalih medijskih sadržaja. Moguće je kreirati galerija slike

Pojedinačna slika na stranicu učitava se na sljedeći način:

Odabrati Pages – All Pages i odabrati stranicu na koju se žele unijeti slike

Klikom na gumb Add Media dolazi se do opcije za unos slika

Kliknuti na Select Files kako bi se odabrala slika ili slike koje se žele učitati na

web sjedište

Nakon unosa slika potrebno je klikom miša označiti jednu ili više slika koje se

žele unijeti na stranicu

Odabirom slike s desne strane pojavljuje se izbornik u koji se upisuje naziv slike,

opis, određuje da li će slika biti postavljena centrirano, lijevo ili desno, te veličina

slika

Kliknuti na gumb Insert into page kako bi se slika učitala na stranicu

Nakon što je odabrana slika učitana na stranicu, kliknuti na gumb Update

NAPOMENA: Nakon svake izmjene na stranici (dodavanje slika, poveznica, teksta itd.),

obavezno kliknuti na gumb Update kako bi promjena bila vidljiva na web sjedištu.

9

Dodavanje galerije slika

Postupak dodavanja galerije slika sličan je pojedinačnom dodavanju slika. Slike se mogu dodati

u obliku galerije na sljedeći način:

Odabrati Pages – All Pages te odabrati stranicu na koju se žele unijeti slike

Kliknuti na gumb Add Media dolazi se do opcije za unos slika

Odabrati opciju Create Gallery

Klikom miša označiti slike koje se žele prikazati u galeriji

Kliknuti na gumb Create a new gallery

Otvorit će se novo sučelje u kojem je potrebno odabrati način prikaza galerije

(Slideshow itd.)

Odabir prikaza galerije

U otvorenom sučelju kliknuti na gumb Insert gallery

Nakon što je galerija učitana na stranicu, kliknuti na gumb Update.

2.4.1. Dodavanje poveznica

Poveznica ili link označava vezu između dvije web stranice. One podrazumijevaju dijelove web

stranice, dio teksta ili slika preko kojih se sa web sjedišta prelazi na neku drugu stranicu bilo

vanjsku stranicu ili na drugu stranicu unutar web sjedišta. Poveznicama se upravlja kroz

administratorsko sučelje putem opcije Links.

Odabirom opcije Add New dodaje se nova poveznica

10

Prilikom dodavanja nove poveznice potrebno je unijeti Naziv poveznice (Name), web

adresu vanjske poveznice npr. http://www.efos.unios.hr/ i ostale tražene podatke

Klikom na gumb Add Link pohranjuje se poveznica

Na ovaj način WordPress pruža mogućnost pohrane vanjskih poveznica i stvaranje blogoteke.

2.4.2.Dodavanje poveznica na vanjske stranice

U slučaju kada se unutar novog posta ili stranice na web sjedištu poziva na određeni vanjski

izvor poveznica se dodaje na sljedeći način:

Označiti dio teksta na koji želimo dodati poveznicu

Kliknuti u izborniku na gumb koji postaje vidljiv tek nakon što je označen dio

teksta na koji se želi dodati poveznica.

U dobivenom prozoru kliknuti u tekst okvir URL desnim klikom miša, odabrati opciju

Paste ili Zalijepi i na taj način zalijepiti ranije kopiranu poveznicu (adresu web stranice

na koju se želi povezati) ili upisati web adresu stranice na koju se želi povezati.

11

Kliknuti na gumb Add Link

Nakon povratka u post ili stranicu na kojoj se dodaje kliknuti na gumb Publish ili

Update kako bi objavili post ili pohranili promjenu na stranici.

2.4.3. Dodavanje poveznica na stranice unutar web sjedišta Wordpress-a

Kada se unutar teksta na web sjedištu želi pozvati na stranicu koja se nalazi na web sjedištu

poveznica se dodaje na sljedeći način:

Označiti mišem tekst na koji želimo dodati poveznicu

Kliknuti u izborniku stranice na

U dobivenom prozoru (desna slika) kliknuti na Or link to existing content te odabrati

stranicu na koju se želi povezati

Kliknuti na Add Link

Nakon povratka u administratorsko sučelje kliknuti na gumb Update kako bi

pohranili promjenu na stranici.

2.5. Dodavanje Google maps-a

Kako bi se kupcima olakšalo pronalaženje poslovnice, sjedišta i lokacije poduzeća, nije

dovoljno navesti adresu poduzeća na stranici, kupcu je potrebno i vizualno približiti lokaciju

poduzeća. To je moguće ostvariti na jednostavan način uz korištenje mogućnosti koje pruža

usluga Google maps.

Ukoliko se na web sjedište želi dodati poveznica u obliku karte, učinit će se na sljedeći način:

12

Navigirati na stranicu http://maps.google.com/

U polje iznad karte unijeti željenu lokaciju

Nakon odabira tražene lokaciju kliknuti na gumb i odaberite Podijeli ili

ugradi lokaciju

Polje pod nazivom Paste HTML to embed in website (Zalijepite HTML da biste

ugradili u web lokaciju) označiti mišem i odabrati opciju Copy (Kopiraj)

Vratiti se na Wordpress stranicu web sjedišta na koju se želi postaviti karta npr. stranicu

nazvanu Gdje smo, Lokacija, Posjetite nas itd.

U tekst okvir kliknuti desnom tipkom miša i odabrati opciju Paste (Zalijepi)

Označiti mišem prethodno kopirani link te u izborniku stranice kliknuti na

2. korak - Kliknuti na poveznicu

1. korak - Označiti link

Klikom na otvorit će se sljedeći prozor

Kliknuti u polje URL desnim klikom miša i odabrati Paste (Zalijepi )kako bi kopirali

link koji je preuzet (kopiran) sa Google maps-a

Kliknuti na gumb Add Link

13

Nakon povratka na stranicu kliknuti na gumb Update

Izgled karte na web mjestu

2.6. Dodavanje formi (obrazaca)

Svrha svake stranice je približavanje web sjedišta postojećim i potencijalnim kupcima, ali i

prikupljanje informacija od istih. Što znači da je uz prezentiranje poduzeća i pružanje

informacija o proizvodima i uslugama potrebno prikupiti povratne informacije od kupaca putem

obrasca, upita, komentara.

Kako bi na stranicu dodali obrazac pomoću kojeg korisnik stranice može postaviti upit ili

ostaviti komentar koristi se opcija Add Contact Form.

Otvoriti stranicu na koju se želi umetnuti forma, obrazac npr. stranicu nazvanu Kontakt,

Kontakt obrazac, Upit, Postavite nam pitanje itd.

Kliknuti na gumb Add Contact Form

14

Prikazat će se forma u sljedećem obliku

Polje u formi uklanja se

klikom na –

Predloženi obrazac moguće je mijenjati na način da se označi željeno polje lijevim

klikom miša te odabrati opciju Edit , te dodavati nova polja u obrascu klikom na Add

a new field

Klikom na Add this form to my post obrazac će se unijeti na stranicu

Nakon povratka na stranicu na koju se unijela kliknuti gumb Update

2.7. Dodavanje anketa na stranice web sjedišta

Informacije od klijenata korisnik web sjedišta, osim putem formi, komentara i ostalih obrazaca

može prikupljati i uz pomoć anketa. Ankete služe za prikupljanje podataka, mišljenja te

stavova o točno određenim stvarima putem formuliranih pitanja u obliku anketnog upitnika.

Anketama se upravlja kroz administratorsko sučelje putem opcije Feedbacks na način:

Kliknuti na opciju Feedbacks

Kliknuti na opciju Polls

15

Odabrati opciju Add New

Klikom na gumb otvorit će se sljedeće sučelje

Pitanje ankete

Upis odgovora

Spremanje ankete

Odabir stila ankete

Nakon što su upisani podaci kliknuti na gumb Save Polls

Ako nakon pohrane ankete kliknuti na opciju Embed Poll in New Post i anketa će se

pojaviti na početnoj stranici

Nakon što je anketa kreirana može se dodati kao post na početnoj stranici, unutar neke

stranice u Izborniku web mjesta ili u obliku widgeta.

Dodavanje ankete unutar stranice

Otvoriti stranicu na kojoj se želi dodati anketa

U alatnoj traci stranice kliknuti na gumb Add Poll

Kliknuti na opciju Add New, otvorit će se sučelje putem kojeg će se kreirati anketa

Postupak izrade ankete je jednak je prethodno opisanom postupku ako se želi izraditi

nova ankete (ako se želi odabrati već kreirana (prethodno opisan postupak) potrebno je

kraj željene ankete označiti kvačicom kvadrat i odabrati opciju Embed in post)

Kliknuti na gumb Save poll za spremanje ankete

Kako bi se anketa učitala na stranicu u dobivenom prozoru kliknuti na opciju Embed

in post

Nakon povratka na stranicu na koju se dodala anketa kliknuti na gumb Update

16

Dodavanje ankete u obliku posta na početnoj stranici

Kliknuti u Izborniku Wordpress-a na opciju Post – Add New

Odabrati gumb Add Poll koji se nalazi u alatnoj traci posta

Otvorit će se prozor Polls koji nudi dvije opcije – odabir postojeće ankete te kreiranje

nove ponuđenim anketama koje su ranije kreirane ( ako se želi odabrati neka od već

postojećih anketa kliknuti na kvadratić kraj imena ankete te na opciju Embed in post.

Ako se želi kreirati nova anketa kliknuti na Add New (postupak ranije opisan)

Nakon unosa pitanja i odgovora, te oblikovanja ankete kliknuti na Save Poll

Nakon pohrane u gornjem lijevom uglu pojaviti će se opcija Embed in post

U postu kod ankete pojavit će se u obliku [polldaddy poll=7019292]

Kliknuti na gumb Publish kako bi se anketa pojavila u obliku posta na početnoj

stranici

2.8. Dodavanje veza na društvene mreža

Suvremeni marketing prepoznaje društvene mreže kao sve važniji alat za komunikaciju s

kupcima, ali i za pronalaženje novih kupaca. One omogućuju bržu, jednostavniju

komunikaciju, ali i besplatnu promociju poduzeća, te proizvoda i usluga. Iz tog razloga opcije

za Like i/ili Share na društvene mreže mogu se postaviti na svaku stranicu, od opisa poduzeća,

do proizvoda i usluga, kontakta te na postove.

Da bi se na web sjedištu dodale društvene mreže potrebno je na administratorskom sučelju

kliknuti na opciju Settings.

Klik na opciju Sharing

Popuniti profile po želji na ponuđenim društvenim mrežama

Opcija Sharing Buttons omogućava odabir društvenih mreža koje se žele prikazati na

stranici

Željenu društvenu mrežu označiti te prevući mišem iz opcije Available Services u

Enabled Service

Nakon odabira kliknuti na gumb Save Changes

17

2.9. Upravljanje widgetima

Widgeti su nezavisni sadržajni blokovi koji se mogu postaviti u područja na stranici koja

podržavaju widget dodatke kao što su npr. područja na desnoj strani stranice, bočna traka ili u

podnožju stranice.

Wordpress pruža velik izbor widgeta, a oni se dodaju na sljedeći način:

Kliknuti na opciju Appearance koja se nalazi u administratorskom sučelju

Odabrati opciju Widget

Izabrati željeni widget koji se nalazi na srednjem dijelu stranice, označiti klikom miša

i povlačiti do okvira Slidebar koji se nalazi najčešće na desnoj strani ili u podnožju

stranice

Primjer dodavanja ankete u obliku widgeta

Ako se anketu želi prikazati u obliku widgeta s desne ili lijeve strane stranice ovisno o

opcijama teme, učinit će se na slijedeći način:

Prvo je potrebno kreirati anketu ili odabrati postojeću anketu ako je ranije kreirana

Kliknuti na opciju u Izborniku Feedback – Polls

Označiti željenu anketu i kliknuti na opciju Embed& Link (opcija se pojavi kada se

pređe mišem po anketi, nalazi se ispod naziva ankete)

Pojavit će se slijedeći okvir :

Kliknuti na tekst koji se nalazi u okviru WordPress Shortcode, desni klik miša i

odabrati opciju Kopiraj (Copy) ili CTRL+C

Nakon što je kod ankete kopiran potrebno je odabrati widget

Kliknuti na opciju Appearance koja se nalazi u administratorskom sučelju

18

Odabrati opciju Widget

Izabrati widget pod nazivom Text koji se nalazi na srednjem dijelu stranice

Prevući mišem widget do bočne trake ( u nekim verzijama moguće je kraj naziva

widgeta kliknuti na opciju Add)

Otvorit će se prozor kao što je prikazan na slici

Napisati naziv ankete

Zalijepiti kod ankete,

kliknuti mišem unutar okvira

Desni klik ništa i odabrati opciju Zalijepi (Paste),

pojavit će se kod koji je kopiran po opcijom Ankete

Nakon što su ispunjeni svi podaci kliknuti na gumb Save Widget ili Save

Anketa prikazana kao Widget na stranici

19

3. Pregled izgleda web sjedišta

Nakon odabira teme, dodavanje stranica, widgeta, slika, poveznica i svih ostalih opcija izgled

web sjedišta u svakom trenutku može se pregledati na nekoliko načina

Klikom na naziv web sjedišta koji se nalazi u gornjem lijevom uglu administratorskog

sučelja ili

Klikom na korisničko ime koje se nalazi u gornjem desnom uglu i odabir naziva web

sjedišta

Za pregled izgleda web sjedišta na vježbama će se koristiti prva opcija, klikom na naziv web

sjedišta koji se nalazi u gornjem lijevom uglu administratorskog sučelja.

4. Postupak odjave iz administratorskog sučelja

Prije zatvaranja web preglednika i svakog kraja rada u Wordpress-u potrebno se odjaviti iz

administratorskog sučelja.

Kliknuti na korisničko ime koje se nalazi u gornjem desnom uglu

Kliknuti na opciju Log out