WordPress návody

Jak přidat WordPress menu do příspěvku nebo stránky

pc stůl
Autor příspěvku Tomáš Cirkl

Obvykle jsou v šabloně předem připravená místa, kam přiřazujete vytvořené menu. Případně k tomu můžete použít widget. V tomto článku si ukážeme způsob, jak vložit menu do obsahu stránky nebo příspěvku.

WordPress menu slouží k jednoduché tvorbě strukturovaných menu. Navigačních menu můžete vytvořit kolik chcete, ale počet jejich umístění je omezen šablonou. Vytvořit nebo spravovat menu, můžete ve WordPress administraci sekci Vzhled -> Menu.

Jak přidat menu do obsahu stránky nebo příspěvku

Nejprve si nainstalujte a aktivujte plugin Shortcode Menu. Plugin se nachází v oficiálním repozitáři pluginů a můžete jej nainstalovat přímo z WordPress administrace.

Následně běžte do Vzhled -> Menupřipravte si menu, které chcete vložit do obsahu.

Jakmile budete připraveni, klikněte na položku Shortcode Menu v levém administračním menu. Dostanete se na generátor shortcodu, který pak zajistí vložení menu do stránky nebo příspěvku.

Shortcode Menu generátor

Shortcode Menu generátor

Generátor shortcodu se skládá ze 3 propojených boxů:

Create Your Shortcode (Vytvoření shortcodu)

  • Select Menu – výběr WordPress menu.
  • Menu ID – přiřazení ID k menu. Slouží především pro CSS. Nepovinné.
  • Menu Class – přiřazení třídy k menu. Slouží především pro CSS. . Nepovinné.
  • Display Style – styl zobrazení. Ve výchozím nastavení je natavena možnost Block (menu bude pod sebou, vždy jedna položka na řádek), vybrat ještě můžete Inline (menu bude v jedné řadě). Nepovinné.
  • Enhance – zvýrazněný seznam. Nepovinné.

Design your menu on fly (Nastavení vzhledu menu)

  • Menu Background Color – nastavení barvy pozadí menu.
  • Menu Anchor Color – nastavení barvy odkazu menu.
  • Menu Anchor Hover Color – nastavení barvy odkazu menu při přejetí myši.
  • Sub Menu Background Color – nastavení barvy pozadí u submenu.
  • Opacity – přůhlednost. Max 1, min 0.
  • Sub Menu Anchor Color – nastavení barvy odkazu u submenu.
  • Sub Menu Anchor Hover Color – nastavení barvy odkazu při přejetí myši u submenu.
  • Enable arrow – aktivování šipek.
  • Custom CSS – pole pro vlastní CSS.

Responsive Menu (Responzivní menu)

  • Responsive Menu – aktivuje/deaktivuje responzivní menu.
  • Display Mobile Menu Breakpoint – nastavení šířky stránky (v px) pro změnu menu na dropdown seznam.

Nejprve vyberte menu, které chcete do příspěvku vložit. Pokud chcete přidejte si k menu vlastní třídu nebo ID. Dále, pokud chcete, nastavte styly pro menu a rozhodněte se, jestli chcete menu horizontální nebo vertikální.

Na konec jen povolte/zakažte zda bude menu responzivní.

Jednoduché vertikální menu vložené do obsahu vidíte na obrázku níže.

Vložené menu

Vložené menu

Až skončíte s nastavením, tak pod boxy s nastavením najdete vygenerovaný shortcode. Ten si zkopírujte a vložte jej do obsahu stránky nebo příspěvku.

Vygenerovaný shortcode

Vygenerovaný shortcode

Výchozí styly menu jsou značně minimalistické, ale to přiřazení do obsahu vyhovuje. Nicméně pokud chcete vzhled menu ovlivnit, tak v pravé části stránky generátoru najdete nápovědu pro stylovaní, kde máte připravenou strukturu a jen si vložíte ID menu a můžete se do toho pustit.

Takovéto úpravy CSS doporučuji vložit do child šablony.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

2 komentáře

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.