Rozbalovací nabídka WordPress. Jak vytvořit postranní nabídku ve wordpressu. Původní rozbalovací nabídka Plugin WordPress Widget rozbalovací nabídky

Vytvoření víceúrovňového menu ve WordPressu nezabere více času než vytvoření běžného „plochého“ menu. Vše se děje ve stejném rozhraní v „ Vzhled" - "Nabídka". Jako příklad si vytvoříme strukturu menu typického vizitkového webu nějaké abstraktní společnosti poskytující IT služby.

Zde je přibližná struktura nabídky, kterou může mít web vizitky servisní společnosti:

• Domov
• Zákaznické recenze
• Služby
  • Výběr vybavení
  • Instalace a pokládka LAN
  • Virtualizace
  • IP telefonie
  • Video dohled
  • Sledování
• Kontakty

Úroveň vnoření nabídky může být libovolná, ale podle mého názoru jsou stránky s více než dvěma úrovněmi vnoření velmi nepohodlné. Zatímco vedete k dílčí položce, předchozí položka je zavřená nebo vám neustále poskakuje před očima. To je většinou problém pro programátora nebo autora motivu, ale faktem zůstává: nejběžnější možnost nabídky na webových stránkách je dvouúrovňová.

Někteří se shodují, že před vytvořením stránek byste měli vytvořit nabídku falešných odkazů, které nikam nevedou a na webu prostě nefungují. To je nezbytné pro rozhodnutí předem potřebné body a poté vytvořte strukturu stránky na základě hotové verze.

V zásadě to není špatné a můžeme jít stejnou cestou: nejprve vytvoříme strukturu, podíváme se, zda je u nás vše v pořádku a pak vytvoříme stránky (stránky si můžete vytvořit sami, věřím vám!).

Přejděte do sekce „Vzhled“ - „Nabídka“:

tvoříme nová sada nebo použijte stávající.

Na levé straně tohoto rozhraní najdeme blok „Vlastní odkazy“ a otevřeme jej (více jsem mluvil o vkládání odkazů v pokynech):

K vytvoření struktury menu budeme potřebovat zástupné odkazy, aby nedocházelo k přechodu na žádné neexistující stránky nebo externí stránky. Chcete-li to provést, v poli „URL“ stačí uvést symbol hash - # a do pole „Text odkazu“ vložte frázi, kterou potřebujeme.

Po kliknutí na tlačítko „Přidat do nabídky“ se na pravé straně obrazovky objeví námi vytvořená položka:

Přidání dalších položek do nabídky

Nyní analogicky vytvoříme zbývající položky nabídky první úrovně. Ve výsledku dostaneme něco takového:

Uložme si náš mezivýsledek a přejděte na web, abyste viděli, jak bude vypadat první verze nabídky, kterou jsme právě vytvořili:

Zatím to vypadá dobře, myslím, že můžeme pokračovat dál. Mimochodem, pokud nevidíte nabídku, kterou jste právě vytvořili, měli byste věnovat pozornost části „Oblasti tématu“ v rozhraní pro správu nabídek a vybrat možnost, kterou potřebujete. U mě to vypadá takto:

Vrátíme se do rozhraní pro správu menu a nyní analogicky přidáme všechna menu druhé úrovně, která budeme mít ve formě rozbalovací nabídky pro položku „Služby“. Všechno je úplně stejné, nebudu zde ukazovat nic nového.

Výsledek by měl být následující:

Pravděpodobně budete překvapeni, proč nebyly položky nabídky uvedeny pod položkou „Služby“. Možná by vývojový tým WordPress vytvořil podřízené položky přidáním doplňková možnost, jako například u, ale udělali to pohodlnější, podívejte se:

Položku, kterou potřebujete, stačí uchopit tlačítkem myši a jednoduše ji přetáhnout pod položku hlavní nabídky. Co jsem nakonec udělal: Přetáhl jsem „Výběr zařízení“ pod „Služby“, vizuálně byla položka podnabídky na levé straně odsazena.

Analogicky uvedeme další body:

Něco, co pro mě bylo vždy náročné, je neschopnost rychle přidat rozevírací seznam kategorií do hlavní nabídky mého tématu prostřednictvím ovládacího panelu nabídky ve WordPress. Přestože systém nabídek poskytuje prostředky pro přidávání kategorií do nabídky, neumožňuje snadno vytvořit rozevírací seznam kategorií. Naštěstí existuje jednoduchý přístup, který vám může pomoci dosáhnout tohoto cíle bez použití jakéhokoli kódu. Díky Samimu Keijonenovi, který mi o této technice řekl na fórech podpory ThemeHybrid.

Co je podstatou technologie? Začněme tím, že přejdeme do sekce Vzhled – Menu. Vyberme nabídku, ve které chceme odkazy zobrazovat. Pojďme tvořit nový odkaz a jako adresu URL zadejte symbol „#“. Do pole Text odkazu zadejte Kategorie. Poté klikněte na tlačítko Přidat do nabídky.

V rozevíracím seznamu vyberte kategorie, které chcete zobrazit. Jakmile tyto kategorie přidáte do nabídky, ujistěte se, že jste je přetáhli tak, aby se jednalo o podřízené odkazy v nadřazené nabídce kategorie. Příkladem je následující snímek obrazovky:

Po nastavení požadovaného pořadí pro odkazy kategorií uložte nabídku. Přejít na domovskou stránku a přejděte na odkaz Kategorie a zkontrolujte, zda rozevírací seznam funguje správně. Nadřazená položka nabídky bude fungovat jako zástupný symbol.

Pomocí této jednoduché techniky můžete prostřednictvím správce nabídek ve WordPressu nakonfigurovat, které kategorie a v jakém pořadí se budou zobrazovat na obrazovce. Nemusím se bát, že by mizí nabídky v důsledku deaktivace pluginů nebo přepínání motivů. Za tento tip děkujeme fórům ThemeHybrid.

Ahoj znovu! S tebou jako obvykle Vladimír a téma dnes bude to tak - jak udělat rozbalovací nabídku na WordPress stránce nebo blogu... Počasí je dneska hovínko, -27 pod nulou! Uhhh! Ani se mi nechce ven =(A zítra už je -7 slibují... Nevadí výkyvy počasí, proč by to bylo zajímavé?!

Obecně, protože je tomu tak, rozhodl jsem se užitečně strávit čas se svou kočkou „Bonya“ a napsat pro vás užitečný článek! Čtěte, implementujte, komentujte =)

Nabídka na WordPressu, počínaje třetí verzí enginu, má velmi flexibilní nastavení. To umožňuje uživatelům přizpůsobit Nabídka WordPress způsobem, který potřebují, s jakýmkoliv z jejich rozmarů. Takže vy a já jsme nyní rozmarní a dáme si nelehký úkol vytvořit top menu pro náš web. A pak to s lehkostí zvládneme.

Takže úkol:

• Chci vytvořit nabídku, jejíž položky mohou být buď stránka, nebo jakýkoli příspěvek na blogu. Je také možné, že tato položka zobrazí všechny položky z kategorie, kterou jsem vybral, nebo všechny položky, které dostaly konkrétní štítek (tag).
• Nebo bych mohl dokonce chtít vytvořit jakýkoli odkaz, který chci, jako položku nabídky.
• Také chci udělat nějaké položky menu ve formě rozbalovacího seznamu ve WordPressu, který obsahuje podpoložky. Navíc bych možná chtěl tyto pododstavce začlenit do jednoho z pododstavců.
• Zkrátka chci dvou-, tří- nebo dokonce čtyřúrovňovou rozbalovací nabídku.
• Tááák, co mě ještě napadne? A! Chci, aby se při najetí myší na některou z položek objevilo nějaké vysvětlení. A také, aby se některé položky nabídky otevřely samostatné okno prohlížeč.

To je vše! Ale nechci moc? =)

Jak pravděpodobně chápete, nastavení nabídky zahrnuje všechny „rozmary“, které jsem uvedl. Navíc, jak jsem řekl výše, všechny tyto rozmary lze snadno implementovat v administračním panelu WordPress.

Takže, pokud jste připraveni, pojďme k věci.

Vytvoření rozbalovací nabídky ve WordPressu

Chcete-li začít vytvářet nabídku WordPress, musíte přejít na kartu „Vzhled“ -> „Nabídka“ na panelu administrátora.

Upozorňujeme, že tato funkce je ve WordPressu dostupná od verze 3. Pokud máte více raná verze, pak nezapomeňte aktualizovat.

Nyní najděte následující zaškrtávací políčko v pravém horním rohu okna:

Klikněte na „Nastavení obrazovky“ a zaškrtněte políčka jako já.

To je nezbytné, aby stránka zobrazovala příslušné schopnosti, které potřebujeme ke splnění mých rozmarů.

Vytvoření rozbalovací nabídky ve WordPressu

Do pole pro zadání názvu nabídky napište libovolný název. Nazval jsem to „top_horizontal_menu“.

Klikněte na tlačítko „Vytvořit nabídku“ vpravo. Nyní máme aktivní levý sloupec, který zobrazuje několik bloků, které nám umožňují přidávat položky do našeho menu.

Záložka "Spravovat oblasti". Zde je nám řečeno, kolik nabídek naše téma podporuje. V mém případě - 1 menu. V rozevíracím seznamu je třeba vybrat název nabídky, kterou budeme používat. Dříve jsme vytvořili menu s názvem " Horní menu" Vyberte jej a klikněte na „Uložit“.

Podívejme se nyní na každý blok:

• První blok „Stránky“ nám umožňuje přidat do položky nabídky stránky, které již na vašem webu existují.
• Druhý blok „Odkazy“ nám umožňuje přidat libovolný odkaz na položku nabídky. Například chci v nabídce udělat položku, která povede na můj blog. Do pole „URL“ napíšu adresu svého blogu a do pole „Text“ název položky. Stiskněte tlačítko"Přidat do nabídky."
• Třetí blok „Kategorie“ vám umožňuje přidat libovolnou kategorii vašeho webu do položky nabídky. Znovu zaškrtněte políčko vedle požadované kategorie a klikněte na „Přidat do nabídky“.
• Čtvrtý blok „Příspěvky“ – můžete přidat odkaz na jakýkoli článek, který chcete vidět v nabídce WordPress, a kliknout na „Přidat do nabídky“. Tato funkce se může hodit, když chcete upozornit své návštěvníky na nějaký důležitý nebo užitečný příspěvek.

Nyní se podíváme na pravý sloupec. Zde můžete vidět položky, které jsme přidali. Chcete-li každou položku mírně upravit, musíte kliknout na malý trojúhelník vpravo. otevřeme další funkce nastavení pro položku nabídky.

V poli" atribut názvu» Zadejte vysvětlení položky. Toto vysvětlení se zobrazí, když najedete myší na položku nabídky. Pokud chcete, aby se tato položka otevřela v novém okně prohlížeče, zaškrtněte políčko vedle možnosti „Otevřít odkaz v novém okně/na kartě“.

Stejným způsobem nakonfigurujte všechny ostatní položky nabídky. Když je vše připraveno, klikněte na tlačítko „Uložit nabídku“. To je vše, můžete aktualizovat své stránky a zobrazit výsledky.

Nyní si připomeňme všechny mé rozmary ohledně rozbalovacích nabídek ve WordPressu a uvidíme, co ještě můžeme udělat...

• Za prvé, můžeme uspořádat všechny naše položky pouhým přetažením levým tlačítkem myši v pořadí, které nám vyhovuje.
• Za druhé, máme možnost vytvořit rozbalovací podpoložky pro jakoukoli položku jednoduše posunutím podřízené položky trochu doprava.

Položka, která se nachází výše, bude tedy rodič a položka, která je níže a posunutá doprava, bude potomek. Klikněte na „Uložit nabídku“ a podívejte se, jak to na webu vypadá.

Takto můžeme vytvořit víceúrovňové rozbalovací nabídky WordPress. Podívejte se na video!

20.10.2012

admin

Ti, kteří používají wordpress engine Pravděpodobně jste si všimli, že často není vždy snadné vytvořit to správné postranní menu na webu. Jak vytvořit vertikální posuvné menu je přesně to, o čem bude tento článek diskutovat.

Ve WordPress CMS není tak těžké umístit horní nebo dolní část horizontální menu. A pro mnoho začátečníků nebude obtížné nainstalovat takové menu na jejich webové stránky. Pokud jde ale o boční navigaci, ne každý přesně ví, jak na to. Z pohledu návštěvníka se však za optimálnější považuje umístění nabídky na levé straně. Mnoho studií to může potvrdit. Protože osoba, která vstoupila na stránku, ji začne sledovat, počínaje z levé strany. Ne nadarmo proto Google umístil svou navigaci také nalevo od výsledků vyhledávání.

Instalace postranního menu ve wordpressu

Chcete-li nainstalovat postranní nabídku ve WordPressu, můžete použít widget „ Vlastní menu" Předtím si však budete muset vytvořit své vlastní jedinečné menu. Váš web například prodává kuchyňské vybavení, jako jsou vodovodní baterie, baterie a další sanitární zařízení. Proto musíte nejprve vytvořit stránky jako „Domov“, „Produkty“, „Články“, „O nás“. V článcích můžete zveřejňovat materiály o tom, jakou značku si vybrat sanitární keramiku, jak koupit kuchyňský dřez z umělého kamene, jaké existují typy baterií atd. Poté přejděte do sekce „Menu“ v adminu WordPress panelu a vytvořte tam nové menu z těchto stránek, které bude na straně. Nyní, jak jsem řekl výše, můžete umístit boční nabídku pomocí widgetu WordPress. Chcete-li to provést, stačí nainstalovat widget do bočního panelu a vybrat v něm příslušnou nabídku. Nebo můžete jít jinou cestou, použijte speciální plugin.

Video instalace plugin jQuery Slick Menu

Vytvoření vertikální nabídky pomocí pluginu jQuery Vertical Accordion Menu

Dáno bezplatný plugin umožňuje vytvořit vertikální posuvné menu. Navíc ve výchozím nastavení již existuje několik hotových možností šablon nabídky s různými barvami. Nejvíce hlavní rys Tento plugin vám umožňuje vytvořit posuvné menu. To je velmi výhodné, pokud máte například několik podpoložek v jedné položce nabídky. Když najedete myší na první sekci, rozbalí se doplňkový seznam bod. Další příjemnou funkcí, kterou Vertical Accordion Menu má, je přítomnost speciálního zkratkového kódu pluginu. Které lze umístit do samotných příspěvků na webu, čímž tam vytvoříte menu.

plugin umožňuje vytvářet různé barvy a styl menu

Plugin můžete nainstalovat prostřednictvím samotného panelu administrátora WordPress zadáním „jQuery Vertical Accordion Menu“ nebo si jej stáhnout z oficiálních webových stránek autora. Po instalaci pluginu musíte přejít do „Widgety“, najít tam widget pluginu a přetáhnout jej na postranní panel. V samotném widgetu najdete vše potřebná nastavení plugin. Rád bych dodal, že autor jQuery Vertical Accordion Menu má další speciální pluginy, které umožňují vytvářet různé víceúrovňové nabídky, jak vertikální, tak horizontální.

Vytvoření vertikálního rozbalovacího (posuvného) menu ve WordPressu tedy není tak obtížné, pokud používáte speciální pluginy.

Každý ví, že navigace na webu by měla být jednoduchá a zároveň co nejpohodlnější. Mnoho lidí proto na svých webových stránkách používá rozbalovací nabídku. V tomto článku se stručně podíváme na to, jak vytvořit rozbalovací nabídku na vašem webu WordPress, a konkrétněji, jak vytvořit rozbalovací nabídku pod záhlavím blogu.

Rozbalovací nabídku můžete vytvořit jak pro několik stránek, tak pro několik kategorií, které jsou obvykle umístěny s pravá strana. Pro normální provoz wordpress, váš web musí mít jednu nadřazenou stránku a alespoň jednu podřízenou stránku takto bude vypadat celý panel nabídek:

1. Před vytvořením rozevírací nabídky ji nezapomeňte odstranit standardní menu. Otevřete soubor - sidebar.php, najděte v něm řádek:

a směle jej odstraňte;

2. Nyní otevřete soubor - header.php, najděte konec bloku “headerimg” a vložte za něj následující řádky kód:

Hodnota „menu“ udává, že nabídka bude pro stránky, a pokud tuto hodnotu změníte na „kategorie“, pak tato nabídka zobrazí všechny vytvořené kategorie;

3. Nyní musíte přejít na styl.css a přidat tam tyto styly (nejlépe za bloky, které jsou zodpovědné za záhlaví):

/*zodpovědný za obecný styl bloku nabídky*/ #menu (výška: 30px; pozadí: #4182b8; okraj: 5px 20px 100px 20px; jasný: obojí; velikost písma: 14px; ) /*zodpovědný za styl odkazy v nabídce*/ #menu li a( barva: #fff; display: block; line-height: 27px; padding: 0 10px; ) #menu li a:hover ( background: #07599d; text-decoration: none; ) /*zodpovědný za styl pro prvky první úrovně, tzn. podřízené stránky*/ #menu li ( styl seznamu: žádný; plovoucí: vlevo; ) /*zodpovědný za styl pro podřízené prvky nabídky*/ #menu li ul li ( plovoucí: žádný; ) #menu ul ( pozadí: #4182b8 ; pozice: 10;

4. V tomto kroku trochu změníme CSS, aby se zvýraznily aktivní stránky. Měl by být použit následující kód:

.current_page_item, .current_page_parent( pozadí: #07599d; text-decoration: none; )

5. Nejdůležitější a poslední krok, čímž se nabídka rozbalí. Chcete-li to provést, upravte ve style.css poslední blok styl rozevírací nabídky a udělejte to takto:

/*display:none line skryje rozbalovací nabídku*/ #menu ul( display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; )

Nyní potřebujeme připojit jquery k naší šabloně, a abychom to udělali, znovu přejděte do souboru - header.php, napište tam řádek:

A přidejte kód, který vám umožní zobrazit podřízenou nabídku při najetí myší:

jQuery(document).ready(function())( jQuery("#menu li")).hover( function())( jQuery(this).find('ul').show(); ), function()) ( jQuery( this).find('ul').hide(); ) );

Takto bude vypadat hotové menu, které potěší oči návštěvníků:

Jak jste pochopili, při vytváření rozbalovací nabídky není nic složitého a můžete to udělat na svém webu sami, hlavní věcí je dělat vše pečlivě.