7. Upravljanje vsebine (CMS) in uporaba urejevalnika WYSIWYG

Modul CMS v nadzorni plošči Magento omogoča upravljanje vsebine vseh statičnih strani (npr. O nas, Pogoji poslovanja) in statičnih vsebinskih blokov (npr. noga spletnega mesta, stranski stolpci, pasice). Vsebina se ureja prek vizualnega urejevalnika WYSIWYG (What You See Is What You Get), ki omogoča oblikovanje besedil, vstavljanje slik, tabel in hiperpovezav brez neposrednega pisanja kode HTML.

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 (CMS -> Pages)

V meniju CMS -> Strani (Pages) se nahaja seznam vseh statičnih strani spletnega mesta, kjer lahko obstoječe strani urejate ali ustvarjate nove.

Pregledna tabela omogoča:

• Filtriranje in razvrščanje strani glede na naslov, URL ključ ali datum.

• Gumb Dodaj novo stran (Add New Page) za ustvarjanje nove vsebine.

• Pregled dostopnosti strani glede na jezikovne različice (poglede trgovine).

• Neposredni URL naslov posamezne strani.

Urejanje in dodajanje strani

Podatki posamezne strani so razdeljeni v štiri glavne zavihke:

1. Informacije o strani (Page Information)

• Naslov strani (Page Title): Naslov, ki se prikazuje v vrstici brskalnika in je ključen za optimizacijo za iskalnike (SEO).

• URL ključ (URL Key): Relativna pot do strani (npr. nasveti-za-nego-obraza). Ne sme vsebovati presledkov, šumnikov ali posebnih znakov. Zaradi optimizacije naj bo opisna.

• Pogled trgovine (Store View): Določa, na katerih jezikovnih različicah je stran vidna. Za izbiro več pogledov hkrati pridržite tipko CTRL (oziroma Cmd na sistemih macOS).

• Stanje (Status): Nastavitev Omogočeno (Enabled) ali Onemogočeno (Disabled) določa javno vidnost strani.

2. Vsebina (Content)

• Naslov vsebine (Content Heading): Glavni naslov (H1), ki se izpiše na vrhu strani.

• Vsebina (Main Content): Polje za vnos in oblikovanje besedila, slik ter povezav z uporabo urejevalnika WYSIWYG ali vmesnika HTML.

   

3. Izgled (Design)

Določa strukturo predloge (postavitev stolpcev) za izbrano stran:

• 1 column (Ena kolona): Vsebina se razprostira čez celotno širino strani.

• 2 columns with left bar (Dva stolpca z levim stranskim nizom): Vsebina z ožjim stranskim stolpcem na levi strani.

• 2 columns with right bar (Dva stolpca z desnim stranskim nizom): Vsebina z ožjim stranskim stolpcem na desni strani.

• 3 columns (Trije stolpci): Vsebina z ožjima stranskima stolpcema na levi in desni strani.

4. Meta podatki (Meta Data)

• Ključne besede (Meta Keywords): Pomembni pojmi, povezani z vsebino strani.

• Opis (Meta Description): Kratek opis strani, ki ga iskalniki prikazujejo med rezultati iskanja.

CMS – Statični bloki (CMS -> Static Blocks)

Statični bloki so večkrat uporabni vsebinski elementi, ki se prikazujejo na določenih mestih spletnega mesta (npr. noga spletne strani, povezave v glavi, obvestila v košarici ali stranski stolpci).

Za razliko od statičnih strani statični bloki nimajo lastnega URL naslova, ampak se umeščajo neposredno v predloge ali na CMS strani.

Ob odprtju posameznega bloka v urejevalniku nastavimo:

• Naslov bloka (Block Title): Interni naslov bloka za prepoznavanje v nadzorni plošči.

• Identifikator (Identifier): Unikatna koda bloka za klicanje v predlogah (ne sme vsebovati presledkov, šumnikov ali posebnih znakov, npr. footer_links).

• Pogled trgovine (Store View): Določa, v katerih jezikovnih različicah se blok prikazuje.

• Stanje (Status): Omogoča ali onemogoča prikaz bloka na spletnem mestu.

• Vsebina (Content): Vnos vsebine s pomočjo urejevalnika WYSIWYG ali kode HTML.

Gradniki (Widgets) in Ankete (Polls)

Sistem omogoča uporabo dodatnih funkcionalnosti za dinamičen prikaz vsebin:

• Gradniki (Widgets): Logični gradniki za avtomatiziran prikaz dinamičnih vsebin (npr. zadnji izdelki, najbolj prodajani izdelki, akcijski izdelki).

• Ankete (Polls): Orodje za ustvarjanje vprašalnikov, kjer obiskovalci glasujejo in si ogledajo trenutne rezultate. Dodajanje vprašanj in pregled rezultatov poteka v meniju CMS -> Ankete (Polls).

Urejevalnik WYSIWYG

Urejevalnik omogoča urejanje vsebine v vizualnem načinu ali z neposrednim vnosom kode HTML s preklopom prek gumba Prikaži/Skrij urejevalnik (Show/Hide Editor).

Kopiranje in lepljenje vsebin

Pri prenosu besedil iz zunanjih virov (Word, Excel, druga spletna mesta) je treba paziti na prenos nezaželenega oblikovanja (t.i. "umazane kode HTML"):

• Pravilno lepljenje: Besedilo pred vnosom prilepite v neoblikovan urejevalnik besedil (npr. Notepad na sistemu Windows ali TextEdit na sistemu macOS) in ga šele nato skopirajte v urejevalnik WYSIWYG. S tem odstranite neustrezne sloge pisav in barve.

• Uvoz iz Worda: Za lepljenje vsebine iz programa Microsoft Word uporabite namensko ikono Prilepi iz Worda (Paste from Word).

• Kratnjice na tipkovnici:

  • Kopiraj: CTRL + C (oziroma Cmd + C na macOS)

  • Prilepi: CTRL + V (oziroma Cmd + V na macOS)

  • Izreži: CTRL + X (oziroma Cmd + X na macOS)

• Tabele iz Excela: Ob kopiranju tabel iz programa Excel je treba v urejevalniku ponovno nastaviti barve obrob, odmike in poravnavo besedila.

• Kopirane slike: Slik ne kopirajte neposredno prek odložišča (copy-paste) iz drugih spletnih mest, saj se ob spremembi ali izbrisu izvorne slike na primarni strani preneha prikazovati tudi na vaši. Slike vedno ustrezno shranite in naložite na strežnik.

   

Vstavljanje in urejanje slik

Za trajno dodajanje slik v vsebino sledite postopku:

1. V urejevalniku postavite kurzor na mesto, kamor želite vstaviti sliko.

2. Kliknite ikono Vstavi/uredi sliko (Insert/Edit Image).

3. V odprtem oknu kliknite ikono za brskanje po strežniku ob polju URL slike (Image URL).

4. V upravitelju datotek izberite obstoječo sliko ali naložite novo s svojega računalnika z gumbom Naloži datoteko (Upload File).

5. Izbiro potrdite s klikom na Vstavi datoteko (Insert File).

6. Za dokončni vnos v urejevalnik kliknite gumb Vstavi (Insert).

    

Nastavitve slik po zavihkih:

• Splošno (General): Vnos polj Opis slike (Image Description) in Naslov (Title), ki sta pomembna za iskalnike in dostopnost.

• Videz (Appearance): Nastavitev poravnave besedila, dimenzij (v pikselih ali odstotkih), odmika od besedila (vertikalni/horizontalni razmik) in razreda CSS.

• Napredno (Advanced): Nastavitev alternativne slike ob preletu z miško (rollover), ID elementa in podrobnejšega opisa.

Opozorilo: Za zagotavljanje odzivnosti (responsive design) na mobilnih napravah določite širino slike v odstotkih (npr. 100%) namesto v fiksnih pikselih (px). Dodatno lahko v polje Slog (Style) vnesete naslednje pravilo CSS za omejitev največje širine:

width: 100%;
max-width: 450px;

Dodajanje in urejanje povezav

Povezavo lahko dodate na označeno besedilo ali sliko:

1. Označite želeno besedilo ali sliko.

2. Kliknite ikono Vstavi/uredi povezavo (Insert/Edit Link).

3. V polje URL povezave (Link URL) vnesite ciljni naslov.

4. V polju Cilj (Target) izberite način odpiranja:

   • Odpri v istem oknu/okvirju (Open in same window)

   • Odpri v novem oknu (Open in new window - _blank)

5. Vnesite Naslov (Title) povezave za iskalnike.

6. Potrdite z gumbom Vstavi (Insert).

Za odstranitev povezave označite element in kliknite ikono Odstrani povezavo (Unlink).

Pravila za vnos relativnih povezav (internih poti):

Pri ustvarjanju povezav na interne vsebine izpustite domeno spletnega mesta (npr. namesto [https://www.mojastran.si/o-nas](https://www.mojastran.si/o-nas) vnesite le /o-nas).

• Statične strani: Vnesite le URL ključ z vodilno poševnico (npr. /o-nas). Statične strani praviloma nimajo končnice .html.

• Kategorije: Vnesite celotno pot za domeno z vodilno poševnico in končnico .html (npr. /dodatki-za-dom/pladnji.html ali /index.php/dodatki-za-dom/pladnji.html).

• Izdelki: Uporabite enak postopek kot pri kategorijah z vnosom celotne relativne poti do izdelka.