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.

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.

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 se dostanete na stránku nastavení WordPress Plugin.

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.

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ší složky WordPress téma proud. Pokud váš adresář motivů nemá složku js, musíte 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 WordPress téma.

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 WordPress téma. Obvykle je navigační nabídka přidána do „ 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>

Předpokládáme, že umístění nabídky definované vaším tématem WordPress se nazývá „ primární ". V opačném případě použijte umístění definované vaším tématem 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á.

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

Můžete použít jiné WordPress pluginy poskytnout moderní vzhled a optimalizovat práci s vaším blogem nebo webem.

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

1. UberMenu

UberMenu je a WordPress Plugin věnované vytváření vysoce přizpůsobitelného, ​​citlivého a uživatelsky přístupného megamenu. Po instalaci je funkční, bez nutnosti zvláštní konfigurace.

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 také nazývané LMM je a WordPress Plugin navrženo pro uživatele a vývojáře. Má jednoduché a intuitivní rozhraní integrované do řídicího panelu WP, které vám umožňuje vytvářet a upravovat neomezené množství mega nabídek bez jakýchkoli programátorských dovedností.

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 menu, přizpůsobitelná umístění menu, lepivé menu 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.

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.

• Jak přejmenovat obrazy na blogu WordPress
• Jak vytvořit plovoucí nabídku na WordPress
• Doplňky 8 WordPress k vytvoření megamenu na vašem blogu
• Několik tipů pro vytváření moderních nabídek pro váš blog
• Zásuvné moduly 6 WordPress ke správě kategorií a podkategorií na vašem blogu

Proč investovat do čističky vzduchu?

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.

...