Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Chcete na svém blogu WordPress vytvořit responzivní menu?

Mobilní uživatelé dnes převyšují počet uživatelů stolních počítačů. Přidání responzivní mobilní nabídky usnadňuje uživatelům navigaci na vašem webu.

V tomto tutoriálu vám ukážeme, jak snadno vytvořit responzivní nabídku na WordPress.

Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Kolik pluginů nainstalovat na WordPress. et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

Jak vytvořit responzivní mobilní wordpress nabídku

Zde bude otázkou jít do hloubky tím, že vám ukážeme jak metodu s pluginem pro začátečníky, tak metodu kódování pro pokročilé uživatele.

První metoda: Vytvořte mobilní nabídku s pluginem WordPress

Tato metoda je jednodušší a doporučená pro začátečníky, protože nevyžaduje žádné speciální dovednosti kódování.

V této metodě vytvoříme nabídku (s ikonou hamburger), který se posune na obrazovce mobilního telefonu.

vytvořit responzivní menu


První věcí, kterou musíte udělat, je nainstalovat a aktivovat Plugin WordPress Responsive Menu , Pro více informací, podívejte se na našeho průvodce instalací pluginu WordPress .

Po aktivaci pluginu přidá plugin do nabídky novou položku s názvem „ Citlivé Menu ". Kliknutím na něj přejdete na stránku nastavení pluginu WordPress.

Plugin s nabídkou responzivního dashboardu WordPress

Nejprve musíte zadat velikost, ze které se má mobilní nabídka zobrazit. Výchozí hodnota je 800 pixelů, což by mělo fungovat u většiny webových stránek.

Poté musíte vybrat nabídku, kterou chcete použít na mobilu.

Poslední možnost na obrazovce vám umožňuje poskytnout třídu CSS pro vaši nabídku. To umožní pluginu skrýt nereagující nabídku na malých obrazovkách.

Nezapomeňte kliknout na « Možnosti aktualizace Uložení nastavení.

Navrhujeme také, abyste objevili naše Doplňky 10 WordPress k vytváření nabídek na vašem blogu

Nyní můžete navštívit svůj web a změnit velikost obrazovky prohlížeče, abyste viděli responzivní nabídku v akci.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

Site-in-akční nabídky reagující na mobil

Plugin « Citlivé Menu »Nabízí mnoho dalších možností, které vám umožňují upravit chování a vzhled vaší responzivní nabídky. Tyto možnosti můžete prozkoumat na stránce nastavení pluginu a podle potřeby je upravit.

Metoda 2: Jak přidat mobilní nabídku ručně

Jednou z nejběžnějších metod používaných k zobrazení nabídky na mobilních obrazovkách je využití pákového efektu.

Tato metoda vyžaduje, abyste do svých souborů WordPress přidali vlastní kód.

V jednom z našich předchozích tutoriálů vám ukážeme jak vytvořit plugin WordPress.

Nejprve musíte otevřít textový editor, jako je Poznámkový blok, a vložit tento kód.

(function () {nav var = document.getElementById ('site-navigation'), button, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Hide button, pokud nabídka chybí nebo je prázdná, pokud (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' onggled-on '; menu.className + =' onggled-on ';}};}) (jQuery);

Nyní musíte tento soubor uložit s názvem „ navigation.js Na stole.

Poté je třeba otevřít FTP klienta a stáhnout tento soubor do umístění „/ wp-content / themes / your-theme / js /“ na svém webu WordPress.

Nahraďte výraz „ Váš-theme S názvem vaší aktuální složky motivů WordPress. Pokud váš adresář témat nemá složku js, musíte si ji vytvořit.

Po nahrání souboru JavaScript je dalším krokem zajištění toho, aby váš web WordPress načetl soubory JavaScript. Budete muset přidat následující kód do „ functions.php Z vašeho motivu WordPress.

Objevte něco jiného Co můžete udělat se souborem features.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', pole (‘jQuery '), 20160909' pravda.);

Nyní musíme přidat navigační nabídku do našeho tématu WordPress. Do souboru se obvykle přidá navigační nabídka “ header.php Z vašeho motivu WordPress.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

Předpokládáme, že umístění nabídky definované vaším motivem WordPress se nazývá „ primární ". V opačném případě použijte umístění definované vaším motivem WordPress.

Posledním krokem je přidání CSS, aby naše nabídka používala správné třídy CSS k přepínání při prohlížení na mobilních zařízeních.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

Nyní můžete navštívit svůj web a změnit velikost obrazovky prohlížeče, abyste zjistili, zda se vaše responzivní nabídka přepíná.

Houpací menu WordPress-tutorial

Objevte také některé prémiové doplňky WordPress  

Pomocí dalších pluginů WordPress můžete dát moderní vzhled a optimalizovat přilnavost vašeho blogu nebo webu.

Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.

1. UberMenu

UberMenu je plugin WordPress určený k vytváření vysoce přizpůsobitelných, citlivých a přístupných megamenu pro uživatele. Je funkční po instalaci, bez nutnosti speciální konfigurace.

Ubermenu wordpress mega nabídka plugin

Jedná se o snadno použitelný plugin, který je dostatečně výkonný na to, aby vytvářel vysoce přizpůsobitelné a kreativní rozložení mega nabídek.

Viz také naše 9 pluginů WordPress k vytvoření cenových sítí na blogu

Najdete mimo jiné: 3 šablony nabídek, plně responzivní rozložení, kompatibilitu s mobilními zařízeními (iPhone, iPad, Android), dotykovou podporu atd.

Stáhnout | Demo | Web hosting

2. LMM

Liquida Mega Menu nazývaná také LMM je plugin WordPress určený pro uživatele a vývojáře. Má jednoduché a intuitivní rozhraní integrované do řídicího panelu WP, což vám umožňuje vytvářet a přizpůsobovat neomezené množství mega nabídek bez jakýchkoli programovacích dovedností.

Lmm WordPress responzivní mega nabídka založená na bootstrapu

Dodává se s desítkami funkcí, ať už pro běžné nebo pokročilé uživatele. Jako funkce nabízí mimo jiné: automatickou a manuální integraci, podpora multisite, péče o dětská témata, zcela přizpůsobitelný styl pro nabídky, přizpůsobitelná umístění nabídek, rychlé nabídky atd.

Stáhnout | Demo | Web hosting

3. Nabídka 8Degree Fly

8Degree Fly Menu je prémiový plugin WordPress, který vám umožní přidat na váš web nabídku plátna, aby vám poskytl vzhled, který zvýrazní a snadno vaše informace. K vytváření nabídek používá výchozí funkci nabídky WordPress.

8degree fly menu citlivé na menu menu plugin pro wordpress

K výchozím položkám nabídky budete moci přidat další prvky, například ikony, slogany nabídek, záhlaví pseudoskupin a dlouhý popis.

Přečíst také: 10 pluginů WordPress pro optimalizaci postranních panelů a lepivých záhlaví

Součástí je také editor WYSIWYG, který vám pomůže uchopit svůj dlouhý popis uživatelsky přívětivým způsobem a pomocí tohoto editoru můžete také používat krátké kódy.

Stáhnout | Demo | Web hosting

Další doporučené zdroje

Zveme vás také, abyste si prostudovali níže uvedené zdroje, abyste se dostali dále do sevření a kontroly nad svým webem a blogem.

závěr

Tak ! To je pro tento tutoriál vše, doufám, že vám umožní vytvořit menu pro mobilní uživatele. klidně sdílejte tip se svými přáteli na svých sociálních sítích.

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress.

Ale mezitím nám pověz o svém commentaires a návrhy ve vyhrazené sekci.

...

6 akcie
podíl4
tweet
Zadat2