Chcete na svojom blogu WordPress vytvoriť responzívne menu?

Používatelia mobilných telefónov v dnešnej dobe prevyšujú počet používateľov osobných počítačov. Pridanie responzívnej mobilnej ponuky uľahčuje používateľom navigáciu na vašom webe.

V tomto návode vám ukážeme, ako ľahko vytvoriť responzívne menu na WordPress.

Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Koľko doplnkov je potrebné nainštalovať na WordPress. et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu 

Potom späť k tomu, prečo sme tu.

Tu pôjde o to ísť do hĺbky tým, že vám ukážeme metódu s doplnkom pre začiatočníkov aj metódu kódovania pre pokročilých používateľov.

Prvá metóda: Vytvorte mobilné menu pomocou doplnku WordPress

Táto metóda je jednoduchšia a odporúčaná pre začiatočníkov, pretože nevyžaduje žiadne špeciálne zručnosti v oblasti kódovania.

Pri tejto metóde vytvoríme ponuku (s ikonou hamburger), ktorý sa posúva na obrazovke mobilného telefónu.

Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať Doplnok WordPress Responsive Menu , Pre viac informácií, prečítajte si nášho sprievodcu, ako nainštalovať doplnok WordPress .

Po aktivácii doplnku doplnok pridá do ponuky novú položku s názvom „ citlivé Menu ". Kliknutím naň sa dostanete na stránku nastavení WordPress Plugin.

Najprv musíte zadať veľkosť, z ktorej by sa mala zobraziť ponuka pre mobil. Predvolená hodnota je 800 pixelov, čo by malo fungovať pre väčšinu webových stránok.

Potom musíte vybrať ponuku, ktorú chcete používať na mobile.

Posledná možnosť na obrazovke vám umožňuje poskytnúť triedu CSS pre vašu ponuku. To umožní doplnku skryť vašu nereagujúcu ponuku na malých obrazovkách.

Nezabudnite kliknúť na « možnosti aktualizácie Uloženie nastavení.

Navrhujeme tiež, aby ste objavili naše Doplnky 10 WordPress na vytváranie ponúk na vašom blogu

Teraz môžete navštíviť svoj web a zmeniť veľkosť obrazovky prehliadača, aby ste videli responzívnu ponuku v akcii.

Doplnok « citlivé Menu »Ponúka mnoho ďalších možností, ktoré vám umožňujú upraviť správanie a vzhľad vašej responzívnej ponuky. Tieto možnosti môžete preskúmať na stránke nastavení doplnku a podľa potreby ich upraviť.

Metóda 2: Ako pridať mobilné menu ručne

Jednou z najbežnejších metód používaných na zobrazenie ponuky na obrazovkách mobilných telefónov je využitie pákového efektu.

Táto metóda vyžaduje, aby ste do svojich súborov WordPress pridali vlastný kód.

V jednom z našich predchádzajúcich návodov vám ukážeme ako vytvoriť doplnok WordPress.

Najskôr musíte otvoriť textový editor ako Poznámkový blok a vložiť 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, ak ponuka chýba alebo je prázdna, ak (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} ak (- 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);

Teraz musíte tento súbor uložiť s názvom „ navigation.js Na stole.

Ďalej musíte otvoriť klienta FTP, aby ste tento súbor mohli stiahnuť do umiestnenia „/ wp-content / themes / your-theme / js /“ na svojej webovej stránke WordPress.

Nahradiť výraz „ Váš-theme » s názvom vášho priečinka WordPress tému prúd. Ak váš adresár témy nemá priečinok js, musíte si ho vytvoriť.

Po nahraní súboru JavaScript je ďalším krokom zabezpečenie, aby sa na vašom webe WordPress načítali súbory JavaScript. Budete musieť pridať nasledujúci kód do „ functions.php " z tvojho WordPress tému.

Objavte niečo iné Čo môžete urobiť so súborom features.php?

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

Teraz musíme pridať navigačnú ponuku do nášho WordPress tému. Navigačná ponuka sa zvyčajne pridáva do „ header.php Z vašej témy 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>

Predpokladáme, že umiestnenie ponuky definované vašou témou WordPress sa nazýva „ primárnej ". V opačnom prípade použite umiestnenie definované vašou témou WordPress.

Posledným krokom je pridať niekoľko CSS, aby naša ponuka používala správne triedy CSS na prepínanie pri prezeraní na mobilných zariadeniach.

/* 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;
    }
    
    }

Teraz môžete navštíviť svoju webovú stránku a zmeniť veľkosť obrazovky prehliadača, aby ste zistili, či sa vaša responzívna ponuka prepína.

Objavte aj niektoré prémiové doplnky WordPress  

Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.

Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.

1. UberMenu

UberMenu je a WordPress Plugin venovaný vytváraniu vysoko prispôsobiteľného, ​​citlivého a používateľovi prístupného megamenu. Po inštalácii je funkčný, bez potreby špeciálnej konfigurácie.

Jedná sa o ľahko použiteľný doplnok, ktorý je však dostatočne výkonný na to, aby vytvoril vysoko prispôsobiteľné a kreatívne rozloženia mega ponúk.

Pozri tiež naše 9 doplnkov WordPress na vytváranie cenových sietí na blogu

Nájdete okrem iného: 3 šablóny ponúk, plne responzívne rozloženie, kompatibilitu s mobilnými zariadeniami (iPhone, iPad, Android), dotykovú podporu atď ...

Stiahnuť | demo | web hosting

2. LMM

Liquida Mega Menu tiež nazývané LMM je a WordPress Plugin navrhnuté pre používateľov a vývojárov. Má jednoduché a intuitívne rozhranie integrované do ovládacieho panela WP, ktoré vám umožňuje vytvárať a upravovať neobmedzené množstvo mega menu bez akýchkoľvek programátorských zručností.

Dodáva sa s desiatkami funkcií, či už pre bežných alebo pokročilých používateľov. Ako funkcionalita ponúka okrem iného: automatickú a manuálnu integráciu, podpora viacerých miest, starostlivosť o témy detí, úplne prispôsobiteľný štýl pre menu, prispôsobiteľné umiestnenie menu, lepiace menu atď...

Stiahnuť | demo | web hosting

3. Menu 8Degree Fly

8Degree Fly Menu je prémiový doplnok WordPress, ktorý vám umožní pridať na váš web ponuku plátna, ktorá mu dá vzhľad, ktorý zvýrazní a uľahčí vaše informácie. Na vytváranie svojich ponúk používa predvolenú funkciu ponuky WordPress.

K predvoleným položkám ponuky budete môcť pridať ďalšie prvky, ako napríklad ikony, slogany ponúk, hlavičku pseudoskupín a dlhý popis.

Prečítať tiež: 10 doplnkov WordPress na optimalizáciu bočných panelov a lepivých hlavičiek

Je tiež dodávaný s editorom WYSIWYG, ktorý vám uľahčí pochopenie vášho dlhého popisu užívateľsky prívetivým spôsobom a pomocou tohto editora môžete tiež používať krátke kódy.

Stiahnuť | demo | web hosting

Ďalšie odporúčané zdroje

Tiež vás pozývame, aby ste si prečítali zdroje uvedené nižšie, aby ste sa presadili a ovládali svoje webové stránky a blog.

• Ako premenovať obrazy na blogu WordPress
• Ako vytvoriť plávajúce ponuku na WordPress
• Doplnky 8 WordPress na vytvorenie megamenu vo vašom blogu
• Niekoľko tipov na vytvorenie moderného menu pre váš blog
• Zásuvné moduly 6 WordPress na správu kategórií a podkategórií na vašom blogu

záver

Takže ! To je pre tento tutoriál všetko, dúfam, že vám umožní vytvoriť menu pre mobilných používateľov. kľudne zdieľajte tip so svojimi priateľmi na svojich sociálnych sieťach.

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.

Medzitým nám ale povedz niečo o svojom Komentáre a návrhy vo vyhradenej sekcii.

...