Paano Gumawa ng isang Mapaghanda na Nakakahusay na Menu ng WordPress

Nais mo bang lumikha ng isang mobile-handa na tumutugon WordPress menu? Ang mga gumagamit ng mobile ay lumampas sa mga gumagamit ng desktop para sa maraming mga website. Ang pagdaragdag ng isang mobile na tumutugon menu ay ginagawang mas madali para sa mga gumagamit na mag-navigate sa iyong website. Sa artikulong ito, ipapakita namin sa iyo kung paano madaling lumikha ng isang mobile-handa na tumutugon WordPress menu.


Lumikha ng mobile na tumutugon WordPress menu

Ito ay isang malalim na tutorial. Ipapakita namin ang parehong pamamaraan ng plugin para sa mga nagsisimula (walang coding) at ang pamamaraan ng coding para sa aming mas advanced na mga gumagamit.

Sa pagtatapos ng tutorial na ito, malalaman mo kung paano lumikha ng isang slide-in na mobile menu, pagbagsak ng mobile menu, at isang toggle mobile menu.

Handa na? Magsimula na tayo.

Tutorial ng Video

Mag-subscribe sa WPBeginner

Kung hindi mo gusto ang video o nangangailangan ng higit pang mga tagubilin, pagkatapos ay magpatuloy sa pagbabasa.

Paraan 1: Magdagdag ng isang Nakikiramay na Menu sa WordPress Gamit ang isang Plugin

Ang pamamaraang ito ay mas madali at inirerekomenda para sa mga nagsisimula dahil hindi ito nangangailangan ng pasadyang pag-cod.

Sa pamamaraang ito, gagawa kami ng isang menu ng hamburger na lumilitaw sa mobile screen.

Tumutugon sa plugin ng plugin ng menu

Ang unang bagay na kailangan mong gawin ay i-install at isaaktibo ang plugin na Nakikiramay sa Menu. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

Sa pag-activate, magdagdag ang plugin ng isang bagong item sa menu na may label na ‘Nakikiramay sa Menu’ sa iyong WordPress admin bar. Ang pag-click dito ay magdadala sa iyo sa pahina ng mga setting ng plugin.

Mga setting ng menu na tumutugon

Una kailangan mong ipasok ang lapad ng screen kung saan ang point ay magsisimulang magpakita ng tumutugon menu. Ang default na halaga ay 800px na dapat gumana para sa karamihan ng mga website.

Pagkatapos nito, kailangan mong piliin ang menu na nais mong gamitin para sa iyong tumutugon menu. Kung hindi ka pa lumikha ng isang menu, maaari kang lumikha ng isa sa pamamagitan ng pagbisita Hitsura »Mga menu. Tingnan ang aming gabay sa kung paano magdagdag ng menu ng nabigasyon sa WordPress para sa detalyadong mga tagubilin.

Huling pagpipilian sa screen ay upang magbigay ng isang klase ng CSS para sa iyong kasalukuyang hindi pagtugon sa menu. Papayagan nito ang plugin na itago ang iyong hindi tumutugon menu sa mas maliit na mga screen.

Huwag kalimutan na mag-click sa pindutan ng ‘Update Options’ upang maimbak ang iyong mga setting.

Maaari mo na ngayong bisitahin ang iyong website at baguhin ang laki ng iyong browser sa screen upang makita ang tumutugon na menu sa pagkilos.

Tumutugon sa plugin ng plugin ng menu

Ang tumutugon plugin plugin ay may maraming iba pang mga pagpipilian na nagbibigay-daan sa iyo upang baguhin ang pag-uugali at hitsura ng iyong tumutugon menu. Maaari mong tuklasin ang mga pagpipilian na ito sa pahina ng mga setting ng plugin at ayusin ang mga ito kung kinakailangan.

Paraan 2: Magdagdag ng isang Drop Down Piliin ang Menu Gamit ang isang Plugin

Ang isa pang paraan upang magdagdag ng isang tumutugon menu ay sa pamamagitan ng pagdaragdag ng isang drop down na piliin ang menu. Ang pamamaraang ito ay hindi nangangailangan ng anumang mga kasanayan sa coding, kaya inirerekomenda ito para sa mga nagsisimula.

Nakikiramay piliin ang menu

Ang unang bagay na kailangan mong gawin ay i-install at i-aktibo ang plugin ng Tumutulong Piliin ang Menu. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

Sa pag-activate, kailangan mong bisitahin Hitsura »Tumutugon na Pumili upang i-configure ang mga setting ng plugin.

Piliin ang mga setting ng menu

Kailangan mong mag-scroll pababa sa seksyon ng ‘I-activate ang mga lokasyon ng tema’. Bilang default, ang plugin ay isinaaktibo sa lahat ng mga lokasyon ng tema. Maaari mong baguhin iyon sa pamamagitan ng pagpili sa ito para sa mga tukoy na lokasyon ng tema.

Huwag kalimutan na mag-click sa i-save ang lahat ng pindutan ng mga setting upang maimbak ang iyong mga pagbabago.

Maaari mo na ngayong bisitahin ang iyong website at baguhin ang laki ng browser ng screen upang makita ang tumutugon na napiling menu sa pagkilos.

Pamamaraan 3: Paglikha ng Menu na Nakikiramay sa Mobile na may Pag-ugat ng Epekto

Ang isa sa mga pinaka-karaniwang ginagamit na pamamaraan upang ipakita ang isang menu sa mga mobile screen ay sa pamamagitan ng paggamit ng toggle effect.

Ang pamamaraang ito ay nangangailangan sa iyo upang magdagdag ng pasadyang code sa iyong mga file ng WordPress. Kung hindi mo pa nagawa ito, tingnan ang aming gabay sa pag-paste ng mga snippet mula sa web sa WordPress.

Una kailangan mong magbukas ng isang text editor tulad ng notepad at i-paste ang code na ito.

(function () {
var nav = document.getElementById (‘site-nabigasyon’), pindutan, menu;
kung (! nav) {
bumalik;
}

button = nav.getElementsByTagName (‘button’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
kung (! button) {
bumalik;
}

// Itago ang pindutan kung nawawala o walang laman ang menu.
kung (! menu ||! menu.childNodes.length) {
button.style.display = ‘wala’;
bumalik;
}

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

kung (-1! == button.className.indexOf (‘toggled-on’)) {
button.className = button.className.replace (‘toggled-on’, ”);
menu.className = menu.className.replace (‘toggled-on’, ”);
} iba pa {
button.className + = ‘toggled-on’;
menu.className + = ‘toggled-on’;
}
};
}) (jQuery);

Ngayon ay kailangan mong i-save ang file na ito bilang navigation.js sa iyong desktop.

Susunod, kailangan mong magbukas ng isang FTP client upang mai-upload ang file na ito sa / wp-content / tema / your-theme-dir / js / folder sa iyong WordPress site.

Palitan ang iyong-tema-direktoryo sa direktoryo ng iyong kasalukuyang tema. Kung ang iyong direktoryo ng tema ay walang isang folder ng js, kailangan mo itong likhain.

Matapos ma-upload ang file na JavaScript, ang susunod na hakbang ay tiyakin na ang iyong WordPress site ay naglo-load ng JavaScript na ito. Kailangan mong magdagdag ng sumusunod na code sa mga file na file.php ng ​​iyong tema.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, totoo);

Ngayon kailangan nating idagdag ang menu ng nabigasyon sa aming tema ng WordPress. Karaniwan ang menu ng nabigasyon ay idinagdag sa header.php file ng isang tema.

Menu
<?php wp_nav_menu (array (‘theme_location’ => ‘pangunahing’, ‘menu_class’ => ‘nav-menu’)); ?>

Ipinapalagay namin na ang lokasyon ng tema na tinukoy ng iyong tema ay tinatawag na pangunahing. Kung hindi, pagkatapos ay gamitin ang lokasyon ng tema na tinukoy ng iyong WordPress tema.

Ang pangwakas na hakbang ay upang magdagdag ng CSS upang magamit ng aming menu ang tamang mga klase ng CSS para mag-toggle upang gumana kapag tiningnan sa mga mobile device.

/ * Navigation Menu * /
.pangunahing-nabigasyon
margin-top: 24px;
margin-top: 1.714285714rem;
align ng teksto: gitna;
}
.pangunahing-nabigasyon nabigasyon {
margin-top: 24px;
margin-top: 1.714285714rem;
laki ng font: 12px;
laki ng font: 0.857142857rem;
taas ng linya: 1.42857143;
}
.pangunahing-nabigasyon ng isang {
kulay: # 5e5e5e;
}
.pangunahing-nabigasyon a: hover,
.pangunahing-nabigasyon ng: focus {
kulay: # 21759b;
}
.pangunahing-nabigasyon ul.nav-menu,
.pangunahing-nabigasyon div.nav-menu > ul {
pagpapakita: wala;
}

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

// CSS upang magamit sa mga mobile device

@media screen at (min-lapad: 600px) {

.pangunahing-nabigasyon ul.nav-menu,
.pangunahing-nabigasyon div.nav-menu > ul {
hangganan-ibaba: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block! mahalaga;
align ng teksto: kaliwa;
lapad: 100%;
}
.pangunahing pag-navigate ul {
margin: 0;
text-indent: 0;
}
.pangunahing pag-navigate li a,
.pangunahing-nabigasyon nabigasyon {
display: inline-block;
dekorasyon ng teksto: wala;
}
.pangunahing pag-navigate li a {
hangganan-ibaba: 0;
kulay: # 6a6a6a;
taas ng linya: 3.692307692;
pagbabago ng teksto: malalaking titik;
puting-puwang: nowrap;
}
.pangunahing-nabigasyon nabigasyon: a,
.pangunahing-nabigasyon nabigasyon: a
kulay: # 000;
}
.pangunahing-nabigasyon nabigasyon {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
posisyon: kamag-anak;
}
.pangunahing-nabigasyon na pag-navigate
margin: 0;
padding: 0;
posisyon: ganap;
tuktok: 100%;
z-index: 1;
taas: 1px;
lapad: 1px;
overflow: nakatago;
clip: rect (1px, 1px, 1px, 1px);
}
.pangunahing-nabigasyon na pag-navigate
tuktok: 0;
kaliwa: 100%;
}
.pangunahing-nabigasyon ul: hover > ul,
.pangunahing-nabigasyon ul: focus > ul,
.pangunahing-nabigasyon .focus > ul {
hangganan-kaliwa: 0;
clip: magmana;
pag-apaw: magmana;
taas: magmamana;
lapad: magmana;
}
.pangunahing pag-navigate li ul li a {
background: #efefef;
hangganan-ibaba: 1px solid #ededed;
display: block;
laki ng font: 11px;
laki ng font: 0.785714286rem;
taas ng linya: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
lapad: 180px;
lapad: 12.85714286rem;
puting-puwang: normal;
}
.pangunahing-nabigasyon pag-navigate li ul: a hover,
.pangunahing-nabigasyon pag-navigate ng li: a focus
background: # e3e3e3;
kulay: # 444;
}
.pangunahing-nabigasyon .current-menu-item > a,
.pangunahing-nabigasyon .current-menu-ninuno > a,
.pangunahing-nabigasyon .current_page_item > a,
.pangunahing-nabigasyon .current_page_ancestor > isang {
kulay: # 636363;
bigat ng font: bold;
}
.menu-toggle {
pagpapakita: wala;
}

}

Maaari mo na ngayong bisitahin ang iyong website at baguhin ang laki ng iyong browser sa screen upang makita ang iyong tumutugon na toggle menu na kumilos.

I-preview ang menu ng pag-preview

Pag-aayos ng problema: Depende sa iyong WordPress tema maaaring kailanganin mong ayusin ang CSS. Gumamit ng inspeksyon ng tool na sangkap upang malaman ang mga salungatan sa CSS sa iyong tema.

Paraan 4: Magdagdag ng isang Slide-In Mobile Menu sa WordPress

Ang isa pang karaniwang pamamaraan upang magdagdag ng isang mobile menu ay sa pamamagitan ng paggamit ng isang slide-in panel menu (tulad ng ipinapakita sa Paraan 1).

Hinihiling sa iyo ng Paraan 4 na magdagdag ng code sa iyong mga file ng tema ng WordPress, at ito ay isang iba’t ibang paraan ng pagtupad ng parehong mga resulta tulad ng Paraan 1.

Una, kailangan mong magbukas ng isang plain text editor tulad ng Notepad at idagdag ang sumusunod na code sa isang blangko na file ng teksto.

(pag-andar ($) {
$ (‘# toggle’). toggle (
function () {
$ (‘# popout’). buhayin ({kaliwa: 0}, ‘mabagal’, function () {
$ (‘# toggle’). html (‘malapit‘);
});
},
function () {
$ (‘# popout’). animate ({kaliwa: -250}, ‘mabagal’, function () {
$ (‘# toggle’). html (‘malapit‘);
});
}
);
}) (jQuery);

Huwag kalimutan na palitan ang example.com sa iyong sariling domain name at iyong-tema sa iyong aktwal na direktoryo ng tema. I-save ang file na ito bilang slidepanel.js sa iyong desktop.

Ngayon ay kakailanganin mo ang isang imahe na gagamitin bilang isang icon ng menu. Ang isang icon ng hamburger ay pinaka-karaniwang ginagamit bilang icon ng menu. Makakakita ka ng mga toneladang tulad ng mga imahe mula sa iba’t ibang mga website. Gumagamit kami ng icon ng menu mula sa library ng Mga Materyal na Google Material.

Kapag nahanap mo ang isang imahe na nais mong gamitin, i-save ito bilang menu.png.

Susunod, kailangan mong magbukas ng isang kliyente ng FTP client at mag-upload ng slidepanel.js file sa / wp-content / your-theme / js / folder.

Kung ang iyong direktoryo ng tema ay walang JS folder, pagkatapos ay kailangan mong lumikha ng tit at pagkatapos ay i-upload ang iyong file.

Pagkatapos nito, kailangan mong mag-upload ng menu.png file sa / wp-content / theme / your-theme / images / folder.

Kapag nai-upload ang mga file, kailangan naming tiyakin na ang iyong tema ay naglo-load ng JavaScript file na iyong idinagdag. Makakamit natin ito sa pamamagitan ng pag-enqueuing ng JavaScript file.

Idagdag ang code na ito sa mga function.php file ng iyong tema.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20160909’, totoo);

Ngayon kailangan naming magdagdag ng aktwal na code sa file ng header.php ng ​​iyong tema upang ipakita ang menu ng nabigasyon. Dapat kang maghanap para sa code na katulad nito:

<?php wp_nav_menu (array (‘theme_location’ => ‘pangunahing’, ‘menu_class’ => ‘nav-menu’)); ?>

Gusto mong balutin ang umiiral na menu ng nabigasyon gamit ang HTML code upang maipakita ang iyong menu ng slide panel sa mas maliit na mga screen.

Ipakita

<?php wp_nav_menu (array (‘theme_location’ => ‘pangunahing’, ‘menu_class’ => ‘nav-menu’)); ?>

Pansinin na nandoon pa rin ang menu ng nabigasyon mo. Binalot lang namin ito sa paligid ng HTML na kailangan naming mag-trigger ng menu ng slidepanel.

Huling hakbang ay upang magdagdag ng CSS upang itago ang icon ng imahe ng menu sa mas malaking mga screen. Kailangan mo ring ayusin ang posisyon ng icon ng menu.

Narito ang isang halimbawang CSS na maaari mong magamit bilang isang panimulang punto:

@media screen at (min-lapad: 769px) {
#toggle {
pagpapakita: wala;
}

}

@media screen at (max-lapad: 768px) {
#lumabas {
posisyon: naayos;
taas: 100%;
lapad: 250px;
background: rgb (25, 25, 25);
background: rgba (25, 25, 25, .9);
kulay puti;
tuktok: 0px;
kaliwa: -250px;
pag-apaw: auto;
}

#toggle {
lumutang: tama;
posisyon: naayos;
tuktok: 60px;
tama: 45px;
lapad: 28px;
taas: 24px;

}

.nav-menu li {
hangganan-ibaba: 1px solidong #eee;
padding: 20px;
lapad: 100%;
}

.nav-menu li: hover {
background: #CCC;
}

.nav-menu li a {
kulay: #FFF;
dekorasyon ng teksto: wala;
lapad: 100%;
}
}

Depende sa iyong WordPress tema, maaaring kailanganin mong ayusin ang CSS upang maiwasan ang mga salungatan.

Narito kung paano ito tumingin sa aming website ng demo:

Tumutugon slide-in menu sa WordPress

Inaasahan namin na ang artikulong ito ay nakatulong sa iyo na malaman kung paano lumikha ng isang mobile-handa na tumutugon WordPress menu. Maaari mo ring makita ang aming gabay sa kung paano magdagdag ng isang menu na tumutugon sa fullscreen sa WordPress

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