upute za izradu web sjedišta u alatu · pdf filekorak - određuje se adresa web...
TRANSCRIPT
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