Sadržaj Uvodna reč... 3 Instalacija WordPress-a na online server... 3 Pristup admin panelu sajta... 5 Unos članaka... 8 Unos fotografija i multimedije... 10 Ažuriranje stranica... 11 Komentari... 12 Instalacija teme... 13 Panel Settings... 15 Galerija... 16 Ažuriranje banera... 19 Završna reč... 22 2
Uvodna reč Ovaj e-book je primarno namenjen ljudima koji se prvi put susreću sa ažuriranjem sajta na WordPress platformi. Cilj je da približi sve opcije WordPress-a na jednostavan način kroz tekst i slike. Kroz e-book je opisan rad sa panelom koji je na engleskom jeziku, iz prostog razloga što se engleski panel više koristi u praksi. E-book će u budućnosti sigurno biti dopunjen novim detaljima. Svoje sugestije, ideje i impresije možete slati na email kontakt@mweb.rs, kako bi ovaj e- book bio još bolji. Instalacija WordPress-a na online server Napomena: ukoliko već imate postavljen sajt, ovaj podnaslov, slobodno preskočite. U ovom poglavlju ćemo vam pokazati kako možete da instalirate WordPress preko cpanel-a. CPanel je online softver koji omogućava olakšano upravljanje web serverom i u glavnom dolazi sa vašim hostingom. CPanel poseduje jedan sjajni dodatak: Fantastico De Luxe preko koga možemo na dosta lak način da instaliramo WordPress. Kako instalirati WordPress pomoću cpanel-a i Fantastico De Luxe-a: Korak 1: Logujemo se na cpanel našeg sajta pomoću podataka koje smo dobili od našeg hosting provajdera. Za pristup cpanel-u koristimo sledeću adresu: http://www.adresanasegsajta.com/cpanel. Posle unošenja podataka pristupamo cpanel-u. Korak2: U delu Software/Services pronalazimo ikonicu za Fantastico De Luxe(foto 1). Klikom na nju pokrećemo wizard za instalaciju WordPress-a. Foto 1. 3
Korak3: Kliknuti na WordPress sa leve strane pod sekcijom Blogs i pokrenuti New Instalation. Foto 2. Korak4: Sledeći korak je da popunimo podatke o sajtu. Foto 3. 4
Preporuka je da polje za Install in directory ostavite prazno. Korak5: Posle popunjavanja neophodnih podataka kliknuti na dugme Install WordPress. Za kraj instalacije ćete uneti vaš email rad potvrde i time je instalacija WordPress-a završena. Za pristup WordPress-u korstite sledeću adresu: http://www.adresanasegsajta.com/wp-admin. Pristup admin panelu sajta Administraciji sajta se pristupa putem linka adresasajta/wp-admin/ gde se nalazi panel za logovanje (foto 4.), a u polja se unose korisničko ime i lozinka Foto 4. Nakon logovanja pristupa se admin panelu (foto 5.) odakle se vrši ažuriranje sajta. WordPress platforma predstavlja CMS, što skraćeno znači Content Management System, odnosno sistem za upravljanje sadržajem, praktično bez znanja HTML-a, kodiranja i bilo kog programskog jezika. Admin panel (foto 5.) ili Dashboard, kako se naziva u okviru samog WordPressa predstavlja startnu lokaciju za održavanje sajta. U levom delu se nalazi meni i tom meniju se može 5
pristupiti gde god se nalazili u administraciji, što olakšava održavanje i pristup svim segmentima koje održavate. Foto 5. Na vrhu ovog panela, u desnom delu, nalazi se Screen Options tab putem koga aktivirate i deaktivirate prozore obaveštenja. Na primeru su aktivna četri prozora: Right now, Recent Comments, QuickPress i WordPress Blog. Prvi prikazuje šta je trenutno aktivno na sajtu, odnosno šta postoji od sadržaja. U ovom primeru to su 33 vesti (posts), 7 stranice (pages), 13 kategorija (categories) i 18 tagova. Takođe je prikazan i deo za komentare, odnosno koliko trenutno postoji komentara u samom Wordpressu. Donji prozor prikazuje sadržaj poslednjih komentara. QuickPress omogućava brzo pisanje vesti a WordPress Blog nas obaveštava o najnovijim tekstovima na oficijalnom blogu. Napomena: Ukoliko koristite Facebook komentare u ovom delu administracije sajta se ti komentari neće prikazivati. Prikazuju se isključivo komentari iz samog WordPress dodatka za komentare. 6
Stavke levog menija: Posts deo administracije u kome se vrši unos, izmene i brisanje svih članaka na sajtu. Članci predstavljaju tekstove sa vremenskom dimenzijom, tipa vesti, blog postovi i tome slično. Media Svi multimedijalni materijali koji se uploaduju na sajt. Praktično se ova stavka retko koristi jer se unos vrši kod samih članaka. Links deo administracije u kome se vrši dodavanje, brisanje i izmene linkova prijatelja (na primer). Pages jako važan deo administracije u kome se vrši unos, izmene i brisanje svih stranica sajta koje nemaju vremensku dimenziju, kao što su kontakt strane, strana o nama i tome slično. Comments deo administracije u kome se vrši objava, brisanje, editovanje komentara koje posetioci ostave na sajtu. Stavke apperance, plugin, tools predstavljaju sistemski deo WordPress administracije i biće obrađene u narednoj verziji tutorijala. Users predstavlja odeljak administracije u okviru koga se dodaju novi korisnici, blogeri, administratori i autori tekstova. Instalirani dodaci U levom meniju se prikazuju i stavke koje nisu u standardnoj postavci WordPressa već postoje kod sajtova za koje se instaliraju dodatni pluginovi. U ovom primeru to su: Gallery administracija foto galerija (plugin: http://wordpress.org/extend/plugins/nextgen-gallery/ ) All in One SEO SEO optimzacija sajta (plugin: http://wordpress.org/plugins/all-in-one-seo-pack/ ) FA Lite administracija slajdera (plugin: http://wordpress.org/extend/plugins/featured-articles-lite/) File Manager administracija fajlova na sajtu (plugin: http://www.wpdownloadmanager.com/) U nastavku sledi detaljan opis svake stavke. 7
Unos članaka Unos članaka, vesti, blog postova se vrši u delu Posts u meniju administracije (foto 6.). Foto 6. Klikom na opciju Posts prikazuje se listing svih unetih tekstova. Prelaskom miša preko određenog teksta moguće je izvršiti editovanje ili brisanje samog članka. Listing prikazuje kojoj kategoriji pripada članak, ko je autor itd. Na vrhu iznad listinga se nalazi filter gde je moguće odabrati prikaz neke konkretne kategorije na sajtu. U ovom delu se vrši prikaz apsolutno svih tekstova na sajtu koji imaju vremensku dimenziju, bilo da su vesti ili blog postovi, kojoj god kategoriji da pripadaju. Dodavanje novog članka se vrši putem opcije Add new u meniju. Unos članaka (foto 7.) je jednostavan kao i pisanje e-maila. 8
Foto 7. Na vrhu se unosi naslov članka, u srednjem delu tekst koji se formatira kao i bilo koji tekst u Wordu. Tu se nalaze i opcije linkovanja, boldiranja i tome slično. Napomena: Ne vršiti copy paste tekstova iz Worda (i sličnih programa) direktno u Visual deo sredine, nego odabrati jezičak Text i tada kopirati jer se kod kopiranja tekstova iz Worda dešava da povuče i stil pisanja, što može da ugrozi izgled sajta. U desnom delu ekrana, pri vrhu vrši se postavljanje statusa članka u kome se nalazite. Trenutni status je draft, sve dok ne kliknete na dugme Publish, kada tekst postaje vidljiv na sajtu. Status uvek možete promeniti i vratiti, na primer na draft, čak i posle objave. U tom delu podešavate i vidljivost (trenutno je Public i iskren da budem ne pamtim kad sam to menjao), dok treća stavka predstavlja vreme objave, gde možete podesiti da se tekst objavi na primer narednog dana u 16.00. Featured image predstavlja deo za unos primarne fotografije. Unos je vrlo jednostavan, klikom na link set featured image nakon čega se vrši upload fotografije na server i bira opcija set as featured (zatvarate prozor nakon toga). Vrlo slično narednom poglavlju. Napomena: Opcija featured image zavisi isključivo od teme koju koristite na sajtu. Ukoliko vaša trenutno aktivna tema ne poseduje ovu funkciju, unos fotografija će ići kroz klasičan upload fotografija u srednjem panelu. 9
U delu desno se vrši biranje kategorija. Uvek odabrati samo jednu kategoriju. U desnom delu ispod kategorija se vrši unos tagova, odnosno ključnih reči za konkretan članak. Napomena: unositi između 3 i 10 tagova po jednom članku. Razmak vršiti zapetom. Primer: zajednica, životna sredina, proleće nakon čega ide klik na dugme Add. Unos fotografija i multimedije Najpre se kursor postavi kroz tekst gde će biti postavljena multimedija. Dodavanje multimedije, odnosno fotografija, PDF, Word dokumenata vrši se ispod unosa naslova, u delu Upload/Insert. Klikom na ikonicu, zavisno da li se unosi fotos ili neki drugi dokument otvara se jednostavan prozor za upload fotografija gde se vrši odabir fajla iz računara. Kada se fajl odabere i odabere opcija Upload vrši se prenos fajla na server. Kada se fajl prenese prikazuje se prozor na sledećoj slici (foto 8.). Fotografija ili dokument koji je prenet na server se može direktno insertovati u deo teksta pri čemu se bira poravnjanje i veličina fotografija. Poravnanje može biti levo, desno, centar... a za veličinu se uvek bira najveća, odnosno original (priprema fotografija, odnosno dimenzije se unapred, pre samog prenosa, definišu). Tu se nalazi i LINK URL putanja koja je jako važna za unos multimedije na sajtu ukoliko je programer definisao posebna polja za unos i automatski prikaz. Foto 8. 10
Na kraju se vrši objava članka, u desnom delu Insert into post. Nezavisno od članaka na identičan način se mogu unositi i pojedinačne fotografije i fajlovi u bazu sajta putem Media dela u levom meniju. Ažuriranje stranica Održavanje, unos i izmene stranica se vrše u delu Pages. Tu se nalaze sve stranice koje nemaju vremensku dimenziju (nisu vesti, blog postovi itd..) već su stranice tipa Kontakt, O nama itd... (Foto 9.) Prikaz stranica, editovanje i objava je gotovo identično kao i unos postova, ali sa daleko manje posla. Potrebno je samo u njih uneti tekstove i fotografije. Ne bira se kategorija i nema dodavanja tagova, već se samo unosi tekst, fotografija, dokument... Foto 9. 11
Komentari Ukoliko je na vašem WordPress sajtu podešeno korišćenje klasičnih komentara, odnosno sistem komentara koji omogućuje WordPress, naredni pasusi će objasniti kako se vrši administracija komentara. Ukoliko, na primer, koristite Facebook komentare, kompletna administracija se vrši na sledećem linku http://developers.facebook.com/tools/comments Administracija Wordpress komentara, pregled i brisanje, vrši se u delu Comments u levom meniju. Panel administracije komentara (foto 10.) je takođe vrlo jednostavan i u prvi plan izbacuje najnovije komentare. Ispod svakog komentara date su opcije za uklanjanje komentara (ostaje u bazi) opcija unapprove, odgovor reply, editovanje quick edit, klasično editovanje edit, naznaka da je spam i poslednja stavka brisanje trash. Foto 10. Ukoliko želite da izvršite akciju sa više komentara, na primer brisanje, u levom delu komentara čekirajte polje, za svaki komentar koji želite da obrišete, i u padajućem meniju iznad Builk Actions, odaberite opciju Trash, zatim Apply. Time će svi naznačeni komentari biti obrisani. 12
Instalacija teme WordPress dolazi sa dve besplatne teme Twenty Twelve i Twenty Eleven. Pristup temama je moguć kroz Dashboard Wordpress-a i to u panelu Appearance. Foto 11. U panelu Appearance, u delu Themes izaberemo karticu Install Themes i u njoj imamo dve mogućnosti. Možemo da tražimo određenu temu na internetu preko ključnih reči i u donjem delu preko njenih određenih karakteristika. Kada završimo unos ključnih reči ili karakteristika željene teme kliknemo na dugme Find Themes. Foto 12. Za razliku od ključnih reči ili karakteristika koje smo zadali dobijeno određene teme kao predlog za našu temu. Ispod svake teme imamo opcije: Install Now instaliranje teme na naš WordPress Preview pregled teme Details podaci o temi. 13
Foto 13. Ako vam je tema dostavljena u vidu.zip fajla, vi tu temu možete instalirati klikom na opciju Upload. Odaberete temu koju želite da instalirate sa vašeh hard diska i kliknite na Install Now. Foto 14. Na internetu se može naći puno besplatnih tema, ali imajte u vidu da njih preuzima veliki broj ljudi, pa će samim tim vaš sajt ličiti na neku već postojeći na internetu. Ukoliko planirate ozbiljniji dobro je angažovati web dizajnere i front-end kodere koji će za vas kreirati unikatno dizajniranu WordPress temu. 14
Panel Settings U ovom delu, objasnićemo vam osnovne funkcije ovog panela i šta pomoću njega možete da promenite. Foto 15. Prva opcija, je opcija General. Između ostalog u njoj možete menjati osnovne podatke o vašem sajtu. Kao što su naziv sajta, u kom obliku da vam se prikazuju datum i vreme i tako dalje. Foto 16. 15
Još jedna bitna opcija u Settings panelu je i deo Permalinks, u kome možete podešavati oblik linkova na vašem sajtu. Naša preporuka je da se koristi Post name opcija. Foto 17. Galerija Postoje razni dodaci (plugin) koji proširuju funkcije WordPress sajta. Za potrebe klijenata agencije MWEB uglavnom koristimo plugin NextGen Gallery (http://wordpress.org/extend/plugins/nextgen-gallery/) tako da će on i biti prikazan u ovom tutorijalu. Unos galerija se vrši u nekoliko koraka: - Kreiranje galerije u delu Gallery - Unos fotografija u galeriju - Postavka galerije u okviru članka na sajtu Praktično se fotografije smeštaju u jedan deo sajta, a zatim se određeni kod koji se tad dobije insertuje u običan članak, koji se objavljuje čekiranjem sekcije Galerija. Idemo redom. 16
Foto 18. Najpre pripremite fotografije u formatu ne većem od 800x600 pixela (preporuka) u okviru svog računara. U okviru dela Gallery, menija administracije nalazi se opcija Add Gallery/Images gde se pojavljuje prozor sa fotosa 8. U delu Add new galery na vrhu, drugi jezičak, jednostavno se unosi i kreira naziv nove galerije. Potom se vraća na prvi jezičak, Upload Images, gde se preko dela Browse biraju fotosi iz računara (moguće je klikom na prvu, zatim držati pritisnuto dugme shift i klikom na poslednji fotos odabrati sve fotose) nakon čega se vrši odabir galerije u koju će fotosi biti uneti (foto 19.). Foto 19. 17
Nakon kreiranja kategorije, a pre unosa pojaviće se na vrhu kod galerije, u ovom slučaju [nggallery id=2] koji će se koristiti za unos galerije u sam članak, zato ga je dobro iskopirati. Na kraju, se klikom na dugme Upload Images vrši unos fotografija na server. Napomena: Potrebno je uneti samo velike fotose dimenzija npr. 800x600 px. Galerija se sama brine o malim fotografijama i rasporedu. Treći korak je objava galerije koja se vrši na identičan način kao i objava članaka, sa time što se umesto teksta u sredini i unosi kod galerije [nggallery id=2] u ovom slučaju. Pre koda galerije se može uneti i određeni uvodni tekst po želji. Druga opcija je da u okviru samog posta, članka, odaberete predposlednju stavku u meniju iznad polja za unos teksta, i odaberete galeriju koju unosite (foto 20.) Foto 20. 18
Ažuriranje banera U osnovi WordPress nema opciju administracije banera. Za potrebe naših projekata koristimo AdRotate dodatak (http://wordpress.org/extend/plugins/adrotate/) koji je prikazan i na ovom primeru. Administraciji banera se pristupa odlaskom na opciju AdRotate u levom meniju. Sledi prikaz administracije banera. Foto 21. U ovoj verziji tutorijala neće biti prikazana detaljna instalacija dodatka i kreiranje pozicija u temi, već krećemo od toga da su pozicije u temu postavljene. Na fotosu 21. je prikazana administracija kada već 3 banera postoje na sajtu. Za svaki baner je prikazano od kada do kada se prikazuje (Show from, Show until), naslov (title) sa naznakom na kojoj je poziciji (sitna siva slova ispod naslova), značaj (weight, nije do sada praktično korišćen), broj prikaza (Impressions), broj prikaza danas (Today), broj klikova (Clicks), broj klikova danas (Today), procenat kliktanosti (CTR = broj klikova / broj prikaza). 19
Unos novog banera se vrši putem opcije Add new u vrhu stranice, nakon čega se prikazuje sledeći panel. Foto 22. Upišite naziv banera, u polje link unesite web adresu na koju će voditi klik na baner, a u polju na kraju unesite baner. Idealna opcija je da putem dugmeta select image odaberete baner sa vašeg računara (klasičan upload fotografija kao kod administracije sadržaja) i putem opcije insert jednostavno unesete u prikazano polje. Ova stranica ima više opcija, zato budite pažljivi (foto 23.) 20
Foto 23. Parametri koji slede u nastavku odnose se na vremenski okvir, od kad do kad će baner biti prikazan. Najvažnije je da na kraju čekirate gde će se baner prikazivati (Select Groups) i sačuvajte stranicu. Napomena: Jedna pozicija može da sadrži i više banera u rotaciji, gde će se pri svakom otvaranju stranice prikazati jedan baner. 21
Završna reč WordPress je vrlo praktičan i za kratko vreme je stekao ogromnu popularnost širom sveta. Ovaj e-book će sigurno dobiti svoju novu, proširenu verziju, a ukoliko želite da budete u toku sa novim verzijama pošaljite email na kontakt@mweb.rs. Tekst: Miloš Petrović, Miloš Avramović Dizajn naslovne: Marko Aleksić MWEB agencija za internet marketing i web dizajn, www.mweb.rs 22