7. CMS

V zavihku „CMS“ se ureja vsebino vseh statičnih strani (npr. „O nas“) in vseh vsebinskih blokov (npr. „footer“ ali „levi stolpec“), ki se nahajajo na spletni strani.

V tem delu bomo pobližje spoznali urejevalnik (WYSIWYG) ki je enak tudi pri urejanju opisov izdelkov ter pri urejanju opisa kategorij in osvojili osnove dodajanja besedil, slik, tabel in povezav.

 

CMS – Strani

V zavihku CMS -> Strani se nahaja seznam vseh statičnih strani, preko tega zavihka pa strani tudi dodajamo in urejamo.

 

1. Filtri za iskanje in razvrščanje strani
2. Gumb za dodajanje nove strani
3. Na kateri jezikovni različici je stran vidna
4. URL naslov, na kateri se nahaja stran (znotraj izbrane jezikovne različice (3))

 

Urejanje / dodajanje strani

Vsaka stran ima vse podatke razvrščene v štiri zavihke, kot je prikazano na spodnji sliki.

 

V zavihku „Page information“ določimo:

• Naslov strani: prikazan v iskalnikih in pomemben pri optimizaciji strani
• URL ključ: direktni naslov, na katerem je stran objavljena (primer: www.mojastran.si/no-route) Ne sme vsebivati presledkov, šumnikov ali posebnih znakov. Zaradi optimizacije je primerno, da so URL ključi čim bolj opisni, npr. „nasveti-za-nego-obraza“, če je na strani objavljen članek z nasveti za nego obraza.
• Pogled trgovine: določa na katerih jezikovnih različicah je stran dostopna. Za izbiro večih jezikovnih različic (pogledov) naenkrat držite ob klikanju tipko CTRL ali izberite „Vsi pogledi trgovine“.
• Status: vključeno/izključeno določa, ali se stran na izbranem URL ključu dejansko odpre ali ne. 

 

V zavihku „Content“ določimo:

• Naslov vsebine: prikazan bo kot prvi vsebinski del te strani (1)
• Vsebino: s pomočjo urejevalnika WYSIWYG (2) lahko v polje za vsebino (3) dodamo tekste, slike, povezave in druge elemente

 

V zavihku „Izgled“ določimo predlogo strani. Na voljo so štiri možnosti:

• one column: nova stran bo imela vsebino prikazano čez celo širino strani
• two columns with left bar: nova stran bo imela vsebino razdeljeno na dva stolpca, od katerih bo manjši oz. ožji stolpec na levi strani (ponavadi je ta pogled če je na levi strani seznam kategorij)
• two columns with right bar: nova stran bo imela vsebino razdeljeno na dva stolpca, od katerih bo manjši oz. ožji stolpec na desni strani (ponavadi je ta pogled če je na desni strani seznam kategorij)
• three columns: nova stran bo imela vsebino razdeljeno na tri stolpce, od katerih bosta levi in desni stolpec ožja (ponavadi je ta pogled, če imamo v levem stolpcu seznam kategorij, v desnem pa razne prodajne informacije, akcijska obvestila, novice itn..)

 

V zavihku „Meta data“ določimo informacije za iskalnike:

• keywords: besede, ki so pomembne za vsebino strani in ki so v vsebini večkrat uporabljene
• opis: opis strani za iskalnike, ki ga bodo ti uporabili v prikazu rezultatov za to stran

 

CMS statični bloki

Spletno stran sestavljajo tudi razni statični bloki, ki se v dizajnu spletne strani prikazujejo na izbranih mestih, npr. noga, header povezave, napis nad košarico ali vsebina v levem stolpcu (pod menijem).. Statičnih blokov je lahko glede na dizajn veliko ali malo, nekaj pa je skupnih vsaki spletni strani (npr. noga oz. angl. „footer“).

Vsebino statičnih blokov se ureja na enak način, kot se ureja strani in imajo enak prikaz v mreži. Je pa ena izjema - statični bloki nimajo neposrednega URL naslova (ključa), na katerem bi se vsebina CMS statičnega bloka prikazala, saj so lahko ti prikazani na vseh ali pa samo na eni strani.

Posamezen blok v urejevalniku odpremo s klikom na ime oz. v prikazno vrstico s seznamom blokov (prikaz zgoraj). Ko se izbrani blok odpre za urejanje, je prikaz takšen, kot na spodnji sliki.

 

V tem delu določimo:

• Block Title: naslov bloka, kot ga vidimo v administraciji
• Identifier: Ne sme vsebovati presledkov, šumnikov ali posebnih znakov
• Pogled trgovine: določa na katerih jezikovnih različicah je stran dostopna. Za izbiro večih jezikovnih različic (pogledov) naenkrat držite ob klikanju tipko CTRL ali izberite „Vsi pogledi trgovine“.
• Status: vključeno/izključeno določa, ali se blok na spletni strani prikazuje ali ne
• Content: s pomočjo urejevalnika WYSIWYG v polje za vsebino dodamo tekste, slike, povezave in druge elemente

 

Gradniki, Ankete in ostale CMS funkcije

Če so na spletni strani nastavljene ustrezne modularne komponente, lahko administrator uporablja tudi Gradnike in Ankete.

Gradniki so pravzaprav logični izrazi, ki jih lahko pri urejanju CMS strani ali CMS statičnih blokov uporabljamo za avtomatizacijo vsebine. Tako je lahko npr. en gradnik pripravljen za prikaz zadnje dodanih izdelkov, en za največkrat ogledane izdelke, tretji za izdelke v akciji itn. Ker spadajo gradniki med napredne funkcionalnosti, ki jih v fazi postavitve spletne trgovine pripravijo naši uredniki oz. programerji, v tem priročniku niso opisani.

Ankete pa so klasične „ankete“ z vprašalnikom, v katerem lahko obiskovalec izbere eno opcijo, odda odgovor in pogleda, kako so odgovarjali drugi. Preko tega zavihka lahko administrator dodaja vprašanja (in odgovore) ter spremlja rezultate.

WYSIWYG urejevalnik 

       
Besedila in opise na spletni strani/trgovini lahko urejate v HTML kodi ali pa uporabniku nekoliko prijaznejšem WYSIWYG vmesniku.

1. Gumb za preklop med HTML in WYSIWYG prikazom vsebine
2. Ikone za lažje urejanje
3. Polje za prikaz vnesene vsebine

WYSIWYG („what you see is what you get“) je najbolj razširjena oblika urejevalnika spletnih besedil, katerega namen je urejanje približati urejanju besedil v klasičnih urejevalnikih kot so Office Word, Writer ipd. Večina ikon vam bo zato „že znana“. 

Nekaj največkrat uporabljenih ikon:

 

Kopiranje in lepljenje vsebin

Pogosto si pri urejanju pomagamo s t.i. „Copy-paste“ prenašanjem vsebin, bodisi iz Word dokumentov, excel tabel ali iz drugih spletnih strani. WYSIWYG urejevalnik podpira kopiranje (CTRL+C) in lepljenje vsebin (CTRL+V), a velja pri kopiranju vsebin v urejevalnik upoštevati nekaj pravil:

• Urejevalnik bo kopirane vsebine lahko prikazal v drugačnih pisavah ali stilih (ki so določeni za spletno stran). 
• Kopiranje in lepljenje neposredno iz Worda ali drugih spletnih strani v urejevalnik prilepi tudi nekaj t.i. „umazane kode“. Priporočljivo je, da vsebine pred kopiranjem v urejevalnik prilepite v beležnico (notepad) in nato iz beležnice skopirate v urejevalnik. Tako skopirane vsebine bodo brez oblikovanja (torej tudi brez umazane kode), vi pa boste stile pisave, barve in druge oblikovne elemente določili s pomočjo ikon WYSIWYG urejevalnika.
• Za kopiranje iz Worda uporabite ikono: 
• Kopiranje tabel deluje po enakih načelih. Če boste tabelo skopirali iz Excela, je 99% verjetnost, da boste morali tabeli znova določiti barve obrobe, odmik besedila, poravnavo besedila in druge nastavitve.
• Kopiranje slik v urejevalnik je mogoče, a samo če se slika v osnovi nahaja na eni drugi spletni strani. A kopiranje slik na ta način vseeno ni priporočljivo, saj so možnosti urejanja tako prilepljene slike omejene, poleg tega pa se bo slika v primeru, da jo bodo iz originalne strani umaknili ali npr. preimenovali, na vaši strani prenehala prikazovati.
• Kopira = CTRL + C, Prilepi = CTRL + V, Izreži = CTRL  + X

 

Vstavljanje in urejanje slik

Če želimo sliko trajno dodati v vsebino spletne strani, to naredimo takole:

• Najprej v urejevalniku z miško kliknemo na mesto, kamor želimo dodati sliko
• Nato kliknemo na ikono urejevalnika za dodajanje slike

• Odpre se okno z nastavitvami slike, kjer izberemo ali naložimo želeno sliko in vpišemo podatke o sliki (velikost, opis, naslov, odmik, obroba...).
• Podatki o sliki so na voljo v treh zavihkih (1), sliko pa lahko dodamo bodisi preko URL povezave (če je slika na voljo preko URL naslova) ali s pomočjo gumba za izbiro slike (2) sliko poiščemo na strežniku ali jo na strežnik naložimo. Končno izbiro slike in dodajanje te v urejevalnik moramo na koncu potrditi s klikom na „Insert“ (! pomembno).

• Kliknemo na ikono za izbiro/dodajanje slike na strežnik.

• Odpre se prikaz slik na strežniku, kjer sliko bodisi izberemo izmed tistih, ki so že na strežniku, ali pa novo sliko naložimo na strežnik iz našega računalnika in nato izberemo.

1. Kategorije z datotekami in slikami
2. Gumba za iskanje in prenos slik iz računalnika na strežnik
3. Izbrana slika (ima drugačno barve obrobe)
4. Z gumbom „Insert file“ potrdimo izbor označene slike

 

• S klikom na „Insert file“ se bo v spodnjem oknu izpisal URL naslov do izbrane slike (prikaz spodaj). Slika s tem še ni dodana v urejevalnik, saj jo je primerno pred tem še urediti. Dokončni vnos strani v urejevalnik čisto na koncu potrdimo z gumbom „Insert“.

 

• V zavihku „General“  se sliki določi Opis (Image description) in pa Naslov (Title). Oba podatka sta pomembna za iskalnike, nista pa obvezna. V oknu „Preview“ bo prikazan predogled slike
• V zavihku „Appearance“ se sliki določi poravnava s tekstom, velikost v px, odmik od besedila, širino obrobe in oznaka za dodatno stiliranje izgleda (CSS). V praksi se preko tega zavihka spremeni velikost sliki (kljukica zaklene razmerje višine in širine) in odmiki besedil od slike (vertical/Horizontal space).

 

POZOR

Če želite, da se bo velikost slike samodejno prilagodila napravi (telefon, tablica), potem morate vleikosti slikam določati v % in ne v px. Tako bi sliki določili, da naj bo namesto 450px velika 100% (razpoložljive širine), kar bo sliko avtomatično prilagodilo velikosti ekrana naprave, na kateri se ta prikazuje. Če želite maksimalno velikost slike kljub temu omejiti, lahko v vrstico "Style" dodate še takle ukaz:

max-width:450px;

s čemer bo (v tem primeru) največja širina slike kljub 100% nastavitvi širine, široka največ 450 px.

• V zavihku „Advanced“ se urejajo napredne možnosti slike, npr. sprememba slike ob preletu z miško, ID, daljši opis ipd.

 

Dodajanje in urejanje povezav

Preko urejevalnika WYSIWYG lahko tekstu ali sliki dodamo tudi povezave. Na ta način lahko obiskovalcem pripravimo različne načine prehoda med stranmi, jim v obliki priponk ponudimo razne dokumente in na stran dodajamo nove vsebine, članke, nasvete itn..Povezavo lahko vstavite na katerikoli označen del besedila v urejevalniku, ali na sliko.

Za urejanje povezav so v urejevalniku te ikone: 

Povezavo se vstavi takole:

• Najprej z miško označite tisti del besedila ali sliko, za katerega želite, da deluje kot povezava

• Nato kliknete na ikono za povezavo: 
• Odpre se okno za nastavitev povezave, kot je prikazano na spodnji sliki

• Link URL: sem vpišemo bodisi zunanji URL naslov (npr. www.24ur.com) ali interni url naslov (npr. /o-nas) ali pa preko ikone za izbiro datoteke, povezavo naredimo do PDF ali slike na strežniku.

• Target: določimo, ali se bo povezava odprla v istem ali novem oknu

• Title: določimo naslov povezave za iskalnike

 

Če želite povezavo odstraniti, označite sliko ali del besedila, ki deluje kot povezava in uporabite ikono .

 

Povezave na statične strani

Če želite narediti povezavo na statično stran, v okno za nastavitve povezave vpišite URL ključ do izbrane statične strani (primer spodaj). 

Pomembno: 

• pred ime URL ključa obvezno vpišete desno poševnico (primer: /o-nas)
• Povezave do statičnih strani načeloma na koncu nimajo .html končnice
• če delate povezavo na podstran, kategorijo ali izdelek na vaši strani, boste v okno za povezavo vpisali tisti del povezave, ki ne vključuje vaše domene (npr. www.mojastran.si/o-nas -> /o-nas)

 

URL ključ izbrane strani poiščete v zavihku CMS - > Strani (prikaz spodaj).

 

Povezave na kategorije

Če želite narediti povezavo na kategorijo, v okno za nastavitve povezave vpišite tisti del www naslova, ki se vam prikaže, če to kategorijo odprete na vaši spletni trgovini (primer spodaj). 

 

Pomembno: 

• pred ime povezave obvezno vpišete desno poševnico (primer: /pladnji-podstavki.html)
• bodite pozorni da boste kot povezavo vpisali vse, kar se nahaja za imenom domene. Na sliki prikazan primer ima tako povezavo do kategorije /index.php/dodatki-za-dom/dodatki-za-kuhinjo/pladnji-podstavki.html
• Povezave do kategorij imajo na koncu .html končnice
• če delate povezavo na kategorijo, boste v okno za povezavo vpisali tisti del povezave, ki ne vključuje vaše domene (npr. http://www.vonjnarave.si/.../pladnji-podstavki.html-> /pladnji-podstavki.html)

 

URL ključ izbrane kategorije poiščete tako, da izbrano kategorijo odprete v brskalniku enako, kot bi to naredil obiskovalec.

 

Povezave na izdelke

Povezavo na izdelek se naredi na popolnoma enak način, kot na kategorijo (prejšnje poglavje).