# Navigációs elemek

> Breadcrumb, legördülő menü és oldalsávos navigáció hozzáadása a sablonhoz, beállításuk és testreszabásuk.

A kiegészítő három navigációs elemet ad a weboldalhoz:

- **Breadcrumb-útvonal**: felsorolja a kezdőlaphoz vezető utat, így a látogató látja, hol jár az oldal szerkezetében.
- **Legördülő menü** (felső navigáció): a legfelső szintű oldalak listája, a második szintű oldalakkal legördülő menüként. Tartalmazhatja a bejegyzéskategóriákat is.
- **Oldalsávos navigáció**: helyi navigációs fa az aktuális oldal testvéroldalaival, szülőjével és gyermekeivel, vagyis a megnyitott oldalhoz kapcsolódó oldalakkal.

## Az elemek hozzáadása a sablonhoz

Az elemek nem jelennek meg maguktól: mindegyiket egy PHP-sorral kell beilleszteni a sablonba. A **WPML → Kiegészítők → Navigáció** oldal alján ugyanez a táblázat látható, a hozzáadás helyével együtt.

| Elem | PHP-kód | Hová kerüljön |
|---|---|---|
| Felső navigáció (legördülő menü) | `<?php do_action('icl_navigation_menu'); ?>` | `header.php` |
| Breadcrumb-útvonal | `<?php do_action('icl_navigation_breadcrumb'); ?>` | `header.php`, vagy `single.php`, `page.php`, `archive.php`, `tag.php` és `search.php` |
| Oldalsávos navigáció | `<?php do_action('icl_navigation_sidebar'); ?>` | `sidebar.php` |

A beállítóoldali táblázatban a breadcrumb hívása elválasztó paraméterrel szerepel: `do_action('icl_navigation_breadcrumb', ['separator']);`.

Az oldalsávos navigáció **widgetként** is használható: add hozzá a **Megjelenés → Widgetek** oldalon, a widget neve **Oldalsávos navigáció**.

![A WPML CMS Navigation beállítóoldala, alul a sablonba illesztendő kódok táblázatával](./kepek/navigacio-1-beallitasok-teljes.webp)

*A WPML CMS Navigation beállítóoldala, alul a sablonba illesztendő kódok táblázatával* (https://minta-bolt.hu/wp-admin/admin.php?page=wpml-cms-nav%2Fmenu%2Fnavigation.php)

A kép alján látszik az útmutató táblázat: elem, leírás, a beillesztendő kód és a hely.

## Globális beállítások

A beállítások a **WPML → Kiegészítők → Navigáció** oldalon vannak. A végén kattints a **Módosítások mentése** gombra.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Oldalsorrend** | Ebben a sorrendben listázza az oldalakat a navigáció. Lehetőségek: **Menü sorrend**, **Betűrendben**, **Létrehozás ideje**. | **Menü sorrend** |
| **Blogbejegyzések menüje** | A **Blogbejegyzések menüjének megjelenítése** jelölőnégyzettel külön menüpont jelenik meg a blognak. | kikapcsolva |
| **Oldalak menüje az oldalsávban** | A **Címsor kezdete** és a **Címsor vége** mezőbe az oldalsávos navigáció címét körbevevő nyitó és záró kódot adhatod meg. | üres |
| **Breadcrumb-elválasztó** | Az útvonal elemeit elválasztó jel. | » |
| **Gyorsítótárazás** | A navigációs elemek gyorsítótárazása a gyorsabb betöltésért. A **Gyorsítótár törlése most** gombbal azonnal kiürítheted a tárolt elemeket, például a menü módosítása után. | kikapcsolva |

![A beállítások a bekapcsolt blogmenüvel: megjelenik a kategóriák menüjének címe, az oldalsorrend és a tartalom választója](./kepek/navigacio-1-blog-menu.webp)

*A beállítások a bekapcsolt blogmenüvel: megjelenik a kategóriák menüjének címe, az oldalsorrend és a tartalom választója* (https://minta-bolt.hu/wp-admin/admin.php?page=wpml-cms-nav%2Fmenu%2Fnavigation.php)

A kép a **Blogbejegyzések menüjének megjelenítése** bekapcsolása utáni mezőket mutatja.

### A blogmenü beállításai

Ha bekapcsolod a **Blogbejegyzések menüjének megjelenítése** opciót, további mezők jelennek meg:

- **Kategóriák menüjének címe**: a blogmenü neve a navigációban. Az alapértelmezett cím „News”. Ez a mező csak akkor látszik, ha a Beállítások → Olvasás oldalon nincs külön bejegyzésoldal kijelölve.
- **Oldalsorrend**: a blogmenü helye a többi menüponthoz képest (szám).
- **Válaszd ki, milyen elemek jelenjenek meg a blog menüben**: **Kategóriák**, **Legutóbbi bejegyzések** vagy **Semmi**.

## Beállítások oldalanként

Egy oldal szerkesztésekor, az oldalszerkesztő alján, a **Meta dobozok** panelben találod a **CMS-navigáció** dobozt. (Ha a panel zárva van, kattints a **Meta dobozok** feliratra.) Itt az adott oldal viselkedését állíthatod:

| Beállítás | Mit csinál |
|---|---|
| **Kizárás a felső navigációból** | Az oldal nem jelenik meg a felső navigációban. |
| **Mini kezdőlap (ne listázd ennek az oldalnak az aloldalait a navigációs oldalsávban)** | Az oldalsávos navigáció nem sorolja fel az oldal gyermekoldalait. |
| **Szakasz** | Szakaszt rendelhetsz az oldalhoz, vagy egy meglévő szakaszt választhatsz a legördülő listából (**--none--**: nincs szakasz). Az **enter new** hivatkozással új szakasz nevét is beírhatod. |
| **Külső oldal címe** | Külső webcím, amelyre a menüpont mutat. |

![A CMS-navigáció doboz az oldalszerkesztő meta dobozai között](./kepek/navigacio-1-szerkeszto-doboz.webp)

*A CMS-navigáció doboz az oldalszerkesztő meta dobozai között* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=edit)

A kép az oldalszerkesztő alján lévő dobozt mutatja a négy beállítással.

## A megjelenés testreszabása CSS-sel

A navigációs elemeknek van alapértelmezett kinézetük. A bővítmény két CSS-fájlt tartalmaz a `wp-content/plugins/wpml-cms-nav/res/css` mappában:

- `cms-navigation-base.css`: a legördülő menü működéséért felel, **ne módosítsd**.
- `cms-navigation.css`: ezt másold le és módosítsd a saját stílusaidhoz.

A testreszabás lépései:

1. Másold a `cms-navigation.css` fájlt a bővítmény mappájából a sablonod mappájába.
2. Gondoskodj róla, hogy a sablon meghívja a `wp_head()` függvényt, és töltse be a másolatot. Így a bővítmény CSS-fájljai is betöltődnek.
3. Végezd el a stílusmódosításokat az új fájlban.

Így a bővítmény frissítése nem írja felül a saját módosításaidat.