Kaip sukurti mobiliesiems parengtą „WordPress“ meniu

Ar norite sukurti mobiliesiems pritaikytą „WordPress“ meniu? Mobiliųjų telefonų vartotojai jau aplenkė stalinių kompiuterių vartotojus daugelyje svetainių. Pridėjus reaguojančio į mobilųjį meniu, vartotojams bus lengviau naršyti jūsų svetainėje. Šiame straipsnyje mes jums parodysime, kaip lengvai sukurti mobiliesiems parengtą „WordPress“ meniu.


Sukurkite mobiliesiems reaguojantį „WordPress“ meniu

Tai yra išsamus mokymas. Mes parodysime įskiepio metodą pradedantiesiems (be kodavimo) ir kodavimo būdą labiau pažengusiems vartotojams.

Pasibaigus šiai mokymo programai, jūs sužinosite, kaip sukurti mobiliųjų telefonų skaidrių meniu, išskleidžiamąjį mobiliųjų telefonų meniu ir perjungti mobiliųjų telefonų meniu..

Pasirengęs? Pradėkime.

Video pamoka

Prenumeruokite „WPBeginner“

Jei vaizdo įrašas jums nepatinka ar jums reikia daugiau instrukcijų, toliau skaitykite.

1 būdas: naudodami papildinį pridėkite reaguojamąjį meniu į „WordPress“

Šis metodas yra lengvesnis ir rekomenduojamas pradedantiesiems, nes jam nereikia specialaus kodavimo.

Šiuo metodu sukursime mėsainių meniu, kuris išskleidžiamas mobiliajame ekrane.

Reaguojančio meniu papildinio demonstracinė versija

Pirmas dalykas, kurį jums reikia padaryti, tai įdiegti ir suaktyvinti „Responsive Menu“ papildinį. Norėdami gauti daugiau informacijos, skaitykite mūsų nuoseklų vadovą, kaip įdiegti „WordPress“ papildinį.

Suaktyvinus papildinį, jūsų „WordPress“ administratoriaus juostoje bus pridėtas naujas meniu punktas, pažymėtas „Responsive Menu“. Spustelėję jį pateksite į papildinio nustatymų puslapį.

Reaguojantys meniu nustatymai

Pirmiausia turite įvesti ekrano plotį, kuriame įskiepis pradės rodyti reaguojamąjį meniu. Numatytoji vertė yra 800 pikselių, kuri turėtų veikti daugumoje svetainių.

Po to turite pasirinkti meniu, kurį norėtumėte naudoti reaguojančiam meniu. Jei dar nesukūrėte meniu, galite jį sukurti apsilankę Išvaizda »Meniu. Norėdami gauti išsamias instrukcijas, skaitykite mūsų vadovą, kaip įtraukti „WordPress“ naršymo meniu.

Paskutinė parinktis ekrane yra pateikti CSS klasę jūsų dabartiniam nereaguojančiam meniu. Tai leis papildiniui paslėpti jūsų nereaguojantį meniu į mažesnius ekranus.

Nepamirškite spustelėti mygtuką „Atnaujinti parinktis“, kad išsaugotumėte nustatymus.

Dabar galite apsilankyti savo svetainėje ir pakeisti naršyklės ekrano dydį, kad pamatytumėte reaguojamąjį meniu.

Reaguojančio meniu papildinio demonstracinė versija

Reaguojančiojo meniu papildinys turi daugybę kitų parinkčių, leidžiančių pakeisti reaguojančio meniu elgseną ir išvaizdą. Galite naršyti šias parinktis papildinio nustatymų puslapyje ir pritaikyti jas pagal poreikį.

2 būdas: pridėkite išskleidžiamąjį meniu, naudodami papildinį

Kitas būdas įtraukti reaguojantį meniu yra pridedant išskleidžiamąjį meniu. Šis metodas nereikalauja jokių kodavimo įgūdžių, todėl rekomenduojamas pradedantiesiems.

Reaguojantis meniu

Pirmas dalykas, kurį jums reikia padaryti, yra įdiegti ir suaktyvinti „Responsive Select Menu“ papildinį. Norėdami gauti daugiau informacijos, skaitykite mūsų nuoseklų vadovą, kaip įdiegti „WordPress“ papildinį.

Aktyvavus reikia apsilankyti Išvaizda »Responsive Select konfigūruoti papildinio nustatymus.

Pasirinkite meniu parametrus

Turite slinkti žemyn iki skyriaus „Aktyvuoti temos vietas“. Pagal numatytuosius nustatymus papildinys suaktyvinamas visose temų vietose. Tai galite pakeisti pasirinktinai įjungdami konkrečioms temų vietoms.

Nepamirškite spustelėti mygtuką išsaugoti visus nustatymus, kad išsaugotumėte pakeitimus.

Dabar galite apsilankyti savo svetainėje ir pakeisti naršyklės ekrano dydį, kad pamatytumėte reaguojančio pasirinkimo meniu.

3 metodas: Mobiliesiems pritaikyto reagavimo meniu su „Toggle Effect“ sukūrimas

Vienas iš labiausiai paplitusių būdų rodyti meniu mobiliuosiuose ekranuose yra naudoti perjungimo efektą.

Šis metodas reikalauja, kad prie „WordPress“ failų pridėtumėte pasirinktinį kodą. Jei to dar nepadarėte anksčiau, peržiūrėkite mūsų vadovą, kaip įklijuoti fragmentus iš interneto „WordPress“.

Pirmiausia turite atidaryti teksto rengyklę, pavyzdžiui, bloknotą, ir įklijuoti šį kodą.

( funkcija() {
var nav = document.getElementById (‘site-navigation’), mygtukas, meniu;
if (! nav) {
grįžti;
}

mygtukas = nav.getElementsByTagName (‘mygtukas’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
if (! mygtukas) {
grįžti;
}

// Slėpti mygtuką, jei trūksta meniu arba jis tuščias.
if (! meniu ||! menu.childNodes.length) {
button.style.display = ‘nėra’;
grįžti;
}

button.onclick = function () {
if (-1 === menu.className.indexOf (‘nav-menu’)) {
menu.className = ‘nav-menu’;
}

if (-1! == button.className.indexOf (‘įjungta’)) {
button.className = button.className.replace (‘įjungtas’, ”);
menu.className = menu.className.replace (‘įjungtas’, ”);
} Kitas {
button.className + = ‘įjungtas’;
menu.className + = ‘įjungtas’;
}
};
}) (jQuery);

Dabar šį failą turite išsaugoti kaip navigacijos failą.

Tada turite atidaryti FTP klientą, norėdami nusiųsti šį failą į / wp-content / themes / your-theme-dir / js / katalogą savo „WordPress“ svetainėje..

Pakeiskite savo temos katalogą dabartiniu temos katalogu. Jei jūsų temų kataloge nėra aplanko js, ​​tuomet turite jį sukurti.

Įkėlęs „JavaScript“ failą, kitas žingsnis yra įsitikinti, kad jūsų „WordPress“ svetainė įkelia šią „JavaScript“. Prie temos „function.php“ failo turėsite pridėti šį kodą.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, masyvas (‘jquery’), ‘20160909’, tiesa);

Dabar turime įtraukti naršymo meniu į savo „WordPress“ temą. Paprastai naršymo meniu pridedamas į temos antraštę.php failą.

Meniu
<?php wp_nav_menu (masyvas (‘tema_lokacija’ => ‘pirminė’, ‘meniu_klasė’ => ‘nav-menu’)); ?>

Mes darome prielaidą, kad jūsų apibrėžta temos vieta vadinama pagrindine. Jei ne, tada naudokite temos vietą, apibrėžtą jūsų „WordPress“ tema.

Paskutinis žingsnis yra pridėti CSS, kad mūsų meniu būtų naudojamos tinkamos CSS klasės, kad įjungtumėte, kai jie žiūrimi mobiliuosiuose įrenginiuose..

/ * Naršymo meniu * /
.main-navigation {
„margin-top“: 24 taškai;
„margin-top“: 1.714285714rem;
suderinti tekstą: centre;
}
.main-navigation li {
„margin-top“: 24 taškai;
„margin-top“: 1.714285714rem;
šrifto dydis: 12 pikselių;
šrifto dydis: 0,857142857rem;
linijos aukštis: 1.42857143;
}
.main-navigation a {
spalva: # 5e5e5e;
}
.pagrindinis-navigacija a: užveskite pelės žymeklį,
.pagrindinis-navigacijos a: dėmesys {
spalva: # 21759b;
}
.pagrindinis navigacijos ul.nav-meniu,
.pagrindinis navigacijos div.nav meniu > ul {
ekranas: nėra;
}

.pagrindinis naršymas ul.nav-menu.toggled-on,
.meniu perjungimas {
ekranas: intarpas;
}

// CSS, naudojama mobiliuosiuose įrenginiuose

@media ekranas ir (mažiausias plotis: 600 taškų) {

.pagrindinis navigacijos ul.nav-meniu,
.pagrindinis navigacijos div.nav meniu > ul {
kraštas-dugnas: 1px kietas # pintas;
„border-top“: 1px kietas # pintas;
rodymas: inline-block! svarbus;
tekstas lygiuoti: kairėn;
plotis: 100%;
}
.main-navigation ul {
paraštė: 0;
teksto įtrauka: 0;
}
.main-navigation li a,
.main-navigation li {
ekranas: intarpas;
teksto dekoravimas: nėra;
}
.main-navigation li a {
kraštas-dugnas: 0;
spalva: # 6a6a6a;
linijos aukštis: 3.692307692;
teksto transformacija: didžiosios raidės;
tarpas: dabar;
}
.main-navigation li a: užveskite pelę,
.main-navigation li a: fokusas {
spalva: # 000;
}
.main-navigation li {
paraštė: 0 40px 0 0;
paraštė: 0 2.857142857rem 0 0;
padėtis: giminaitis;
}
.main-navigation li ul {
paraštė: 0;
paminkštinimas: 0;
padėtis: absoliuti;
viršuje: 100%;
z-indeksas: 1;
aukštis: 1px;
plotis: 1px;
perteklius paslėptas;
spaustukas: tiesus (1 piks., 1 piks., 1 piks., 1 piks.);
}
.main-navigation li ul ul {
viršuje: 0;
kairė: 100%;
}
.main-navigation ul li: užveskite pelę > ul,
.main-navigation ul li: fokusas > ul,
.pagrindinis-navigacija .focus > ul {
kraštinė-kairė: 0;
klipas: paveldi;
perpildymas: paveldi;
ūgis: paveldi;
plotis: paveldi;
}
.main-navigation li ul li a {
fonas: #efefef;
kraštas-dugnas: 1px kietas # pintas;
rodymas: blokas;
šrifto dydis: 11 pikselių;
šrifto dydis: 0.785714286rem;
linijos aukštis: 2.181818182;
paminkštinimas: 8x10px;
paminkštinimas: 0.571428571rem 0.714285714rem;
plotis: 180 pikselių;
plotis: 12.85714286rem;
tarpas: normalus;
}
.main-navigation li ul li a: užveskite pelę,
.main-navigation li ul li: fokusas {
fonas: # e3e3e3;
spalva: # 444;
}
.pagrindinis-navigacijos. dabartinis-meniu punktas > a,
.pagrindinis-naršymas. dabartinis-meniu-protėvis > a,
.pagrindinis-navigacijos .current_page_item > a,
.main-navigation .current_page_ancestor > a {
spalva: # 636363;
šrifto svoris: paryškintas;
}
.meniu perjungimas {
ekranas: nėra;
}

}

Dabar galite apsilankyti savo svetainėje ir pakeisti naršyklės ekrano dydį, kad pamatytumėte, kaip veikia reaguojantis perjungimo meniu.

Perjungti meniu peržiūrą

Problemų sprendimas: Atsižvelgiant į „WordPress“ temą, gali reikėti pakoreguoti CSS. Norėdami išsiaiškinti CSS prieštaravimus jūsų temai, naudokite įrankį „apžiūrėti elementą“.

4 būdas: pridėkite mobiliųjų telefonų skaidrių meniu „WordPress“

Kitas įprastas būdas pridėti mobilųjį meniu yra naudojant skaidrių skydelio meniu (kaip parodyta 1 metode)..

4 metodas reikalauja, kad jūs pridėtumėte kodą prie savo „WordPress“ temos failų, ir tai yra tik kitoks būdas pasiekti tuos pačius rezultatus kaip 1 metodas..

Pirmiausia turite atidaryti paprasto teksto rengyklę, pavyzdžiui, „Notepad“, ir į tuščią teksto failą įtraukti šį kodą.

(funkcija ($) {
$ (‘# perjungti’). perjungti (
funkcija() {
$ (‘# popout’). animuoti ({kairėje: 0}, ‘lėtai’, funkcija () {
$ (‘# perjungti’). html (‘Uždaryti‘);
});
},
funkcija() {
$ (‘# popout’). animuoti ({kairė: -250}, ‘lėtai’, funkcija () {
$ (‘# perjungti’). html (‘Uždaryti‘);
});
}
);
}) (jQuery);

Nepamirškite pakeisti example.com savo domeno vardu ir savo tema faktiniu katalogu. Išsaugokite šį failą kaip slidepanel.js darbalaukyje.

Dabar jums reikės vaizdo, kuris bus naudojamas kaip meniu piktograma. Mėsainio piktograma dažniausiai naudojama kaip meniu piktograma. Tokių vaizdų rasite iš įvairių svetainių. Mes naudosime meniu piktogramą iš „Google“ medžiagos piktogramų bibliotekos.

Radę vaizdą, kurį norite naudoti, išsaugokite jį kaip menu.png.

Tada turite atidaryti FTP kliento klientą ir įkelti failą slidepanel.js į / wp-content / your-theme / js / aplanką..

Jei jūsų temų kataloge nėra JS aplanko, turite sukurti titą ir nusiųsti failą.

Po to turite įkelti meniu.png failą į / wp-content / themes / your-theme / images / aplanką.

Kai failai bus įkelti, turime įsitikinti, kad jūsų tema įkelia ką tik pridėtą „JavaScript“ failą. Tai pasieksime užkalbinę „JavaScript“ failą.

Pridėkite šį kodą prie temos „function.php“ failo.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, masyvas (‘jquery’), ‘20160909’, tiesa);

Dabar turime įtraukti tikrąjį kodą į savo temos antraštę.php, kad būtų rodomas naršymo meniu. Turėtumėte ieškoti panašaus kodo:

<?php wp_nav_menu (masyvas (‘tema_lokacija’ => ‘pirminė’, ‘meniu_klasė’ => ‘nav-menu’)); ?>

Norite apvynioti esamą naršymo meniu su HTML kodu, kad būtų rodomas skaidrių skydelio meniu mažesniuose ekranuose.

Rodyti

<?php wp_nav_menu (masyvas (‘tema_lokacija’ => ‘pirminė’, ‘meniu_klasė’ => ‘nav-menu’)); ?>

Atminkite, kad temos naršymo meniu vis dar yra. Mes ką tik apvyniojome jį HTML, kurį turime suaktyvinti skaidrių skydelio meniu.

Paskutinis žingsnis yra pridėti CSS, kad paslėptumėte meniu vaizdo piktogramą didesniuose ekranuose. Taip pat turėsite pakoreguoti meniu piktogramos padėtį.

Čia yra CSS pavyzdys, kurį galite naudoti kaip išeities tašką:

@media ekranas ir (mažiausias plotis: 769 pikseliai) {
#toggle {
ekranas: nėra;
}

}

@media ekranas ir (maksimalus plotis: 768 pikseliai) {
#iššokti {
padėtis: fiksuota;
aukštis: 100%;
plotis: 250 taškų;
fonas: rgb (25, 25, 25);
fonas: rgba (25, 25, 25, .9);
spalva: balta;
viršuje: 0 taškų;
kairė: -250 taškų;
perpildymas: auto;
}

#toggle {
plūdė: dešinė;
padėtis: fiksuota;
viršuje: 60 taškų;
dešinė: 45 pikseliai;
plotis: 28 taškai;
aukštis: 24 taškai;

}

.nav-menu li {
kraštas-dugnas: 1px kietas #eee;
paminkštinimas: 20 taškų;
plotis: 100%;
}

.nav-menu li: užveskite pelę {
fonas: #CCC;
}

.nav-menu li a {
spalva: #FFF;
teksto dekoravimas: nėra;
plotis: 100%;
}
}

Atsižvelgiant į „WordPress“ temą, gali reikėti pakoreguoti CSS, kad būtų išvengta konfliktų.

Štai kaip tai atrodė mūsų demonstracinėje svetainėje:

Reaktyvus „WordPress“ papildomas meniu

Tikimės, kad šis straipsnis padėjo jums išmokti sukurti mobiliesiems pritaikytą „WordPress“ meniu. Taip pat galbūt norėsite pamatyti mūsų vadovą, kaip „WordPress“ pridėti reaguojančio viso ekrano meniu

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me