Jak přidat do tématu WordPressu další navigační nabídky

Někdy se může stát, že najdete úžasné téma, jen abyste si uvědomili, že by bylo skvělé, kdyby mělo další navigační nabídku s důležitými nebo často používanými odkazy, které by zvýšily použitelnost vašeho webu WordPress.

S trochou kódování můžete mít základ nové nabídky rychle nastavený a připravený k tomu, abyste jej mohli stylizovat podle svého tématu.

Pokud se raději nechcete trápit s kódem, existuje mnoho pluginů, které mohou udělat těžkou práci za vás a také poskytnout možnosti stylování.

Ať už se rozhodnete pro kteroukoli možnost, níže uvedený průvodce vám pomůže ji uskutečnit.

Základní úklid

Chcete-li vytvořit nové menu, musíte upravit soubory svého tématu. Před prováděním změn v základních souborech je nejlepší celý web zálohovat pro případ, že by se cestou něco pokazilo. Web budete moci rychle obnovit a bude to, jako by se nikdy nic nestalo.

Svůj web můžete zálohovat ručně přes FTP nebo pomocí pluginu, jako je například náš vlastní Snapshot. Jen nezapomeňte uložit kopii databáze i souborů na místo oddělené od webu, abyste minimalizovali riziko ztráty zálohy.

Konstrukce dětského motivu

Chcete-li vytvořit nové nabídky s kódem, musíte provést změny, které by se při aktualizaci motivu ztratily. Vytvoření podřízeného motivu se o tento problém postará.

Podrobnosti, které potřebujete k vytvoření podřízeného motivu, najdete v několika našich dalších příspěvcích Jak vytvořit podřízený motiv WordPressu a Jak automaticky vytvářet podřízené motivy ve WordPressu.

Můžete se také rozhodnout vytvořit zcela nový vlastní motiv nebo jej vyzkoušet na místním či testovacím webu.

Podrobnější informace o tom, jak vytvořit místní instalaci WordPressu, najdete v těchto příspěvcích:

  • Jak vytvořit WordPress lokálně pomocí MAMP
  • Jak nainstalovat XAMPP a WordPress lokálně na PC/Windows
  • Jak nastavit WordPress lokálně za 5 minut pomocí DesktopServeru
  • Rychlý a snadný návod na migraci lokální instalace WordPressu na živé stránky
  • Jak přesunout WordPress pro lokální vývoj pomocí XAMPP

Po nastavení jedné z těchto možností, můžete začít vytvářet další navigační nabídky. I když, pokud se rozhodnete použít zásuvný modul nebo rámec tématu, nemusíte vytvářet podřízené téma.

Vytváření nových nabídek

Chcete-li přidat možnost volby umístění nabídky v panelu správce v části Vzhled > Nabídky, musíte provést takzvanou „registraci nabídky“. Stačí přidat kousek kódu do souboru functions.php, který se nachází v adresáři wp-content > themes > your-theme.

V panelu cPanel klikněte na ikonu Správce souborů v sekci Soubory na domovské stránce. Pokud jste předtím nenastavili Správce souborů tak, aby se načítal do kořenového adresáře dokumentu vašeho webu, přejděte tam nyní.

V adresáři /wp-includes/ se nachází soubor functions.php, ale ten není ten, který potřebujete upravit. Ujistěte se, že jste našli soubor functions.php, který se nachází v tématu, které používáte. Jinak byste při pokusu o pozdější přidání nalezeného kódu skončili s chybami.

Najděte svůj soubor functions.php a jednou na něj klikněte, následně klikněte na tlačítko Upravit v horní části stránky.

Soubor functions.php svého tématu můžete upravit přímo v panelu cPanel.

Pokud se otevře vyskakovací okno, jednoduše klikněte na tlačítko Upravit v pravé dolní části. Pokud jste jej předtím zakázali, nemusí se zobrazit.

Přejděte na konec souboru. Pokud chcete přidat pouze jednu nabídku, přidejte na nový řádek následující kód:

function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );

V tomto příkladu je New Menu název, který se bude zobrazovat na stránce nabídky panelu správce, aby byl srozumitelný pro lidské oči. Název new-menu je to, čemu bude WordPress rozumět, aby správně provedl váš kód.

Můžete své menu nazvat, jak chcete, ale ujistěte se, že pouze lidským očím čitelný název obsahuje mezery a velká písmena.

Pokud chcete na své stránky přidat více menu, přidejte místo toho na nový řádek tento kód:

Tímto způsobem můžete přidat tolik nových menu, kolik chcete. Při jejich pojmenování budou platit stejná pravidla.

Provedené změny v souboru uložte. Nyní už zbývá jen přidat nové menu na váš web.

Přidání umístění menu do vašeho tématu

Tady se musíte rozhodnout, kam chcete menu umístit. Pokud chcete, aby se vaše menu zobrazovalo v horní části stránky, budete muset upravit soubor header.php. Můžete ho také umístit do zápatí, což znamená, že byste upravili soubor footer.php.

Můžete dokonce zobrazit menu na stránce úpravou jejího souboru šablony nebo do postranního panelu, úpravou jeho souboru sidebar.php.

Nové menu můžete umístit kamkoli budete chtít. Zde je minimální množství kódu, které musíte přidat do některého z těchto míst:

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

Jen nahraďte new-menu názvem čitelným pro WordPress, který jste si vybrali. Pravděpodobně budete chtít menu nastylovat pomocí CSS, aby přesahovalo základní funkčnost a také skvěle vypadalo. K tomu budete muset vytvořit třídu a přidat ji do tématu pomocí následujícího kódu:

<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

Stejně jako předtím nahraďte new-menu vámi zvoleným názvem. V tomto příkladu jsem vytvořenou třídu pojmenoval new_menu_class. Můžete to změnit, ale nezapomeňte aktualizovat tento kód tak, aby odrážel tuto úpravu.

Stiskněte tlačítko Uložit a přejděte na stránku Vzhled > Nabídky v hlavním panelu. Všimněte si, že vaše nová menu budou uvedena v části Umístění tématu v sekci Nastavení menu.

Nově zaregistrované položky menu uvedené v Nastavení menu.

Nyní budete moci vidět vypsaná nová umístění menu. Při přidávání menu můžete vybrat jedno nebo všechna umístění.

Chcete-li si nechat zobrazit odkazy na nově vytvořených místech menu, klikněte na tlačítko vytvořit nové menu v horní části stránky.

Můžete kliknout na odkaz vytvořit novou nabídku nebo zadat nový název nabídky.

Pokud ještě nemáte nabídku, můžete zadat název nabídky do pole na stránce a poté kliknout na tlačítko Vytvořit nabídku. Pokud již máte menu dříve vytvořené, můžete kliknout na odkaz Vytvořit nové menu směrem k horní části stránky.

Po vytvoření nového menu můžete také spravovat místa, kde se zobrazují, na kartě „Správa míst“.

Stylování, zásuvné moduly a responzivní menu

Vaše nové menu je nyní připraveno ke stylování pomocí CSS. Potřebné kódování je specifické pro téma, které používáte, takže se jím v tomto příspěvku nebudu zabývat, ale máme pro vás jiný příspěvek s názvem Jak vytvořit úžasné responzivní menu pro vaše téma WordPressu. V něm se také dozvíte, jak vytvořit responzivní menu, které je připravené pro mobilní zařízení.

Pokud byste chtěli jednodušší variantu, existuje mnoho pluginů, které vytvoří responzivní menu na základě stylů vašeho tématu. Jedním z nejlepších, které jsem našel, je Responsive Menu.

Několik významných zmínek, které vám mohou být také užitečné, jsou ShiftNav, WP Responsive Menu a Max Mega Menu.

Zdroje pro další postup

Teď máte pevný základ, který potřebujete k vytvoření dalších menu pro své téma, a zdroje, které vám pomohou jít dál. Ať už si je nakódujete sami, použijete zásuvný modul nebo rámec tématu, máte nyní na svém webu WordPress nové menu.

Pokud narazíte na potíže, klidně se zeptejte našich hrdinů podpory. Mohou vám poskytnout odborné rady a podporu, která vám pomůže vyřešit téměř jakýkoli problém. Můžete otevřít ticket v našem fóru podpory a my vám hned pomůžeme.

Pro více informací o tom, jak stylovat vaše nové téma, existuje mnoho zdrojů, které můžete vyzkoušet, a všechny je najdete v našem příspěvku Mega průvodce pro učení a odkazování CSS pro WordPress:

Můžete se také podívat na některé z našich dalších příspěvků 10 jednoduchých tipů, jak se naučit CSS pro WordPress, 25 odborných tipů pro čistší kódování CSS pro WordPress, 25 profesionálních tipů pro zlepšení vašeho pracovního postupu CSS a 5 bezplatných pluginů CSS pro živé úpravy webu WordPress, kde najdete další podrobnosti o kódování některých CSS pro vaše téma.

Bezplatné videoProč 100 NENÍ dokonalé skóre Google PageSpeed (*5 minut sledování)Zjistěte, jak používat službu Google PageSpeed Insights ke stanovení realistických cílů, zlepšení rychlosti webu a proč je snaha o dokonalých 100 ŠPATNÝ cíl.

  • nabídky
  • navigace

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.